• ← 前回
• 連載 INDEX
• 次回 →

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

　前回は「4.2 Cordovaを用いてアプリを開発する」を説明しました。本稿はその続きです。

■

4.3　アプリの設定

　Cordovaを用いたアプリには、アプリや特定のプラットフォームでの挙動の詳細を設定する様々なパラメータが存在します。

　アプリの設定は、wwwディレクトリ以下のconfig.xmlファイルを編集して行います。このconfig.xmlに記述した設定は、cordovaコマンドラインツールにより、各プラットフォーム特有のプロジェクトのconfig.xmlに反映されます。

　ここではconfig.xmlの基本的な構造やその設定項目を説明します。併せて、プラットフォームごとに異なるアプリのアイコンやスプラッシュスクリーンの設定についても説明します。

4.3.1　config.xmlの構造

　Cordovaが参照するconfig.xmlのスキーマは、W3Cの策定する以下の仕様に基づいています。

• ［LINK］Packaged Web Apps (Widgets) - Packaging and XML Configuration (Second Edition)

　この仕様は、汎用的なWebアプリをパッケージ化する際のメタデータを記述する設定ファイルのスキーマを定めています。config.xmlは、具体的にはリスト4.5のように構造化されています。

preference要素

　Cordovaフレームワークでは、実行時のフレームワークの挙動を設定で変更できます。name属性には設定の名前、value属性には設定の値を記述します。

access要素

　アプリ内で許可するドメインをホワイトリスト形式で記述します。この要素に記述されていないドメインでホストされているHTMLは読み込めません。

feature要素

　Cordovaフレームワークでは、端末のある特定のネイティブ機能へのアクセスをプラグインが提供します。Cordovaフレームワークは、実行時にこのfeature要素を見て、どのプラグインが有効になっているのかを知ります。feature要素では、アプリが利用するプラグイン名とそれに対応するネイティブ側のプラグインのクラス名を指定します。

　この設定は、後述するcordova pluginコマンドによって自動的に挿入されるので、多くの場合、開発者が記述する必要はありません。

content要素

　この要素では、Cordovaを用いたハイブリッドアプリが最初に読み込むHTMLのパスを指定します。デフォルトでは、index.htmlが読み込まれます。

4.3.2　アプリに関する設定

　www/config.xmlを編集して、アプリに関する基本的な情報を設定します。

　アプリの識別子は、widget要素のid属性で指定します。Androidアプリでは、アプリの識別子がアプリケーションのパッケージ名として利用されます。iOSでは、AppIDとして利用されます。アプリの識別子は、逆ドメイン形式で記述します。アプリのバージョンは、widget要素のversion属性で指定します（リスト4.7）。

　アプリ名は、widget要素以下にname要素を用いて記述します。アプリ名は、iOS用のプロジェクトではプロジェクト名としても利用されます（リスト4.8）。

　Cordovaフレームワーク用の設定値は、widget要素以下にpreference要素を用いて設定します。例えば、iOSのCordovaフレームワークで利用できる“DisallowOverscroll”の設定は、リスト4.9のように記述します。

　アプリに関する設定では、他にもアプリの概要を記述するdescription要素と、アプリの開発者について記述するauthor要素がありますが、これらはiOSとAndroidのプロジェクトではあまり利用されていないようです。

4.3.3　設定を反映させる

　ここでいったん設定を反映する手順を確認します。www/config.xmlを編集して変更した設定を、プラットフォーム別のプロジェクトに反映します。

　このコマンドを実行すると、プロジェクトの情報やコンテンツが、platformsディレクトリ以下の各プラットフォーム向けのプロジェクトに反映されます。

　config.xmlは、各プラットフォーム向けのプロジェクトディレクトリ以下にもあります。各プラットフォームのCordovaフレームワークが実際に実行時に読み込んでいる設定ファイルはそのconfig.xmlです。

　iOSのプロジェクトでは、platforms/ios/（アプリ名）/config.xmlにあります。Androidのプロジェクトでは、platforms/android/res/xml/config.xmlにあります。

4.3.4　Android特有の設定項目

　Androidアプリで利用できる設定項目は以下のようになります。

loadingDialog

　アプリの読み込み中に、ネイティブのロード中を表すダイアログを表示します。フォーマットは、「タイトル,読み込み中です…」です。

loadingPageDialog

　HTMLのページを読み込んでいるときに、ネイティブのロード中を表すダイアログを表示します。遷移してHTMLを読み込むたびに表示されます。フォーマットは、loadingDialog設定と同様です。

errorUrl

　アプリのエラーページを設定します。Androidプロジェクトのwwwディレクトリからのパスを指定します。

backgroundColor

　アプリの背景色を指定します。4バイトの16進数をサポートしています。最初の1バイトはアルファ値で、残りの3バイトは標準的なRGB値です。例えば、00000000は透明な黒です。真っ白にするにはffffffffです。

loadUrlTimeoutValue

　Cordovaがアプリを読み込む際に、タイムアウトエラーを投げるのをどれくらい待つかを設定します。

keepRunning

　アプリがバックグラウンドに回ってもCordovaを実行し続けるかどうかを設定します。trueかfalseを指定します。デフォルトはtrueです。

splashscreen

　res/drawableディレクトリ以下の画像を拡張子なしで指定します。

disallowOverscroll (boolean, defaults to false):

　Androidではオーバースクロールするときに、画面の端が光るような表現が用いられます。この設定では、オーバースクロール時の表現をなくすかどうかを設定します。trueかfalseを指定します。デフォルトはfalseです。

4.3.5　iOS特有の設定項目

　iOSアプリで利用される設定項目は以下のようになります。

DisallowOverscroll

　WebViewをオーバースクロールさせたくない場合にtrueを設定します。trueかfalseを指定します。デフォルトはfalseです。

TopActivityIndicator

　ステータスバーに表示されるインジケータの種類を設定します。このインジケータは、アプリがネットワーク通信するときなどに表示されます。Cordovaでは、ページの読み込み中にはこのインジケータが表示されます。執筆時の最新のCordova3.0.6にはバグがあり、このインジケータは表示されません。有効な値は、whiteLargeとwhiteとgrayです。デフォルトはgrayです。

EnableViewportScale

　metaタグによるviewportのスケールを有効にしない場合にtrueを設定します。trueにすると、metaタグのviewportでスケールが有効になりません。trueかfalseを指定します。デフォルトはfalseです。

AutoHideSplashScreen

　アプリの起動時に表示するスプラッシュスクリーンを消すタイミングをJavaScriptから指定するときにはfalseを指定します。trueかfalseを指定します。デフォルトはtrueです。

FadeSplashScreen

　スプラッシュスクリーンを表示・非表示するときにフェードイン・フェードアウトさせるかどうかを設定します。trueかfalseを指定します。フェードイン・フェードアウトさせたくない場合にはfalseを指定します。デフォルトはtrueです。

FadeSplashScreenDuration

　フェードイン・フェードアウトするときのアニメーションの長さを秒数で指定します。デフォルトは2です。小数点も指定できます。

ShowSplashScreenSpinner

　表示されたスプラッシュスクリーンの上にスピナーを表示しない場合にfalseを指定します。trueかfalseを指定します。デフォルトはtrueです。

MediaPlaybackRequiresUserAction

　HTML5videoタグの自動再生を許可しない場合にtrueを指定します。trueかfalseを指定します。デフォルトはfalseです。

AllowInlineMediaPlayback

　HTML5videoタグでのプレイバックを許可する場合にtrueを指定します。なお、HTML側でもvideoタグの属性にwebkit-playsinlineを追加しておく必要があります。trueかfalseを指定します。デフォルトはfalseです。

BackupWebStorage

　Webストレージをどこにバックアップするかを設定します。noneとcloudとlocalのいずれかを指定します。cloudを指定した場合、ストレージはiCloudにバックアップされます。localを指定した場合、iTunes経由でバックアップされます。Webストレージをバックアップしない場合には、noneを指定します。

KeyboardDisplayRequiresUserAction

　JavaScriptのfocusメソッドを通じて、フォーム要素にフォーカスしたとき、iOSのソフトウェアキーボードを表示したい場合にはfalseを設定します。trueかfalseを指定します。デフォルトはtrueです。

SuppressesIncrementalRendering

　すべてのビューを受け取ってからアプリ内部のHTMLをレンダリングする場合にtrueを設定します。trueかfalseを指定します。デフォルトはfalseです。

HideKeyboardFormAccessoryBar

　ソフトウェアキーボードの上に表示されるツールバーを消したい場合にtrueを設定します。このツールバーには、［Prev］［Next］［Done］ボタンが表示されます。trueかfalseを指定します。デフォルトはfalseです。

KeyboardShrinksView

　ソフトウェアキーボードが表示されるときに、キーボードの大きさに合わせてWebViewの高さを変更する場合にtrueを設定します。falseに設定すると、WebViewのサイズは変わらず、WebView上にソフトウェアキーボードがかぶさるようになります。trueかfalseを指定します。デフォルトはfalseです。

4.3.6　アプリのアイコンを設定する

　アプリのアイコンやスプラッシュスクリーンを設定するには、platforms以下のプラットフォームごとのプロジェクトを編集します。

　例として、Androidのアイコンを編集しましょう。platforms/android/resディレクトリにはAndroidアプリで利用するリソースが納められています。このディレクトリ以下にアイコンを表すPNGファイルを置きます。

　Androidのアイコンとして必要な画像ファイルは4つです。Androidは、様々な解像度を持つデバイスに対応するために、デバイスのディスプレイのピクセル密度をldpi、mdpi、hdpi、xhdpiの4つに分けています。アイコン画像もこれに合わせて4つ用意します。表4.3は、resディレクトリ以下のアイコン画像ファイルの場所とそのアイコンが必要とする画像のサイズです。

　アイコン画像には、ここで挙げているサイズの画像以外にもGoogle Play Storeに提出する際に512×512pxサイズの画像が必要となります。この512×512pxのアイコンは、GooglePlay StoreアプリやWebサイトでアプリのアイコンとして表示されます。

　次にiOSのアイコンを編集しましょう。iOSアプリのアイコンは、platforms/ios/

　HelloWorld/Resources/iconsディレクトリ以下に納められています。iPhoneとiPadとそれらのRetina版のアイコン画像を用意する必要があります（表4.4）。

　iOSアプリでは、Retinaディスプレイ用の画像リソースには、ファイルの拡張子の前に「 @2x」を付けます。

　またAndroidと同様、ここで挙げているサイズ以外にもApp Storeに提出する際に1024×1024pxのサイズのアイコン画像が必要です。

4.3.7　アプリのスプラッシュスクリーンを設定する

　スプラッシュスクリーンとは、アプリの起動時に表示する画像です。

　Androidアプリでスプラッシュスクリーンを設定するには、config.xmlのsplashscreen設定に画像名を記述します（リスト4.11）。Androidアプリでは、リソース中の画像を表す識別子に拡張子を用いません。この画像の名前には、拡張子を含めないでください。

　上記の例では、画像名として「splash」を指定しているので、スプラッシュ画像として

　splash.pngをplatforms/android/res以下に、アイコン画像と同様に複数のピクセル密度向けの画像（ldpi、mdpi、hdpi、xhdpi）を納めてください。

　ここで、1つ注意すべきことがあります。Androidではディスプレイの大きさが標準化されておらず、デバイスによってバラバラなのです。では、Androidでスプラッシュスクリーンのために用意する画像のサイズはどうすればよいのでしょうか？

　Androidアプリ開発では、こういったときのために9patchと呼ばれる伸び縮みの箇所を指定できる画像フォーマットを利用します。PNGを拡張したこの画像形式の拡張子には「.9.png」を用います。このスプラッシュスクリーン画像にもこの9patch形式の画像を用意してください。

　用意する画像のパスとその画像の最低限のサイズの大きさの対応は表4.5になります。上記のスプラッシュスクリーンの設定では画像名に「splash」と付けているので、それと同じ名前の画像ファイルを置きます。

　9patch画像は、自動的にデバイス画面前面を覆うように表示されます。9patch形式の画像は、Android SDKに含まれているdraw9patchというアプリケーションを利用します。

　Android SDKにパスを通してある状態ならば、以下のようにターミナルでdraw9patchコマンドを実行すると、9patch形式の画像を作成するツールが開きます。draw9patchコマンドは、Android SDKのsdk/toolsディレクトリにあります。

　iOSアプリでは、iOS自体がスプラッシュスクリーンを表示する仕組みを持っています。あらかじめのスプラッシュスクリーン用の画像を置くだけで有効になります。iOS用のスプラッシュスクリーン画像の置き場所は、platforms/ios/（プロジェクト名） /Resources/splashディレクトリです。画像の種類は表4.6のようになります。

　iOSアプリでは、起動時のオリエンテーションをスプラッシュスクリーンの画像の有無で指定します。例えば、Default-Portrait~ipad.png画像がある場合には縦画面で起動しますし、Default-Landscape~ipad.png画像がある場合には、横画面でも起動します。

　Default-568h@2x~iphone.pngは、iPhone5以降のディスプレイで表示されるスプラッシュスクリーン画像です。この画像がない場合には、iPhone5の解像度に対応していないアプリとして判断され、アプリは上下に黒い帯が出た状態のまま動作するようになります。

4.3.8　ドメインホワイトリストを設定する

　Cordovaアプリケーションで読み込まれるHTMLは、JavaScriptからネイティブの機能へアクセスできる特殊な環境に置かれています。

　このため、信頼できないHTMLを読み込んでしまうとCordovaが提供するネイティブ機能を通じて端末の情報を盗まれる危険があります。config.xmlのaccess要素は、こういった危険を避けるために信頼できるドメインを設定して、それ以外の信頼できないドメインのHTMLは読み込まないようにします。

ドメインホワイトリストの基本的な設定方法

　ドメインホワイトリストは、config.xml内でaccess要素によって記述します。

　cordovaコマンドでプロジェクトを作成したときには、access要素はリスト4.12のように記述されています。

　これは、どのドメインのHTMLも読み込まれるように設定されています。例えば、ページ中でどこかの別のページに遷移します。そのページの中でcordova.jsを読み込むと、そのアプリで提供されているCordovaのネイティブ機能をそのページでも利用できるようになります。

　ここでは、信頼できるドメインのみを適切に指定することが重要です。アプリ内で外部のHTMLを読み込む必要がなければ、access要素は削除してください。

　access要素は、複数指定することができます。例えば、http://example.comとhttp://foobar.example.comのページの読み込みを有効にする場合には、リスト4 .13のようにaccess要素を2つ並べます。

　指定するドメインには、パターンを用いることができます。例えば、example.comのサブドメインすべてをホワイトリストに追加するには、リスト4.14のようにサブドメインの部分に「*」を指定します。

　access要素のorigin属性に指定できる文字列は、W3C Widget Accessの仕様に基づいています。

• ［LINK］W3C Widget Access

■

　次回は「4.4 プラットフォームごとにカスタマイズする」を説明します。

• ← 前回
• ▼ この記事の連載 INDEX ▼ 連載 RSS
• 次回 →