SYSTEM L.A
フロントサイドの技術解説
HTML5
モバイルWEBアプリケーション

2013/03/14
AITC コンテキスト・コンピューティング研究部会
高岡大介（産業技術総合研究所）

DEMO
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

Native vs HTML5

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

HTML5に賭けたのは失敗だった

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

HTML5に賭けたのは失敗だった

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

モバイルアプリは、2016年までに過半数がHTML5を用いたハイブリッドアプリになる。ガートナー

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

HTML5 TECHNOLOGY• Single Page Application• History API• Web Storage• Geolocation API• Application Cache• GraphCopyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.

SINGLE PAGE APPLICATION• 読み込むページは一つ• Ajaxによりデータを取得• コンテンツを部分書き換え• パフォーマンスや応答性の向上• ユーザー エクスペリエンスの大幅な向上
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
ApplyDrive
All RightsReserved.

HISTORY API• JavaScriptから履歴を操作できる• 戻るボタンでも画面が戻るように• pushState• hashchange

Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.

WEB STORAGE• ブラウザに保存するKey-Valueストア• LocalStorage / SessionStorage• サイズは約5MB• それより大きい場合は、

Web SQL Database / Indexed Database の使用を検討。
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.

GEOLOCATION API• 位置情報の取得• Google Mapsなどを組み合わせて現在地の地図を表示• GeoCoderの逆引きにより、位置から住所を取得

Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.

APPLICATION CACHE• オフラインでもアクセス可能• パフォーマンス向上・負荷の軽減• LocalStorageと組み合わせ使われることが多い• キャッシュ マニフェスト ファイル

Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.

GRAPH• クライアントで動的にグラフを生成• サーバー負荷の軽減• リッチなインターフェース• SVGとCanvasに注意Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.

MOBILE WEB APP
FRAMEWORK

Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.

MOBILE WEB APP
FRAMEWORK

モバイルサイト向け

Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.

MOBILE WEB APPFRAMEWORK

モバイルサイト向け

アプリケーション向け
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Applyand andDrive
All Rights
Reserved.
Copyright© 2013
Advanced
IT Consortium
to Evaluate,
Apply
Drive
All Rights
Reserved.