# Mini Tokyo 3D の使用

Mini Tokyo 3D を Web ページに埋め込んで利用する、もしくは API を使って操作する方法は非常にシンプルです。まずは、このセクションの説明に従って設定してください。

# 使用の準備

Mini Tokyo 3D は ES6 に対応した主要ブラウザで動作します。Internet Explorer には非対応です。

# Mapbox アクセストークンの入手

Mini Tokyo 3D は地図タイルに Mapbox (opens new window) のサービスを利用しているため、利用には Mapbox のアクセストークンが必要です。Map Loads for Web (opens new window) セッションを利用しており、月間 50,000 接続までは無料です。下記の手順に従って、アクセストークンを入手してください。

サインアップ (opens new window)ページでユーザー情報を入力して、Mapbox アカウントを作成します。
Mapbox アカウントログイン後、画面上部のメニューから「Tokens」をクリックしてアクセストークン一覧を表示します。アカウント作成直後はデフォルトの「Default public token」のみが表示されます。
画面右上の「Create a token」ボタンをクリックして、アクセストークン作成ページに進みます。
「Token name」にはあなたの Web サイト名やアプリ名など、任意の名前を入力します。
「Token scopes」はデフォルト設定（Public scopes にすべてチェックが入った状態）のままにします。
「Token restrictions」の「URL」欄には、Mini Tokyo 3D を設置するサイトの URL を入力して「Add URL」ボタンをクリックします。URL の形式は、URL restrictions (opens new window) を参考にしてください。この URL 制限を設定しておくことで、他のサイトからこのアクセストークンを利用されることを防ぎます。
最後に画面下部の「Create token」ボタンをクリックすると、アクセストークン一覧に新たに作成されたトークンが表示されます。

# 直接 Web ページに組み込む

単純に Web ページに Mini Tokyo 3D のマップを表示するだけであれば、次のように HTML ファイルを編集するだけです。

まず、jsDelivr CDN のリンクを使用して、Mini Tokyo 3D のスタイルシートと JavaScript コードを HTML ファイルの <head> エレメント内で読み込みます。

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mini-tokyo-3d@latest/dist/mini-tokyo-3d.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/mini-tokyo-3d@latest/dist/mini-tokyo-3d.min.js"></script>
</head>

同じ HTML ファイルの <body> エレメント内で、id のついた HTML エレメント（下の例では <div> エレメント）を追加し、<script> エレメントで Mini Tokyo 3D インスタンスを作成する JavaScript コードを記述します。コンストラクタに渡す options オブジェクトの container には HTML エレメントの id を指定します。また、accessToken には、上のステップで入手した Mapbox アクセストークンを指定します。

<body>
  <div id="mini-tokyo-3d" style="width: 400px; height: 400px;"></div>

  <script>
    const options = {
      container: 'mini-tokyo-3d',
      accessToken: '<Mapbox アクセストークン>'
    };
    const map = new mt3d.Map(options);
  </script>
</body>

# モジュールとしてアプリに組み込む

バンドラーを使って Mini Tokyo 3D を自分のアプリケーションのコードに組み込む場合には、次の手順に従ってください。

まず、Mini Tokyo 3D の npm モジュールをインストールし、あなたのアプリケーションの package.json に登録します。

npm install mini-tokyo-3d --save

CommonJS 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。

const {Map} = require('mini-tokyo-3d');

ES6 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。

import {Map} from 'mini-tokyo-3d';

アプリケーションのコード内で、次のようにして Map オブジェクトを初期化します。options オブジェクトの container には Mini Tokyo 3D がマップを表示する HTML エレメントの ID を指定します。また、accessToken には、上のステップで入手した Mapbox アクセストークンを指定します。

const options = {
  container: '<コンテナエレメントの ID>',
  accessToken: '<Mapbox アクセストークン>'
};
const map = new Map(options);

# プラグインの追加

3Dマップ上に付加的な情報を表示する、様々なプラグインが利用可能です。プラグインは Mini Tokyo 3D 本体とは別に提供されており、サイト設置時もしくはアプリケーションビルド時に好みに応じて組み込むことができます。下記では例として、降水プラグイン (opens new window)と花火プラグイン (opens new window)を組み込む手順を示します。

直接 Web ページに組み込む場合は、次のように HTML ファイルの <head> エレメント内でプラグインを読み込み、plugins プロパティを指定して Map オブジェクトを初期化します。

  <script src="https://cdn.jsdelivr.net/npm/mt3d-plugin-precipitation@latest/dist/mt3d-plugin-precipitation.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mt3d-plugin-fireworks@latest/dist/mt3d-plugin-fireworks.min.js"></script>

  <script>
    const options = {
      /* ... */
      plugins: [mt3dPrecipitation(), mt3dFireworks()]
    };
    const map = new mt3d.Map(options);
  </script>

モジュールとしてアプリに組み込む場合は、次の手順に従ってアプリケーションをビルドしてください。

CommonJS 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。

const mt3dPrecipitation = require('mt3d-plugin-precipitation');
const mt3dFireworks = require('mt3d-plugin-fireworks');

ES6 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。

import mt3dPrecipitation from 'mt3d-plugin-precipitation';
import mt3dFireworks  from 'mt3d-plugin-fireworks';

アプリケーションのコード内で、次のように plugins プロパティを指定して Map オブジェクトを初期化します。

const options = {
  /* ... */
  plugins: [mt3dPrecipitation(), mt3dFireworks()]
};
const map = new Map(options);

← はじめに Mini Tokyo 3D のビルド →