HTML5カーニバル2013での講演資料です

1. ハイブリッドアプリ開発最前線から見た
HTML5の理想と現実
アシアル株式会社 田中正裕
http://www.asial.co.jp
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 1

2. 自己紹介
田中正裕 （たなかまさひろ）
2002年 アシアル株式会社を創業
2013年現在 今に至る
fb, Twitter: 特にやっていません・・・
趣味: 軽飛行機
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 2

3. アシアル株式会社の紹介
アシアル株式会社は、これまで培ってきたサーバーサイド技術をもとに、
HTML5やJavaScriptといったクライアント技術を高い次元で組み合わせ、
優れたユーザーエクスペリエンスを持つアプリケーションを提案します。
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 3

4. ハイブリッドアプリとは？
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 4

5. モバイルに関するお話です
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 5

6. さまざまなモバイルOSが混在
出典: VisionMobile estimates, IDC, Canalys, Gartner, OS vendors
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 6

7. どんどん増えるモバイルOS
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 7

8. どれも最新のブラウザー性能
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 8

9. HTML5でWebアプリ
対応ブラウザーがあればどのOSの上でも動作するのが魅力
index.html style.css script.js
インターネット
対応ブラウザー
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 9

10. HTML5かネイティブか
“企業としての最大の失敗
http://fb.html5isready.com/
はネイティブアプリではな
くHTML5に賭けすぎたこと
です。時期尚早でした。”
と話した。“iOSアプリに
したら、利用者のフィード
の消費が2倍になりまし
た。”
“Facebookモバイルアプリケー
ションの動作が遅いのはHTML5の
せいなんかじゃない。 我々は現
代のスマートフォンのブラウ
ザーの能力やHTML5の豊な能力を
知っていました。”
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 10

11. Webアプリの利点と弱点
出典: Developer Economics 2013
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 11

12. Webアプリの利点と弱点
HTML5を選択した理由
・クロスプラットフォームのコード
移植性
・低コスト開発
・クロススクリーンのコード移植性
・学習コストの低さ
・オープンソース
・リーチ（検索エンジンなど）
・開発コミュニティーの充実
出典: Developer Economics 2013
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 12

13. Webアプリの利点と弱点
HTML5のネイティブと比べた弱点
・ネイティブAPIが利用不可
・より優れた開発環境
・HTML5最適化された端末が無い
・より優れたデバッグ環境
・迅速な標準化
出典: Developer Economics 2013
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 13

14. Webアプリとネイティブアプリの比較
Webアプリ ネイティブアプリ
開発言語 HTML5とJavaScript Objective-CやJava
Webブラウザーが備える 端末やOSが持つすべての
機能
機能のみ利用可能 機能を利用可能
通常のWeb開発環境 XcodeやEclipseといったOSごとの開発
開発環境
エディタ、Dreamweaver等 環境
○ ×
クロスプラットフォーム
同じJavaScriptコードを流用可 開発言語自体が異なる
△ ◎
実行速度
Webブラウザーが実行エンジン OSが直接実行する
×
◎
オフライン対応 キャッシュを用いて一部オフライン対
端末内にプログラムが配置
応も可能
Webサイトにアクセス
アプリの配布方法 マーケットの登録が原則
マーケットへの登録は不可
サーバーから配信するため アップデートのたびにマーケット登録。
メンテナンス方法
常に最新状態をキープ可能 更新はユーザー次第
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 14

15. 超えられないブラウザーの「壁」
• デバイス機能（いわゆるDevice API）のサポー
トが限定的
– カメラ撮影、Bluetooth、NFC、OpenGLなど・・・
• OS機能をフルに使えない
– アドレス帳、プッシュ通信、ホームウィジェットなど・・・
• アプリマーケットでの課金ができない
• JavaScriptの言語仕様を超えられない
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 15

16. 超えられないブラウザーの「壁」
• デバイス機能（いわゆるDevice API）のサポー
トが限定的
– カメラ撮影、Bluetooth、NFC、OpenGLなど・・・
ハイブリッドアプリ
• OS機能をフルに使えない
を試してみては？
– アドレス帳、プッシュ通信、ホームウィジェットなど・・・
• アプリマーケットでの課金ができない
• JavaScriptの言語仕様を超えられない
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 16

17. ウェブ＋ネイティブ＝ハイブリッド
index.html style.css script.js
ウェブ
ハイブリッド ＝ ＋
ネイティブ
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 17

18. ハイブリッドアプリの特徴
GPS HTML/JS/CSS
ネイティブ側も拡張可能
ネイティブコード
(いわゆるWebView)
ハイブリッドアプリの
パッケージ
カメラ
サーバーとの通信は
Webアプリではアクセスできない
各種ネイティブAPIを実行できる
AjaxとかWebSocket
連絡帳
など
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 18

19. ハイブリッド化を後押しするもの
• BYOD・コンシューマライゼーションへの適用性
– 『2016年には、企業向けアプリの50%以上はハイブリッドアプリとな
るだろう』2013年2月4日、Gartner
• 低コスト・RADなソリューションとしての開発手法
– プロトタイプと本開発を一気に進められる
• Windows 8、Firefox OS、Tizenなどの新プラットフォームにお
いても、ハイブリッドアプリを低コストに移植可能
– これらはネイティブでHTML5アプリが動作する
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 19

20. 構築技術・開発環境
言語
Objective-C Java
+
FW
+ iOS SDK Android SDK
Zepto.js jQuery Mobile Sencha Touch
ウェブ ネイティブ
開発環境
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 20

21. PhoneGap (Cordova) API
=
加速度センサー 端末に内蔵された加速度センサーを読み取り、端末の傾きを取得する
カメラ 端末のカメラやアルバムにアクセスし、写真を取得する
ビデオキャプチャー ビデオを録画する
オーディオ録音・再生 オーディオを録音したり、再生する
コンパス 端末の向きを方位情報として取得する
接続状態確認 OSのネットワーク接続状態を取得する
アドレス帳 OSの連絡帳にアクセスし、情報の入出力を行う
デバイス情報 デバイスのモデル名や端末IDなどの取得や、OS情報を取得する
ハードウェアボタン Android端末の持つ各種ボタンに対するイベントを取得する
ファイルシステム OSのファイルシステムにアクセスし、ファイルの入出力を行う
GPS GPSセンサーにアクセスし、現在の緯度経度を取得する
国際化 OSの利用言語や各種ロケール情報を参照する
バイブレーター バイブレーターを実行する
スプラッシュ操作 起動時に表示されるスプラッシュ画面を制御する
SQLデータベース SQLデータベースにアクセスする
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 21

22. ハイブリッドアプリ構築事例
auヘッドライン
KDDI株式会社 名刺管理: Eight テレ朝動画アプリ シューズファインダー
© 三三株式会社 © 株式会社テレビ朝日 © 株式会社アシックス
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 22

23. ハイブリッドアプリの課題
デバッグのしやすさ
そこでMonacaの登場
完全なクロスプラットフォーム開発の難しさ
フルネイティブと比較した時のヌルサク感
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 23

24. Monacaとは？
クラウド×HTML5
ハイブリッドアプリ開発環境
『誰でも今日からアプリ開発。』
HTML5ベースの ビルド＆
開発環境 デバッガー
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 24

25. Monacaサービス一覧
すべて無料でお使い頂けます
① ブラウザーベースのクラウドIDE ② PhoneGapベースのFW
Monacaフレームワーク
Available on GitHub
③ デバッグ用ツール
Monacaデバッガー
http://monaca.mobi/
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 25

26. ビルド機能
HTML、JavaScript、CSSエディター
プロジェクト管理
デベロッパーコンソールとかFirebugのような
インスペクター＆JavaScriptコンソール
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 26

27. DEMOの前に
私がデモをするその前に...
Androidをお持ちの皆様は、ぜひGoogle Playから
「Monacaデバッガー」をインストールしてください
（最新版：バージョン1.6.1）
インストール後、Monacaデバッガーでログインをお願いします。
メールアドレス: html5
パスワード: monaca
※本アカウントは講演終了後に削除しますのでご了承ください
※最大10端末程度でログインすることを想定しています（汗
http://monaca.mobi/
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 27

28. 「Eight」で見るMonaca独自の機能
• iOS、Androidに対応した名刺管理アプリケーション
• Monacaを用いたハイブリッドアプリとして開発
Eight - つなげて育つ名刺帳
• フレームワークはPhoneGapとZepto.jsを使用
ストアから無料DL
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 28

29. HTML5の苦手部分を補うためのネイティブ機能
ネイティブ ネイティブ
HTML5/CSS
HTML5/CSS ネイティブ
HTML5/CSS
ネイティブ
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 29

30. ネイティブ機能を用いたアニメーション
HTML5アプリ最大の弱点は
アニメーション品質が低いこと。
Eightではネイティブ機能を用いて
高品質な画面遷移を実現した。
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 30

31. ハイブリッドアプリの課題
• ネイティブと同じルック＆フィールドの実現
– どうしても比較されてしまう
• JavaScriptの書き方によるばらつきが大きい
– 特にDOM操作にボトルネックが発生しやすい
• ネイティブ機能を使えば使うほど複雑に
– あわせてポータビリティも低下
• セキュリティに注意！
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 31

32. まとめ
• 低コスト・クロスプラットフォームなモバイルアプリ開
発手段として、ハイブリッドアプリは有効
• 業務アプリやフロントエンド系アプリでの第一候補
• 国内でのノウハウの蓄積は浅く、これから情報共有が進
んでいくと考えられる
プラス、Monacaを是非使って遊んでみてください
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 32

33. 誰でも今日からアプリ開発。
URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2013/2/15 ｜ 33