このページの本文へ

フォトアルバムアプリで学ぶPhoneGapの使い方 (2/4)

2011年08月11日 12時00分更新

文●古籏一浩

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

PhoneGapプロジェクトの作成

 まずはiPhone用のフォトアルバムから作りましょう。XcodeでPhoneGapプロジェクトを作成します。

【図】1.png

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

【図】2.png

PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック

【図】3.png

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

 プロジェクトを作成したらデスクトップにフォルダを作成して、アルバムに収録したい画像ファイルを入れます。今回は「images」という名前のフォルダに画像を入れています。

【図】4.png

5種類の画像を用意する

 imagesフォルダをPhoneGapプロジェクトフォルダ内にあるwwwフォルダへドラッグ&ドロップします。

【図】5.psd

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

【図】6.png

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

 Xcodeに戻ってPhoneGapプロジェクトのウィンドウを表示し、左側にあるwwwフォルダの▲をクリックして展開します。wwwフォルダ内のimagesフォルダに、先ほどコピーした画像ファイルの存在を確認できます。

【図】7.png

wwwフォルダ内にimagesフォルダと画像があるのが分かる

 wwwフォルダ内にある「index.html」をダブルクリックして開きます。画像を切り換え表示するスクリプトを入力します。サンプル5は、画像をsetInterval()を使って2秒ごとに入れ替え、カウント変数の値が5を超えたら(画像の枚数を超えたら)最初の画像を表示しています。

【図】8.png

画像を切り換えて表示するスクリプトを入力

■サンプル5[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">
  <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;
      setInterval(function(){
        var imgObj = document.getElementById("photo");
        count = count + 1;
        if (count > 5){ count = 1; }
        imgObj.src = "images/"+count+".jpg";
      }, 2000);
    }, true);
  </script>
 </head>
 <body>
   <div><img src="images/1.jpg" id="photo" width="320" height="480"></div>   
 </body>
</html>

iOSシミュレータで確認する

 実機でテストする前にiOSシミュレータで動作を確認しておきましょう。プロジェクトメニューから「アクティブSDKを設定」→「Simulator」を選択します。

【図】9.png

iOSシミュレータを選択する

 シミュレートする機器を選択します。サンプル5はiPhone専用ですので、「iPhone Simulator」を選択します。

【図】10.png

シミュレート機器はiPhoneを指定する

 プロジェクトウィンドウの「ビルドと実行」ボタンをクリックすると、しばらくしてiOSシミュレータが起動し、サンプル5が実行されます。imagesフォルダに格納した画像が表示され、2秒ごとに切り替わります。

【図】11.png

シミュレータ上でサンプル5が実行される

余白を調整する

 サンプル5の実行結果をよく見ると、画像の上部と左側に少し余白があります。スタイルシートで余白を設定していないので、ブラウザーのデフォルトの値のまま表示されているのが原因です。以下のようにスタイルシートでmarginとpaddingを0にすると余白がなくなります。PhoneGapはHTMLベースなので、Webアプリと同じようにスタイルシートも設定する必要があります。

【図】12.png

スタイルシートを設定して余白を0にする


  <style type="text/css">
    * {
      margin:0;
      padding:0;
    }
  </style>
【図】13.png

今度は余白がなくなった

この連載の記事

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

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

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

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