書籍概要

Software Design plus

［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門

著者
発売日
更新日

概要

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

こんな方におすすめ

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

目次

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

サポート

現在サポート情報はありません。

商品一覧