古籏一浩のJavaScriptラボ ― 第61回

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

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

古籏一浩

ツイートする

　HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。今回は、NimbleKitの「NKImageView」を使って簡単なフォトアルバムを作成します。

　NKImageViewは名前こそ「ImageView」とついていますが、iOSのUIImageViewクラスのようなアニメーション機能はなく、単純に画像を表示する機能しかありません。その分、驚くほど手軽に画像を扱えます。

　今回は、iPhoneだけでなくiPadでも動作するフォトアルバムアプリを作ってみましょう。

iPhoneで画像を表示する

　最初に、iPhone専用のプロジェクトを作成します。プロジェクトを作成する前に、iPhoneの画面サイズに合わせた画像を用意しておきましょう。今回は、iPhoneの画面サイズ（320×480）に合わせた画像ファイルを5つ用意し、imagesフォルダ内に入れておきます。


用意した画像。iPhoneの320×480pxで用意する

　画像の用意できたら、プロジェクトウィンドウのResourcesフォルダ内に、imagesフォルダごとをドラッグ＆ドロップします。

　Resourcesへドラッグするとダイアログが表示されますので、下図のように設定して「追加」ボタンをクリックします。

　以下のようにResourcesフォルダ内にimagesフォルダと画像ファイルが青色で表示されます。以上で準備は完了です。

　画像を1枚だけ画面いっぱいに表示してみましょう。

　まず、new NKImageView()でNKImageView（画像）オブジェクトを生成します。

　次に、init()メソッドで表示する画像のパスと表示位置、サイズを指定します。init()メソッドの引数は「X, Y, 横幅, 縦幅, URL」で、座標の単位はpxです。URLは、Resourcesフォルダ→imagesフォルダの「1.jpg」を指定する場合、以下のように記述します。

./images/1.jpg

　画像がResourcesフォルダに存在しない場合（誤ってHTMLフォルダにimagesフォルダを入れてしまった場合など）は、表示できません。うまく表示できない場合は画像のパスを確認してください。

　init()メソッドで画像の表示位置やサイズを指定したら、show()メソッドで画像を表示します。これで画像が表示できます（サンプル1）。


iOSシミュレーターで表示したところ。画像が画面いっぱいに表示される

■サンプル1

<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 imageview = new NKImageView();
imageview.init(0,0, 320, 480, "./images/1.jpg");
imageview.show();
</script>
</body>
</html>