Titanium 3.4.0 beta で iPhone 6 / iPhone 6 Plus の画面サイズに仮対応する #TitaniumJP


DEPRECATED (2014/09/17)

この記事は既に過去の情報となりました。 Titanium SDK 3.4.0 Beta の配布ページが更新されており、 3.4.0.v20140916181713 では既に iPhone 6 / iPhone 6 Plus の画面サイズに対応しています。このバージョンの SDK でプロジェクトを生成すると PROJECT_ROOT/Resources/iphone ディレクトリの中には iPhone 6 / iPhone 6 Plus に対応するスプラッシュスクリーンが設置されています。

Titanium CLI 3.4.0 RC と Titanium SDK 3.4.0 Beta のインストール

インストール
$ npm install -g [email protected]
$ titanium sdk install http://builds.appcelerator.com/mobile/3_4_X/mobilesdk-3.4.0.v20140916181713-osx.zip
$ titanium sdk select 3.4.0.v20140916181713
$ titanium
Titanium Command-Line Interface, CLI version 3.4.0-rc4, Titanium SDK version 3.4.0.v20140916181713
Copyright (c) 2012-2014, Appcelerator, Inc.  All Rights Reserved.
………

はじめに

先日 iPhone 6 / iPhone 6 Plus が発表され、縦横比は iPhone 5 シリーズと同じながらも解像度が変わることが分かりました。 iPhone 6 Plus に関しては 1242 × 2208 という内部解像度を 1 / 1.15 にダウンスケールすることで 1080p のディスプレイに映し出すようで、ついに Dot by Dot の表示から脱却することになりました。

さて、 Titanium アプリでは iPhone 5 登場時、 [email protected] というファイルを PROJECT_ROOT/Resources/iphone に設置することで縦長になった画面サイズに対応させることができました。では、 iPhone 6 / iPhone 6 Plus ではどうしたら良いのでしょうか。

tiapp.xml + 画像の配置で仮対応

Titanium 3.4.0 beta は iOS 8 対応をうたっていますが、まだ iPhone 6 / iPhone 6 Plus の画面解像度には対応していません。アプリを iPhone 5 シリーズに対応させている場合は縦横比が同じなので、 iPhone 6 / iPhone 6 Plus の解像度に「引き延ばされて」表示されました。

既に Appcelerator の JIRA には対応のためのチケットが切られていますので、遅かれ早かれ対応されると思いますが、 3.4.0.GA が出ていない状態で 3.5.0 で直す予定になっているため、既に Titanium 製の iOS アプリをマーケットにリリースしていて、 iPhone 6 / iPhone 6 Plus の解像度表示に対応させたい場合、これを待つのは辛いでしょう。特に受託開発で Titanium を使っているとしたら、大変もどかしいのではないかと思います。

そこで、 tiapp.xml の編集と、画像の配置で仮対応してみましょう。 Titanium 3.4.0 beta でプロジェクトを作ると tiapp.xml 中には ios タグのセクションがあります。

tiapp.xml
<ios>
    <plist>
        <dict>
            <!-- 略 -->
        </dict>
    </plist>
</ios>

dict セクション中に以下のタグを追記します。

tiapp.xmlへの追記要素
<key>UILaunchImages</key>
<array>
    <dict>
        <key>UILaunchImageMinimumOSVersion</key>
        <string>8.0</string>
        <key>UILaunchImageName</key>
        <string>Default-667h</string>
        <key>UILaunchImageOrientation</key>
        <string>Portrait</string>
        <key>UILaunchImageSize</key>
        <string>{375, 667}</string>
    </dict>
    <dict>
        <key>UILaunchImageMinimumOSVersion</key>
        <string>8.0</string>
        <key>UILaunchImageName</key>
        <string>Default-736h</string>
        <key>UILaunchImageOrientation</key>
        <string>Portrait</string>
        <key>UILaunchImageSize</key>
        <string>{414, 736}</string>
    </dict>
</array>

次に画像を2つ用意します。用意する画像のファイル名は、

です。これらの画像を PROJECT_ROOT/Resources/iphone ディレクトリの中に入れます。これで仮対応完了です。一応、 Xcode 6 GM 上の iPhone 6 / iPhone 6 Plus のシミュレータで起動してみる限り、 iPhone 6 / iPhone 6 Plus の表示解像度に対応した状態でアプリが起動します。引き延ばされていないので、文字や UI ウィジェット類は綺麗に表示されます。

注意事項

今回の方法は昔、私のブログで書いた方法の流用なのですが、この方法には1つ欠点があって、 Titanium がデフォルトで使用する Default.png のスプラッシュスクリーンが一瞬チラッと見えてしまうのです。具体的には tiapp.xml で使うように指定した画像がスプラッシュスクリーンとして表示されるのですが、その裏では Default.png も表示されているようで、スプラッシュスクリーンが消える瞬間に Default.png も見えてしまいます。

これは非常にかっこ悪いので、今回のワークアラウンドを実施する場合には、単色のスプラッシュスクリーン (真っ白とか真っ黒とか) でだけ行った方が良いでしょう。

おまけ

今回使った iPhone 6 / iPhone 6 Plus 用のスプラッシュスクリーン画像です。

iPhone 6 iPhone 6 Plus