このページの本文へ

フォトアルバムアプリで学ぶPhoneGapの使い方 (3/4)

2011年08月11日 12時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

デバイスの回転に対応する

 ここまではiPhoneが縦向きの状態で利用することを前提にアルバムアプリを作ってきました。では、iPhoneを横向きにするとどのように表示されるのでしょうか。iOSシミュレータで「ハードウェア」→「時計回りに回転」を選択し、横向きにしたときの実行結果を確認してみましょう。

【図】14.png

時計回りに回転させる

 以下のようにシミュレータ上のiPhoneは右に90度回転しますが、フォトアルバムアプリ内の画像は回転しません。

【図】15.png

画像は回転しない

 本来であればデバイスの回転に合わせて画像も回転してほしいところです。以前のPhoneGapではデバイスの向きに応じて自動的にコンテンツが回転していましたが、バージョン0.9.5では回転しません。現行のPhoneGapでデバイスの回転に対応するには、プロジェクトのプロパティリスト(plist)を設定する必要があります。

 プロジェクトウィンドウのResourcesフォルダを展開し、「sample05-Info.plist」ファイルを確認します。「sample05」は作成したプロジェクト名を表し、プロジェクト名がascであれば「asc-Info.plist」になります。「sample05-Info.plist」をクリックし、編集画面にプロパティリストを表示します。

【図】16.png

sample05-Info.plistをクリックして選択

 プロパティリストのKeyにある「Supported interface orientations」の▲をクリックして展開します。

【図】17.psd

「Supported interface orientations」をクリックして展開する

 左側のkeyに「Item 0」が表示され、右側のValueには「Portrait (bottom home button)」と表示されています。この値は、「ホームボタンが下側にある場合のみ対応している」という意味です。つまり、iPhoneが縦向きの状態での使用画面しか想定していないため、iPhoneを回転させても反応しないわけです。この値をクリックして変更します。

【図】18.psd

クリックして選択する

 クリックすると右側に「+」ボタンが表示されますので、対応させたい回転方法(向き)を選択します。今回は、標準の状態(縦向き)と左回転、右回転の3種類に対応させます。

【図】19.psd

対応させたい回転方向を選択する

【図】20.png

標準の状態と左回転、右回転の3種類に対応させる

【図】21.png

上の図のようになればOK。あとは、ビルドと実行をクリックする

 「ビルドと実行」ボタンをクリックしてiOSシミュレータで動作を確認します。iOSシミュレータが起動するとアプリが実行され、先ほどと同様に画像が自動的に切り替わります。

【図】22.png

iOSシミュレータが起動し画像が次々と表示されていく

 この状態でiOSシミュレータのメニューから、「ハードウェア」→「反時計回りに回転」を選択します。

【図】23.png

反時計回りに回転させる

 すると、ステータスバーと画像がデバイスの向きに応じて回転します。

【図】24.png

今度は回転した

 ただし、肝心の画像は下側が表示されておらず、左側に寄っていて、見栄えがよくありません。そこで画像を画面内に収め、センタリングして表示するように改良しましょう。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く