Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
フロントエンド(HTML5)
タグ :
JavaScript
HTML5
Android
iOS
久保田です。『HTML5ハイブリッドアプリ開発[実践]入門』という本を書きました。技術評論社より12月20日付けで発売されます。

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)
Amazon.co.jpで詳細を見る


HTML5ハイブリッドアプリとは



HTML5ハイブリッドアプリとは、通常のiOSアプリやAndroidアプリと同じようにストアからインストールできるけれども、アプリの内側ではHTML5などのウェブ技術で開発されているアプリです。AndroidやiOSなどの複数のプラットフォームに対応できる点や、標準化されているHTML5などのウェブ技術によって開発でき、かつモバイルOSのネイティブAPIを利用できる点などで注目を浴びています。

本書は、今までHTML5ハイブリッドアプリを開発したことがない人向けの入門的な内容から、ハイブリッドアプリの裏側の仕組みなどのアプリ開発に関わるエンジニアのための高度な知識まで、HTML5ハイブリッドアプリ開発に関することの多くを網羅した実践的な一冊です。

内容



本書の内容は前半の基礎編と後半の実践編のふたつに分かれています。
基礎編では、HTML5によるハイブリッドアプリの概要、iOSやAndroidアプリの開発環境の構築、ハイブリッドアプリを開発するためのフレームワークであるApache Cordova(PhoneGap)の導入などの入門的な内容を解説しています。

後半の実践編では、より良いモバイルアプリを開発するための実践的なノウハウの紹介、モバイルアプリ特有の事情の紹介、ハイブリッドアプリ特有のデバッグ手法やセキュリティに関する知識、アプリ開発に使える各種ストレージの解説、WebViewを使ったハイブリッドアプリの裏側の仕組み、WebViewの使い方などの実際にアプリを開発する際に必要となる知識を解説しています。

筆者が実際に関わったHTML5ハイブリッドアプリ開発やハイブリッドアプリ開発プラットフォームであるMonacaでの開発で得られた知識やノウハウなどをこの一冊に集約しています。本のタイトルには「入門」という言葉がついていますが、入門的な内容だけではなくHTML5ハイブリッドアプリに関する高度な内容も多く記述しています。

以下、目次です。

  1. PART 1 基礎編
  2.  第1章 ▶ HTML5ハイブリッドアプリとは
  3. 1.1 HTML5ハイブリッドアプリの概要
  4. 1.2 アプリ開発の課題
  5. 1.2.1 マルチプラットフォーム対応の必要性
  6. 1.2.2 マルチプラットフォーム対応の難しさ
  7. 1.3 HTML5ハイブリッドアプリの登場
  8. 1.4 アプリケーションの型
  9. 1.4.1 ネイティブアプリ
  10. 1.4.2 Webアプリ
  11. 1.4.3 ハイブリッドアプリ
  12. 1.5 ハイブリッドアプリの仕組み
  13. 1.6 ハイブリッドアプリの利点
  14. 1.7 ハイブリッドアプリの欠点
  15. 1.8 ハイブリッドアプリの事例
  16. 1.9 まとめ
  17. 第2 章 ▶ ハイブリッドアプリ開発の基盤
  18. 2.1 Web 技術
  19. 2.1.1 HTML
  20. 2.1.2 CSS
  21. 2.1.3 JavaScript
  22. 2.1.4 ライブラリ・フレームワーク
  23. 2.2 WebKitレンダリングエンジンの開発環境
  24. 2.3 iOSの開発環境
  25. 2.3.1 iOSアプリの開発環境を構築する
  26. 2.3.2 必要とする環境
  27. 2.3.3 Xcodeをインストールする 
  28. 2.3.4 Xcodeを起動する
  29. 2.3.5 新しいプロジェクトを作成する
  30. 2.3.6 プロジェクトを編集する
  31. 2.3.7 プロジェクトを実行する
  32. 2.3.8 実機での開発
  33. 2.4 Android の開発環境
  34. 2.4.1 Android(Android SDK+Eclipse)の開発環境を構築する
  35. 2.4.2 必要とする環境
  36. 2.4.3 Android SDKをインストールする
  37. 2.4.4 プロジェクトの作成
  38. 2.5 まとめ 
  39. 第3 章 ▶ ハイブリッドアプリ開発のためのフレームワーク
  40. 3.1 フレームワークの概要
  41. 3.2 フレームワークは何をしてくれるのか
  42. 3.3 Cordova(PhoneGap)
  43. 3.4 Triaina 
  44. 3.5 フレームワークを利用しない場合
  45. 3.6 サーバ・クラウド環境
  46. 3.6.1 PhoneGap Build
  47. 3.6.2 Trigger.io
  48. 3.6.3 Monaca
  49. 3.6.4 Icenium
  50. 3.7 まとめ
  51. 第4章 ▶ Cordovaを用いたアプリ開発の流れ
  52. 4.1 Cordovaを用いた開発環境を構築する
  53. 4.1.1 Node.js のインストール
  54. 4.1.2 cordova のコマンドラインツールをインストールする
  55. 4.1.3 プロジェクトを作成する 
  56. 4.1.4 Android 向けのコンポーネントをインストールする 
  57. 4.1.5 プロジェクト構造を確認する 
  58. 4.1.6 Androidエミュレータを利用する 
  59. 4.1.7 iOSシミュレータを利用する
  60. 4.1.8 実機でプロジェクトを実行する
  61. 4.1.9 基本的な開発の流れを理解する
  62. 4.1.10 ブラウザで確認する
  63. 4.1.11 cordovaコマンドの管理
  64. 4.2 Cordovaを用いてアプリを開発する 
  65. 4.2.1 www ディレクトリ以下の構造を確認する 
  66. 4.2.2 index.html
  67. 4.2.3 cordova.js
  68. 4.2.4 devicereadyイベント
  69. 4.3 アプリの設定
  70. 4.3.1 config.xmlの構造
  71. 4.3.2 アプリに関する設定
  72. 4.3.3 設定を反映させる
  73. 4.3.4 Android 特有の設定項目
  74. 4.3.5 iOS 特有の設定項目
  75. 4.3.6 アプリのアイコンを設定する 
  76. 4.3.7 アプリのスプラッシュスクリーンを設定する
  77. 4.3.8 ドメインホワイトリストを設定する
  78. 4.4 プラットフォームごとにカスタマイズする 
  79. 4.4.1 HTML5 側をプラットフォームごとに切り替える
  80. 4.4.2 ネイティブ側をプラットフォームごとに切り替える
  81. 4.5 Cordovaプラグインを利用する 
  82. 4.5.1 プラグインを導入する
  83. 4.5.2 プラグインを管理する
  84. 4.5.3 プラグインのインストールを理解する
  85. 4.5.4 プラグインの仕組み
  86. 4.5.5 組み込みプラグインの一覧
  87. 4.5.6 Android 向けのCordovaプラグインを実装する
  88. 4.5.7 Android 向けのプラグイン開発の詳細
  89. 4.5.8 iOS 向けのCordovaプラグインを実装する
  90. 4.5.9 cordovaコマンドからインストールできるプラグインを実装する 
  91. 4.6 その他のコマンドの解説
  92. 4.7 既存のアプリにCordovaを組み込む
  93. 4.7.1 Cordovaフレームワークのダウンロード
  94. 4.8 Android のプロジェクトにCordovaフレームワークを導入する 
  95. 4.8.1 画面の一部でCordovaを用いる
  96. 4.9 iOSのプロジェクトにCordovaフレームワークを導入する
  97. 4.9.1 画面にCordovaを用いる
  98. 4.9.2 wwwディレクトリに配置する
  99. 4.9.3 Cordovaフレームワークを呼び出すコードを記述する
  100. 4.10 plugmanコマンドを使ってCordovaプラグインを導入する 
  101. 4.10.1 plugmanコマンドのインストール
  102. 4.10.2 plugmanコマンドを使ってCordovaプラグインを導入する
  103. 4.11 まとめ 
  104. PART 2 実践編
  105.  第5章 ▶ より良いアプリを開発するためのテクニック
  106. 5.1 aタグやclickイベントは使わない
  107. 5.1.1 Tappableを使う
  108. 5.1.2 FastClickを使う
  109. 5.2 jQueryの代わりにZepto.jsを利用する 
  110. 5.2.1 Zepto.js の導入
  111. 5.2.2 Zepto.jsを利用する
  112. 5.3 ダイアログを表示する
  113. 5.3.1 Cordova のNotificationプラグインを利用する
  114. 5.4 タップ時のハイライトを消す 
  115. 5.5 ポップアップメニューを消す
  116. 5.6 ユーザが文字を選択できないようにする
  117. 5.7 コンテンツの一部に慣性スクロールを用いる 
  118. 5.8 iOS版よりもAndroid 版を先に開発する
  119. 5.9 インジケータを利用する 
  120. 5.9.1 Spin.jsの導入
  121. 5.10 文字の大きさの自動調整を無効にする
  122. 5.11 DOMツリーに加える変更を減らす
  123. 5.11.1 再描画のコストを減らす
  124. 5.11.2 DOM 操作の繰り返しが描画を遅くする
  125. 5.11.3 DOM への挿入を一度にまとめる
  126. 5.11.4 一度DOMツリーから切り離して操作した後に挿入する
  127. 5.12 レイアウトの再計算のコストを抑える 
  128. 5.12.1 レイアウトの再計算について
  129. 5.12.2 要素の大きさを固定する
  130. 5.12.3 絶対位置を指定する
  131. 5.12.4 CSS Transformsを用いる
  132. 5.12.5 DOMツリーを複雑にしない
  133. 5.13 実機で確認する
  134. 5.13.1 iOSシミュレータの欠点
  135. 5.13.2 Androidエミュレータの欠点
  136. 5.14 JSONを扱う
  137. 5.14.1 JSONをパースする,JSON に変換する
  138. 5.14.2 JSON の文法
  139. 5.14.3 JSON の誤ったパース
  140. 5.15 CSSアニメーションを利用する
  141. 5.15.1 JavaScriptでアニメーションしない
  142. 5.15.2 CSSアニメーションとは
  143. 5.15.3 transitionスタイルプロパティを使う
  144. 5.15.4 JavaScriptからCSSアニメーションを利用する
  145. 5.15.5 CSSアニメーション関連のイベントを把握する
  146. 5.15.6 CSSアニメーションをJavaScriptからキャンセルする
  147. 5.15.7 CSSアニメーションをより滑らかに描画する
  148. 5.15.8 iOS 端末でのちらつきを抑える
  149. 5.16 アプリを実行している端末の情報を得る
  150. 5.16.1 ユーザエージェントからプラットフォームを判別する
  151. 5.16.2 Cordova(PhoneGap)を用いて端末の情報を取得する
  152. 5.17 Android 4.03のWebViewとassetに関するバグに対処する 
  153. 5.17.1 バグを再現する
  154. 5.18 Androidデバイスのボタンに対応する 
  155. 5.18.1 Cordovaを使っている場合
  156. 5.18.2 WebViewの場合
  157. 5.19 イベントの移譲 
  158. 5.19.1 イベントバブリング
  159. 5.19.2 イベントの移譲
  160. 5.19.3 Zepto.jsを使ったイベントの移譲
  161. 5.20 HTML5とネイティブの切り分け
  162. 5.20.1 HTML5だけですべて実装できない状況
  163. 5.20.2 ある画面・ある箇所のみネイティブで実装する
  164. 5.20.3 HTML5とネイティブとの弱点を補い合う
  165. 5.21 まとめ 
  166. 第6章 ▶ ストレージ 
  167. 6.1 ストレージの概要 
  168. 6.2 WebStorage
  169. 6.3 LocalStorage 
  170. 6.3.1 HTML5 ハイブリッドアプリでの利用
  171. 6.3.2 Android のWebViewで利用する
  172. 6.3.3 iOS のUIWebViewクラスで利用する
  173. 6.3.4 データを保存する
  174. 6.3.5 データにアクセスする
  175. 6.3.6 データを削除する
  176. 6.3.7 容量の制限
  177. 6.3.8 残りの容量を知る
  178. 6.3.9 利用シーン
  179. 6.4 SessionStorage 
  180. 6.4.1 性質
  181. 6.4.2 LocalStorageと同じAPI
  182. 6.4.3 Android,iOS のWebViewで利用する
  183. 6.4.4 容量
  184. 6.4.5 利用シーン
  185. 6.5 ファイルストレージ 
  186. 6.5.1 ファイルストレージAPIとは
  187. 6.5.2 実装されているAPI
  188. 6.5.3 セットアップ
  189. 6.5.4 ファイルストレージAPI の利用
  190. 6.5.5 ファイルの読み込み
  191. 6.5.6 ファイルを書き込む
  192. 6.5.7 ファイルをテキストとして読み込む
  193. 6.5.8 ファイルやディレクトリの移動・コピー・削除・その他の操作
  194. 6.5.9 ファイルストレージの詳細
  195. 6.5.10 制限
  196. 6.5.11 利用シーン
  197. 6.6 WebSQLデータベース
  198. 6.6.1 WebSQLデータベースの概要
  199. 6.6.2 Androidで利用する
  200. 6.6.3 iOSで利用する 
  201. 6.6.4 CordovaのWebSQLデータベースを用いる 
  202. 6.6.5 利用できるSQL
  203. 6.6.6 データベースの利用
  204. 6.6.7 データベーステーブルの作成
  205. 6.6.8 トランザクションの発行 
  206. 6.6.9 トランザクション内でロールバックする
  207. 6.6.10 明示的にロールバックする 
  208. 6.6.11 読み込み専用のトランザクションを発行する
  209. 6.6.12 SQLを発行する 
  210. 6.6.13 プレースホルダ 
  211. 6.6.14 マイグレーション 
  212. 6.6.15 SQLite のバージョンを調べる
  213. 6.6.16 外側から実体ファイルを取り出してSQLiteで操作する
  214. 6.6.17 利用シーン
  215. 6.7 モバイルBaaS
  216. 6.7.1 モバイルBaaSがやってくれること
  217. 6.7.2 モバイルBaaS の紹介
  218. 6.7.3 オープンソースのモバイルBaaS
  219. 6.7.4 利用シーン
  220. 6.8 まとめ
  221. 第7 章 ▶ モバイル特有の事情
  222. 7.1 タッチの検知
  223. 7.1.1 JavaScriptから扱うイベント 
  224. 7.1.2 touchenter,touchleaveイベント
  225. 7.1.3 イベントのプロパティ
  226. 7.1.4 タッチオブジェクト 
  227. 7.1.5 タッチ座標を得る 
  228. 7.1.6 スクロールを防止する
  229. 7.1.7 Chromeでタッチイベントを発生させる
  230. 7.1.8 マウス関連のイベントの兼ね合い 
  231. 7.1.9 マウス関連のイベントを利用しない
  232. 7.1.10 Androidでtouchstartイベントとtouchendイベントがしばしば対応しない 
  233. 7.2 ジェスチャの検知 
  234. 7.2.1 ジェスチャイベント
  235. 7.2.2 Androidでもジェスチャを検知するには 
  236. 7.3 ジェスチャを判別するライブラリ
  237. 7.4 端末のオリエンテーション
  238. 7.4.1 端末のオリエンテーションを知る 
  239. 7.4.2 端末のオリエンテーションが変わるときを検知する 
  240. 7.4.3 端末のオリエンテーションをメディアクエリから扱う
  241. 7.4.4 Android 4.03 のメディアクエリにオリエンテーションを指定するときのバグ 
  242. 7.4.5 オリエンテーションを判別するメディアクエリをJavaScript から呼び出す
  243. 7.4.6 オリエンテーションに対応しないという選択肢もある
  244. 7.5 viewportに対応する 
  245. 7.5.1 viewportとは
  246. 7.5.2 基本
  247. 7.5.3 パラメータ
  248. 7.5.4 iPhone,iPod touch 向けベストプラクティス 
  249. 7.5.5 Androidでのviewport 
  250. 7.5.6 target-densitydpiパラメータを指定する 
  251. 7.5.7 densityの違いを検証する 
  252. 7.5.8 target-densitydpiパラメータを指定したときのレイアウト 
  253. 7.5.9 width パラメータをJavaScriptでエミュレーションする
  254. 7.6 まとめ 
  255. 第8 章 ▶ デバッグ
  256. 8.1 weinreによるWebインスペクタ
  257. 8.1.1 weinreでできること 
  258. 8.1.2 weinre の導入
  259. 8.2 iOSでのリモートWebインスペクタ
  260. 8.2.1 利用できる機能 
  261. 8.2.2 利用するための準備 
  262. 8.2.3 リモートWebインスペクタを開く
  263. 8.3 Chrome のリモートWebインスペクタ 
  264. 8.3.1 Android 4.4 以降でChrome のインスペクタを利用する
  265. 8.4 AndroidでJavaScript のエラーやログを記録する 
  266. 8.4.1 Androidアプリのログを取得する 
  267. 8.4.2 エラーログを記録する 
  268. 8.5 まとめ 
  269. 第9 章 ▶ メモリの計測・節約
  270. 9.1 メモリ節約の重要性 
  271. 9.1.1 メモリスワッピングを利用できないiOSとAndroid
  272. 9.2 iOSやAndroid 端末のメモリ容量 
  273. 9.2.1 iOS 端末の持つメモリ容量
  274. 9.2.2 Android 端末の持つメモリ容量
  275. 9.3 メモリ使用量を計測する 
  276. 9.3.1 仮想メモリ 
  277. 9.3.2 iOSでメモリを計測する
  278. 9.3.3 Androidでメモリを計測する
  279. 9.4 メモリを節約するテクニック 
  280. 9.4.1 HTML5 ハイブリッドアプリが消費するメモリ
  281. 9.4.2 JavaScript のメモリ管理
  282. 9.4.3 サイズの大きな画像の利用を抑える
  283. 9.4.4 オブジェクトをプールする 
  284. 9.4.5 JavaScriptで必要のない参照をしない 
  285. 9.5 まとめ 
  286. 第10 章 ▶ HTML5ハイブリッドアプリのセキュリティ
  287. 10.1 Webアプリとは違ったHTML5ハイブリッドアプリのセキュリティ問題
  288. 10.2 Android・iOSのサンドボックス 
  289. 10.2.1 サンドボックスとは
  290. 10.2.2 iOS のサンドボックス 
  291. 10.2.3 Android のサンドボックス
  292. 10.3 HTML5ハイブリッドアプリでのXSSの危険性
  293. 10.3.1 XSSを通じてネイティブブリッジを利用される 
  294. 10.3.2 iOS の場合の危険性
  295. 10.3.3 Android の場合の危険性
  296. 10.4 改ざんやコードをのぞかれる可能性を考慮する
  297. 10.4.1 Android のapkパッケージに含まれているリソースを取り出す 
  298. 10.4.2 iOS のipa パッケージに含まれているリソースを取り出す
  299. 10.4.3 パッケージの内容の盗難・改ざんを考慮する 
  300. 10.5 console.logメソッドを用いて大事な情報を書き込まない
  301. 10.6 まとめ
  302. 第11章 ▶ JavaScriptとネイティブとのブリッジ
  303. 11.1 JavaScript からネイティブの機能を呼び出すいくつかの方法 
  304. 11.2 ネイティブブリッジに必要とされる要件 
  305. 11.3 addJavascriptInterface 方式
  306. 11.3.1 実装 
  307. 11.3.2 値の受け渡し
  308. 11.3.3 Java 側ではスレッドセーフにする
  309. 11.3.4 適用範囲の制限
  310. 11.3.5 セキュリティ上の懸念
  311. 11.3.6 公開するメソッドを制限する
  312. 11.4 ネイティブからJavaScriptへ値を渡す
  313. 11.4.1 iOS の場合
  314. 11.4.2 Android の場合
  315. 11.4.3 値を渡す
  316. 11.5 カスタムURL スキーム方式
  317. 11.5.1 Androidでの実装
  318. 11.5.2 iOSでの実装 
  319. 11.6 iOSで特定のページの読み込みを制限する
  320. 11.6.1 webView:shouldStartLoadWithRequest:navigationType:を用いる 
  321. 11.6.2 NSURLProtocolクラスを用いる 
  322. 11.7 JsAlert 方式
  323. 11.7.1 実装 
  324. 11.8 ローカルHTTPサーバ方式
  325. 11.8.1 ローカルにHTTP サーバを構築する
  326. 11.8.2 トークンによる利用の制限
  327. 11.9 まとめ
  328. 第12 章 ▶ WebViewを使ってHTML5ハイブリッドアプリを開発する
  329. 12.1 Android のWebViewを使ってHTML5ハイブリッドアプリを開発する
  330. 12.1.1 WebViewを表示する
  331. 12.1.2 WebViewを設定する
  332. 12.1.3 WebSettingsを設定する
  333. 12.1.4 WebViewClientを設定する
  334. 12.1.5 WebChromeClientを設定する
  335. 12.1.6 ダイアログを設定する
  336. 12.1.7 consoleオブジェクトの挙動を設定する
  337. 12.1.8 アクティビティのライフサイクルに対応する
  338. 12.1.9 WebViewからJavaScriptを実行する
  339. 12.2 iOSのWebViewを使ってHTML5ハイブリッドアプリを開発する
  340. 12.2.1 基本となるコード
  341. 12.2.2 UIWebViewクラスを設定する
  342. 12.2.3 UIWebViewDelegateを設定する
  343. 12.2.4 ViewControllerクラスが破棄されたときにUIWebViewオブジェクトを破棄する
  344. 12.3 まとめ
  345. コラム:アプリのマーケット公開のポイント

終わりに



発売日は12月20日ですが早い書店だともう並んでいるようです。Kindle版も同時発売です。HTML5ハイブリッドアプリに興味がある方は是非読んでみてください。

コメント

  • まる

    MacではKindle版は読めないので
    Kinoppy(紀伊國屋)で配信して頂ければ嬉しいです。

  • 久保田

    コメント有難うございます。

    >MacではKindle版は読めないので
    >Kinoppy(紀伊國屋)で配信して頂ければ嬉しいです。
    Kinoppyで配信する予定は現在のところありませんが、GDP(Gihyo Degital PUblishing)ではPDFやEPUBが配信されています。以下のウェブページを参照下さい。
    https://gihyo.jp/dp/ebook/2013/978-4-7741-6239-3

  • まる

    PDF版あったんですね!
    さっそく購入させて頂きますね。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事