2015年のベストHTML5アプリ
前書き
優れたフロントエンドエンジニアが足かせをつけて踊ると、HTML5の体験をどこまで進められるのでしょうか？
これらのWebアプリは、私たちが運営するクラウドブラウザのオンラインアプリストアでの1年間の中で選ばれたベスト10のWebアプリです。同僚の意見も参考にしましたが、私の個人的な「Webアプリケーション」のデザイン、実装、価値に対する強い主観が反映されています。もちろん、これは自分を厳しいプロダクトマネージャーだと思っている私が、「クラウドブラウザ」を代表してこれらの優れたWebアプリの開発者やチームに贈る賞だとも考えられます。Webの体験がネイティブアプリに匹敵するかどうかを考えているなら（このことはPC上ではずっと前に起こっていました）、これらの優れたWebアプリを見て、現実世界からの参考を得ることができるかもしれません。
以下に、これらのWebアプリをそれぞれ紹介し、なぜこの順位にしたのかを説明し、スクリーンショットを添付します。記事の最後には、同僚が制作した動画を添付し、これらのWebアプリを実際に操作してデモンストレーションします。すべてのデモはクラウドブラウザのiOS版内で行われます。
注意：
- この記事に掲載されているすべての意見、見解、コメントは2016年1月4日に発表されたものであり、Webは常に更新されることを知っておいてください。以下に挙げるWebアプリは、あなたが見るものと私が見るものが異なる可能性があります；
- 時間範囲は2015年に立ち上げられた、または2015年にHTML5版が正式に立ち上げられた製品です；
- すべて国内のWebアプリ、または主に国内市場を対象としたWebアプリです；
- 実は元々のタイトルは「2015年のベストWebアプリ」でした。
本文
第10位「720云」
「720云」を初めて見たとき、私は非常に衝撃を受けました。ブラウザ内で全景とVRの体験を提供してくれました。最近になってMozillaのAFrameフレームワークが一般の開発者でも迅速にVRシーンを開発できるようになりましたが、「720云」は技術的にも先駆けていました。
なぜ「720云」は私の心の中で第10位にしかならなかったのか？それは彼らのリストページがモバイル端末に対して非常に不親切で、「非常に適当な」レスポンシブデザインで済ませてしまったからです。もちろん、全景ページの体験は重要ですが、リストページも同様に重要です。この程度のレスポンシブは、まるでバグのようです。
第9位「Yummy」
「Yummy」は新時代の若い女性をターゲットにした女性コミュニティです。今日現在、コミュニティセクションは「おすすめ」、「ライブ」、「OO」、「おもちゃ」に分かれています。私にとって、このコミュニティは「直男癌ワクチン」であり、頻繁に利用することで直男癌を予防できます。製品のポジショニングや機能に加えて、主な色調は黒とダークローズで、隠れた安全感を与えます。Angularを基に開発されており、スクロールは純粋なJSで実装されており、プル・トゥ・リフレッシュや無限スクロールを備えていますが、この純粋なJS実装のスクロールは性能があまり良くありません。私は個人的に純粋なJSスクロールソリューションの使用に反対してきましたが、実際には「Yummy」は非常に良くできています。~~第9位にした理由は、バグがあったからです。ログインが必要な場所では、直接ログインボックスに飛び、ログインボックスの前にはリダイレクトがあり、前のページに戻るとリダイレクトループに陥り、ログインが必要なページに戻れなくなります。~~どうやら彼らはこのバグを修正したようです。
第8位「動漫之家」
「動漫之家」は多くの優れたオリジナル漫画を持ち、モバイルウェブ版のデザインは非常にクリーンで、読書体験も非常に良好で、基本的にモバイルユーザーの使用パターンに合致しています。唯一の欠点は、SPAを実現しておらず、十分で意味のあるアニメーションがないことです。
第7位「BusyWeek!」
「BusyWeek!」は独立した開発者の作品で、GitHubにオープンソースされています。作者はコンピュータ専門ではない@Huxproです。基本的な「Todoリスト」機能に加えて、体験は非常にネイティブアプリに似ており、そのソースコードを見ると、これはVueのプロジェクトであり、LeanCloudを通じてバックエンドなしで開発されています（フロントエンドコードをレンダリングするためのserver.jsのみ）。さらに知りたい開発者の方は、このプロジェクトのソースコードを読むことができます。「BusyWeek!」の欠点は、「ナビゲーションドロワー」の使用が非常に不規則であることです：時にはログインボックス、時には同期ボックス、時にはフィルターです。「ナビゲーションドロワー」はコンテナコンポーネントとして、主に中央部分のインターフェースを切り替える責任を担っており、ポップアップやインターフェースの状態を更新するものではありません。もちろん、「規範は死んでいる、シーンは生きている」と教えてくれるかもしれませんが、私は規範を突破することはできても、100％反することはできないと思います。そうでなければ、以前にこの規範に慣れていたユーザーは非常に奇妙に感じるでしょう。
第6位「氧气」
「氧气」は女性下着の推薦に特化したアプリで、ウェブ版の体験も非常に優れており、基本的に彼らのネイティブアプリのデザイン言語を引き継いでおり、ウェブ上で直接購入を完了できます。欠点は「動漫之家」と似ており、SPAを実現していないことです。この問題の本質は「サーバーサイドレンダリングかクライアントサイドレンダリングか、またはどの部分をサーバーサイドレンダリングし、どの部分をクライアントサイドレンダリングするべきか、今後機会があれば、別の記事で議論したいと思います。」
第5位「Flipboard中国」
「Flipboard中国」は、私たちのオンラインアプリストアで常に高評価を得ており、上位にランクインしています。情報コンテンツに加えて、その優れた体験も欠かせません。「Flipboard中国」のモバイルウェブ版のスワイプ体験と読書体験は非常に優れており、その理由は非常に丁寧な体験設計、CDNと最適化されたHTTPリクエスト、GPU加速の適用にあると思います。特筆すべきは、「Flipboard中国」は最近人気のReactを基に開発されていることです。
第4位「Anitama」
「Anitama」は二次元アニメメディアで、そのウェブ版は品質が高いです。最初に開くと、面白い「黄歴」を表示し、「週刊」と「日刊」の間をスワイプで切り替えることができます。底部のタブバーをクリックすると、Material Designに似た水波紋のフィードバックがあります。さらに、彼らの<meta>と<link>タグは異常に充実しており、モバイル端末に対する親しみやすさはトップクラスです。一般的なviewport、apple-touch-icon、mobile-web-app-capableに加えて、Google Chromeに対応したmanifest、theme-color、Edgeに対応したmsapplication-TileColorなどがあり、「モバイル端HTML5アプリの<head>はどう書くべきか」の教科書と言えます。
第3位「石墨」
「石墨」のスローガンは「最も美しいオンライン共同編集文書」であり、「複数人が同時に文書を編集し、コメントできることで、他の人と簡単に協力して原稿作成、プラン討論、会議記録、資料共有などの作業を行うことができます」と紹介されています。「石墨」の機能は非常に強力で、WebSocketを通じてリアルタイムの協力を実現し、ウェブ版でも他のすべてのクライアントと相互に同期できます。現在、モバイルウェブ版でできることは限られていますが、最も重要な機能である「共同編集」と「協力者の招待」は完全に問題なく使用できます。
第2位「一点资讯」
情報リーディング型Webアプリとして、「一点资讯」にはほとんど欠点がありません。すべてのニュースはクローラーによってインデックスされた後、二次処理されており、すべてのインターフェース切り替えはカクつきがなく（またはカクつきを感じさせないようにデザインされている）、レイアウトは明確で、規範に従いながらも独自の考えを持っています。
第1位「Muzzik」
「Muzzik」は音楽共有コミュニティです。私が間違っていなければ、その発音は「music」と同じで、スローガンは「最高の時代の音楽ストーリー、最悪の時代の慰め」です。「Muzzik」はレスポンシブデザインを通じてPCとモバイル端末で共通のインターフェースを実現しています。全体のデザインは強い個性を放っており、それは彼らのデザイナーが信じるユーザー群が持つ個性を反映しています。音楽再生のソリューションは、モバイルブラウザで広くサポートされているnew Audio()ソリューションを使用しており、メモリ内にHTMLAudioElementを作成しますが、DOMにはマウントされていません。開発者の方々は、今回の選考でのチャンピオンがどのMV*ソリューションを使用しているのか気になるかもしれませんが、答えはAngularです。
動画デモ
記事は転載可能ですが、著者を明記してください：「クラウドブラウザ」チーム。