このページの本文へ

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

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

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

古籏一浩

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

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

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

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

iPhoneで画像を表示する

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

【図】0.png
用意した画像。iPhoneの320×480pxで用意する

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

【図】1.psd

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

【図】2.png

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

【図】4.png

 画像を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>

 ちなみに、init()メソッドで指定する画像は、アプリケーションのパッケージ内に存在していなくても構いません。URLを指定すれば、Webサーバー上に公開されている画像も表示できます。実際にフォトアルバムを作り込むときには、サーバーから画像をダウンロードして表示するとよいでしょう。

Web Professionalトップページバナー

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

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

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