iOS7の半透明デザインとHTML5アプリさらにPhoneGap

iOS7が出てステータスバーで苦しんだ話は、以前書きました。

一方で、iOS7のAppのバックグラウンド更新機能は使えそうじゃないかという話も書きました。

あと、もう一つ。iOS7特有の半透明デザインに苦しんだ(今も苦しんでいる)話を書いて、iOS7リリース直後のドタバタネタを締めようかと思います。

まず、これを見て欲しい

これは、iOS7のSafariで表示されたDatePickerです。グレー背景に黒文字と極めて見づらい表示になっています。

この表示の元となったHTMLコードは下記のようなものです。


<style> body {<br /> background-color: black;<br /> }<br /> </style> <input type="datetime-local" />

なんともはや、極めて単純なコード。ただ、背景色として黒を指定しているだけです。

ちなみに、iOS6までのSafariで表示すると、下図のように表示されます。当然ですが。

iOS7では半透明デザインが原則になっているので、Safariもその原則に従ったまでなのですが、Webサイトは必ずしもiOSを対象にした画面として開発されているわけではなく、当然に背景色として黒を用いることはあると思うのです。
しかし、iOS7はそんなことは知ったことではなく、とにかく原則を貫いて見づらいPickerを表示してしまう。
iOS向けアプリの開発者に対しては、Submit your iOS 7 apps today.とか言って、iOS7向けのデザインに切り替えるように強制するのもご愛敬だけれども、Safariで表示するWebサイトにもそれを強いるのはちょっとどうかなぁと思います。

PhoneGap特有の話

PhoneGapを使ってWebアプリをiOS向けネイティブアプリとしてパッケージングしようとしている場合であれば、HTMLデザインとして背景色を白っぽくして、この問題を回避することができます。
ただ、Pickerが表示されるinputエレメントが画面の下の方にある場合、HTMLの表示領域を白くしても解決しないケースがあります。

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
// Black base color for background matches the native apps
theWebView.backgroundColor = [UIColor blackColor]; // ←ここ

return [super webViewDidFinishLoad:theWebView];
}

PhoneGapが自動生成するObjective-Cのコードで、MainViewController.mのwebViewDidFinishLoadにおいて、UIWebViewの背景色が黒と指定されています。
inputエレメントが画面の下の方にある場合、そこで表示されるPickerはHTMLの背景色ではなく、UIWebViewの背景色の上で半透明に表示される形になるので、冒頭で示したような見づらいPickerが表示されることになります。
そのため、UIWebViewの背景色として、白(whiteColor)などを指定しておくのが無難です。

また、以前書いたiOS7のステータスバーがPhoneGapアプリと干渉してしまう問題については、今週あたりにリリースされるらしいPhoneGap 3.1で解決されるようです。

Cordova 3.1 is expected soon (probably next week) with additional iOS 7 support:

  • Update to the splashscreen plugin to better support the status bar
  • Update to the Media and Media Capture plugins to handle the new Microphone access permissions
  • A fix to this bug (keyboard preferences)

PhoneGap and Cordova with iOS 7 | Christophe Coenraets

この記事には、当ブログでも紹介したステータスバーの分だけアプリを20px下げる方法が、JavaScriptで実現する形で記載されていました。

Ad

この記事を書いた人

井上 研一

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

Ad