iOS7が出てステータスバーで苦しんだ話は、以前書きました。
一方で、iOS7のAppのバックグラウンド更新機能は使えそうじゃないかという話も書きました。
あと、もう一つ。iOS7特有の半透明デザインに苦しんだ（今も苦しんでいる）話を書いて、iOS7リリース直後のドタバタネタを締めようかと思います。
まず、これを見て欲しい
これは、iOS7のSafariで表示されたDatePickerです。グレー背景に黒文字と極めて見づらい表示になっています。
この表示の元となったHTMLコードは下記のようなものです。
<br /><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で解決されるようです。
PhoneGap and Cordova with iOS 7 | Christophe CoenraetsCordova 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)
この記事には、当ブログでも紹介したステータスバーの分だけアプリを20px下げる方法が、JavaScriptで実現する形で記載されていました。
