画像の表示サイズを調整する
画像のセンタリングはスタイルシートを使えば簡単に設定できます。以下のスタイルシートを追加します。
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に対応させましょう。
ソーシャルリアクション
この連載の記事
- 第75回 CSS3でFlash並みアニメが作れるSencha Animator
- 第74回 Capture APIでiPhone用ビデオレコーダーを作ろう
- 第73回 JavaScriptで作れるiPhone用ボイスレコーダー
- 第72回 PhoneGapのMedia APIでバイブ付き音楽プレーヤー
- 第71回 iPhoneがPhoneGapで簡易電子書籍リーダーに
- 第70回 PhoneGapでMapKitを使って地図アプリを開発
- 第69回 HTML5+CSS3でiPhone用動画アプリを作ろう
- 第68回 iPhone/iPad両対応！PhoneGapで作るアルバムアプリ
- 第66回 PhoneGapでiPhoneのカメラアプリを作ろう
- 第65回 HTML5でiPhoneアプリ開発！PhoneGap入門
- この連載の一覧へ
