タップしたら画像を切り換える
画面がタップされたら画像を切り換える処理を追加し、フォトアルバムを仕上げましょう。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で処理されるスライドショーの上に重なる形で表示されますのでちょっと工夫が必要かもしれません。試してみてください。
