書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門（1）

Cordovaを用いた開発環境を構築する

Mobile Android Cordova iOS Node.js PhoneGap

2014年2月10日

Cordovaフレームワークを用いてハイブリッドアプリを開発するための基本的な手順を紹介。書籍転載の1本目（「Part 1《基礎編》第4章　Cordovaを用いたアプリ開発の流れ」より）。

　オープンソースのフレームワーク「Apache Cordova」（Adobe版：「 PhoneGap」）を用いると、HTML5でiOSとAndroid向けのアプリをまとめて作成できます。この連載記事（＝書籍転載）の第1回（＝今回）～第6回で、その開発方法を一通り解説しています。また、第7回からは、「JavaScriptコード」と「iOS／Andoridネイティブ機能」をつなぐ仕組みを説明しています。

書籍転載について

　本コーナーは、技術評論社発行の書籍『［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

　『［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』の詳細や購入は技術評論社のサイトや目次ページをご覧ください。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。

　Cordovaは、開発者に最も利用されているハイブリッドアプリ開発フレームワークの1つです。この章では、このCordovaを用いて実際に簡単なiOSアプリとAndroidアプリを開発する手順を紹介します。

　具体的には、以下のような順番で解説します。

開発環境を構築する
プロジェクトを作成・管理する
アプリを開発する
Cordovaプラグインを利用する
既存のアプリにCordovaを組み込む

　最初に、Cordovaを用いた開発環境を構築する手順を説明し、導入したcordovaコマンドを用いてプロジェクトを作成して動作確認するところまでを説明します。次に、Cordovaを用いてアプリを開発する際に、Cordovaについて知っておかなければならない基礎知識を説明します。アプリの開発方法を学んだ後は、Cordovaのプラグインの利用について説明します。プロジェクトへのプラグインの組み込みや、プラグインの自作について解説します。最後に、既存のアプリに対してCordovaフレームワークを組み込む方法や、画面の一部にのみCordovaを用いる方法を説明します。

　ハイブリッドアプリでは、Web技術を用いてアプリを開発できると言っても、各プラットフォームの開発の違いを完全に吸収できるわけではありません。この章では併せてCordovaと関連するプラットフォームごとの違いも説明します。

　この章の記述は、第2章（※転載対象ではないため書籍をご参照ください）で説明したAndroid、iOSアプリの開発環境をすでに構築していることを前提とします。また、CordovaはiOSやAndroid以外にも多くのモバイルプラットフォームに対応していますが、ここではiOSとAndroidでの開発について解説します。

　Cordovaのバージョンは、執筆時（2013年）時点で最新のCordova3.0.6を利用しています。

4.1　Cordovaを用いた開発環境を構築する

　Cordovaでは従来から、iOSやAndroidなどの各種プラットフォーム向けネイティブコードによる実行時のフレームワークを提供しています。Cordovaで開発したハイブリッドアプリがモバイル端末内で動作するときには、このフレームワークも同時に動いています。ここでは、このフレームワークをCordovaフレームワークと呼びます。

　Cordova3.0から、Cordovaフレームワークとは別に、Cordovaを用いたアプリのプロジェクトを管理するためにNode.js製のコマンドラインツールが導入されるようになりました。

　Node.jsは、非同期I/Oを特徴とするJavaScript処理系です。JavaScriptのエンジンとして、Chromeがオープンソースで公開しているV8を利用しています。

　Cordovaが提供するこのコマンドラインツールは、Cordovaフレームワークを用いたアプリのプロジェクトの作成・管理に利用されます。このツールをインストールすると、ターミナルでcordovaコマンドが利用できるようになります。開発者は、cordovaコマンドによって開発したいアプリのプロジェクトのひな形を生成できます。AndroidとiOSなど、複数のプラットフォームに向けたアプリを開発する際にもワンソースでクロスプラットフォームな構成のプロジェクトをcordovaコマンドで作成することができます。

　従来は、開発者は手動でCordovaフレームワークをプラットフォームごとのプロジェクトにセットアップする必要がありましたが、このコマンドラインツールにより、すばやくプロジェクトを作成して開発を始めることができるようになりました。また、各プラットフォーム用のプロジェクトは開発者が手動で作成する必要がありましたが、cordovaコマンドを用いることですばやく各プラットフォームに対応するプロジェクトをセットアップできます。

　本書では、Cordovaが提供するNode.jsのコマンドラインツールをcordovaコマンド、各プラットフォームのOSで実行時に動作するフレームワークをCordovaフレームワークと呼びます。

4.1.1　Node.jsのインストール

　cordovaコマンドを導入するために、まずNode.jsをインストールします。下記のURLからNode.jsのWebサイトにアクセスし、その表示に従って開発マシンにNode.jsをインストールしてください。

［LINK］Node.js

　Node.jsをインストールすると、Node.jsのパッケージマネージャであるnpmも同時にインストールされます。ターミナルを開き、下記のようにしてNode.jsとnpmがインストールされているかどうかを確認してください。成功すれば、Node.jsとnpmのバージョンが表示されます。

Bash

$ node -v

v0.10.12

$ npm -v

1.2.32

　開発者はnpmを通じて、Node.jsの様々なライブラリやツールをインストールすることができます。Cordovaのコマンドラインツールもこのnpmを用いてインストールします。

4.1.2　cordovaのコマンドラインツールをインストールする

　npmがインストールできたら、Cordovaのコマンドラインインターフェイスであるcordovaコマンドを、npmを通じてインストールします。ターミナルを開いて、以下のようにnpmコマンドを実行してください。

Bash

$ npm install cordova -g

　依存するライブラリがインストールされるので、完了するまで数分待ちます。インストールされたら、バージョンを確認して正しく起動できるかどうかを確かめてください。npm installコマンドに-gオプションを付けるのを忘れないでください。 -gオプションは、そのマシンのグローバルな領域にインストールするという意味です。

　また、LinuxやMac OS X環境で「npm ERR ! Please try running this command again as root/Administrator.」と表示された場合は、以下のようにnpmコマンドの前にsudoコマンドを付けて管理者権限で実行してください。

Bash

$ sudo npm install cordova -g

　インストールしたら、バージョンを確認して正しく起動できるかどうかを確かめてください。

Bash

$ cordova -v

3.0.6

　cordovaコマンドは、Android SDKに含まれているコマンドを内部で利用するため、Android SDKに含まれているディレクトリにパスを通す必要があります。Android向けアプリを開発する際には、あらかじめ次のように、（Android SDKを展開したディレクトリ）/sdk/toolsと/sdk/platform-toolsディレクトリにパスを追加します。ここでは、Mac OS Xのターミナルにおいてデフォルトで利用されているBashの設定ファイルである .bash_profile以下にパスを追加しています。

　以下のように環境に応じてパスを設定してください。

Bash

$ echo "export PATH=$PATH:path/to/adt-bundle-mac-x86_64-20130729/sdk/tools/" ¥

>> ~/.bash_profile

$ echo "export ¥

PATH=$PATH:path/to/adt-bundle-mac-x86_64-20130729/sdk/platform-tools/" ¥

>> ~/.bash_profile

$ source ~/.bash_profile

　Android SDKのパスを追加したら、ターミナルからandroidコマンドとadbコマンドが実行できることを確認してください。

Bash

$ android -h

Usage:

android [global options] action [action options]

Global options:

（以下略）

$ adb version

Android Debug Bridge version 1.0.31

　一度.bash_profileファイル以下にPATHを設定すると、次回のターミナル起動時からはこの手順は不要になります。

4.1.3　プロジェクトを作成する

　cordovaコマンドのインストールが完了したら、次はcordovaコマンドを用いたプロジェクトを作成します。AndroidとiOSの開発ができるプロジェクトを作成します。cordova createコマンドを用いて以下のようにプロジェクトを作成します。

Bash

$ cordova create hello com.example.hello HelloWorld -d

　このコマンドは、helloディレクトリ以下にアプリの識別子としてcom.example.helloを持つ「HelloWorld」という名前のアプリのプロジェクトを作成します。 -dオプションは、cordovaコマンド実行中の途中経過を表示するオプションです。

　次に、プロジェクトにAndroidとiOS用のファイルを追加します。以下のようにhelloディレクトリ以下に移動してcordova platformコマンドを実行します。iOSとAndroid用のプロジェクトファイルが追加されます。

Bash

$ cd hello

$ cordova platform add ios

$ cordova platform add android

　このコマンドを実行すると、iOSアプリのためのXcodeプロジェクトが生成されます。本書では解説しませんが、webOSやWindows Phoneなどの他のプラットフォームもこのコマンドで追加できます。

　プロジェクトが現在どのようなプラットフォームに向けて開発されているのかを知るには、cordova platform lsコマンドを実行します。

Bash

$ cordova platform ls

[ 'ios' ]

　プラットフォームから外すには、次のようにcordova platoform removeコマンドを用います。

Bash

$ cordova platform remove ios

4.1.4　Android向けのコンポーネントをインストールする

　対応プラットフォームにAndroidを追加すると、次のようなエラーが出る場合があります。

Bash

$ cordova platform add android

[Error: Please install Android target 17 (the Android 4.2 SDK). Make sure you have the latest Android tools installed as well. Run `android` from your command-line to install/update any missing SDKs or tools.]

　この場合には、Android SDK Managerを起動して、エラーメッセージに該当するパッケージをインストールします。以下のようにandroidコマンドを実行すると、Android SDK Managerが起ち上がります。エラーメッセージ中に記述されているAndroid 4.2. 2 SDKをインストールします（図4.1）。

Bash

$ android

図4.1　Android SDK ManagerからAndroid 4.2 SDKをインストールする

　Android 4.2関連のコンポーネントにチェックを入れて、［Install Packages］ボタンを押します。すると、インストールするコンポーネントのライセンスを確認する画面に移動します。すべてのコンポーネントのライセンスを確認して［Accept］にチェックを入れます。［Install］ボタンを押すと、インストールが始まります。しばらくしてAndroid SDK Managerの該当するコンポーネントの横に、インストールされている旨が表示されればインストールは完了です。完了後、再びcordova platform add androidコマンドを実行します。

Bash

$ cordova platform add android

4.1.5　プロジェクト構造を確認する

　ここでいったんプロジェクトのディレクトリ構造を確認します。cordovaコマンドで作成したプロジェクトのディレクトリ構造は以下のようになります。

hello/
├ .cordova	-> cordovaプロジェクト設定ファイルが格納されている
├ www	-> HTML5リソースやアプリ設定に関するファイル
├ platforms	-> 各プラットフォーム特有のプロジェクトファイルが記述されている
├ merges	-> 各プラットフォーム特有のリソース wwwディレクトリがプラットフォームごとにコンパイルされる際にマージされる
└ plugins	-> Cordovaプラグインが格納されている

　.cordovaディレクトリには、cordovaコマンドで作成したプロジェクト自体の設定が格納されます。例えば、cordova createコマンドの実行時に指定したアプリ名やアプリの識別子の情報は、このディレクトリのconfig.jsonに保管されます。cordovaコマンドは、この.cordovaディレクトリでプロジェクトを識別します。プロジェクトのサブディレクトリ以下でcordovaコマンドを用いてプロジェクトを編集するときでも、cordovaコマンドの内部では親ディレクトリをたどって.cordovaディレクトリを探して識別します。

　wwwディレクトリには、HTML5で記述したアプリのコードや、Cordovaフレームワークが設定ファイルとして利用するXMLファイルなどが含まれています。ハイブリッドアプリ開発者は、主にこのwwwディレクトリ以下にHTMLやCSS、JavaScriptを記述してアプリを開発することになります。

　platformsディレクトリ以下には、あるモバイルプラットフォーム特有のファイルが作成されます。例えば、Androidの場合にはAndroidアプリを作成するためのantプロジェクトが生成され、iOSの場合にはXcodeプロジェクトが生成されます。開発者は、プラットフォーム特有のカスタマイズをしたい場合、platformディレクトリ以下のファイルを編集します。

　mergesディレクトリには、プラットフォーム特有のHTML5リソースを配置します。例えば、Androidプラットフォームだけで用いたい画像やJavaScriptをmerges/androidディレクトリ以下に配置します。アプリで利用するリソースがプラットフォームごとに違っていたり、完全にワンソースでマルチプラットフォーム対応するのが難しかったりする場合などに利用されます。

　plugins以下は、Cordovaで利用するプラグインやその設定ファイルを格納する場所です。

　Cordovaでは、ネイティブ機能へのアクセスをプラグインというかたちで管理しています。必要なネイティブ機能を使いたい場合には、該当するプラグインをプロジェクトに導入します。

4.1.6　Androidエミュレータを利用する

　AndroidでもiOSでも、実機を使わず開発マシン上で動作確認できるようにするために、AndroidエミュレータやiOSシミュレータが提供されています。

　Androidエミュレータを利用するには、cordova emulateコマンドを使います。

Bash

$ cordova emulate android -d

　このコマンドを実行してしばらくすると、Androidエミュレータが起動します。プロジェクトが実行されるのを確認してください。

4.1.7　iOSシミュレータを利用する

　プロジェクトがビルドされてアプリが生成されます。cordovaコマンドがiOSアプリを実行するとき、iOSシミュレータをコマンドラインから扱うためのツールであるios -simを利用します。

　ios-simは、Homebrewからインストールします。Homebrewは、Mac OS X用のパッケージ管理ツールです。Homebrewを通じて様々なツールやライブラリをインストールできます。

　Homebrewをインストールしていない場合には、ターミナルから以下のコマンドを実行してHomebrewをインストールしてください。

Bash

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

　次に、Homebrewからios-simをインストールしてください。

Bash

$ brew install ios-sim

　ios-simのインストールが完了したら、cordova emulate iosコマンドを実行します。

Bash

$ cordova emulate ios -d

　成功すればiOSシミュレータが起動し、Cordovaアプリケーションが実行されます（図4.2）。

図4.2　Cordovaアプリケーション

4.1.8　実機でプロジェクトを実行する

　実機でプロジェクトを実行するには、cordova runコマンドに対象プラットフォームを指定して実行します。USBデバッグをONにしたAndroid端末と開発マシンをUSBケーブルで接続してから、cordova runコマンドを実行してください。

Bash

$ cordova run android

　cordova runコマンドは、以下の3つのことを同時に行うコマンドです。

wwwディレクトリ以下のファイルから、あるプラットフォーム用のプロジェクトを作成する
作成したプラットフォーム特有のプロジェクトをビルドする
ビルドしたアプリを端末やエミュレータにインストールして実行する

　成功すれば、Android端末にアプリがインストールされて実行されます。うまくいかない場合には、-dオプションを付けて詳細メッセージを表示しながらもう一度試してみましょう。

Bash

$ cordova run android -d

　iOSの場合、現在のCordova3.0.6ではcordovaコマンドによる実機へのアプリのインストールはサポートされていません。したがって、cordovaコマンドが生成したプロジェクトをXcodeで開いた上でプロジェクトを実行する必要があります。プロジェクトは、次のようにopenコマンドでplatoform/ios以下のHelloWorld.xcodeprojファイルを指定すると自動的にXcodeで開かれます。

Bash

$ open platoforms/ios/HelloWorld.xcodeproj

4.1.9　基本的な開発の流れを理解する

　さて、ここまでcordovaコマンドラインツールを使ってプロジェクトを作成し、実際にアプリをビルドして実機やエミュレータで実行する手順を説明しました。ここでいったん実際にアプリを開発する際の基本的な流れについて整理します。

プロジェクトを作成する
実機やエミュレータで動作を確認する
wwwディレクトリ以下のソースコードを編集する
2に戻る

　まず、開発者はcordovaコマンドを用いてプロジェクトを作成します。プロジェクトを作成する際には、アプリの動作対象とするプラットフォーム―ここではAndroidやiOS―を追加します。次に、実機やエミュレータで実行できるかどうかを確かめます。作成した直後は、何もソースコードを編集していない状態ですが、ここでcordova runコマンドやcordova emulateコマンドを実行して、プロジェクトが意図どおりに作成できているかどうかを確認します。

　プロジェクトが作成されていることを確認した後、プロジェクトのwww以下のディレクトリにあるWebリソースを編集してアプリのコードを記述します。それ以降は、動作確認とコード編集の繰り返しというサイクルに入ります。

4.1.10　ブラウザで確認する

　パソコンのブラウザであれば、使い慣れたWebインスペクタがすぐに利用できるので、ハイブリッドアプリでもパソコンのブラウザ上で実行できるようにしておくと便利です。いちいち端末やエミュレータ内で実行するよりも直接ブラウザで動作させたほうが、開発中は都合がよい場合もあります。

　cordovaコマンドには、作成したアプリをブラウザから読み込めるようにするために、アプリをホストするローカルなWebサーバを起ち上げることができます。

Bash

$ cordova serve android

Static file server running at

=> http://localhost:8000/

CTRL + C to shutdown

　cordova serveコマンドにプラットフォームを指定して実行すると、そのマシン上にそのプラットフォーム向けのファイルをホストするWebサーバが起ち上がり、そのWebサーバをホストしているアドレスが表示されます。

　パソコンのブラウザで表示されたアドレスにアクセスすると、指定したプラットフォーム向けのWebアプリを見ることができます。cordova serveコマンドを起ち上げてからwww以下を編集しても反映されないことに注意してください。wwwディレクトリ以下の編集を反映させたい場合には、いったんCTRL＋Cキーを押して終了し、もう一度cordova serveコマンドを実行してください。

4.1.11　cordovaコマンドの管理

　cordovaコマンドをアップデートするには、npmを通じて以下のコマンドを実行します。

Bash

$ npm update cordova -g

　環境によってsudoを付けることを忘れないでください。npm installコマンドでは、バージョンを指定したインストールが可能です。ある特定のcordovaコマンドをインストールしたい場合には、以下のように「@」とバージョンを指定してnpm installコマンドを実行してください。

Bash

$ npm install cordova@3.0.0 -g

■

　次回は「4.2 Cordovaを用いてアプリを開発する」を説明します。

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

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

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

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

（※【関連記事】：
　　「Monaca入門」）

※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
　連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。

1. 【現在、表示中】≫ Cordovaを用いた開発環境を構築する

2014年2月10日(月曜日)

書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門（1）