JavaScriptでiPhone/iPad用フォトアルバムを作ろう (3/4)

2011年06月16日　11時00分更新

文●古籏一浩

ツイートする

iPhoneとiPadのハイブリッドにする

　サンプル2はiPhone専用として作成しましたが、iPadにも対応させたい場合もあるでしょう。ただ、iPhone専用のアプリをiPadで実行すると、以下のようにiPad画面内にiPhoneの画面領域が表示され、その中にアプリの画面が描画されます。iPadの画面に合わせて2倍に拡大もできますが、拡大すると写真がぼけた感じになってしまいます。

　iせっかくの大画面なのですから、iPadにはiPadに最適なサイズと解像度で表示したいところです。そこで、iPhone用のアプリをそのままiPadで動作させるのではなく、iPhone／iPadそれぞれのスペックに応じたアプリを作成しましょう。

　まず、以下のようなiPhone用とiPad用の画像を用意しておきます。

iPhone用	320×480
iPad用	768×1024

　次に、新規にプロジェクトを作成し、「Product」のポップアップメニューで「iPhone/iPad」を選択します。iPad専用にしたい場合は「iPad」を選択してください。

新規プロジェクトで「iPhone/iPad」を選択する

　プロジェクト名と保存先を指定します。

　プログラムはサンプル2のコードをそのまま流用します（コピー＆ペーストで構いません）。用意した画像は、iPhone用を「images」、iPad用を「images2」フォルダに入れ、どちらもResourcesフォルダに入れておきます。

　続いて、アプリが動作している環境を調べ、表示する画像を切り替える処理を追加します。NimbleKitには、機種／デバイスを判別するためのクラスやメソッドが存在しないので、navigator.userAgentの文字列を調べ、iPadかどうかを判別します。iPhoneとiPadのuserAgent文字列は以下のようになっています。

iPad: Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile/8F190
iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile/8F190

　サンプル3では、if文を使って、userAgent内に「iPad」の文字があればiPad用のフォルダを参照するようにパスを変更しています。また、デバイスの表示幅に合わせて画像の表示サイズを決定するため、windowオブジェクトのinnerWidthとinnerHeightでデバイス幅を取得し、init()メソッドの引数に指定しています。

　iOSシミュレーターを使って動作を確認してみましょう。プロジェクトメニューから「アクティブな実行可能ファイルを設定」＞「ImageViewer_iPad - iPad Simulator 4.3」を選択し、プロジェクトウィンドウで「ビルドと実行」ボタンをクリックします。

　iOSシミュレーター上でiPhoneとiPadを切り替えると、デバイスに応じた画像が表示されます。

iPhone/iPadでデバイスに応じた画像が表示される

■サンプル3

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<script>
var count = 0;
var dir = "./images/";
if(navigator.userAgent.indexOf("iPad") > -1){
dir = "./images2/";   // iPad用画像がある場所
}
var imageURL = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; 
var imageview = new NKImageView();
var w = window.innerWidth;
var h = window.innerHeight;
imageview.init(0,0, w, h, dir+"1.jpg");
imageview.show();
setInterval("rotateImage()", 2000);
function rotateImage(){
count = count + 1;
count = count % imageURL.length;
imageview.setImage(dir+imageURL[count]);
}
</script>
</body>
</html>