iOSシミュレータで確認
作成したプログラムがiPhone/iPadでも動作するか、iOSシミュレータで確認しましょう。Xcodeのプロジェクトメニューから、「アクティブSDKを設定」＞「Simulator」を選択します。
iOSシミュレータを選択する
シミュレーションする機器を選択します。今回のアプリはiPhoneとiPad用ですが、iOSシミュレータでは同時に異なるデバイスを起動できませんので、最初にiPhone、次にiPadの順でチェックします。プロジェクトメニューから「アクティブな実行可能ファイルを設定」＞「iPhone Simulator」を選択します。
最初のシミュレート機器としてiPhoneを指定する
プロジェクトウィンドウの「ビルドと実行」ボタンをクリックします。しばらくするとiOSシミュレータが起動し、アプリが実行されます。画像が表示され2秒ごとに切り替われば成功です。
iPhoneでは問題なく動作している
iPadシミュレータでも確認してみましょう。プロジェクトメニューから「アクティブな実行可能ファイルを設定」＞「iPad Simulator」を選択します。
iPadシミュレータを選択
「ビルドと実行」を選択するとiPadシミュレータが起動します。ところが、この状態ではiPadの画面内に小さな枠と画像が表示されるだけで、せっかく用意したiPad用の画像が表示されません。PhoneGapはデフォルトではiPadには対応しない設定になっており、iPhone用のプログラムが実行されているためです。そこで、設定を変更してiPadでも動作するようにします。
デフォルトではiPadに対応していないため、iPhoneとして表示されてしまう
プロジェクトをiPadに対応させる
Xcodeのプロジェクトウィンドウ左側にある「◎ターゲット」の▲をクリックして展開します。アプリケーション名が表示されます。
アプリケーション名が表示される
アプリケーション名の上で右ボタンをクリック（1ボタンマウスの場合はctrlキーを押したままクリック）します。メニューが表示されますので、メニュー項目の中から「現在のターゲットをiPad用にアップグレード...」を選択します。
「現在のターゲットをiPad用にアップグレード...」を選択する
ユニバーサルにするか（1つのアプリケーションにするか）、iPhoneとiPadとで別々のアプリケーションにするか尋ねるダイアログが表示されます。今回はユニバーサルなので、「One Universal application」のラジオボタンをチェックして「OK」ボタンをクリックします。
「One Universal application」を選択する
続いて、プロジェクトウィンドウのResourcesフォルダ内にある「sample08-Info.plist」ファイルを選択します。sample08は今回のアプリのプロジェクト名です。
sample08-Info.plistファイルを選択
右側にプロパティリストが表示されますので、その中にある「Main nib file base name (iPad)」の項目をクリックして選択します。
「Main nib file base name (iPad)」を選択
編集メニューから「削除」を選択します。
編集メニューから「削除」を選択
以上でiPadに対応できます。さっそく、プロジェクトウィンドウの「ビルドと実行」ボタンをクリックして動作を確認しましょう。しばらくするとiOSシミュレータが起動し、iPadの画面が表示されます。
iPadに画像が表示される
先ほどのようにiPad内にiPhoneの画面はなく、iPad内に画像が表示されています。画像サイズをiPad用に設定していないため画像が上部に表示されているので、以下のようにiPadでの表示サイズに書き換えます。
プログラムを修正する
window.addEventListener("load", function(){
var count = 1;
var dir = "./images/"; // iPhone用画像がある場所
if(navigator.userAgent.indexOf("iPad") > -1){
dir = "./images2/"; // iPad用画像がある場所
var imgObj = document.getElementById("photo");
imgObj.width = 768;
imgObj.height = 1024;
}
setInterval(function(){
var imgObj = document.getElementById("photo");
count = count + 1;
if (count > 5){ count = 1; }
imgObj.src =dir+count+".jpg";
}, 2000);
}, true);
プログラムを修正したら再度「ビルドと実行」ボタンを押してチェックします。今度はiPadの画面全体に、iPad用に用意した高解像度の画像が表示されます。
iPad画面全体に画像が表示される
