PhoneGapプロジェクトの作成
まずはiPhone用のフォトアルバムから作りましょう。XcodeでPhoneGapプロジェクトを作成します。
ファイルメニューから「新規プロジェクト...」を選択
PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック
作成するプロジェクト名を入力し保存
プロジェクトを作成したらデスクトップにフォルダを作成して、アルバムに収録したい画像ファイルを入れます。今回は「images」という名前のフォルダに画像を入れています。
5種類の画像を用意する
imagesフォルダをPhoneGapプロジェクトフォルダ内にあるwwwフォルダへドラッグ＆ドロップします。
wwwフォルダにドラッグ＆ドロップ
wwwフォルダ内にimagesフォルダが入った
Xcodeに戻ってPhoneGapプロジェクトのウィンドウを表示し、左側にあるwwwフォルダの▲をクリックして展開します。wwwフォルダ内のimagesフォルダに、先ほどコピーした画像ファイルの存在を確認できます。
wwwフォルダ内にimagesフォルダと画像があるのが分かる
wwwフォルダ内にある「index.html」をダブルクリックして開きます。画像を切り換え表示するスクリプトを入力します。サンプル5は、画像をsetInterval()を使って2秒ごとに入れ替え、カウント変数の値が5を超えたら（画像の枚数を超えたら）最初の画像を表示しています。
画像を切り換えて表示するスクリプトを入力
■サンプル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」を選択します。
iOSシミュレータを選択する
シミュレートする機器を選択します。サンプル5はiPhone専用ですので、「iPhone Simulator」を選択します。
シミュレート機器はiPhoneを指定する
プロジェクトウィンドウの「ビルドと実行」ボタンをクリックすると、しばらくしてiOSシミュレータが起動し、サンプル5が実行されます。imagesフォルダに格納した画像が表示され、2秒ごとに切り替わります。
シミュレータ上でサンプル5が実行される
余白を調整する
サンプル5の実行結果をよく見ると、画像の上部と左側に少し余白があります。スタイルシートで余白を設定していないので、ブラウザーのデフォルトの値のまま表示されているのが原因です。以下のようにスタイルシートでmarginとpaddingを0にすると余白がなくなります。PhoneGapはHTMLベースなので、Webアプリと同じようにスタイルシートも設定する必要があります。
スタイルシートを設定して余白を0にする
<style type="text/css">
* {
margin:0;
padding:0;
}
</style>
今度は余白がなくなった
