実機で確認する
デバイスの向きに応じた調整をスタイルシートで処理するように変更したので、JavaScriptのコードは以下のようにすっきりシンプルになりました。
 |
|---|
| プログラムを修正 |
window.addEventListener("load", function(){
var count = 1;
var dir = "./images/"; // iPhone用画像がある場所
if(navigator.userAgent.indexOf("iPad") > -1){
dir = "./images2/"; // iPad用画像がある場所
var imgObj = document.getElementById("photo");
}
setInterval(function(){
var imgObj = document.getElementById("photo");
count = count + 1;
if (count > 5){ count = 1; }
imgObj.src =dir+count+".jpg";
}, 2000);
}, true);
iOSシミュレータで正しく動作するかどうか確認します。デバイスを回転させるとメディアクエリーによってCSSファイルが切り替わり、画像のサイズが調整されます。
 |  | |
|---|---|---|
| シミュレータで動作を確認する | ||
 |  |
|---|
最後に実機でもチェックしてみましょう。実機による確認方法はこれまでの連載を参照してください（関連記事）。デバイスを回転させると、画像のサイズが調整されて表示されるはずです。
 |  | |
|---|---|---|
| iPadを回転させると回転方向に合わせて画像サイズが調整される | ||
以上でiPhone/iPadに対応したフォトアルバムアプリの完成です。今回のサンプルはシンプルに画像を切り換えるだけでしたが、スライド系のライブラリーを利用してより豪華なスライドショーにするのもよいでしょう。
ソーシャルリアクション
この連載の記事
- 第75回 CSS3でFlash並みアニメが作れるSencha Animator
- 第74回 Capture APIでiPhone用ビデオレコーダーを作ろう
- 第73回 JavaScriptで作れるiPhone用ボイスレコーダー
- 第72回 PhoneGapのMedia APIでバイブ付き音楽プレーヤー
- 第71回 iPhoneがPhoneGapで簡易電子書籍リーダーに
- 第70回 PhoneGapでMapKitを使って地図アプリを開発
- 第69回 HTML5+CSS3でiPhone用動画アプリを作ろう
- 第67回 フォトアルバムアプリで学ぶPhoneGapの使い方
- 第66回 PhoneGapでiPhoneのカメラアプリを作ろう
- 第65回 HTML5でiPhoneアプリ開発！PhoneGap入門
- この連載の一覧へ
