comment 0

iOS7時代のPhoneGap〜Cordova 3.1 RC1を試してみる(その2)

前回はCordova 3.1 RC1のインストールからプロジェクトの作成、Cordova APIの追加までを見てきました。

スマートフォン向けアプリをHTML5で開発できるフレームワークであるPhoneGapですが、きちんと?iOS7に対応したPhoneGap 3.1は、現時点ではまだリリースされていま…

今回は、さらにCordova 3.xの動作を追いつつ、Cordova 3.1で対応するといわれているiOS7対応の様子を見ていきたいと思います。

2種類のwwwディレクトリ

Cordovaが作成したプロジェクトのディレクトリ構成を見てみると、wwwディレクトリが2つあることが分かります。

Hello

アプリ用の画面(HTML)やJavaScriptは、原則としてトップレベルのwwwディレクトリに置きます。
その上で、

cordova prepare ios

のように、prepareを実行すると、指定したプラットフォーム(この場合はios)のwwwディレクトリに、トップレベルのwwwディレクトリの内容がコピーされます。

前の記事で、cordova buildを実行したのですが、buildはprepareとcompileを続けてに行うものなので、prepareも行われていたということになります。

prepareで行われるのは、あくまでコピーなので、ios/wwwディレクトリのファイルを編集していたとしても、それは上書きされてしまいます。

また、ios/www側にだけ存在するファイルもprepareを行うと削除されてしまうので注意が必要です。
では、あるプラットフォームにだけ必要となるコードを書きたい場合はどうするかというと、mergesディレクトリを使います。例えば、ios/www/css/style.cssというファイルを置きたいとすると、merges/ios/www/css/style.cssを作成してprepareを行います。

こうした構造は、1つのCordovaプロジェクト内で複数のプラットフォーム向けのアプリをまとめて作成出来るようにするためのものと言えます。
以前のCordovaでは、プロジェクトを作成する際にプラットフォームを指定していたので、別のプラットフォーム向けに同じアプリを作ろうとすると、再度プロジェクトを作って、wwwディレクトリ配下をコピーするといった手順が必要とされたのです。この構造は、Cordova 2.9から導入されています。

ただ、逆に1つのプラットフォームに向けたアプリを作れば良いというケースでは、この構造は面倒な印象を与えます。その際は、必要となるCordova APIをプラグインを追加した後で、一度prepare(もしくはbuild)を行い、後はplatforms/iosディレクトリの中で作業をするという形を取れば、Cordova 2.8までと同じ感覚で開発を進められるのではないかと思います。
(誤って再度prepareをしたときに作成したファイルが消えないように、platforms/iosディレクトリを別の場所にコピーして作業した方が無難かもしれません。)

Cordova 3.1 RC1でiOS7のステータスバー問題はどうなった?

iOS7でまず気になるのは、ステータスバーとの干渉です。
iOS6まではbodyタグのmargin-top:0は、ステータスバーの直下を指していました。しかし、iOS7では画面の上端を指します。つまり、ステータスバーはアプリで制御するべき領域になっています。

この問題のCordova 2.xでの解決策として、こちらの記事を書きました。

PhoneGap + jQuery MobileでiOSアプリを作るというのは、それをどれだけ本気でやるかという違いはあるとしても、それなりに行われているのではないかと思います。

PhoneGapを展開しているAdobeのエンジニアのブログでは、CSSでmargin-top:20pxとする方法が紹介されていました。

Cordova 3.1 RC1での動作を見る限り、この問題には特に対応されていません。ステータスバーとの一体化はiOS7の特徴の一つでもあるため、Cordovaとしてその特徴を殺すような対応はやるべきではないという判断が働いているのかもしれません。

ただ、別のプラットフォームとの一体開発を行うのであれば、ステータスバーとの一体化がなされているのはiOS7のみであり、iOS7での考え方を一般化することは出来ません。jQuery MobileのようなUIフレームワークを使う場合はなおさらなので、結局のところCordova 2.xでの解決策を今後も継続する必要がありそうです。
(但し、あくまでRC1での動作なので、正式版でどのように変わってくるかは不明です。また、jQuery Mobile等のUIフレームワーク側で何らかの対応が行われるようになる可能性もあります。いずれにせよ、今後も注意が必要です。)

次回について

次回はまたプラグインについてですが、PhoneGap 3.xで独自プラグインや既存のプラグインを使用する場合のことについて書こうと思います。(PhoneGap 2.xからは随分変わっています。)

Filed under: プログラミング

About the Author

Posted by

ITエンジニア/経済産業省推進資格ITコーディネータ 株式会社ビビンコ代表取締役 AI・IoTに強いITコーディネータとして活動していたところ、ビジネスコンテスト「北九州でIoT」での入選をきっかけに、株式会社ビビンコを創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行う。 日本全国でセミナー・研修講師としての登壇も多数。 近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。

コメントを残す