このページの本文へ

JavaScriptでiPhone/iPad用フォトアルバムを作ろう (4/4)

2011年06月16日 11時00分更新

文●古籏一浩

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

タップしたら画像を切り換える

 画面がタップされたら画像を切り換える処理を追加し、フォトアルバムを仕上げましょう。NimbleKitでは、NKImageViewオブジェクトのsetOnClickCallback()メソッドに実行した関数を指定するだけでタップイベントの処理を作れます。

NKImageViewオブジェクト.setOnClickCallback(呼び出す関数)

 サンプル4が実際のプログラムです。画面をタップすると画像が切り替わります。iOSシミュレーター上ではマウスでクリックすると画像が次々と切り替わります。

完成したフォトアルバムアプリ

■サンプル4

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<script>
  var count = 0;
  var dir = "./images/";
  if(navigator.userAgent.indexOf("iPad") > -1){
    dir = "./images2/";  // iPad用画像がある場所
  }
  var imageURL = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; 
  var imageview = new NKImageView();
  var w = window.innerWidth;
  var h = window.innerHeight;
  imageview.init(0,0, w, h, dir+"1.jpg");
  imageview.show();
  imageview.setOnClickCallback("rotateImage");
  function rotateImage(){
    count = count + 1;
    count = count % imageURL.length;
    imageview.setImage(dir+imageURL[count]);
  }
</script>
</body>
</html>

 以上で、iPhone/iPad両方に対応したアプリケーションを作成できました。ちなみに、NKImageViewと通常のHTML/CSS+JavaScriptのスライドショーを組み合わせることもできます。ただし、NKImageViewはHTML/CSS+JavaScriptで処理されるスライドショーの上に重なる形で表示されますのでちょっと工夫が必要かもしれません。試してみてください。

前へ 1 2 3 4 次へ

この連載の記事

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

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

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

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