このページの本文へ

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

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

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

古籏一浩

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

 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プロジェクトを作成します。プロジェクトは以下の手順で作成します。

【図】1.png
ファイルメニューから「新規プロジェクト...」を選択
【図】2.png
PhoneGap-based Applicationを選択し「選択...」ボタンをクリック。NimbleKitとは異なり、ここでiPhone/iPadどちらを作成するかは選択できない
【図】3.png
作成するプロジェクト名を入力し保存

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

【図】4.psd
wwwフォルダにドラッグドロップ
【図】5.png
wwwフォルダ内にimagesフォルダが入った

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

【図】6.png
wwwフォルダ内にimagesフォルダとimages2フォルダがあるのがわかる

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

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

【図】7.png
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でデバイスの回転を有効にするには以下の図の矢印で示すアイコン(ボタン)をクリックしてください。

図:001.psd

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

Web Professionalトップページバナー

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

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

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