[WWDC18][iOS 12] MapKit JSを使用するために必要な作業について #WWDC18

本記事ではMapKit JSを使用するために必要な作業を紹介します。

WWDC18

#iOS

#MapKit

#iPhone

平屋真吾

2018.06.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

本記事ではMapKit JSを使用するために必要な作業を紹介します。

本記事は Apple からベータ版として公開されているドキュメントを情報源としています。そのため、正式版と異なる情報になる可能性があります。ご留意の上、お読みください。

検証環境

本記事は以下の環境で検証を行っています。

macOS Sierra 10.13.5
Node.js v9.2.0
jsonwebtoken v7.4.3

MapKit JS

MapKit JSは以下のような処理を行うためのJavaScriptのフレームワークです。

インタラクティブなApple MapsをWebサイトに表示する
地図に注釈を表示する
位置情報検索を実行する

サンプル地図やサンプルコードは以下のページで提供されています。

MapKit JS - Maps - Apple Developer

Tokenについて

MapKit JSを使用するために必要な作業は、以下のTokenを作成することです。

Authorization Token
- アプリの開発者が以下を満たすことを証明するために存在する
  - 信頼された開発者であること
  - Apple Developer Programのメンバーであること

次の「Maps IDを作成する」から、準備作業に入ります。

Maps IDを作成する

アプリを識別するための「Maps ID」を作成します。

developer.apple.com > Account > Certificates, Identifiers & Profiles を開く
Identifiers > Maps IDsを開き、「+」ボタンをクリックする
Descriptionにアプリ名を、IdentifierにMaps IDを入力し、「Continue」をクリックする
- Descriptionの例: MapKitJSSample
- Identifierの例: maps.com.example.mapkitjssample (「maps」で始まる逆ドメイン形式の文字列にする)
入力内容を確認し、「Register」をクリックする
「Done」をクリックする

Private keyを作成する

Maps IDに対応するPrivate keyを作成します。

developer.apple.com > Account > Certificates, Identifiers & Profiles を開く
Keys > Allを開き、「+」ボタンをクリックする
private keyに関する情報の入力・選択を行う
- Key Descriptionにprivate keyの名前を入力する
- Key Servicesの「MapKit JS」にチェックを入れ、「Configure」をクリックする
  - private keyに紐付けるMaps ID(先ほど作成したID)を選択し、「Configure」をクリックする
情報の入力・選択が完了したら「Continue」をクリックする
内容を確認し、「Confirm」をクリックする
「Download」をクリックする
- 拡張子が「.p8」のテキストファイルがダウンロードされる
- このファイルには秘密鍵が含まれているので、安全な場所で保管するようにする

Key IDを確認する

Key IDは、Private keyに割り当てられるIDで「Authorization Token」を作成する際に使用します。Key IDは以下の手順で確認できます。

developer.apple.com > Account > Certificates, Identifiers & Profiles を開く
Keys > Allを開く
対象のPrivate keyをクリック
- Key IDを確認できる

Authorization Tokenを作成する

「Authorization Token」を作成します。

このTokenは以下の情報から作成します。

Private key
Key ID
Apple DeveloperアカウントのTeam ID

また、Authorization Tokenは「JWT(JSON Web Token)」という仕様に準拠している必要があります。

JWTに準拠したTokenはこちらで紹介されている各種ライブラリを使用して作成できます。MapKit JSはES256形式で作成されたTokenをサポートするので、ES256形式に対応しているライブラリを使用しましょう。

「jsonwebtoken」を使用してAuthorization Tokenを作成する

今回はNode.js向けのjsonwebtokenというツールを使用してAuthorization Tokenを作成してみました。

以下はToken作成の実装例です。

var jwt = require('jsonwebtoken');
var fs = require('fs');

var payload = { 
    iss: '<Your Apple Developer Team ID>' 
};
var cert = 
[ "-----BEGIN PRIVATE KEY-----",
  "<Your Private Key>",
  "-----END PRIVATE KEY-----"
].join('\n');
var option = { 
    algorithm: 'ES256', // sign with RSA ES256
    keyid: '<Your Key ID>', 
    expiresIn: '5d'
};
var callback = function(err, token) { 
    if (err) {
        console.log("error:" + err); 
    } else {
        console.log("token:" + token); 

        // デコードしてログを出力
        var decoded = jwt.decode(token, {complete: true});
        console.log(decoded.header);
        console.log(decoded.payload);
    }
};
var token = jwt.sign(payload, cert, option, callback);