Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

10分で出来る雨雲チェックiPhoneアプリ!
YOLPで作る簡単便利地図アプリ

スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術(9)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Yahoo! Open Local Platform(YOLP)を使ったさまざまなアプリ・サービスの実装例を紹介しています。今回は、まもなく梅雨の時期を迎えることもあり、雨雲レーダー情報を表示するiPhoneアプリを作成してみます。

目次

初めに

 YOLPの気象関連機能(雨雲レーダー情報、気象情報API)を利用したアプリ・サービスの実装例を今までもいくつかご紹介してきました。今回はYahoo! JavaScriptマップAPIではなく、Yahoo! iOSマップSDK(以下、iOSマップSDK)を使って、雨雲レーダー情報を表示するネイティブアプリの作成方法を入門的にご紹介します。

参考:Yahoo! JavaScriptマップAPIでの実装例
完成イメージ(2時間前から1時間後の雨雲レーダー情報をチェックできる)
完成イメージ(2時間前から1時間後の雨雲レーダー情報をチェックできる)

環境の準備

アプリケーションIDの取得

 これまでの記事でも書かれていますが、YOLPで提供されているAPIを利用するためには、アプリケーションIDが必要になります。すでにアプリケーションIDをお持ちの方はそちらを利用していただき、アプリケーションIDをお持ちでない方、新しいアプリケーションIDの登録を希望する方は、以下のページを参考にアプリケーションIDを登録してください。

 なお、アプリケーションIDを登録するためには、Yahoo! JAPAN IDでログインする必要があります。

iOSアプリ開発環境の準備

 開発にはXcodeを使います。XcodeはiOS Dev Centerのサイト、もしくはApp Storeから入手できます。Xcodeの入手にはApple ID、Xcodeの利用にはMacが必要です。

 なお、本稿のサンプルコードは、Xcode 4.6.2、iOS6で開発しています。

地図の表示

 まずはiOSマップSDKのチュートリアルを参考に、地図を表示するところまで開発します。

※参考:チュートリアル

新規プロジェクトの作成

 Xcodeの[File]-[New]-[Project]を選択します。今回は[Single View Application]を選択します。

 「WeatherView」という名前でプロジェクトを作成します。今回は[Use Storyboards][Use Automatic Reference Counting]にチェックし、[Devices]-[iPhone]で作成します。

 チュートリアルの利用準備にある[YMapKit.framework]とフレームワーク、リソースファイルを追加します。

 チュートリアルの地図を表示するを参考に、コードを修正します。

ViewController.h
#import <UIKit/UIKit.h>
#import <YMapKit/YMapKit.h> //YMapKit.frameworkのヘッダーファイルをインポート

//デリゲートの追加
@interface ViewController : UIViewController <YMKMapViewDelegate> {
    YMKMapView *map; //YMKMapViewインスタンス用ポインタ
}

@end
ViewController.m
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    CGFloat width  = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height;

    //YMKMapViewのインスタンスを作成
    map = [[YMKMapView alloc] initWithFrame:CGRectMake(0, 0, width, height) appid:@"あなたのアプリケーションID" ];
    
    //地図のタイプを指定 標準の地図を指定
    map.mapType = YMKMapTypeStandard;
    
    //YMKMapViewを追加
    [self.view addSubview:map];

    //YMKMapViewDelegateを登録
    map.delegate = self;
    
    //地図の位置と縮尺を設定
    CLLocationCoordinate2D center;
    center.latitude = 35.6657214;
    center.longitude = 139.7310058;
    map.region = YMKCoordinateRegionMake(center, YMKCoordinateSpanMake(0.015, 0.015));
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
地図が表示されました
地図が表示されました

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5