【連載】

実践! iPhoneアプリ開発

【第16回】ロギングアプリの作り方 (2) - Map Kitで地図を表示するを取得する

[2009/08/07 09:00]木下誠 ブックマーク ブックマーク

開発ソフトウェア

前回は、現在地情報を取得して、それにつぶやきを付けるところまでを説明した。今回は、このつぶやきを地図上に表示してみよう。これには、Map Kitを使う。

Map KitとMpa View

Map Kitは、iPhone OS 3.0から追加された、地図の表示を扱う事ができるフレームワークだ。iPhoneには標準で「マップ」というアプリケーションが付属するが、あれとまったく同じ地図が表示できるようになる。地図データは、Google Mapsを利用している。したがって、地図の精度や対応地域は、Google Mapsの仕様に準じる事になる。

Map Kitは、Interface Builderに統合されている。だから、アプリ上に地図を表示するのはとても簡単だ。実際にやってみよう。

前回作ったユーザインタフェースに、地図表示機能を付け加えてみる。まずは、xibファイルをInterface Builderで開こう。そして、ライブラリパネルにあるMap Viewを、ウインドウにドラッグして追加してやる。これは、MKMapViewというクラスになる。

これだけで、もう地図が使えるようになる。試しに、このままアプリケーションをビルドして起動してみよう。ズームアウトされた状態の世界地図が表示されるはずだ。あとは、ピンチイン/アウトやダブルタップで、地図内を自由に移動できる。

アノテーションの作成

次に、地図の上にピンをさす事を考えよう。このピンのような、地図上に表示して注意を惹かせるものを、アノテーションと呼ぶ。現在地を表す青いポイントも、アノテーションの一種である。

Map Kitでは、アノテーションを表すために、MKAnnotaionというプロトコルを用意している。このプロトコルには、1つのプロパティと、2つのメソッドが定義されている。座標を表すcoordinate、タイトルを表すtitle、サブタイトルを表すsubtitleだ。

List 1.

@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;
- (NSString*)title;
- (NSString*)subtitle;

これらのうち、titleとsubtitleの実装はオプションとなっている。

実際にアプリでMKAnnotationを利用するときは、このプロトコルに準拠したクラスを作るか、Map Kitに含まれているサブクラスを利用する事になる。今回は、自分でクラスを作ってみよう。

SpotLogAnnotationというクラスを実装する。宣言は次のようになる。

List 2.

@interface SpotLogAnnotation : NSObject <MKAnnotation>
{
    NSDictionary*   _logDict;
}

// プロパティ
@property (nonatomic, retain) NSDictionary* logDict;

@end

NSObjectのサブクラスだが、MKAnnotationに準拠している。ログ情報を管理するために、_logDictというインスタンス変数と、そのプロトコルを定義している。

実装は、次のようにしてみた。

List 3.

@implementation SpotLogAnnotation

@synthesize logDict = _logDict;

- (CLLocationCoordinate2D)coordinate
{
    // 座標を取得する
    CLLocationCoordinate2D  coordinate;
    coordinate.latitude = [[_logDict objectForKey:@"latitude"] doubleValue];
    coordinate.longitude = [[_logDict objectForKey:@"longitude"] doubleValue];

    return coordinate;
}

- (NSString*)title
{
    // ログテキストを取得する
    return [_logDict objectForKey:@"log"];
}

@end

MKAnnotationに含まれている、cordinateプロトコルとtitleメソッドを実装してみた。どちらも、ログ情報から必要なものを取得して、適切な形に変換して返してやっている。

これで、アノテーションの準備はできた。

ピンの表示

後は、アノテーションを作成して、MKMapViewに追加してやるだけである。これには、addAnnotation:というメソッドを使う。

List 4.

- (void)addAnnotation:(id <MKAnnotation>)annotation;

MKMapViewにアノテーションを追加すると、それに対応するビューがマップ上に追加される。このビューは、デフォルトだとピンを表すものになる。もちろん、カスタマイズすることも可能だ。ここでは、とりあえずピンをそのまま使う事にしよう。

ログ情報を表示するために、次のようなメソッドを実装しよう。

List 5.

- (void)showLog:(NSDictionary*)logDict
{
    // アノテーションを作成する
    SpotLogAnnotation*  annotation;
    annotation = [[SpotLogAnnotation alloc] init];
    [annotation autorelease];
    annotation.logDict = logDict;

    // アノテーションを追加する
    [_mapView addAnnotation:annotation];
}

まず、ログ情報をもとにSpotLogAnnotationクラスを作成する。そして、それをMKMapViewに追加してやればいい。これで、地図上にピンが現れる。

現れたピンをタップしてみよう。すると黒い吹き出しが出てきて、その中にタイトルが表示される。

これで、地図上につぶやきを表示する事ができるようになった。次回は、いろいろな詳細情報を表示させてみよう。

ここまでのソースコード: SpotLog-2.zip

1193
2
【連載】実践! iPhoneアプリ開発 [16] ロギングアプリの作り方 (2) - Map Kitで地図を表示するを取得する
前回は、現在地情報を取得して、それにつぶやきを付けるところまでを説明した。今回は、このつぶやきを地図上に表示してみよう。これには、Map Kitを使う。
https://news.mynavi.jp/itsearch/2016/02/22/iphone_apps/index_16.jpg
前回は、現在地情報を取得して、それにつぶやきを付けるところまでを説明した。今回は、このつぶやきを地図上に表示してみよう。これには、Map Kitを使う。

会員新規登録

初めてご利用の方はこちら

会員登録(無料)

マイナビニュース スペシャルセミナー 講演レポート/当日講演資料 まとめ
人事・経理・総務で役立つ! バックオフィス系ソリューション&解説/事例記事まとめ

一覧はこちら

今注目のIT用語の意味を事典でチェック!

一覧はこちら

ページの先頭に戻る