書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門

書籍『Software Design plusシリーズ　［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』から10本の記事を転載。【完結】

久保田 光則、アシアル株式会社

• この連載の RSS

書籍転載について

　本コーナーは、技術評論社発行の書籍『［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

　『［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』の詳細や購入は技術評論社のサイトをご覧ください。

　スマートフォン向けアプリケーション開発では，iOS，Androidの両プラットフォームへの対応が求められることが多い一方，それぞれに対応することは，Objective-C，Javaによる異なる開発スキルが必要です。そこで現在注目されているのが，HTML5によるハイブリッドアプリです。本書では，フレームワークApache Cordovaによるアプリ開発から，ストレージの使い分け，タッチ・ジェスチャなどの活用，マルチプラットフォーム特有のデバッグノウハウなど，ハイブリッドアプリ開発に必須の知識をわかりやすく解説します。

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コマンドの管理【2014年2月10日公開】
4.2　Cordovaを用いてアプリを開発する
4.2.1　www ディレクトリ以下の構造を確認する
4.2.2　index.html
4.2.3　cordova.js
4.2.4　devicereadyイベント【2014年2月12日公開】
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　ドメインホワイトリストを設定する【2014年2月18日公開】
4.4　プラットフォームごとにカスタマイズする
4.4.1　HTML5 側をプラットフォームごとに切り替える
4.4.2　ネイティブ側をプラットフォームごとに切り替える【2014年2月25日公開】
4.5　Cordovaプラグインを利用する
4.5.1　プラグインを導入する
4.5.2　プラグインを管理する
4.5.3　プラグインのインストールを理解する
4.5.4　プラグインの仕組み
4.5.5　組み込みプラグインの一覧【2014年3月4日公開】
4.5.6　Android 向けのCordovaプラグインを実装する
4.5.7　Android 向けのプラグイン開発の詳細【2014年3月11日公開】
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 側ではスレッドセーフにする【2014年3月18日公開】
11.3.4　適用範囲の制限
11.3.5　セキュリティ上の懸念
11.3.6　公開するメソッドを制限する
11.4　ネイティブからJavaScriptへ値を渡す
11.4.1　iOS の場合
11.4.2　Android の場合
11.4.3　値を渡す【2014年3月25日公開】
11.5　カスタムURL スキーム方式
11.5.1　Androidでの実装
11.5.2　iOSでの実装
11.6　iOSで特定のページの読み込みを制限する
11.6.1　webView:shouldStartLoadWithRequest:navigationType:を用いる
11.6.2　NSURLProtocolクラスを用いる【2014年4月1日公開】
11.7　JsAlert 方式
11.7.1　実装
11.8　ローカルHTTPサーバ方式
11.8.1　ローカルにHTTP サーバを構築する
11.8.2　トークンによる利用の制限
11.9　まとめ【2014年4月8日公開】

第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　まとめ
コラム：アプリのマーケット公開のポイント