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