連載
» 2013年02月28日 15時19分 UPDATE

UXClip(22):オフラインWebの活路はモバイルアプリにある (2/3)

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

2.オフライン・ファーストの思想と実践(ダイジェスト版)

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

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

 

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

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

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

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

ta_10ux21html5.jpg

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

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

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

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

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

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

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

ta_11ux21html5.jpg

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

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

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

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

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

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

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

ta_12ux21html5.jpg

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

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

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

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

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

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

2.8.参考資料

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。