書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門（4）
Cordova：プラットフォームごとにカスタマイズする
アプリをクロスプラットフォーム対応にする際に、プラットフォームごとに少し違った挙動にする方法を解説。書籍転載の4本目。
オープンソースのフレームワーク「Apache Cordova」（Adobe版：「 PhoneGap」）を用いると、HTML5でiOSとAndroid向けのアプリをまとめて作成できます。この連載記事（＝書籍転載）の第1回～第6回で、その開発方法を一通り解説しています。また、第7回からは、「JavaScriptコード」と「iOS／Andoridネイティブ機能」をつなぐ仕組みを説明しています。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
前回は「4.3 アプリの設定」を説明しました。本稿はその続きです。
■
4.4 プラットフォームごとにカスタマイズする
アプリをクロスプラットフォーム対応にする際に、プラットフォームごとに少し違った挙動をさせたい場合がしばしばあります。
特定のプラットフォームでしかサポートされていない機能を使いたい場合には、その処理の部分の挙動をプラットフォームごとに変更しなければ実装できません。また、モバイルプラットフォームごとにOSがユーザに提供するユーザインターフェイスが違うので、iOSやAndroidで見た目を変えなくてはならない場合があります。
cordovaコマンドで作成したプロジェクトは、Cordovaを用いたハイブリッドアプリにプラットフォーム特有の挙動をさせたい場合に利用するリソースを簡単に切り替えられるようになっています。ここでは、以下の2つの方法を紹介します。
- HTML5側をプラットフォームごとに切り替える
- ネイティブ側をプラットフォームごとに切り替える
4.4.1 HTML5側をプラットフォームごとに切り替える
まず、Webリソースをプラットフォームごとに切り替える方法を紹介します。プロジェクトのディレクトリには、mergesディレクトリがあります。以下のようにcordova platform addコマンドでプロジェクトにプラットフォーム対応を追加すると、mergesディレクトリ以下にもそのプラットフォームのディレクトリができます。
|
$ cordova platform ls
[ 'android', 'ios' ]
$ ls merges/
android ios
|
このディレクトリには、ある特定のプラットフォームでのみアプリに同梱するファイルを置くことができます。
例えば、merges/androidディレクトリに置いたファイルは、cordovaプロジェクトをビルドする際にAndroid特有のプロジェクトファイルのwwwディレクトリの中身にマージされます。具体的には、wwwディレクトリの内容はAndroidではplatforms/android/assets/wwwディレクトリ以下にコピーされた後、merges/androidディレクトリの内容がplatforms/android/assets/wwwディレクトリ以下にさらにコピーされます。同じ名前のファイルがある場合には上書きされます。
4.4.2 ネイティブ側をプラットフォームごとに切り替える
HTML5に関連するリソースではなく、ネイティブコードを切り替えたい場合には、platformsディレクトリに生成されたプラットフォーム特有のプロジェクトファイルを修正します。
ここで、cordovaコマンドが生成する各プラットフォーム特有のプロジェクトの構造について説明します。
Androidでは、ビルドツールであるantでビルドできる構成のディレクトリが生成されます。
cordova runコマンドやcordova emulateコマンドは、このAndroid用のプロジェクトを実行するためにプロジェクトをビルドするantコマンドと、開発マシンとAndroid端末の間を取り持つadbコマンドを内部で利用します。
platforms/androidディレクトリの概観は以下のようになっています。
| platforms/android | |
|---|---|
| ├ AndroidManifest.xml | -> Androidアプリの情報を設定するファイル |
| ├ ant.properties | -> antツールの設定ファイル |
| ├ assets | -> Androidアプリが利用するリソースが入っているディレクトリ。 さらにこのディレクトリのwwwディレクトリにはcordovaがAndroidアプリ用に生成したアプリのファイルが納められている |
| ├ bin | -> ビルドしたファイルが入っているディレクトリ |
| ├ build.xml | -> Androidアプリをビルドする手順を示すファイル。 antが利用する |
| ├ cordova | -> cordovaがビルドの際に利用するシェルスクリプトを格納するディレクトリ |
| ├ gen | -> Android SDKがリソースから生成するJavaファイルを格納するディレクトリ |
| ├ libs | -> このAndroidプロジェクトで利用するJARファイルを格納するディレクトリ。 デフォルトではcordova.jarが入っている |
| ├ local.properties | -> Android SDKが生成したこの開発マシンに関する設定ファイル |
| ├ proguard-project.txt | -> proguard用の設定ファイル |
| ├ project.properties | -> Android SDKが生成したプロジェクトに関する設定ファイル |
| ├ res | -> Androidアプリが利用するリソースを納めるディレクトリ xml/config.xmlには、Android向けのCordovaフレームワークが参照する設定ファイルが配置されている |
| └ src | -> AndroidアプリのためのJavaのコードを格納するディレクトリ。 Cordovaフレームワークを呼び出すコードが入っている |
この生成されたAndroidプロジェクトを、Android SDKに付属するEclipseで開く方法を紹介します。
Android SDKのEclipseを起動した状態で、左のプロジェクト欄を右クリックし、［New］→［Other］を選択すると、ウィザードを選択するダイアログが開きます。ダイアログの中から、「Android Project from Existing Code」を選択して［Next］ボタンを押します。platforms/androidディレクトリをRootディレクトリとして選択して［Finish］ボタンを押すと、Eclipseのプロジェクトとしてインポートできます（図4.3）。
iOSでは、iOSアプリはXcodeでなければビルドできないので、Xcode用のプロジェクトが生成されます。cordova runコマンドやcordova emulateコマンドは、プロジェクトを実行するためにxcodebuildというXcodeのプロジェクトを実行するためのコマンドを内部で利用します。
platforms/iosディレクトリの概観は以下のようになっています。
| platforms/ios | |
|---|---|
| ├ CordovaLib | -> Cordovaフレームワークのプロジェクトが納められているディレクトリ |
| ├ HelloWorld | -> iOSアプリ用のプロジェクトのファイルが納められているディレクトリ |
| ├ Classes | -> Cordovaフレームワークを呼び出すコードが納められているディレクトリ |
| ├ HelloWorld-Info.plist | -> iOSアプリの情報を設定するファイル |
| ├ HelloWorld-Prefix.pch | -> コンパイルするすべてのコードの頭に付くファイル |
| ├ Plugins | -> プラグインのコードを納めるディレクトリ |
| ├ Resources | -> iOSアプリが利用するリソースファイルを納めるディレクトリ。 icons, splashディレクトリにはアイコンやスプラッシュスクリーン用の画像が納められている |
| ├ config.xml | -> Cordovaフレームワークが参照するiOSアプリ特有の設定ファイル |
| ├ main.m | -> iOSアプリのネイティブ側でのエントリポイント |
| ├ HelloWorld.xcodeproj | -> Xcode用のプロジェクト |
| ├ build | -> ビルドされた結果できあがるファイルを納めるディレクトリ |
| ├ cordova | -> cordovaがビルドの際に用いるシェルスクリプトが入っているディレクトリ |
| └ www | -> cordovaがiOSアプリ用に生成したアプリのファイルが納められているディレクトリ |
Xcodeでこのプロジェクトを開くには、ターミナルからopenコマンドでHelloWorld.xcodeprojを開きます。
|
$ open platforms/ios/HelloWorld.xcodeproj
|
もしくは、Finder上でplatforms/ios/HelloWorld/xcodeprojをダブルクリックします。
執筆時点のcordovaコマンドでは、若干プロジェクトの実行処理に時間がかかるようです。EclipseやXcodeからプロジェクトを実行したほうが処理が速いので、すばやくプロジェクト体的には、以下のような開発サイクルを取ります。
- wwwディレクトリ以下のHTMLやCSSなどのファイルを編集する
- cordova prepareコマンドを実行して各プラットフォームのプロジェクトに配置する
- EclipseやXcodeで実行する
EclipseはプロジェクトのファイルがEclipse以外から更新されても検知できないので、Eclipseで実行する前にプロジェクトのリフレッシュを実行することを忘れないでください。メニューから［File］→［Refresh］を選択するか、F5キーを押すと、プロジェクト内のファイルが更新されます。
■
次回は「4.5～4.5.5 Cordovaプラグインを利用する」を説明します。
久保田光則（くぼたみつのり）
東京都在住。アシアル株式会社に所属するUI/UXデザイナー兼ソフトウェアエンジニア。社内では，HTML5ハイブリッドアプリの開発に多数関わる。優れたデザインとエンジニアリングを両立したオーバークオリティなアプリケーションの開発を実現するために日々，頑張る。
アシアル株式会社（あしあるかぶしきがいしゃ、Asial Corporation）
PHPなどのサーバサイドの技術と，PhoneGapなどのスマートフォン関連を中心とした開発を手がける技術ベンチャー。HTML5ハイブリッドアプリをブラウザ上で開発できるMonacaや，PhoneGapの日本語情報を配信するPhoneGap Fanなどのウェブサービスを手がける。
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. Cordovaを用いた開発環境を構築する
Cordovaフレームワークを用いてハイブリッドアプリを開発するための基本的な手順を紹介。書籍転載の1本目（「Part 1《基礎編》 第4章 Cordovaを用いたアプリ開発の流れ」より）。
3. Cordova： アプリの設定
Apache Cordovaアプリの開発準備が整ったら、そのアプリや、iOS／Androidなど特定のプラットフォームでの挙動の詳細を設定しよう。書籍転載の3本目。
4. 【現在、表示中】≫ Cordova：プラットフォームごとにカスタマイズする
アプリをクロスプラットフォーム対応にする際に、プラットフォームごとに少し違った挙動にする方法を解説。書籍転載の4本目。
