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ベース。ちょっと古いですね)のアプリをコンパイルしてみると・・・。

PhoneGap iOSSDK7 01

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

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

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

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

ITCExam xcodeproj CDVViewController m

修正するのは、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以前に問題が出ないように、バージョン判定を入れておきます。

すると・・・

PhoneGap iOSSDK7 02

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

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

この記事を書いた人

井上 研一

経済産業省推進資格ITコーディネータ/ITエンジニア。株式会社ビビンコ代表取締役。
北九州市出身、横浜市在住。AIやIoTに強いITコーディネータとして活動。北九州市主催のビジネスコンテスト「北九州でIoT」に応募したアイディアが入選し、メンバーと株式会社ビビンコを創業。著書に「初めてのWatson」、「ワトソンで体感する人工知能」など。日本全国でAI・IoTなどをテーマにしたセミナーや研修講師での登壇多数。