Mapboxの新しいインタラクティブストーリーテリングテンプレートが公開されました。完全にインタラクティブな地図と最小限のコードで、ガイド付きの物語を作成できます。主要なメディアは、この形式を使用して、サンフランシスコ・クロニクルのキンケイド火災の起源に関する詳細な調査や、ワシントン・ポストの1968年のワシントンDC暴動の探求など、強力なストーリーを伝えています。

本質的に、このテンプレートは、Mapbox Studioにデータをスタイルしたりアップロードしたりしなくても、そのまま使用できます。必要なのは、Mapboxアカウントと、アニメーション地図上に章と基本的なマーカーを表示して、地域内のさまざまな場所やイベントのタイムラインを紹介する、シンプルで非常に効果的な「スクロールテリング」ストーリーの構築を開始するための アクセストークン だけです。

基本的な地図

まず、Githubリポジトリからテンプレートをダウンロードします。ファイルを解凍し、srcという名前のフォルダーに移動します。vanilla-jsフォルダーに関心があります。react-jsは、より高度なユーザー向けです。

vanilla-jsフォルダーには、4つのファイルがあります。

• config.js.template: これは作業に使用するファイルです。
• index.html: これにはテンプレートのコードが含まれています。ブラウザで開いて、ストーリーの作成中に進捗状況を確認できます。
• すべての画像およびその他のアセット用の画像フォルダー。
• helper.html: これは、ストーリー内の各ポイントの位置と地図ビューを生成するのに役立つユーティリティです。

まず、config.js.templateを複製し、次のようにconfig.jsに名前を変更します。

次に、お好みのテキストエディタでconfig.jsを開きます。Sublime Text 2またはAtomをダウンロードできます。以下は、未変更の構成ファイルです。

var config = {
    style: 'mapbox://styles/mapbox/streets-v11',
    accessToken: 'YOUR_ACCESS_TOKEN',
    showMarkers: true,
    theme: 'light',
    alignment: 'left',
    title: 'The Title Text of this Story',
    subtitle: 'A descriptive and interesting subtitle to draw in the reader',
    byline: 'By a Digital Storyteller',
    footer: 'Source: source citations, etc.',
    chapters: [
        {
            id: 'slug-style-id',
            title: 'Display Title',
            image: './path/to/image/source.png',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            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
                // }
            ]
        },
        {
            id: 'other-identifier',
            title: 'Second Title',
            image: './path/to/image/source.png',
            description: 'Copy these sections to add to your story.',
            location: {
                center: [-77.020636, 38.886900],
                zoom: 13.5,
                pitch: 60,
                bearing: -43.2
            },
            onChapterEnter: [],
            onChapterExit: []
        }
    ]
};

まず、アクセストークンを追加します（アカウントを作成すると、こちらにあります）。Mapbox Streetsはデフォルトでテンプレートに含まれていますが、別のベースマップを使用する場合は、お好みのスタイルURL に置き換えてください。

‍

showMarkersの値をtrueにすることで、デフォルトのマーカーを含めることができます。

次に、各章の位置情報を入力していきます。テンプレートに付属しているhelper.htmlファイルを使用すると、座標（地図の中心）、ズームレベル、ピッチ、ベアリングを特定し、各章に最適な地図ビューを調整できます。これを行うには、ブラウザでファイルを開き、右上隅のジオコーダーに住所を入力し、地図を移動してビューを調整します。Control+クリックで地図を傾けたり回転させたりできます。また、テンプレート内のテキストブロックの配置（デフォルト値は左揃え）も考慮してください。最後に、位置情報コードをコピーして構成ファイルに貼り付けます。

すべての場所が設定されるまで、このプロセスを繰り返します。その後、タイトル、説明、および画像へのURLまたはパスの追加を開始できます。

{
    id: 'intro',
    title: 'A local's guide to Washington, D.C',
    image: 'https://www.washingtonpost.com/resizer/LB5cSvyCfPBXonvYBbgQq6OF8XQ=/1024x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/3AB7DBUBM4I6TNMF4NVRNJJRVI.jpg',
    description: 'To know Washington is to peel back its suit: The briefcases and blazers the rest of the world sees are just covers for a vibrant, creative community. Whether it's the food scene — one of the country's best — or murals tucked away in historic alleys, the city D.C. residents know is quirky — and inspiring.',
    location: {
        center: [-77.07567, 38.89583],
        zoom: 11.23,
        pitch: 60.00,
        bearing: 43.61
    }
}

結果を確認するには、ブラウザでindex.htmlを開いてスクロールします。以上です！これで、マーカー付きの完全に機能する地図ができました。デモはこちらでご覧いただけます。

レベルアップ：スタイリングレイヤー

次に、このテンプレートをさらに活用するために、Studioでカスタムレイヤーをスタイル設定し、テンプレートを使用してレイヤーの表示/非表示を制御します。以下の例は、ハフィントンポストに掲載された地図を、私がテンプレートで再構築したものです。

ストーリーにカスタムレイヤーを含めるには、まずMapbox Studioを使用してデータをアップロードしてスタイルを設定する必要があります。

データのアップロードとスタイリングが完了したら、スクロール時のレイヤーの目的の動作に基づいて、レイヤーの不透明度（表示/非表示ではありません）を切り替える必要があります。経験則として、Studioで設定されたレイヤーの不透明度は、テンプレート構成ファイルで変更されるまで同じままになります。

上記の例では、最初のチャプターで火災と衛星のレイヤーを表示したいので、これらはそのままにしておきます。背景や水など、調整を必要としないレイヤーもすべて保持できます。

最初の章で表示したくないすべてのレイヤーについて、不透明度を下げてください。これらは後で構成ファイルで調整されます。完了したら、スタイルを公開し、[共有]ボタンをクリックして、スタイルのURLとアクセストークンを取得できます。

URLとトークンは、構成ファイルの先頭に記述します。また、このストーリーではデフォルトのマーカーは不要なため、showMarkersオプションをオフにする必要があります。テーマ（dark、light）と配置（left、right、center）を選択します。

{
    style: 'mapbox://styles/lobenichou/ck05kn7hv1iuz1cmjiea38oc6',
    accessToken: 'pk.eyJ1IjoibG9iZW5pY2hvdSIsImEiOiJjajdrb2czcDQwcHR5MnFycmhuZmo4eWwyIn0.nUf9dWGNVRnMApuhQ44VSw',
    showMarkers: false,
    theme: 'dark',
    alignment: 'left',
    ...
}

次に、章を更新し、伝えたいストーリーに基づいてレイヤーを調整します。

基本的な例と同様に、title、descriptionを更新したり、画像を追加したりすることもできます。ただし、各レイヤーの不透明度も指定します。これは、ユーザーがストーリーのさまざまな章をスクロールするときにトリガーされます。つまり、テキストブロックが画面に出入りすると、レイヤーの不透明度が設定に基づいて調整されます。

チャプターは、ユーザーが下にスクロールするときと、上にスクロールするときに、画面に2回表示される可能性があることに注意してください。つまり、特定のレイヤーを初期状態に戻したい場合は、onChapterEnterで設定を指定する必要があります。たとえば、上記のセットアップでは、初期ロード時にfiresとsatelliteが表示されるように、Studioですでに構成されていることがわかっています。したがって、onChapterEnterはそのままにしておくことができます。ただし、ユーザーが第1章と第2章にスクロールして戻ったときに、各レイヤーの不透明度を指定する必要があります。したがって、第1章と第2章は実際には次のようになります。

{
    id: 'chap-1',
    title: '',
    image: 'images/graph.png',
    description: '',
    location: {
        center: [-124.99958, 37.21861],
        zoom: 5,
        pitch: 0.00,
        bearing: 0.00
    },
    // we have to specify these settings for when the user comes back to this chapter
    onChapterEnter: [
        {
            layer: 'fires',
            opacity: 1
        },
        {
            layer: 'satellite',
            opacity: .5
        }
    ],
    onChapterExit: [
    ]
},
{
    id: 'chap-2',
    title: '',
    image: '',
    description: 'From 1895 to 2018, wildfires burned 35,437,560 acres of land. California measures nearly 105 million acres. In the past 123 years, wildfires have burned the equivalent of 33.8 percent of California.',
    location: {
        center: [-124.99958, 37.21861],
        zoom: 5,
        pitch: 0.00,
        bearing: 0.00
    },
    // we have to specify these settings for when the user comes back to this chapter
    onChapterEnter: [
        {
            layer: 'fires',
            opacity: 1
        },
        {
            layer: 'satellite',
            opacity: .5
        }
    ],
    onChapterExit: [
        {
            layer: 'fires',
            opacity: 0
        },
        {
            layer: 'satellite',
            opacity: 1
        }
    ]
}

ユーザーが章間を移動すると、これらのレイヤーの状態はリセットされます。

onChapterEnterとonChapterExitを使用すると、0から1までの数値を使用して各レイヤーの不透明度を制御できます。以下では、入力時にcalifornia-33を0.8に、終了時に0に調整しています。

onChapterEnter: [
    {
        layer: 'california-33',
        opacity: .8
    },
    {
        layer: 'california-33-line',
        opacity: 1
    },
    {
        layer: 'satellite',
        opacity: .5
    }
],
onChapterExit: [
    {
        layer: 'california-33',
        opacity: 0
    },
    {
        layer: 'california-33-line',
        opacity: 0
    }
]

各章で、必要に応じてレイヤーを調整しながら、これらの手順を繰り返すことができます。その結果、読者を関連するデータポイントへと導き、場所と視覚化によって状況を説明するストーリーが完成します。完全なデモはこちらで体験できます。

オプション: Glitchに公開

最終的なストーリーをオンラインで公開する方法はたくさんあります。Glitchは、コーディングをほとんどまたはまったく行わずにWebアプリを作成および公開できる使いやすいプラットフォームです。まず、アカウントにサインアップします。次に、コンピューターからWebにコードを移動しましょう。

Glitchのホームページで、“New Project”をクリックし、“hello-webpage”を選択します。

これにより、新しいプロジェクトダッシュボードが開きます。左側で、すべてのデフォルトファイルを削除して、独自のファイルをアップロードできます。これには、index.html、config.js、およびテンプレートからの画像が含まれます。

Glitchにアップロードされた画像には、新しいURLが割り当てられることに注意してください。公開後に画像が表示されるようにするには、config.jsのURLを新しいGlitchのURLに置き換えてください。新しいURLを取得するには、[assets]をクリックし、画像をクリックします。

「コピー」をクリックし、config.jsファイルに移動して、古いURLを新しいURLに置き換えます。例：

これで完了です！「Show」>「In a New Window」をクリックして、アプリをプレビューできます。Glitchで公開されているデモはこちらです。

#builtwithmapbox を付けて、Twitterであなたの作品を共有してください。ご質問がありましたらお気軽にお尋ねください。