Interactive Storytelling（Mapbox）の非公式チュートリアルを作った

TL;DR

• Interactive Storytelling は Mapbox が提供するストーリーマップのテンプレートである。
• 公式の Interactive Storytelling の入門記事に不足していた Mapbox Studio の説明を補足した。
• この記事を使えば、Mapbox の事前知識なしでこんな感じのデモが作れるようになる。

はじめに

Mapbox社は昨年末、Interactive Storytelling というテンプレートを発表しました。

Interactive Storytelling を使えば、Mapbox のカスタム地図をベースとしたストーリーマップを気軽に作ることができます。
（例えば、下図の公式デモのようなストーリーマップ）

そしてテンプレートの発表と同時に、Mapbox社は様々なチャネルで広報を打ち出しました。

その広報の一つに、次の入門記事があります。

• How to build a “scrollytelling” map | Medium

この記事は、非エンジニア向けにも分かりやすく書かれています。
ただ、Mapbox Studio の説明が省略されているため、「Mapboxのサービスに慣れていない人には入門しづらい内容なのでは？」と私は感じました。

そこで今回、公式記事の内容に Mapbox Studio の操作などを盛り込んで、一気通貫した入門ができるチュートリアルを作りました。

Mapbox Studio の基本用語

Mapbox Studio は、Mapboxで使う Style という背景地図をWeb上でインタラクティブにデザインするツールです。

Style のほか、開発者は Style の元となる Tileset と Dataset を自由に作ることができます。

Style
単体／複数のレイヤーで構成される、カスタム可能なMapboxの背景地図。
衛星地図など基本的なレイヤーで構成されたプリセットがいくつか用意されていて、レイヤーの追加・編集も可能。

Tileset
レイヤーを作ることができるデータフォーマット。 Dataset から作ることもできるし、データから直接作ることもできる。

Dataset
Tileset を作ることができるデータフォーマット。
Mapbox Studio の管理ページより、GUI操作でデータの編集が可能。

Interactive Storytelling の実装イメージ

Interactive Storytelling で作れるのは、テンプレートに沿ったストーリーマップです。
スクロールイベントに合わせて、Mapbox Studio で作った単一／複数のレイヤーが切り替わるマップコンテンツが作れます。

• 東京都の犯罪統計 × Interactive Storytelling - Hirosaji's bl.ocks

例えば、上記のストーリーマップは、次の３種類のレイヤーを組み合わせています。

• 位置情報マーカー付き地図レイヤー
• 塗り分け地図レイヤー（2D）
• 塗り分け地図レイヤー（3D）

各レイヤーの出し分けは、opacity で制御されます。

今回のチュートリアルでは、これらのレイヤーの作り方を重点的に解説します。

チュートリアル手順

この非公式チュートリアルでは、次の手順で Interactive Storytelling テンプレートのストーリーマップを作ります。

1. 公式のテンプレートを用意
2. Mapbox Studio でカスタム地図（Style）を作成
3. 作ったカスタム地図（Style）をテンプレートに載せる
4. テンプレートに沿ってカスタム地図（Style）を制御する

1. 公式のテンプレートを用意

まず、公式のGithubリポジトリをダウンロードして、テンプレートを取得します。
今回は、storytelling/src/vanilla-js のテンプレートを使います。自分の作業ディレクトリにコピーしておいてください。

コピーしたテンプレートでは、次の作業をしてください。

• config.js.template を config.js にリネーム
• config.js の showMarkers を false に変更

これらの作業の詳しい説明が必要な場合は、公式の入門記事を参照してください。

2. Mapbox Studio でカスタム地図（Style）を作成

次に、Mapbox Studio で Style を作ります。

2.1 Tileset を作成

Style を作成するため、まずは Tileset を作ります。
下表を参考に、状況に合わせて手順を選んでください。

	2.1-A Dataset から作成	2.1-B Tileset を直接作成
データの種類	CSV, GeoJSON	CSV, GeoJSON, 他（参考）
データサイズ	〜５MB	〜１GB
後で編集するか	○	×

2.1-A Dataset から作成

Mapbox Studio の管理ページで手持ちのデータをアップロードします。
（データの持ち合わせがない場合は、私が用意したCSVで試してみましょう）

「New dataset」を押して、案内に従ってアップロードしてください。

アップロードが終了したら、「Start editing」を押してデータを編集してみましょう。

編集画面では、polygonやメタデータの編集が可能です。

編集方法の詳細については、公式リファレンスを確認してください。

編集ができたら、右上の「Export」でTilesetを作成してください。
そこまでできたら完了です。

2.1-B Tileset を直接作成

Datasetと同様に、まずは Mapbox Studio の管理ページで手持ちのデータをアップロードします。
（データの持ち合わせが無い場合は、私が用意したGeoJSONを使ってください）

「New tileset」を押して、データをアップロードしてください。

アップロードができたら完了です。

2.2 Style を作成

Style も、Mapbox Studio の管理ページから作成します。

「New style」を押して、適当なテンプレートやテーマを選んでください。

編集画面が開かれたら、Layersタブ > 「+」マークよりレイヤーを追加します。

そして、Select dataタブにあるサイドバーのSourceにて、2.1 で作成した Tileset を選びます。

これで、追加したレイヤーから Tileset のデータを読み込めるようになります。

続いて、Tileset のデータをレイヤーの上に描画します。
今回は、次の３つの描画方法を紹介します。

• 位置情報マーカー
• 塗り分け地図（2D）
• 塗り分け地図（3D）

読み込んだ Tileset のデータに合わせて、描画方法を選びましょう。

2.2-A 位置情報マーカー付き地図レイヤーを作る

新規レイヤーに Tileset データを追加した後、まずSelect dataタブにあるサイドバーのTypeがCircleになっていることを確認します。

実は、これで既に基本設定は完成しています。
あとは、Styleタブを選んで、好きなように属性を調整してみてください。

調整ができたら、右上の「Publish」ボタンを押して完了です。

2.2-B 塗り分け地図レイヤー（2D）を作る

新規レイヤーにTilesetデータを追加した後、Select dataタブにあるサイドバーのTypeがFillになっていることを確認します。

次に、塗り分けに使うデータ項目を設定します。
StyleタブにあるサイドバーのColorからStyle across data rangeを選び、使いたい項目を選んでください。

項目を選んだら、塗り分けの上限/下限値と、それぞれの色を設定しましょう。

ここまでできたら、右上の「Publish」ボタンを押して完了です。
他に気になる属性があれば、適宜調整してください。

2.2-C 塗り分け地図レイヤー（3D）を作る

新規レイヤーに Tileset データを追加した後、Select dataタブにあるサイドバーのTypeをFill extrusionに変更します。

次に、塗り分けに使うデータ項目を設定しますが、これは上記の「塗り分け地図レイヤー（2D）を作る」を参照してください。
塗り分けの色設定も同様です。

それらができたら、StyleタブにあるサイドバーのHeightで、使いたいデータ項目の選択し、上限/下限の値・色を設定してください。

その他、気になる属性があれば調整して、右上の「Publish」ボタンを押せば作業完了です。

もしStyleの調整で少し凝った数値計算がしたい方は、公式リファレンスを参照してください。

3. 作ったカスタム地図（Style）をテンプレートに載せる

2.2で作った Style を Interactive Storytelling テンプレートに載せるために、作業ディレクトリにある設定ファイル config.js を更新します。

2.2 で作った Style の編集画面で右上の「Share」ボタンを押し、次の２つの項目を config.js 内の対応箇所にコピー＆ペーストしましょう。

これで Interactive Storytelling テンプレートから 2.2 で作った Style を読み込めるようになりました。

4. テンプレートに沿ってカスタム地図（Style）を制御する

さて最後に、テンプレートを編集して Style を制御し、ストーリーマップを完成させましょう。
とは言っても、config.js を少し編集するだけで最低限の機能は揃います。

では、config.js の内容を確認してみましょう。

var config = {
    style: 'YOUR_STYLE_URL',
    accessToken: 'YOUR_ACCESS_TOKEN',
    ...,
    chapters: [
        {
            id: 'slug-style-id',
            title: 'Display Title',
            image: './path/to/image/source.png',
            description: '...',
            location: {
                center: [-122.418398, 37.759483],
                zoom: 13.5,
                pitch: 60,
                bearing: 0
            },
            onChapterEnter: [
                // {
                //     layer: 'layer-name',
                //     opacity: 1
                // }
            ],
            onChapterExit: [
                // {
                //     layer: 'layer-name',
                //     opacity: 0
                // }
            ]
        },
        ...
    ]
};

config.js では、 config.chapters の配列内の情報が、ストーリーマップのスクロールイベントの特徴を決めます。

config.chapters 配列のそれぞれオブジェクトが、スクロールイベントで発火する区間ごとの chapter の情報を表しています。
オブジェクト内の情報は、以下の通りです。

• id: chapterの固有id
• title, description: chapter内のテキスト要素（コメントアウト可）
• image: chapter内の画像要素（コメントアウト可）
• location: chapterでのカメラの位置/角度情報
• onChapterEnter, onChapterExit: chapterが画面に入る/出る時に制御されるレイヤー情報

ちなみに location は helper.html を使って簡単にカメラ位置/角度情報を取得することができます。
詳しくは、公式の入門記事を確認してください。

また onChapterEnter, onChapterExit では、見ての通り、レイヤーの opacity が制御されています。
layer には、制御したいレイヤーの名前をコピー＆ペーストしてきてください。

これらの chapter のオブジェクトを編集・追加して、あなたのストーリーマップを完成させましょう。

以上で、チュートリアルは終了です。

おわりに

この記事では、Interactive Storytelling をチュートリアル形式で解説しました。
内容は、公式の入門記事に Mapbox Studio などの情報を加筆して、一気通貫した入門ができるようになっています。

入門ができたら、次は Interactive Storytelling で何を伝えるかを考える時です。
レイヤーや chapter にどんな情報を載せて、読者をどんなストーリーに導くかは、あなたのアイデア次第です。

いくつかの事例を公式がまとめているので、参考にしてみてください。

• 8 compelling stories told with the Storytelling solution - Mapbox's Medium

また、念のため、記事内で例として載せたデモのソースコードも載せておきます。
何か困ったらご参照ください。

• 東京都の犯罪統計 × Interactive Storytelling ソースコード - Hirosaji's bl.ocks