albatrosary's blog

UI/UXとエンタープライズシステム

WebアプリケーションなのにOffline Web Applicationって?

Offline Web Applicationをご存知ですか?私がHTML5でのアプリケーション開発に踏み切ったきっかけとなった技術要素なのですが、html5j白石さんの「オフラインファーストの思想と実践」から学び、使える技術としてエンタープライズでの利用を試みました。2013年2月頃にOffline Web Applicationが本格的になると予想した白石さんは「さすが」の一言につきます。その資料を添付させて頂きます。

 


Offline Web Applicationが必要となるビジネスシーン

営業フロントシステムではオフラインでのアプリケーション利用が必ず必要になります。簡単に言うと「電波が届かないくらいで営業活動を妨げるな」ということです。金融系ではiPadなどのスマートデバイス利用が広く使われだしています。金融商品を販売するための情報やプラン、シミュレーションを行うための仕組みです。

ネイティブ言語で開発すれば良いですが、業務アプリケーションのマルチデバイス対応、そしてBYOD(Bring your own device)もあり、Webアプリケーションにする傾向にあるようです。ちなみにBYODとは、従業員が個人保有の携帯用機器を職場に持ち込み、それを業務に使用することを示します(wikiより)。もちろん業務用携帯端末を個人で利用するという逆パターンもありますのでどこから支給されているかというのは問題ではないです。セキュリティの問題がありますがそのソリューションが各ベンダーから提案されています(ふろしき.js)。

OfflineなのにWeb Applicationとは一体何でしょか?そのソリューションがHTML5です。HTML5を使えばWeb Applicationでありながらネットワークに接続しないアプリケーションの作成が可能となります。

Offline Web Applicationとは

Offline Web ApplicationとはWebアプリケーションを実行させるリソースをブラウザに保持してネットワークが遮断された環境でも動かそうという機能です。技術要素は

  • Application Cache
  • Web Storage
  • Indexed Database API
  • File API

です。Offline Web ApplicationとOnline Web Application(今までのアプリケーション)の守備範囲は下記のイメージです。 

f:id:albatrosary:20140224082448p:plain

Application Cacheとは

今までもブラウザでのキャッシュ、アプリケーションサーバ、プロキシサーバでのキャッシング技術はありましたがこれはオンラインキャッシュの技術です。Application Cacheはネットワークが遮断された環境で動くことを前提とした機能です。

ここで重要となるので白石さんが推奨する「オフラインファースト」です。まずオフラインありきで設計・実装しましょうという概念です。オフライン機能はついでに実装するものではありませんということです。Application Cacheの利点は下記の通りです。

  • オフライン ブラウジング: ユーザーがオフラインのときでも、すべてのサイトにアクセスできる。
  • 高速: キャッシュされたリソースはローカルなので、高速に読み込まれる。
  • サーバー負荷の軽減: ブラウザは、変更があったリソースのみをサーバーからダウンロードする。

 

Web Storageとは

key-value型のデータストアであり、イメージとしてはクッキーの容量を大きくしたものというイメージで良いと思います。なのでトランザクションの概念がありません。Web Storageには2種類存在していて

  • sessionStorage
  • localStorage

のストレージが用意されています(IE8から使える)。簡単に利用でき、そのインターフェースは

  • length:保存されているデータ数
  • key(n):保存されているn番目のkey
  • getItem(key):keyに対応するvalue
  • setItem(key, value):keyとvalueのペアでデータを保存
  • removeItem(key):keyに対応するvalueを削除
  • clear():データをすべてクリア 

です。利点は

  • JavaScriptで制御可能
  • サイズが5MBとクッキーに比べ大容量
  • sessionStorageでは別ウィンドウ/タブを閉じるまで有効
  • localStorageでは永続的に有効であり別ウィンドウでもデータが共有される

 

Indexed Database APIとは

値とオブジェクトをローカルデータベースに保持する標準インターフェースでありWeb Storageと比較すると

  • トランザクションの概念
  • インデックスの配置

を持ち合わせています。やや利用が難しいのが難点です。

 

File APIとは

ファイルを操作するAPIが提供されています。それがFile APIです。 File APIは以下の3種類の仕様が策定されています。

  • File API - ファイル情報やデータ本体の読み込み
  • File API:Writer - ファイルへの書き込み
  • File API:Directories and System - 仮想的なファイルシステムの操作

 

最後に

実際に私のプロジェクトで仕様したOffline Web Application APIは

  • Application Cache
  • Web Storage

です。これだけでも強力なアイテムです。比較的簡単に扱える技術ですが注意事項もあります。今までと異なる概念であり、Webアプリケーションがクライアントアプリケーションのような振る舞いをする優れたアーキテクチャであることは間違いあります。使い勝手が良くないということも言われていますが、HTML5.1ではApplication Cacheインターフェースが改善されるようです。