PART 1　基礎編
第1章 ▶ HTML5ハイブリッドアプリとは

• 1.1 HTML5ハイブリッドアプリの概要
• 1.2 アプリ開発の課題
• 1.2.1　マルチプラットフォーム対応の必要性
• 1.2.2　マルチプラットフォーム対応の難しさ
• 1.3 HTML5ハイブリッドアプリの登場
• 1.4 アプリケーションの型
• 1.4.1　ネイティブアプリ
• 1.4.2　Webアプリ
• 1.4.3　ハイブリッドアプリ
• 1.5 ハイブリッドアプリの仕組み
• 1.6 ハイブリッドアプリの利点
• 1.7 ハイブリッドアプリの欠点
• 1.8 ハイブリッドアプリの事例
• 1.9 まとめ

第2 章 ▶ ハイブリッドアプリ開発の基盤

• 2.1 Web 技術
• 2.1.1　HTML
• 2.1.2　CSS
• 2.1.3　JavaScript
• 2.1.4　ライブラリ・フレームワーク
• 2.2 WebKitレンダリングエンジンの開発環境
• 2.3 iOSの開発環境
• 2.3.1　iOSアプリの開発環境を構築する
• 2.3.2　必要とする環境
• 2.3.3　Xcodeをインストールする
• 2.3.4　Xcodeを起動する
• 2.3.5　新しいプロジェクトを作成する
• 2.3.6　プロジェクトを編集する
• 2.3.7　プロジェクトを実行する
• 2.3.8　実機での開発
• 2.4 Android の開発環境
• 2.4.1　Android（Android SDK＋Eclipse）の開発環境を構築する
• 2.4.2　必要とする環境
• 2.4.3　Android SDKをインストールする
• 2.4.4　プロジェクトの作成
• 2.5 まとめ

第3 章 ▶ ハイブリッドアプリ開発のためのフレームワーク

• 3.1 フレームワークの概要
• 3.2 フレームワークは何をしてくれるのか
• 3.3 Cordova（PhoneGap）
• 3.4 Triaina
• 3.5 フレームワークを利用しない場合
• 3.6 サーバ・クラウド環境
• 3.6.1　PhoneGap Build
• 3.6.2　Trigger.io
• 3.6.3　Monaca
• 3.6.4　Icenium
• 3.7 まとめ

第4章 ▶ Cordovaを用いたアプリ開発の流れ

• 4.1 Cordovaを用いた開発環境を構築する
• 4.1.1　Node.js のインストール
• 4.1.2　cordova のコマンドラインツールをインストールする
• 4.1.3　プロジェクトを作成する
• 4.1.4　Android 向けのコンポーネントをインストールする
• 4.1.5　プロジェクト構造を確認する
• 4.1.6　Androidエミュレータを利用する
• 4.1.7　iOSシミュレータを利用する
• 4.1.8　実機でプロジェクトを実行する
• 4.1.9　基本的な開発の流れを理解する
• 4.1.10　ブラウザで確認する
• 4.1.11　cordovaコマンドの管理
• 4.2 Cordovaを用いてアプリを開発する
• 4.2.1　www ディレクトリ以下の構造を確認する
• 4.2.2　index.html
• 4.2.3　cordova.js
• 4.2.4　devicereadyイベント
• 4.3 アプリの設定
• 4.3.1　config.xmlの構造
• 4.3.2　アプリに関する設定
• 4.3.3　設定を反映させる
• 4.3.4　Android 特有の設定項目
• 4.3.5　iOS 特有の設定項目
• 4.3.6　アプリのアイコンを設定する
• 4.3.7　アプリのスプラッシュスクリーンを設定する
• 4.3.8　ドメインホワイトリストを設定する
• 4.4 プラットフォームごとにカスタマイズする
• 4.4.1　HTML5 側をプラットフォームごとに切り替える
• 4.4.2　ネイティブ側をプラットフォームごとに切り替える
• 4.5 Cordovaプラグインを利用する
• 4.5.1　プラグインを導入する
• 4.5.2　プラグインを管理する
• 4.5.3　プラグインのインストールを理解する
• 4.5.4　プラグインの仕組み
• 4.5.5　組み込みプラグインの一覧
• 4.5.6　Android 向けのCordovaプラグインを実装する
• 4.5.7　Android 向けのプラグイン開発の詳細
• 4.5.8　iOS 向けのCordovaプラグインを実装する
• 4.5.9　cordovaコマンドからインストールできるプラグインを実装する
• 4.6 その他のコマンドの解説
• 4.7 既存のアプリにCordovaを組み込む
• 4.7.1　Cordovaフレームワークのダウンロード
• 4.8 Android のプロジェクトにCordovaフレームワークを導入する
• 4.8.1　画面の一部でCordovaを用いる
• 4.9 iOSのプロジェクトにCordovaフレームワークを導入する
• 4.9.1　画面にCordovaを用いる
• 4.9.2　wwwディレクトリに配置する
• 4.9.3　Cordovaフレームワークを呼び出すコードを記述する
• 4.10 plugmanコマンドを使ってCordovaプラグインを導入する
• 4.10.1　plugmanコマンドのインストール
• 4.10.2　plugmanコマンドを使ってCordovaプラグインを導入する
• 4.11 まとめ

PART 2　実践編
第5章 ▶ より良いアプリを開発するためのテクニック

• 5.1 aタグやclickイベントは使わない
• 5.1.1　Tappableを使う
• 5.1.2　FastClickを使う
• 5.2 jQueryの代わりにZepto.jsを利用する
• 5.2.1　Zepto.js の導入
• 5.2.2　Zepto.jsを利用する
• 5.3 ダイアログを表示する
• 5.3.1　Cordova のNotificationプラグインを利用する
• 5.4 タップ時のハイライトを消す
• 5.5 ポップアップメニューを消す
• 5.6 ユーザが文字を選択できないようにする
• 5.7 コンテンツの一部に慣性スクロールを用いる
• 5.8 iOS版よりもAndroid 版を先に開発する
• 5.9 インジケータを利用する
• 5.9.1　Spin.jsの導入
• 5.10 文字の大きさの自動調整を無効にする
• 5.11 DOMツリーに加える変更を減らす
• 5.11.1　再描画のコストを減らす
• 5.11.2　DOM 操作の繰り返しが描画を遅くする
• 5.11.3　DOM への挿入を一度にまとめる
• 5.11.4　一度DOMツリーから切り離して操作した後に挿入する
• 5.12 レイアウトの再計算のコストを抑える
• 5.12.1　レイアウトの再計算について
• 5.12.2　要素の大きさを固定する
• 5.12.3　絶対位置を指定する
• 5.12.4　CSS Transformsを用いる
• 5.12.5　DOMツリーを複雑にしない
• 5.13 実機で確認する
• 5.13.1　iOSシミュレータの欠点
• 5.13.2　Androidエミュレータの欠点
• 5.14 JSONを扱う
• 5.14.1　JSONをパースする，JSON に変換する
• 5.14.2　JSON の文法
• 5.14.3　JSON の誤ったパース
• 5.15 CSSアニメーションを利用する
• 5.15.1　JavaScriptでアニメーションしない
• 5.15.2　CSSアニメーションとは
• 5.15.3　transitionスタイルプロパティを使う
• 5.15.4　JavaScriptからCSSアニメーションを利用する
• 5.15.5　CSSアニメーション関連のイベントを把握する
• 5.15.6　CSSアニメーションをJavaScriptからキャンセルする
• 5.15.7　CSSアニメーションをより滑らかに描画する
• 5.15.8　iOS 端末でのちらつきを抑える
• 5.16 アプリを実行している端末の情報を得る
• 5.16.1　ユーザエージェントからプラットフォームを判別する
• 5.16.2　Cordova（PhoneGap）を用いて端末の情報を取得する
• 5.17 Android 4.03のWebViewとassetに関するバグに対処する
• 5.17.1　バグを再現する
• 5.18 Androidデバイスのボタンに対応する
• 5.18.1　Cordovaを使っている場合
• 5.18.2　WebViewの場合
• 5.19 イベントの移譲
• 5.19.1　イベントバブリング
• 5.19.2　イベントの移譲
• 5.19.3　Zepto.jsを使ったイベントの移譲
• 5.20 HTML5とネイティブの切り分け
• 5.20.1　HTML5だけですべて実装できない状況
• 5.20.2　ある画面・ある箇所のみネイティブで実装する
• 5.20.3　HTML5とネイティブとの弱点を補い合う
• 5.21 まとめ

第6章 ▶ ストレージ

• 6.1 ストレージの概要
• 6.2 WebStorage
• 6.3 LocalStorage
• 6.3.1　HTML5 ハイブリッドアプリでの利用
• 6.3.2　Android のWebViewで利用する
• 6.3.3　iOS のUIWebViewクラスで利用する
• 6.3.4　データを保存する
• 6.3.5　データにアクセスする
• 6.3.6　データを削除する
• 6.3.7　容量の制限
• 6.3.8　残りの容量を知る
• 6.3.9　利用シーン
• 6.4 SessionStorage
• 6.4.1　性質
• 6.4.2　LocalStorageと同じAPI
• 6.4.3　Android，iOS のWebViewで利用する
• 6.4.4　容量
• 6.4.5　利用シーン
• 6.5 ファイルストレージ
• 6.5.1　ファイルストレージAPIとは
• 6.5.2　実装されているAPI
• 6.5.3　セットアップ
• 6.5.4　ファイルストレージAPI の利用
• 6.5.5　ファイルの読み込み
• 6.5.6　ファイルを書き込む
• 6.5.7　ファイルをテキストとして読み込む
• 6.5.8　ファイルやディレクトリの移動・コピー・削除・その他の操作
• 6.5.9　ファイルストレージの詳細
• 6.5.10　制限
• 6.5.11　利用シーン
• 6.6 WebSQLデータベース
• 6.6.1　WebSQLデータベースの概要
• 6.6.2　Androidで利用する
• 6.6.3　iOSで利用する
• 6.6.4　CordovaのWebSQLデータベースを用いる
• 6.6.5　利用できるSQL
• 6.6.6　データベースの利用
• 6.6.7　データベーステーブルの作成
• 6.6.8　トランザクションの発行
• 6.6.9　トランザクション内でロールバックする
• 6.6.10　明示的にロールバックする
• 6.6.11　読み込み専用のトランザクションを発行する
• 6.6.12　SQLを発行する
• 6.6.13　プレースホルダ
• 6.6.14　マイグレーション
• 6.6.15　SQLite のバージョンを調べる
• 6.6.16　外側から実体ファイルを取り出してSQLiteで操作する
• 6.6.17　利用シーン
• 6.7 モバイルBaaS
• 6.7.1　モバイルBaaSがやってくれること
• 6.7.2　モバイルBaaS の紹介
• 6.7.3　オープンソースのモバイルBaaS
• 6.7.4　利用シーン
• 6.8 まとめ

第7 章 ▶ モバイル特有の事情

• 7.1 タッチの検知
• 7.1.1　JavaScriptから扱うイベント
• 7.1.2　touchenter，touchleaveイベント
• 7.1.3　イベントのプロパティ
• 7.1.4　タッチオブジェクト
• 7.1.5　タッチ座標を得る
• 7.1.6　スクロールを防止する
• 7.1.7　Chromeでタッチイベントを発生させる
• 7.1.8　マウス関連のイベントの兼ね合い
• 7.1.9　マウス関連のイベントを利用しない
• 7.1.10　Androidでtouchstartイベントとtouchendイベントがしばしば対応しない
• 7.2 ジェスチャの検知
• 7.2.1　ジェスチャイベント
• 7.2.2　Androidでもジェスチャを検知するには
• 7.3 ジェスチャを判別するライブラリ
• 7.4 端末のオリエンテーション
• 7.4.1　端末のオリエンテーションを知る
• 7.4.2　端末のオリエンテーションが変わるときを検知する
• 7.4.3　端末のオリエンテーションをメディアクエリから扱う
• 7.4.4　Android 4.03 のメディアクエリにオリエンテーションを指定するときのバグ
• 7.4.5　オリエンテーションを判別するメディアクエリをJavaScript から呼び出す
• 7.4.6　オリエンテーションに対応しないという選択肢もある
• 7.5 viewportに対応する
• 7.5.1　viewportとは
• 7.5.2　基本
• 7.5.3　パラメータ
• 7.5.4　iPhone，iPod touch 向けベストプラクティス
• 7.5.5　Androidでのviewport
• 7.5.6　target-densitydpiパラメータを指定する
• 7.5.7　densityの違いを検証する
• 7.5.8　target-densitydpiパラメータを指定したときのレイアウト
• 7.5.9　width パラメータをJavaScriptでエミュレーションする
• 7.6 まとめ

第8 章 ▶ デバッグ

• 8.1 weinreによるWebインスペクタ
• 8.1.1　weinreでできること
• 8.1.2　weinre の導入
• 8.2 iOSでのリモートWebインスペクタ
• 8.2.1　利用できる機能
• 8.2.2　利用するための準備
• 8.2.3　リモートWebインスペクタを開く
• 8.3 Chrome のリモートWebインスペクタ
• 8.3.1　Android 4.4 以降でChrome のインスペクタを利用する
• 8.4 AndroidでJavaScript のエラーやログを記録する
• 8.4.1　Androidアプリのログを取得する
• 8.4.2　エラーログを記録する
• 8.5 まとめ

第9 章 ▶ メモリの計測・節約

• 9.1 メモリ節約の重要性
• 9.1.1　メモリスワッピングを利用できないiOSとAndroid
• 9.2 iOSやAndroid 端末のメモリ容量
• 9.2.1　iOS 端末の持つメモリ容量
• 9.2.2　Android 端末の持つメモリ容量
• 9.3 メモリ使用量を計測する
• 9.3.1　仮想メモリ
• 9.3.2　iOSでメモリを計測する
• 9.3.3　Androidでメモリを計測する
• 9.4 メモリを節約するテクニック
• 9.4.1　HTML5 ハイブリッドアプリが消費するメモリ
• 9.4.2　JavaScript のメモリ管理
• 9.4.3　サイズの大きな画像の利用を抑える
• 9.4.4　オブジェクトをプールする
• 9.4.5　JavaScriptで必要のない参照をしない
• 9.5 まとめ

第10 章 ▶ HTML5ハイブリッドアプリのセキュリティ

• 10.1 Webアプリとは違ったHTML5ハイブリッドアプリのセキュリティ問題
• 10.2 Android・iOSのサンドボックス
• 10.2.1　サンドボックスとは
• 10.2.2　iOS のサンドボックス
• 10.2.3　Android のサンドボックス
• 10.3 HTML5ハイブリッドアプリでのXSSの危険性
• 10.3.1　XSSを通じてネイティブブリッジを利用される
• 10.3.2　iOS の場合の危険性
• 10.3.3　Android の場合の危険性
• 10.4 改ざんやコードをのぞかれる可能性を考慮する
• 10.4.1　Android のapkパッケージに含まれているリソースを取り出す
• 10.4.2　iOS のipa パッケージに含まれているリソースを取り出す
• 10.4.3　パッケージの内容の盗難・改ざんを考慮する
• 10.5 console.logメソッドを用いて大事な情報を書き込まない
• 10.6 まとめ

第11章 ▶ JavaScriptとネイティブとのブリッジ

• 11.1 JavaScript からネイティブの機能を呼び出すいくつかの方法
• 11.2 ネイティブブリッジに必要とされる要件
• 11.3 addJavascriptInterface 方式
• 11.3.1　実装
• 11.3.2　値の受け渡し
• 11.3.3　Java 側ではスレッドセーフにする
• 11.3.4　適用範囲の制限
• 11.3.5　セキュリティ上の懸念
• 11.3.6　公開するメソッドを制限する
• 11.4 ネイティブからJavaScriptへ値を渡す
• 11.4.1　iOS の場合
• 11.4.2　Android の場合
• 11.4.3　値を渡す
• 11.5 カスタムURL スキーム方式
• 11.5.1　Androidでの実装
• 11.5.2　iOSでの実装
• 11.6 iOSで特定のページの読み込みを制限する
• 11.6.1　webView:shouldStartLoadWithRequest:navigationType:を用いる
• 11.6.2　NSURLProtocolクラスを用いる
• 11.7 JsAlert 方式
• 11.7.1　実装
• 11.8 ローカルHTTPサーバ方式
• 11.8.1　ローカルにHTTP サーバを構築する
• 11.8.2　トークンによる利用の制限
• 11.9 まとめ

第12 章 ▶ WebViewを使ってHTML5ハイブリッドアプリを開発する

• 12.1 Android のWebViewを使ってHTML5ハイブリッドアプリを開発する
• 12.1.1　WebViewを表示する
• 12.1.2　WebViewを設定する
• 12.1.3　WebSettingsを設定する
• 12.1.4　WebViewClientを設定する
• 12.1.5　WebChromeClientを設定する
• 12.1.6　ダイアログを設定する
• 12.1.7　consoleオブジェクトの挙動を設定する
• 12.1.8　アクティビティのライフサイクルに対応する
• 12.1.9　WebViewからJavaScriptを実行する
• 12.2 iOSのWebViewを使ってHTML5ハイブリッドアプリを開発する
• 12.2.1　基本となるコード
• 12.2.2　UIWebViewクラスを設定する
• 12.2.3　UIWebViewDelegateを設定する
• 12.2.4　ViewControllerクラスが破棄されたときにUIWebViewオブジェクトを破棄する
• 12.3 まとめ
• コラム：アプリのマーケット公開のポイント