このページの本文へ

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

MapKitなら4行で作れるiPhone用地図アプリ

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

古籏一浩

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

シンプルな地図を表示

 最初にシンプルな地図を表示してみましょう。Xcodeを起動します。

【図】MapView01/1.png

 「新規Xcodeプロジェクトを作成」を選択します。新規プロジェクトで「User Templates」から「NimbleKit」を選択します。NimbleKit Applicationの書類アイコンが表示されたらクリックします。

 「Product」のポップアップメニューから、開発ターゲット(iPhone/iPad)を選択します。今回はiPhoneをターゲットにします。この状態で、ウィンドウ右下の「選択...」ボタンをクリックします。

【図】MapView01/2.png

 作成するプロジェクト名を入力し、保存ボタンをクリックするとプロジェクトが保存されます。

【図】MapView01/3.png

 プロジェクトウィンドウが表示されたらNimbleKitによる開発の準備が整いました。

【図】MapView01/4.png

 NimbleKitではNKMapViewクラスにMapKitを利用するためのメソッドが定義されています。詳しくは以下のページにドキュメントが用意されています。サポートしている機能はそれほど多くないので、ざっと目を通しておきましょう。

SDK Documentation & Reference.Documentation
http://www.nimblekit.com/documentation.php?action=display&id=27
【図】MapView01/5.png

 最初に、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を選択した状態で、プロジェクトウィンドウの「ビルドと実行」をクリックします。

【図】MapView01/6.png

 エラーがなければiOSシミュレーターが起動し、地図が表示されます。

【図】MapView01/7.png 【図】MapView01/8.png

 画面内をマウスでドラッグすると地図がドラッグした方向に動きます。optionキーを押しながらドラッグすると2本指での操作をシミュレーションでき、地図を拡大縮小できます。

 シミュレーター起動後、画面が真っ白になった場合はJavaScriptコードに不具合がある可能性があります。この場合、一度Safariで表示してみてエラーをチェックする方法もあります。

 シミュレーターではiPhoneだけでなく、iPadでの動作もチェックできますが、iPad(およびiPhone 4)では、モニタ画面のサイズ/解像度によっては一部が表示しきれない場合があります。iPhone/iPadアプリを快適に開発するには、大画面モニタも用意しておくとよいでしょう。

Web Professionalトップページバナー

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

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

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