Software Design plusシリーズ［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門

2013年12月20日紙版発売
2013年12月20日電子版発売

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

A5判／384ページ

定価3,168円（本体2,880円＋税10%）

ISBN 978-4-7741-6211-9

ただいま弊社在庫はございません。

電子版

→学校・法人一括購入ご検討の皆様へ

この本の概要

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

こんな方におすすめ

iOS，Android両対応のアプリケーションを開発したいエンジニア
スマホアプリ開発を効率よく行いたい方

この書籍に関連する記事があります！

iOS，Android両対応のアプリを実現する「ハイブリッド」というアプローチ: PCからスマートフォン／タブレットへと，ITの主戦場がとって代わろうとしている中，顧客ニーズにマッチしたスマートフォンアプリケーションを迅速に，低コストで開発できることの重要性が高まっています。

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

著者プロフィール

久保田光則（くぼたみつのり）

東京都在住。アシアル株式会社に所属するUI/UXデザイナー兼ソフトウェアエンジニア。社内では，HTML5ハイブリッドアプリの開発に多数関わる。優れたデザインとエンジニアリングを両立したオーバークオリティなアプリケーションの開発を実現するために日々，頑張る。

アシアル株式会社（あしあるかぶしきがいしゃ）

Asial Corporation
PHPなどのサーバサイドの技術と，PhoneGapなどのスマートフォン関連を中心とした開発を手がける技術ベンチャー。HTML5ハイブリッドアプリをブラウザ上で開発できるMonaca（http://monaca.mobi）や，PhoneGapの日本語情報を配信するPhoneGap Fan（http://phonegap-fan.com/）などのウェブサービスを手がける。

この本に関連する書籍

Webフロントエンドハイパフォーマンスチューニング

Webサイト，Webアプリケーションをより高速にチューニングするための解説書です。リッチなWebサイト，Webアプリケーションの増加はとどまるところを知らず，これらの高...
最新iOSプログラミング徹底解説

iOS 8 SDKとXcode 6では，Objective-Cの他にSwift言語がサポートされたほか，フレームワーク全体に手が加えられ，大幅な機能追加が行われました。iOSのフレームワークに...
Android SDKポケットリファレンス

本書はAndroidアプリの開発者が悩んだときにすぐ手にとって調べられる，コンパクトなリファレンスブックです。実現したい機能のイメージがあれば目次から引き，メソッド...
Androidライブラリ実践活用［厳選111］

Andoroidアプリケーションの開発に役立つオープンソースライブラリが数多く公開されています。こうしたライブラリには質の高いプロダクトも多く，上手に活用することで...
iPhone／iPad開発ポケットリファレンス

ロングセラーシリーズに，スマートフォン／タブレットの代名詞といえるiPhone／iPadでアプリを開発するための知識をまとめたリファレンスが登場。「逆引き形式で目...
AndroidエンジニアのためのモダンJava

本書は，複雑かつ高度なAndroidアプリの開発に必要となる，Java言語の基礎を理解することに主眼を置いています。Android SDKについては触れず，Androidに関連するモダン...