PhoneGap + jQuery Mobile + iOS SDK7で起きるステータスバー問題に対応する

PhoneGap + jQuery MobileでiOSアプリを作るというのは、それをどれだけ本気でやるかという違いはあるとしても、それなりに行われているのではないかと思います。
当社(アルティザンエッジ合同会社)においては、それがいま、メインの仕事となっていて、それを始めて9か月になったりします。

昨日、iOS7が正式リリースとなりました。私のiPhoneにも導入し、それと合わせてMacのXcodeの方もXcode5としてiOS SDK7を入れました。

その環境で、既存(PhoneGap 2.5 + jQuery Mobile 1.3.0ベース。ちょっと古いですね)のアプリをコンパイルしてみると・・・。

あれ?ステータスバーをアプリのナビゲーションバーが隠してしまっている。

iOS SDK6でコンパイルしたアプリをiOS7で動作させても、このような現象にはならないので、これはiOS SDK7 + iOS7特有の現象なわけですが、それというのは、iOS7からOS側で出しているステータスバーと、アプリ側で出しているナビゲーションバーが一体化したからなのですね。(例えば、iOS7でEvernoteの最新版アプリを動かしたりすると、ステータスバーが緑色になってナビゲーションバーと一体化したりします。)

PhoneGapはまだiOS7に正式対応していないこともあって、この辺の制御が上手く出来ないのではないかと思います(ちなみに、最新版であるPhoneGap 3.0を使っても同様の現象になりました。)。もしくは、jQUery Mobile側なのかなぁ・・・。

で、当面の解決策としては以下のようなコードをPhoneGap自体に入れてしまうことです。

修正するのは、ConrdovaLib.xcodeproj内にある、Classes/Cleaver/CDVViewController.mです。

- (void)createGapView
{
  CGRect webViewBounds = self.view.bounds;

  webViewBounds.origin = self.view.bounds.origin;

  //ここから追記
  NSString *currentSystemVersion = [[UIDevice currentDevice] systemVersion];
  if ([currentSystemVersion floatValue] >= 7.0f) {
    webViewBounds.origin.y += 20;
    webViewBounds.size.height -= 20;
  }
(後略)

単純にステータスバーの分のoriginを下にやって、高さを狭めるだけです。
iOS6以前に問題が出ないように、バージョン判定を入れておきます。

すると・・・

見事。ステータスバーが隠れないように、ナビゲーションバーが下に降りました。

ステータスバーとナビゲーションバーの一体化というiOS7の特徴を無視するような解決策なので、あくまで暫定案かなとは思いますが、簡単に対応できるので、まずはこれで切り抜けられるのではないかと思います。

この記事を書いた人

井上 研一

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