画像の表示サイズを調整する
画像のセンタリングはスタイルシートを使えば簡単に設定できます。以下のスタイルシートを追加します。
div {
text-align: center;
}
画像の幅は以下の2つの方法で調整できます。
- JavaScriptで回転方向を検知して画像の幅を変更する
- スタイルシートを使ってデバイスの幅に応じて適用するスタイルを変更する
今回は（1）の方法を採用します。（2）はiPad/iPhone 4（Retina Display）に対応するときに使いますので、次回解説します。
PhoneGapではデバイスが回転するとwindowオブジェクトでorientationchangeイベントが発生します。Safariでも同じイベントを扱えるので、使ったことがある人もいるかもしれません。
デバイスがどちらに回転したかはwindow.orientationプロパティで調べられます。window.orientationプロパティは-90、0，90といった値になりますので、window.orientationの値が0なら縦長の画像サイズを設定し、それ以外であれば横長に合わせた画像サイズを設定します。回転に対応したコードは以下のようになります。
window.addEventListener("orientationchange", function(){
var imgObj = document.getElementById("photo");
var r = window.orientation;
if (r == 0){
imgObj.width = 320;
imgObj.height= 480;
}else{
imgObj.width = 213;
imgObj.height= 320;
}
}, true);
回転機能に対応させた
iOSシミュレータを起動して動作を確認してみましょう。デバイスを回転させると以下のように画像サイズが調整され、画像がセンタリングされて表示されるはずです。
実機で確認する
最後に、実機の動作を確認します。iPhoneとMacをUSBケーブルで接続し、プロジェクトメニューから「アクティブSDKを設定」→「Device」を選択します。
実機で動作するように設定
プロジェクトメニューから「プロジェクト設定を編集」を選択します。
プロジェクト設定を編集しないと動作しない
コード署名IDの部分で、あらかじめ用意してあるプロビジョニングファイルを選択します。
プロビジョニングファイルを選択
プロジェクトウィンドウの「ビルドと実行」ボタンをクリックします。しばらくすると実機にデータが転送され、アプリが起動します。実機を回転させると回転に合わせて画像サイズが調整されます。
これでiPhone用のフォトアルバムアプリが完成しました。次回はiPadに対応させましょう。
