古籏一浩のJavaScriptラボ ― 第68回

iPhone/iPad両対応！PhoneGapで作るアルバムアプリ

2011年08月23日 10時01分更新

古籏一浩

ツイートする

　HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。前回はPhoneGapを使ってiPhone専用のフォトアルバムアプリを作りましたが、今回はiPadにも対応したフォトアルバムを作ります。

　iPadには大画面を生かした高解像度の画像を表示するため、iPadとiPhoneとで別の画像を使います。iPhone用はimagesフォルダに320×480ピクセルの画像を、iPad用にはimages2フォルダに768×1024ピクセルの画像を用意しておきます。

　なお、以前紹介したフレームワーク「NimbleKit」の場合は、新規にプロジェクトを作成する段階でiPad用/iPhone用のいずれかのテンプレートを選択しましたが、PhoneGapではテンプレートは1種類です。

PhoneGapプロジェクトの作成

　今回は新規プロジェクトを作成する方法を解説します。既存のPhoneGapプロジェクトをiPadに対応させたい場合は読み飛ばしてください。本プロジェクトではiPhoneとiPadのユニバーサル（ハイブリッド型）でアプリを作成します。

　まず、XcodeでPhoneGapプロジェクトを作成します。プロジェクトは以下の手順で作成します。


ファイルメニューから「新規プロジェクト...」を選択


PhoneGap-based Applicationを選択し「選択...」ボタンをクリック。NimbleKitとは異なり、ここでiPhone/iPadどちらを作成するかは選択できない


作成するプロジェクト名を入力し保存

　次に、あらかじめ用意してある画像フォルダを確認します。imagesフォルダにiPhone用の画像を、image2フォルダにiPad用の画像を入れてありますので、2つのフォルダをPhoneGapプロジェクトフォルダ内にあるwwwフォルダにドラッグ＆ドロップします。


wwwフォルダにドラッグドロップ


wwwフォルダ内にimagesフォルダが入った

　次に、Xcodeに戻ってPhoneGapプロジェクトのウィンドウを表示します。左領域のwwwフォルダの▲をクリックして展開すると、wwwフォルダ内にimagesフォルダとimages2フォルダが入っています。


wwwフォルダ内にimagesフォルダとimages2フォルダがあるのがわかる

　wwwフォルダ内にある「index.html」をダブルクリックし、画像を切り換えて表示するためのスクリプトを入力します。コードは以下になります。

　今回のアプリはiPhoneとiPadのユニバーサルなので、JavaScriptでnavigatorオブジェクトのuserAgentプロパティを調べ、iPhoneかiPadかを判別します^(*1)。userAgentプロパティには機種を示す文字列が入っていますので、文字列内に「iPad」という文字があればiPadだと判断して、表示する画像フォルダを設定します。


iPhone/iPadに対応したフォトアルバムのスクリプト

■サンプル1[HTML]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <style type="text/css">
    * {
      margin:0;
      padding:0;
    }
    div {
      text-align: center;
    }
  </style>
  <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    window.addEventListener("load", function(){
      var count = 1;
      var dir = "./images/"; // iPhone用画像がある場所
      if(navigator.userAgent.indexOf("iPad") > -1){
        dir = "./images2/";  // iPad用画像がある場所
      }
      setInterval(function(){
        var imgObj = document.getElementById("photo");
        count = count + 1;
        if (count > 5){ count = 1; }
        imgObj.src =dir+count+".jpg";
      }, 2000);
    }, true);
  </script>
 </head>
 <body>
   <div><img src="images/1.jpg" id="photo" width="320" height="480"></div>   
 </body>
</html>

Xcode 4を使用する場合は

　本記事ではXcode 3.2.6をもとに解説しています。Xcode 4を使用する場合は以下のページの「Xcode 4でPhoneGapプロジェクトを作成する」を参照してください。

http://www.openspc2.org/reibun/PhoneGap/

　また、Xcode 4でデバイスの回転を有効にするには以下の図の矢印で示すアイコン（ボタン）をクリックしてください。

*1　PhoneGapでは動作しているデバイスの種類を知るためのプロパティとしてwindow.device.platformがあります。ただし、window.device.platformは、windowオブジェクトでdevicereadyイベントが発生した後でないと読み出せません（今回のサンプルではdevicereadyイベントを検知していないため、window.device.platformを使ったところで停止してしまう）。また、実機とシミュレーターではwindow.device.platformの文字列が異なります。iOSのバージョンはwindow.device.versionプロパティで取得できます。

前へ 1 2 3 4 次へ