iPod touchのLandscapeモードに気をつけよう(Titanium)


Titaniumではtiapp.xmlでPortraitモードやLandscapeモードでどの向きを使用するか設定します。

プロジェクト新規作成時には次のように初期設定されています。

tiapp.xml
                ...
                <key>UISupportedInterfaceOrientations~iphone</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                </array>
                <key>UISupportedInterfaceOrientations~ipad</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                ...

iPhoneでLandscapeにも対応しようと次のように設定した場合、1つ落とし穴が有ります。

tiapp.xml
                ...
                <key>UISupportedInterfaceOrientations~iphone</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                <key>UISupportedInterfaceOrientations~ipad</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                ...

補足:Apple製の写真アプリやカレンダーアプリ同様に、iPhoneでは「UIInterfaceOrientationPortraitUpsideDown」を抜いています。電話をするのに支障をきたさないためのようです。

実は上記のように設定してもiPod touchでは回転で向きが変わらず、「UIInterfaceOrientationPortrait」の向きしか対応しないのです。(iPod touch 5th, iOS 9.1, Titanium SDK 5.1.1.GAで確認)

iPod touchでもiPhoneと同じように回転に対応させるためには次のように記述しなければいけません。

tiapp.xml
                ...
                <key>UISupportedInterfaceOrientations~iphone</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                <key>UISupportedInterfaceOrientations~ipod</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                <key>UISupportedInterfaceOrientations~ipad</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                ...

またiphoneとipodを一緒にして次のようにも記述できます。こちらの方が簡単で間違いが無いのでオススメです。

tiapp.xml
                ...
                <key>UISupportedInterfaceOrientations</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                <key>UISupportedInterfaceOrientations~ipad</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                ...

これでやっとiPod touchでも回転に対応できます。
Default Alloy Projectをこのように書き換え、iPod touchで確認すると次のように無事回転するようになります。

通常iPhoneはPortraitモードのみとする場合が多いのでほとんど問題になりませんが、Landscapeモードを使用する場合に、iPod touchだけ横向きにならないという不具合につながりかねませんのでご注意ください。後からLandscapeモードを取り入れた時に気に間違えないようにするため、私はプロジェクト作成直後に次のように「~iphone」の部分を削除しています。

tiapp.xml
                ...
                <key>UISupportedInterfaceOrientations</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                </array>
                <key>UISupportedInterfaceOrientations~ipad</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                ...

Appleによる詳しい仕様については次のドキュメントを参照してください。
iOS Developer Library - About Information Property List Files

なお、Landscapeモードに対応したアプリではiPhoneに加えてiPod touchも実機でテストするのが望ましいです。iOS仕様の話なので、Titanium以外で作成したアプリでもテストすることをオススメします。

この投稿は Appcelerator Titanium Advent Calendar 2015 の 7日目の記事でした。余談ですが、最近はTitaniumのWebViewでiOS, Android共にLocalStorageが使えるようになったようです(Titanium SDK 5.1.1.GA)。この対応方法を予定してたのですが、急遽差し替えました(^^;)