オフラインWebの活路はモバイルアプリにある：UXClip（22）（2/3 ページ）

[野中龍一，クラスメソッド]

2．オフライン・ファーストの思想と実践（ダイジェスト版）

スピーカー：オープンウェブ・テクノロジー　白石俊平氏

　オフライン・ファーストの思想について説明がありました。オフライン・ファーストは、最初のセッションにあったApplication Cache APIも大きく関係します。

　

2.1．オフラインのメリット

　オフライン対応のメリットに上げるポイントは以下の3つです。2つ目のキャッシュについては、無駄なリクエストレスポンスを減らす点で有効です。

• オフラインでも使える
• キャッシュすることによる高速化
• 結果としてのユーザビリティの向上

2.2．オフラインは機能である

　オフライン対応は、すべてのWebサイトで必須ではなく、Webサイト・アプリケーションによって、制作者側が必要か不要かを判断します。

　例えば、読むことが中心のWebサイトでは、オフラインに対応する必要はあまりなく、得られるメリットに対してコストが掛かってしまいます。逆に、アプリケーションの場合は、重要な価値を提供する機能です。

　例を挙げると、Google Slidesが現在オフラインに対応しており、オフライン時の変更は、オンラインに戻ったときに同期されるようになっています。

　まだ、オフラインに対応していなかった時は、ネットワークが切断されるとデータが消えてしまい、ビジネスマンが利用するWebアプリケーションとしては致命的な欠点でした。

2.3，オフラインの活路はモバイルアプリにある

　ガートナーによれば、今後企業向けのモバイルアプリは大半がHTML5になると予想されています。HTML5で作られたモバイルアプリはアップデートも容易で、App Storeに出す必要がないというのが大きなメリットです。

• 参考サイト：Gartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid

2.4，オフラインWebアプリの基本

　オフラインWebアプリを実現するためのシンプルなポイントとして、以下が紹介されました。

• リソースをブラウザ側にキャッシュさせる
• データのキャッシュコピーをローカルにも持つ
• オフラインになってもキャッシュされているリソースを編集し、オンライン時に同期する

2.5．オフラインを実現するためのAPI

　オフラインを実現するためには、いくつかの仕組みを複合的に利用する必要があります。

• Application Cache
• Web Storage
• Indexed Database
• File API（Chromeでしかほとんど実装されていない）

　主な仕組みが上記の4つ。

• 参考サイト：Offline First - A better HTML5 User Experience

2.6．オフライン・ファーストの勘所

　さらに、オフラインに対応するためには、あらかじめ、設計しておくことが重要です。

• アプリケーションとサーバを切り離す（これは本当に難しい、パラダイムシフトが必要。まずオフラインありきで、クライアントアプリケーションを作ることがヒント）
• ラッパーを通じてWeb APIを呼び出す（変更に強い）
• 抽象化したオブジェクトを通じて、データを操作する（データリソースが変わるかもしれないので抽象化する）

2.7．難題、データの同期処理は難しい

　ここで、実際に動作する付箋のメモを同期するアプリを使い、同期処理の一例を紹介しました。同期処理は考慮しなければならないことが多く、非常に難しいそうです。

• デモでは全データを同期している。これじゃダメ
• 差分だけ同期したり
• 同期中にネットワークが切断したら？
• データ変更が衝突したらどうする？
• 今ならWeb Soketを使えば少しは楽になるかも？
• SyncFileSystem APIが先日リリースされ一助になるかも
• BaaSを利用するのも良いかも

　オフライン・ファーストが流行するであろう来年に備えて、事前に試してポイントを押さえておきましょう。

2.8．参考資料

• youtube
  • オフライン・ファーストの思想と実践 - 第36回HTML5とか勉強会 -

• スライド
  • http://www.slideshare.net/shumpei/thought-and-practice-of-offline-first