React CanvasによるモバイルブラウザのUI改善とそれが起きる必然

http://engineering.flipboard.com/2015/02/mobile-web/

1 comment | 2 points | by WazanovaNews 2年弱前 edited


Jshiike 2年弱前 edited | ▲upvoteする | link

ものごとが進化すると、利用するユーザの満足度はあがるので、それを用意する作業量はツールの改善に従って最終的には減っていくのか?

スマホが登場して、アプリ上でのスワイプなどの直感的にできる操作や表現の幅が広がり、またディスプレイも改善。では、プロダクトをつくる側がそれに慣れてくると、作業量が減るのか?いや、現実は逆。同じことを実現する作業量は減っても、トータルでは減らない。ブラウザとアプリにまたがって、双方のメリットを取り込もうと、もっとレベルの高いUIを目指した競争が続いています。

David BellonaがTwitter Universityでの講演で紹介してくれているジェボンズの法則にまつわる話を聞くと、同じような矛盾については、昔も今も変わらないものだと理解できます。

最初に触れているのは、現代のエピソード。Googleの元CEOのEric Schmidtが、「我々は、初期の文明から2003年に至るまでの情報量と同じボリュームを、今や二日ごとにつくりだしている。」と言ったように、今やリアルのイベントが開催されると、大量の自撮りの写真がアップロードされます。これがSan Franciscoだと、日本ほど携帯のネットワークがしっかりしてないので、やがて帯域が一杯になって、アプリからのアップロードがしづらくなります。しかし、将来インフラが改善されると、更にコンテンツをアップする需要は増えるのが見込まれるでしょう。テクノロジーの向上が需要を喚起し、次のテクノロジーの改善の道筋がはっきりし、それが必然的に起きます。

そして同じようなことを、産業革命のころにジェボンズが気づいていました。工場に置いた蒸気機関を利用した機械において、石炭を燃焼させる効率をあげることができれば、石炭の消費は減るはずと思いきや、結果は逆。工場の生産能力が上がり、プロダクトの価格が下がると、消費者の需要があがり、かえって石炭をもっと使って生産が拡大していきました。

以上のDavidの話を聞いて思ったのは、最近のUIの競争の際限ない激化も、表現できるテクノロジーの進化に人々が気づくと自然に起きてしまう必然的なものだということ。


Flipboardが今回オープンソース化したReact Canvasは、facebookチームがReact Nativeを発表した際に「Reactは当初から、特定の環境のローレベルの構築ブロックをライブラリレベルで抽象化している。React Nativeは、DOMレンダラーをnativeレンダラーに置き換える..」と説明しているReactの特性を、進化の余地だと気づいていたので、それをCanvasに応用したということかと。

モバイルブラウザにおける無限スクロールのパフォーマンスを向上させたいが、DOMでは60fpsを実現するのは厳しい。DOMのような保持モードAPIは、描画するオブジェクトの階層を維持する、つまり情報をキープすることで追加のメモリが必要となり、画面を更新するのが遅くなる。一方、Canvasであれば、描画のコマンドがGPUに直接送られることで、即対応できるメリットがある。しかし、例えば画像の上にテキストを表示するケースなど、エレメントを重ねて描画するのにリソースが非同期で読込まれると難易度があがる。HTMLがエレメントの順番を簡単に操作できたり、CSSがz-indexで対応できるように、Canvasを利用する場合は、高レベルの抽象化を用意してあげる必要がある。

その概要は、

  • JavaScriptでスクロールを実装。
  • スクロールのモーメンタムの計算は、オープンソースで提供されているZynga Scrollerを利用。
  • 単一のCanvasエレメントで実現。タッチイベント毎に、スクロールのオフセット値を元にノードを解釈し、レンダーツリーが更新される。そして新しいフレーム座標にあわせて、全体のレンダーツリーが再描画される。スピードが遅くなるように聞こえるかもしれないが、描画操作の結果はオフスクリーンのCanvasにキャッシュできるので、それを利用してレイヤを後ほど再描画することで、最適化できる。画像にもテキストにも使えるし、一度レイヤを描画すれば、オフスクリーンを利用した再描画はすばやくできる。
  • Reactで宣言型APIを用意。レンダー構造を直感的に表現できるようになった。
  • スクロールにおいて、その瞬間のスクリーンで見えるアイテムのみをレンダリングする際、Reactのdiffアルゴリズムが相当早いのが役にたっている。

注意点としては、

  • React Canvasは、DOMを完全にリプレースすることを目指したソリューションではない。パフォーマンスの用件がクリティカルでないところは、DOMの方がよいかもしれない。Flipboardのモバイルweb版は、ネイティブとweb技術のハイブリッドではなく、DOMベースのUIとCanvasレンダリングを組み合わせ、全てwebコンテンツで構成されている。

2014 Topアクセスランキング


Back