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

[表紙][iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門

A5判/384ページ

定価(本体2,880円+税)

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/)などのウェブサービスを手がける。