デバイスの回転に対応する
ここまではiPhoneが縦向きの状態で利用することを前提にアルバムアプリを作ってきました。では、iPhoneを横向きにするとどのように表示されるのでしょうか。iOSシミュレータで「ハードウェア」→「時計回りに回転」を選択し、横向きにしたときの実行結果を確認してみましょう。
時計回りに回転させる
以下のようにシミュレータ上のiPhoneは右に90度回転しますが、フォトアルバムアプリ内の画像は回転しません。
画像は回転しない
本来であればデバイスの回転に合わせて画像も回転してほしいところです。以前のPhoneGapではデバイスの向きに応じて自動的にコンテンツが回転していましたが、バージョン0.9.5では回転しません。現行のPhoneGapでデバイスの回転に対応するには、プロジェクトのプロパティリスト(plist)を設定する必要があります。
プロジェクトウィンドウのResourcesフォルダを展開し、「sample05-Info.plist」ファイルを確認します。「sample05」は作成したプロジェクト名を表し、プロジェクト名がascであれば「asc-Info.plist」になります。「sample05-Info.plist」をクリックし、編集画面にプロパティリストを表示します。
sample05-Info.plistをクリックして選択
プロパティリストのKeyにある「Supported interface orientations」の▲をクリックして展開します。
「Supported interface orientations」をクリックして展開する
左側のkeyに「Item 0」が表示され、右側のValueには「Portrait (bottom home button)」と表示されています。この値は、「ホームボタンが下側にある場合のみ対応している」という意味です。つまり、iPhoneが縦向きの状態での使用画面しか想定していないため、iPhoneを回転させても反応しないわけです。この値をクリックして変更します。
クリックして選択する
クリックすると右側に「＋」ボタンが表示されますので、対応させたい回転方法（向き）を選択します。今回は、標準の状態（縦向き）と左回転、右回転の3種類に対応させます。
対応させたい回転方向を選択する
標準の状態と左回転、右回転の3種類に対応させる
上の図のようになればOK。あとは、ビルドと実行をクリックする
「ビルドと実行」ボタンをクリックしてiOSシミュレータで動作を確認します。iOSシミュレータが起動するとアプリが実行され、先ほどと同様に画像が自動的に切り替わります。
iOSシミュレータが起動し画像が次々と表示されていく
この状態でiOSシミュレータのメニューから、「ハードウェア」→「反時計回りに回転」を選択します。
反時計回りに回転させる
すると、ステータスバーと画像がデバイスの向きに応じて回転します。
今度は回転した
ただし、肝心の画像は下側が表示されておらず、左側に寄っていて、見栄えがよくありません。そこで画像を画面内に収め、センタリングして表示するように改良しましょう。
