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