2015年

4月

12日

Apple Watch 現在位置表示Mapの作成

Apple Watch 現在位置表示Mapの作成

WatchKitで現在位置の地図を表示する情報を入手しました。
ソースを眺めているだけでは習得出来ないので「WatchKitで現在位置の地図を表示する」このページに記載されている通りに制作して見ました。
写生ですが、振り返った時のために詳細にまとめました。
自分のメモとして公開しておきます。


Xcode 6.3 以上(6.3にて制作)

Download Xcode for Free
https://developer.apple.com/xcode/downloads/
6.2からAppleWatch開発環境(watchkit)が入っています。


iOS8.2以上 (iPhone)
8.2にバージョンアップするとアプリ「Apple Watch」が追加されるのですぐわかります。

iPhoneアプリケーション プロジェクトを生成
xcode起動後、「Create a new Xcode project」を選択します。
次にiOS -> Application -> Single View Applicationを選択します。

 

プロダクト名をWatchKitMap01とします。

Watch Kit Appを追加
Watch Kitを追加します。File -> New -> Target を選択します。


AppleWatch ->WatchKit Appを選択します。


Include Glance、Include Notification Scene は、今回使わないのでチェックを外す。

Finishiをクリックします。

 

Activateをクリックします。

 

WatchKitMap01
Interface.storyboardでUIを作成します。
いつものiOS開発と同じです。Mapを貼り付けます。

Mapは画面いっぱいに表示したいのでwidthもheightもRelative to Containerにします。

位置調整はこのままです。

プログラムでの位置調整ができませんのでその点はご注意ください。

 

※Apple WatchにはGlance(ぱっと見る)、Notification(通知)という機能に関するものもありますが、これらについては今回は使用しません。

※今回は「Static Interface」や「Dynaminc Interface」の機能は使用しないので、特にこの部分に関しては特に追加や修正を行う必要はありません。

 

WatchKitMap01の一覧


現在地の地図を表示手順
GPSから位置情報を取得して設定するには、iOS App側で位置情報を使用する設定が必要です。
この設定をするのはWatch Extensionではなく、iOS App側です。


iOS App側の設定
位置情報を使用する設定を行います。
Info.plistに位置情報を使用する目的を設定

NSLocationWhenInUseUsageDescription
NSLocationAlwaysUsageDescription

 

認証ダイアログが表示、ダイアログには最初に設定した「位置情報を使用する目的」も表示されます。


iOSアプリを起動して位置情報へのアクセスを許可する。

ViewController.swiftに記述します。

import UIKit

import CoreLocation


class ViewController: UIViewController {


    var locationManager = CLLocationManager()

    

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

        

        // 位置情報へのアクセスを要求する

        locationManager.requestAlwaysAuthorization()

    }


    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }


}


Watch Extension側の設定
位置情報を取得するMapのコードを書く

InterfaceController.swiftに記述します。

import WatchKit

import Foundation

import CoreLocation


// 接続 Delegate設定

class InterfaceController: WKInterfaceController, CLLocationManagerDelegate {


    // 地図

    @IBOutlet weak var map: WKInterfaceMap!

    

    var locationManager = CLLocationManager()

    

    override init() {

        super.init()

        

        // delegate ON

        locationManager.delegate = self

        

        if CLLocationManager.locationServicesEnabled() {

            switch CLLocationManager.authorizationStatus() {

            case .AuthorizedAlways, .AuthorizedWhenInUse:

                

                // 座標の表示

                locationManager.startUpdatingLocation()

                

                break

            default:

                break

            }

        }

    }

    

    //  座標の指定

    func locationManager(manager: CLLocationManager!, didUpdateToLocation newLocation: CLLocation!, fromLocation oldLocation: CLLocation!) {

        

        // newLocation 経度

        let lat = newLocation.coordinate.latitude

        // newLocation 緯度

        let lng = newLocation.coordinate.longitude

        

        // 座標の指定

        let coordinate = CLLocationCoordinate2DMake(lat, lng)

        // 領域範囲

        let span = MKCoordinateSpanMake(1.0, 1.0)

        

        let region = MKCoordinateRegionMake(coordinate, span)

        map.setRegion(region)

    }

    

    override func awakeWithContext(context: AnyObject?) {

        super.awakeWithContext(context)

        

        // Configure interface objects here.

        

    }


    override func willActivate() {

        // This method is called when watch view controller is about to be visible to user

        super.willActivate()

    }


    override func didDeactivate() {

        // This method is called when watch view controller is no longer visible

        super.didDeactivate()

    }


}


シミュレータで確認します。

メニュー > Debug > Location > Custom Location...


起動すると東京駅の地図が表示されます。

地名 : 東京駅
緯度 : 35.681382
経度 : 139.766084

 

GitHub WatchKitMap01

  

目 次