井上 研一 前回はCordova 3.1 RC1のインストールからプロジェクトの作成、Cordova APIの追加までを見てきました。
今回は、さらにCordova 3.xの動作を追いつつ、Cordova 3.1で対応するといわれているiOS7対応の様子を見ていきたいと思います。
2種類のwwwディレクトリ
Cordovaが作成したプロジェクトのディレクトリ構成を見てみると、wwwディレクトリが2つあることが分かります。
アプリ用の画面（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を展開しているAdobeのエンジニアのブログでは、CSSでmargin-top:20pxとする方法が紹介されていました。
Cordova 3.1 RC1での動作を見る限り、この問題には特に対応されていません。ステータスバーとの一体化はiOS7の特徴の一つでもあるため、Cordovaとしてその特徴を殺すような対応はやるべきではないという判断が働いているのかもしれません。
ただ、別のプラットフォームとの一体開発を行うのであれば、ステータスバーとの一体化がなされているのはiOS7のみであり、iOS7での考え方を一般化することは出来ません。jQuery MobileのようなUIフレームワークを使う場合はなおさらなので、結局のところCordova 2.xでの解決策を今後も継続する必要がありそうです。
（但し、あくまでRC1での動作なので、正式版でどのように変わってくるかは不明です。また、jQuery Mobile等のUIフレームワーク側で何らかの対応が行われるようになる可能性もあります。いずれにせよ、今後も注意が必要です。）