読者です 読者をやめる 読者になる 読者になる

『[iOS/Android対応]HTML5 ハイブリッドアプリ開発[実践]入門』という本を書きました

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)
久保田 光則 アシアル株式会社
技術評論社
売り上げランキング: 20,549

HTML5ハイブリッドアプリ開発[実践]入門』という本を書きました。技術評論社より12月20日発売です。Kindle版も同時に出ます。

HTML5ハイブリッドアプリ開発に関するあれやこれやを書いています。タイトルに「入門」とついてますが、入門者向けの内容だけではなく実際にHTML5ハイブリッドアプリを開発する人向けの実践的な内容もかなり網羅して書いています。目次はこんなかんじです。

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

HTML5ハイブリッドアプリというのは、比較的歴史の浅いモバイルアプリ開発の中でも特に若い開発手法です。そのため世に共有されていないノウハウや知識や問題がたくさんあります。またいくらHTML5といっても各プラットフォームの事情にある程度引きずられるのも事実です。従って「HTML5クロスプラットフォームのアプリが作れるんですね、やったー」みたいな感じで無邪気に開発を始めると、開発途中になって初めて色んな問題にぶち当たってしまうようなことがおきてしまいがちです。

この本は、ハイブリッドアプリ開発に関わる人がHTML5関連の小手先のテクニックなども含めてHTML5ハイブリッドアプリ開発のだいたいのことを把握できるように書きました。書店でもう並んでいるところもあるみたいで、興味ある人は是非手にとってみて下さい。