SYSTEM L.A
フロントサイドの技術解説
モバイルWEBアプリケーションの要2013/02/15
SOFTWARE JAPNA 2013
AITC コンテキスト・コンピューティング研究部会
高岡大介（産業技術総合研究所）

13年2月18日月曜日

DEMO
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
13年2月18日月曜日

Native vs HTML5

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
13年2月18日月曜日

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

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
13年2月18日月曜日

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

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
13年2月18日月曜日

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

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
13年2月18日月曜日

HTML5 TECHNOLOGY• Single Page Application• History API• Web Storage• Application Cache• Graph
13年2月18日月曜日

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

SINGLE PAGE APPLICATION• 読み込むページは一つ• Ajaxによりデータを取得• コンテンツを部分書き換え• パフォーマンスや応答性の向上• ユーザー エクスペリエンスの大幅な向上
13年2月18日月曜日

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

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

13年2月18日月曜日

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

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

Web SQL Database / Indexed Database の使用を検討。

13年2月18日月曜日

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

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

13年2月18日月曜日

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

GRAPH• クライアントで動的にグラフを生成• サーバー負荷の軽減• リッチなインターフェース• SVGとCanvasに注意

13年2月18日月曜日

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

MOBILE WEB APP
FRAMEWORK

13年2月18日月曜日

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

MOBILE WEB APP
FRAMEWORK

モバイルサイト向け

13年2月18日月曜日

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

MOBILE WEB APP
FRAMEWORK

モバイルサイト向け

アプリケーション向け
13年2月18日月曜日

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