HTMLでMapKit JSを使用して、ウェブページにAppleマップを追加しましょう。

この記事では、Appleマップ表示ビューをHTML静的ウェブページに追加する手順について説明します。

<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/48e3b7cf-dcd5-4353-4a40-1ac5002dd2f8.jpeg">

続けるにはAppleの開発者アカウントが必要です。

## ステップ1. 識別子を作成してMapKit JSキーを取得します

識別子を持つiOSアプリケーション同様、まずはウェブサイトの識別子を作成する必要があります。

こちらの URLからアクセスしてください：https://developer.apple.com/account/resources/identifiers/add/bundleId

識別子作成フォームで`Maps IDs`を選択してから、`Continue`をクリックして次に進みます

![スクリーンショット 0002-12-13 23.04.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/6296cc97-b494-4801-17da-9682a69b0338.png)

説明文とアプリ識別子を入力し、`Continue`をクリックし、次に`Register`をクリックします。

![スクリーンショット 0002-12-13 23.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/d91af341-6ea7-1985-a4de-4d6cec3765d1.png)

識別子を登録すると、MapKit JSサービスにアクセスするためのキーを作成できます。`Keys`タブをクリックし、次にプラスアイコンをクリックして新たなキーを作成します。 

https://developer.apple.com/account/resources/authkeys/add

ここでキーの名前を入力し、オプション`MapKit JS`を選択します。次に、`Configure`ボタンをクリックします。

![スクリーンショット 0002-12-13 23.07.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/9380bf95-4c8a-4af4-b655-022ab177c8a2.png)

設定画面において、今作成した識別子を選択します。

![スクリーンショット 0002-12-13 23.09.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/0db62dde-f47b-5704-1c70-4060e36d7499.png)

`Register` ボタンをクリックします。これでキーが作成されたました。`Download` ボタンをクリックしてキーをダウンロードし、キーIDを記憶してください。

## ステップ2. 静的トークンを生成する

MapKit JSはほとんどの場合、ご使用のサーバーがお持ちのキーファイルに基づき動的トークンを生成することが必要となります。しかし、Appleが提供するオンラインツールを使用して静的トークンを生成することもできます。この静的トークンはご自分のドメインでの使用時のみ有効となるため、静的トークンをHTMLページに安全に追加することができます。

Appleマップのトークンメーカーツールのページを開く： https://maps.developer.apple.com/token-maker

| 項目 | 説明 |
|---|---|
| Apple Developer Team ID | アプリケーション識別子の先頭に示されている開発者ID（例えばアプリケーション識別子が`A1A11A11A1.com.developer.application`なら、開発者チームIDは`A1A11A11A1`です） |
| MapKit JS Key ID | キーの生成時に画面に表示されるキーID |
| Domain restriction (Not required; but strongly recommended) | ドメイン名の指定がない場合、誰でもあなたのトークンを使ってAppleの部署MapKitに申請を行うことができます。従ってドメイン名の指定は必ず必要です。ただし、`127.0.0.1`のローカルデバイスでテストを行っている場合には、最初はドメイン制限を設定しないという選択肢もあります。 |
| When should this token expire? | トークンの有効期限。ドメイン制限を設定している場合は、この期限をより長く設定することができます。|
| MapKit JS Private Key File | ダウンロードしたキーファイル |

フォームにすべての情報の入力後、`Get Token`ボタンをクリックすると、生成されたトークンが右側に表示されます。 `MapKit JS Code`タブをクリックして、HTMLコード例を取得し、コピーしてHTMLファイルに貼り付けます。以下はこのコードの例です。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>

<style>
#map {
    width: 100%;
    height: 600px;
}
</style>

</head>

<body>
<div id="map"></div>

<script>
const tokenID = "xxxxxx";

mapkit.init({
    authorizationCallback: function(done) {
        done(tokenID);
    }
});

var map = new mapkit.Map("map");
</script>
</body>
</html>
```

地図を表示するには、まだHTMLコードを書く必要がありますのでご注意ください。

## ステップ3. 地図注記の付いた地図を表示する

これでこのHTMLコードを使って所定の座標に地図注記アイテムの付いた地図を表示していただけます。これをテストするには、このコードにご自分のトークンを追加するのを忘れないようにしてください。

![スクリーンショット 0002-12-13 23.25.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/8939bd53-242f-079a-f59d-91f221b22adc.png)

これがCodePenのコードです。 JSコードセクションにトークンがないため、マップはそこに表示されません。

<p class="codepen" data-height="500" data-theme-id="light" data-default-tab="js,result" data-user="mszpro" data-slug-hash="vYXgVvV" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vYXgVvV">
  <span>See the Pen <a href="https://codepen.io/mszpro/pen/vYXgVvV">
  vYXgVvV</a> by シュンジョーァ (<a href="https://codepen.io/mszpro">@mszpro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### クリック可能なマップ注釈を追加する

ユーザーがマップ注釈アイテムの1つをタップすると、カスタムエレメントを表示することもできます。

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/48e3b7cf-dcd5-4353-4a40-1ac5002dd2f8.jpeg)

これがCodePenのコードです。 JSコードセクションにトークンがないため、マップはそこに表示されません。ここにあるコードの一部はdeveloper.apple.comのものです https://developer.apple.com/maps/web/

<p class="codepen" data-height="500" data-theme-id="light" data-default-tab="js,result" data-user="mszpro" data-slug-hash="WNGRaqv" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WNGRaqv">
  <span>See the Pen <a href="https://codepen.io/mszpro/pen/WNGRaqv">
  WNGRaqv</a> by シュンジョーァ (<a href="https://codepen.io/mszpro">@mszpro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## キーのリセット

ローカルテストの後、キーを再生成して、キーが安全であることの確認を忘れないでください。生成したキーをクリックして `Revoke` ボタンをクリックすると、キーを再生成できます。

## その他の形式

Apple Developerページに進んで、MapKit JSの詳細を確認できます：https://developer.apple.com/maps/web/

---

:relaxed: [Twitter @MszPro](https://twitter.com/MszPro)

:sunny: [私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。](http://mszpro.com/ioskiji/)
<img width="150" src="https://cdn.mszmagic.com/static-web-content/AppClipImage_small.png">