実践：GeoKit と iPhone で作る位置情報アプリケーション（中編）

本記事は、WEB+DB PRESS Vol. 57 内の特集、「スマートフォンでもケータイでも！［速習］位置情報サービス」のボツ原稿をリライトしたものです。
特集の方では、この原稿の代わりに、PostGIS をふんだんに使った実践編を書き下ろしました。その他にも、ケータイ/スマートフォン向けに位置情報アプリケーションを作るための情報が盛り込まれた特集になっています。詳細については前のエントリをご確認ください。

※DB+PRESS 掲載前のボツ原稿のため、細かい部分の推敲はできておりません。ソースコード等におかしなところがあったらツイッターアカウントhal_skまで教えていただければ幸いです。

前編はこちら→実践：GeoKit と iPhone で作る位置情報アプリケーション (前編)
後編はこちら→実践：GeoKit と iPhone で作る位置情報アプリケーション (後編)

iPhone アプリケーションを作成する

前編では、Yahoo! ワイワイマップのPOIデータを緯度経度で検索し、JSON形式で出力できるRailsアプリケーションを作成しました。今度は、そのデータを表示するための iPhone アプリケーションを作成します。
XCode を起動し、新規のアプリケーションを作成します。

アプリケーション作成

新規プロジェクトを作成し、Navigation-based Application を選択します。 プロジェクト名は WaiwaiView としました。

マップ一覧の実装

まずは、現在あるマップの一覧を取得して、リストへ表示しましょう。 JSON 形式のデータをパースするために、JSON Framework を利用することとします。
http://code.google.com/p/json-framework/ より、dmg ファイルをダウンロードします。執筆時点での最新、JSON_2.2.3.dmg をダウンロードしました。

ダウンロードした dmg ファイルをマウントするといくつかフォルダがありますが、JSON フォルダを XCode の「グループとファイル」へドラッグドロップします。 その際に出てくるウィンドウで、「ディスティネーショングループのフォルダに項目をコピーする」のチェックを入れ、追加ボタンを押します。

→
追加されました。

リストを表示するためには、http://#{前編でセットアップしたサーバ}/map/ から取得できるJSONをパースし、一覧へ表示します。 まずは RootViewController.m の先頭に、

#import "JSON.h"

を追加して、JSON ライブラリを利用できるようにします。

また、RootViewController.h に、マップ一覧を格納するための変数定義を追加します。

RootViewController.h

@interface RootViewController : UITableViewController {
	NSArray *maps;
}
@end

不要になったメモリを開放するため、dealloc へ release を追加しておきます。 RootViewController.h

- (void)dealloc {
	[maps release];
    [super dealloc];
}

その後、RootViewController.m の - (void)viewDidLoad メソッドのコメントアウトを外し、以下のコードを追加します。 RootViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
	
	NSString *urlString = @"http://192.168.1.30:3000/map/";
	NSURL *url = [NSURL URLWithString:urlString];
	// サーバのデータを取得
	NSString *jsonString = [NSString stringWithContentsOfURL:url
													encoding:NSUTF8StringEncoding
													   error:nil];
	// JSON データをパースして NSArray に変換
	maps = [[jsonString JSONValue] retain];
}

これで、maps 変数に map データの一覧が入っているはずです。

この maps の内容をリストビューへ表示するためのメソッドを追加します。 RootViewController.h

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [maps count];
}

RootViewController.h

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }
    
	cell.textLabel.text = [[[maps objectAtIndex:indexPath.row] objectForKey:@"map"] objectForKey:@"title"];

    return cell;
}

ビルドすると、マップ名が表示されるようになったと思います。

地図の表示

さて、このマップをクリックしたら、地図が表示されるように変更しましょう。

地図を表示するための ViewController を追加します。Classes フォルダを右クリックし、新規ファイルを追加します。

ファイルの種類は、UIViewController subclass にします。オプションは選択しません。

ファイル名は WaiwaiMapViewController としました。

Frameworks を右クリックし、CoreLocation 及び MapKit フレームワークを追加します。

WaiwaiMapViewController.m にて、

#import <CoreLocation/CoreLocation.h>

を追加します。

RootViewController から WaiwaiMapViewController を呼び出すため、import と 変数を追加します。

RootViewController.h

#import <UIKit/UIKit.h>
#import "WaiwaiMapViewController.h"

@interface RootViewController : UITableViewController {
	NSArray *maps;
	WaiwaiMapViewController *waiwaiMapViewController;
}
@end

マップ名をクリックした際にマップビューを呼び出すようにします。

RootViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
	// WaiwaiMapViewController をインスタンス化
	waiwaiMapViewController = [[[WaiwaiMapViewController alloc] initWithNibName:nil bundle:nil] retain];
	
	NSString *urlString = @"http://192.168.10.91:3000/map/";
	NSURL *url = [NSURL URLWithString:urlString];
	// サーバのデータを取得
	NSString *jsonString = [NSString stringWithContentsOfURL:url
													encoding:NSUTF8StringEncoding
													   error:nil];
	// JSON データをパースして NSArray に変換
	maps = [[jsonString JSONValue] retain];
}
...
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
	[self.navigationController pushViewController:waiwaiMapViewController animated:YES];
}
...
- (void)dealloc {
	[waiwaiMapViewController release];
	[maps release];
    [super dealloc];
}

WaiwaiMapViewController から、地図を表示できるように変更します。

WaiwaiMapViewController.h

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@interface WaiwaiMapViewController : UIViewController {
	MKMapView *mapView;
}

@end

WaiwaiMapViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
	mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
	mapView.showsUserLocation = YES;
	[self.view insertSubview:mapView atIndex:0];
}
- (void)dealloc {
	[mapView release];
    [super dealloc];
}

ビルドして、マップ名をクリックすると地図が表示されるようになったと思います。 シミュレータ上では、現在地は常にApple本社が表示されてしまうので、アップルにいることになってしまいます。実機で試すと、現在地が取得できます。
（iPhone SDK 4 beta 2 より、シミュレータでも現在地が取得できるようになりました。）

地図上に Pin を表示する

これではただ地図が表示されるだけですので、マップ内のアイテムを Pin で表示してみましょう。

Pin を表示するためには、MKAnnotation protocol を実装したオブジェクトを作る必要があります。 新規ファイルを追加し、NSObject を継承した MapAnnotation クラスを作成します。
作成したオブジェクトに MKAnnotaion protocol の定義を加えましょう。 MKAnnotation は地図上にオブジェクトを配置するためのプロトコルで、 coordinate プロパティ、title プロパティ、subtitle プロパティを定義することが可能です。 coordniate プロパティ以外は必須ではありませんが、今回は全て利用します。

MyAnnotation.h

#import <Foundation/Foundation.h>
#import <MapKit/MapKit.h>

@interface MapAnnotation : NSObject*lt;MKAnnotation> {
	NSString *title;
	NSString *subtitle;
	CLLocationCoordinate2D coordinate;
}
@property(nonatomic,retain) NSString *title;
@property(nonatomic,retain) NSString *subtitle;
@property(nonatomic,readonly) CLLocationCoordinate2D coordinate;

-(id)initWithCoordinate:(CLLocationCoordinate2D )newcoordinate withTitle:(NSString *)newtitle withSubtitle:(NSString *)newsubtitle;
@end

ワイワイマップのデータをサーバから取得して MapAnnotation のインスタンスに格納し、MapView に表示する処理を行います。

MapAnnotaion.h と JSON.h の import を追加
WaiwaiMapViewController.m

#import "MapAnnotation.h"
#import "JSON.h"

MapID 用の変数と Annotaion 格納用の配列、ロード用の関数定義を追加します・ WaiwaiMapViewController.h

@interface WaiwaiMapViewController : UIViewController {
	MKMapView *mapView;
	NSMutableArray *annotations;
	int waiwaiMapId;
	CLLocationCoordinate2D center;
}
@property int waiwaiMapId;
-(void)setCenter:(CLLocationCoordinate2D)newcoordinate;
-(void)loadAnnotaions;
@end

配列の初期化処理を追加します。 WaiwaiMapViewController.m

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (!(self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) return nil;

	annotations = [[NSMutableArray arrayWithCapacity:0] retain];
    return self;
}

retain しているので、release も忘れずに追加します。

- (void)dealloc {
	[mapView release];
	[annotations release];
    [super dealloc];
}

緯度経度を設定する処理と、その緯度経度と mapId を元にAnnotaion をロードする関数定義を追加します。

-(void)setCenter:(CLLocationCoordinate2D)newcoordinate{
	center = newcoordinate;
}
-(void)loadAnnotaions{
	// 配列を初期化
	[annotations removeAllObjects];
	
	NSString *urlString = [NSString stringWithFormat:@"http://192.168.10.91:3000/map/search/%d/?ll=%0.6f,%0.6f",
						   self.waiwaiMapId, center.latitude, center.longitude];
	NSURL *url = [NSURL URLWithString:urlString];
	// サーバのデータを取得
	NSString *jsonString = [NSString stringWithContentsOfURL:url
													encoding:NSUTF8StringEncoding
													   error:nil];
	// JSON データをパースして NSArray に変換
	NSArray *ary = [jsonString JSONValue];
	// MapAnnotaion の配列を生成
	for (NSDictionary *dic in ary){
		// 各データを取得
		NSString *title = [[dic objectForKey:@"poi"] objectForKey:@"title"];
		NSString *subtitle = [[dic objectForKey:@"poi"] objectForKey:@"description"];
		double lat = [[[dic objectForKey:@"poi"] objectForKey:@"latitude"] doubleValue];
		double lon = [[[dic objectForKey:@"poi"] objectForKey:@"longitude"] doubleValue];
		CLLocationCoordinate2D coord = CLLocationCoordinate2DMake(lat, lon);
		// MapAnnotaion データを作成
		MapAnnotation *anno = [[MapAnnotation alloc] initWithCoordinate:coord withTitle:title withSubtitle:subtitle];
		[annotations addObject:anno];
	}
	// mapView に登録
	[mapView addAnnotations:annotations];
	// 中心点 を指定された場所に移動
	MKCoordinateRegion region;
	MKCoordinateSpan span;
	span.latitudeDelta= 0.5;
	span.longitudeDelta= 0.5;
	
	region.span=span;
	region.center=center;
	mapView.region = region;
}

RootViewController から、waiwaiMapId を渡すように変更します。
RootViewController.m

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
  	// waiwaiMapId をセット
	waiwaiMapViewController.waiwaiMapId = [[[[maps objectAtIndex:indexPath.row] objectForKey:@"map"] objectForKey:@"id"] intValue];
	[self.navigationController pushViewController:waiwaiMapViewController animated:YES];
}

テスト用として、WaiwaiMapViewController の初期化時に渋谷の緯度経度を設定するようにしておきます。
WaiwaiMapViewController.m

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (!(self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) return nil;
	
	annotations = [[NSMutableArray arrayWithCapacity:0] retain];
	// 初期値を渋谷に
    center = CLLocationCoordinate2DMake(35.647401, 139.716911);
    return self;
}

viewDidLoad 時に、loadAnnotations を呼び出すようにしておきます。 WaiwaiMapViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
	mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
	mapView.delegate = self;
	mapView.showsUserLocation = YES;
	[self.view insertSubview:mapView atIndex:0];
	if (waiwaiMapId > 0){
		[self loadAnnotaions];
	}
}

実行すると、地図が渋谷に変更され、ピンが表示されるはずです。 ピンをタップすると、詳細の一部が表示されます。

長くなってしまったので、ここまでを中編として、後編へ続く。。。