シンプルな地図を表示
最初にシンプルな地図を表示してみましょう。Xcodeを起動します。
「新規Xcodeプロジェクトを作成」を選択します。新規プロジェクトで「User Templates」から「NimbleKit」を選択します。NimbleKit Applicationの書類アイコンが表示されたらクリックします。
「Product」のポップアップメニューから、開発ターゲット（iPhone／iPad）を選択します。今回はiPhoneをターゲットにします。この状態で、ウィンドウ右下の「選択...」ボタンをクリックします。
作成するプロジェクト名を入力し、保存ボタンをクリックするとプロジェクトが保存されます。
プロジェクトウィンドウが表示されたらNimbleKitによる開発の準備が整いました。
NimbleKitではNKMapViewクラスにMapKitを利用するためのメソッドが定義されています。詳しくは以下のページにドキュメントが用意されています。サポートしている機能はそれほど多くないので、ざっと目を通しておきましょう。
- SDK Documentation & Reference.Documentation
- http://www.nimblekit.com/documentation.php?action=display&id=27
最初に、NKMapViewからnewで新規オブジェクトを作成します。
var mapview = new NKMapView();
次に、init()メソッドで地図を表示する領域を指定します。init()メソッドの引数は、x,y,横幅,縦幅です（単位はpt）。以下の例では (0,0)-(320,480)の範囲に地図を表示します。
mapview.init(0,0, 320, 480);
なお、init()で指定した地図の表示領域は、HTML+CSSを表示する領域（Webビュー）とは別に確保されます。画面をスクロールしても地図部分はスクロールせず、領域は固定されます。Webページに埋め込む感覚で地図を扱いたい場合は、Google Maps APIを使った方が手軽です。
地図の表示範囲が指定できたら、setDisplayRegion()メソッドを使って、表示する地図の中心位置と範囲を指定します。setDisplayRegion()メソッドの引数は、緯度,経度,緯度の表示範囲,経度の表示範囲 です。表示範囲は値が小さくなるほどズームインした状態になり、値が大きくなるとズームアウトした状態になります。以下の例では長野県塩尻駅を中心とした地図が表示されます。
mapview.setDisplayRegion(36.115144154001165, 137.94774770736694, 0.1, 0.1);
最後に、show()メソッドを使って地図を表示します。ちなみに、地図を非表示にするのはhide()メソッドです。
mapview.show();
ここまでをまとめたのがサンプル1です。スクリプト部分はわずか4行。とても手軽です。
■サンプル1[HTML]
<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 mapview = new NKMapView(); mapview.init(0,0, 320, 480); mapview.setDisplayRegion(36.115144154001165, 137.94774770736694, 0.1, 0.1); mapview.show(); </script> </body> </html>
iOSシミュレーターでチェック
地図を表示するプログラムができたので、シミュレーターを使って動作を確認します。どうしても実機でないとチェックできないもの（ジャイロセンサー機能を使ったアプリなど）以外は、先にシミュレーターを使って動作を確認し、不具合を解消しておきましょう。
Xcodeの動作チェックの対象をシミュレーターにし、デバイスはiPhoneを選択した状態で、プロジェクトウィンドウの「ビルドと実行」をクリックします。
エラーがなければiOSシミュレーターが起動し、地図が表示されます。
画面内をマウスでドラッグすると地図がドラッグした方向に動きます。optionキーを押しながらドラッグすると2本指での操作をシミュレーションでき、地図を拡大縮小できます。
シミュレーター起動後、画面が真っ白になった場合はJavaScriptコードに不具合がある可能性があります。この場合、一度Safariで表示してみてエラーをチェックする方法もあります。
シミュレーターではiPhoneだけでなく、iPadでの動作もチェックできますが、iPad（およびiPhone 4）では、モニタ画面のサイズ／解像度によっては一部が表示しきれない場合があります。iPhone/iPadアプリを快適に開発するには、大画面モニタも用意しておくとよいでしょう。
