このページの本文へ

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」を選択してください。

【図】10.png

新規プロジェクトで「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>

この連載の記事

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

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

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

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