このページの本文へ

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

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

文●古籏一浩

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

画像の表示サイズを調整する

 画像のセンタリングはスタイルシートを使えば簡単に設定できます。以下のスタイルシートを追加します。


div {
text-align: center;
}

 画像の幅は以下の2つの方法で調整できます。

  1. JavaScriptで回転方向を検知して画像の幅を変更する
  2. スタイルシートを使ってデバイスの幅に応じて適用するスタイルを変更する

 今回は(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);
【図】25.png

回転機能に対応させた

 iOSシミュレータを起動して動作を確認してみましょう。デバイスを回転させると以下のように画像サイズが調整され、画像がセンタリングされて表示されるはずです。

実機で確認する

 最後に、実機の動作を確認します。iPhoneとMacをUSBケーブルで接続し、プロジェクトメニューから「アクティブSDKを設定」→「Device」を選択します。

【図】29.png

実機で動作するように設定

 プロジェクトメニューから「プロジェクト設定を編集」を選択します。

【図】30.png

プロジェクト設定を編集しないと動作しない

 コード署名IDの部分で、あらかじめ用意してあるプロビジョニングファイルを選択します。

【図】31.psd

プロビジョニングファイルを選択

 プロジェクトウィンドウの「ビルドと実行」ボタンをクリックします。しばらくすると実機にデータが転送され、アプリが起動します。実機を回転させると回転に合わせて画像サイズが調整されます。

 これでiPhone用のフォトアルバムアプリが完成しました。次回はiPadに対応させましょう。

前へ 1 2 3 4 次へ

この連載の記事

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

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

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

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