BT

Fastbook: SenchaによるHTML5が”使える”技術であることの証明

| 作者: Abel Avram フォローする 11 人のフォロワー , 翻訳者 吉田 英人 フォローする 0 人のフォロワー 投稿日 2012年12月24日. 推定読書時間: 5 分 |

原文(投稿日:2012/12/18)へのリンク

 

Sencha が開発したFastbookは,Facebookのネイティブアプリを忠実に再現したHTML5アプリである。iOSとAndroidの両方でネイティブアプリと同等のパフォーマンスを示して,"HTML5は使える"という証明をすることが目的だ。

FacebookのCEOであるMark Zuckerberg氏は数ヶ月前,"企業として私たちの犯した最大の過ちは,単にそれがなかったという理由から,ネイティブアプリではなく,HTML5に多くを賭け過ぎたことです。" と語り,iOSとAndroid用のネイティブアプリを開発する意向を発表した。そのAndroid版は,つい1週間ほど前にローンチされたばかりだ。HTML5は"使えない",実行速度が不十分な上に,適当な開発ツールがないために開発に難しさがある,という評価が一般的だった。

そのような状況で,HTML5用フレームワークおよびツールの開発会社として知られるSenchaのふたりの技術者が,HTML5が使える技術であることを立証するために,空き時間を利用して数ヶ月で開発したのがFastbookだ。FastbookはFacebookのネイティブアプリを模倣したHTML5アプリで,FacebookのAPIを使って実際のFBデータにアクセスする。(ただしデスクトップブラウザでは正しく動作しないようなので,モバイルデバイスから試した方がよいだろう。)

次に示す短い動画は,iOS/iPhone 4SとAndroid/Galaxy Nexus上で,FacebookネイティブアプリをFastbookに対してテストした時のものだ。驚いたことに,HTML5アプリがニュースフィードのローディングやスクロール速度でFBネイティブアプリと同等に動作するだけでなく,いくつかの点ではFBアプリを凌駕さえしている。

  • HTML5アプリはビューの切り替え時にデータをキャッシュしている。これに対してFBネイティブアプリはニュースフィードの再ロードを行う。
  • Fastbookではネストした無限リストをコメント表示に使用することで,より優れたエクスペリエンスを提供している。
  • Fastbookはランドスケープレイアウトにも対応する。
  • Android/Galaxy Nexusでは,HTML5アプリの方がネイティブFacebookアプリよりもデータのロードが速い。

Fastbookの開発者たちは,HTML5アプリケーションの動作性能が劣るのは "Webサイト開発アプローチ"で設計されていること,"アプリケーション開発に適切なツール"を使用していないこと,の2つが原因だと考えている。

さらに彼らは,Facebookのネイティブアプリに少なくとも2つの欠陥があることを発見した。

  • 完全なネイティブではない,ハイブリッドアプリであること。 "ニュースフィードやプロファイルページはネイティブに移行していますが,他のアプリケーションUIの大部分は,単にm.facebook.comにHTTP GETしているだけです。現在のFacebook"ネイティブ"アプリは,m.facebook.comでレンダリングされたコンテントをUIWebViewで表示して,Objective Cのネイティブコンポーネントを混在させた,Web/ネイティブのハイブリッドアプリなのです。"
  • 必要以上に多くのデータを転送していること。およそ"15KBから20KBのgzip圧縮されたJSONデータを10項目ごとに転送していますが,大部分が実際のビューの描画には必要のないものです。" プロキシサーバ上のFBデータを見直した結果,Senchaチームはトラフィックの90%を削減した。

このデモを実現するために,Senchaは自社のタッチフレームワークを改良する必要があった。

  • 項目数が不明なページを表示するために,無限リストコンポーネントを新たに追加した。このリストはごく少数のDOMノードを保持して,前後の項目を表示するために再利用する。この方法によって,メモリ使用量の削減と,巨大なページの描画時間の大幅な短縮を実現している。
  • "複雑なビューをプログラム的に切り離して,独立したiframe内に描画する,つまりDOMツリーをパーティショニングする" 新たなサンドボックスコンテナを追加した。メリットとして,ニュースフィード,タイムライン,ストーリの各ビューに分離したコンテナを使用することにより,ニュースフィードの速度が向上する。
  • 既存のタスクキューとの統合性を改善することにより,"DOMに対する読み書き要求のインターリーブを防止し,不要なレイアウト処理を排除しました。新たなサンドボックス技術と相まって,タイムラインやニュースフィードのような複雑なビューのレイアウトに要するコストを大幅に低減します。"
  • CPUを消費する一部のタスクの実行を,CPUがアイドルになるまで延期するAnimationQueueクラスを新たに追加した。これはスクロールの改善に有効だ: ユーザが新しいフィードを素早くスクロールしている間はイメージ読み込みと描画を保留しておいて,スクロールが停止したときに再開することができる。
  • FastbookではWebWorkerを使用する。UIとは別のスレッドでデータを取得することで,よりスムーズなスクロールが実現されている。

(Facebookが決定を行った)今年夏の時点では,HTML5は業務に使えるものでなかったのかも知れない。仮にそうだったとしても,Senchaのこのデモは,現在のHTML5がネイティブアプリと同程度の処理速度を持っていて,Facebookのように巨大なWebアプリケーションでも"使える"ものだと立証したことになる。

さらにSenchaは,"優秀な開発者が優れたツールを使ってHTML5上で開発を行えば,どれほど素晴らしいアプリを公開できるのかを証明できる" 開発者を対象とした HTML5 Is Ready というコンテストを立ち上げて,現金20,000ドルと開発用デバイスを提供している。

 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT