Storytelling で令和元年台風19号時の荒川下流の状況を振り返ってみる

はじめに

Mapbox 社から、Storytelling という提案がされています。地図を用いて、ストーリーを伝えるためのツールであり、具体的には、画面をスクロールしていくことで、メッセージが表示させながら、関連して地図を移動させたり、地図上にデータを表示させたりすることができます。

以下のレポジトリで、必要なパーツが提供されています。基本的に config.js （JavaScript ファイルですが、オブジェクトがひとつ定義されているだけで、実質 JSON ファイルです）を修正してホストすれば、Storytelling のサイトが出来上がります。

だいぶ前からあるソリューションで、なんだかスタイリッシュな感じがして気になっていたのですが、あまり使い道が思い浮かばずに触れずにいました。ふと、台風とその被害の振り返りをするのに使えるのではないかと思い至りましたので、令和元年の台風19号の経路と、関連して荒川下流の状況を Storytelling してみました。

作ったもの

デモサイトはこちらです。熱帯低気圧の発生からはじめて、途中で、気象庁の会見大雨洪水警報の発令状況も挟みながら、関東通過まで追いかけます。関東に上陸したら、荒川への影響ができてきますから、台風の経路等とともに、時系列で荒川の状況も紹介していきます。ズームレベルは、その情報の影響範囲を考えて、調整しています。

レポジトリはこちら。

本家のレポジトリは Mapbox GL JS の v2 系を利用しておりましたが、v1 系へ変えて、Mapbox のトークンを追加しなくても良いようにしています。そのため、一部機能が使えなくなっています。また、ほかにも実行したいプログラムがあるので、func.js を追加して、HTML の最後で読み込ませています。

また、作成支援の簡易ツールもいくつかあります。気象庁の台風経路図データが PDF での提供であるため、そこからコピペしてテキストファイルに張り付けたデータから、日時・経緯度・中心気圧を取り出すための簡易ツールと、CSVで作成した時系列に整理したデータを Storytelling 用の config.js へ変換する簡易ツールも作成しています。

使ったデータ・参考資料

基本的に、国の各機関（内閣府、消防庁、気象庁、荒川下流河川事務所）で提供されている資料を活用しました。

背景地図は、国土地理院最適化ベクトルタイルです。従来のベクトルタイルのスタイルと比較し、ズームレベル感の連続性が考慮されたスタイルですが、今回のようなズームレベル間の動きの大きい場合、その良さが発揮されます。

感想

Power Point との違いは？

まず、上記サイトを触っていただければわかるかと思いますが、Storytelling のテンプレートでは、ユーザーはスクロールしか許されていないです。どのメッセージで、どの向き、どのズームレベルで地図を見せるかは、提供者が決めなくてはならないです。これは、ウェブ地図のような、ユーザーがインタラクティブに情報を探すツールよりも、パワーポイントのようなスライドで出来上がった資料に近いと感じています。

それでは、パワーポイントとの違いはなんでしょうか？わざわざウェブ地図技術を使って、紙芝居をする必要はあるのでしょうか？

おそらく、地図を移動しながら物語が進むので空間的なつながりを把握しやすい、というのが一番の利点のように感じています。特に、各メッセージの間で、一旦地図が小縮尺になってからまた大縮尺にズームインしていく過程は、ただの演出のように思っていましたが、一旦全体像を見せてから各論に集中させる重要な役割を果たしているような気がしています。

ただのスライドでなく、わざわざウェブ地図技術の上に乗せるからには、このようなウェブ地図特有の部分を活用しないといけないかもしれません。

うまく使うために感じた課題

上記の利点を踏まえたうえで、Storytelling を有効活用するために感じた課題を列挙してみます。

• 上記の通り、ユーザーは操作の自由がないため、自分でズームレベルや位置を調整して、理解を深めることができません。そのため、ズームレベルや地図の方向・傾き等にも気を配って調整を行う必要があります。

• また、動きのある中で、ストーリーの中で地図のどの部分が重要かを把握しづらいように感じました。そのため、今は、地図のどのエリア・どの地物をターゲットにしているかを示す必要があるかと思います。

  • 今回作成したサイトでは、台風19号の経路図の透過度を変更して、台風の位置の話をしている時とそれ以外の時で混乱しないように配慮しました。
  • 一方、データがなかったため実装は見送りましたが、以下のような情報を適宜表示して、地図のどこに着目すべきかわかりやすく表示する必要があると思っています。
    • 大雨特別警報発令時には、「対象都道府県のポリゴンデータ」を塗りつぶせると対象エリアが分かりやすそうです。
    • また、台風の経路図だけでなく、「暴風・強風域」「当時の予想円」「雨雲の様子」も示せると、影響を把握しやすそうです。
    • 荒川の状況を示す際は、支川を含む「荒川のラインデータ」や「流域ポリゴンデータ」を示すと、流域とのつながりが分かりやすそうです。
    • 何か被害状況も示せるとよいかと思います。これは、地図に載せずとも、メッセージとともに写真やグラフを図示するのでも良いと思います。

• データの選別・調整も重要だと思います。

  • Storytelling のテンプレートでは、各レイヤのオンオフは透過度の変更のみとなっています。そのため、透過度をゼロにしたとしても、visibility を none に設定した場合とは違い、データが読み込まれてしまいます。そのため、大量のデータを読みこむと、大幅にパフォーマンスが落ちます。
  • 試しに、地理院タイルの「令和元年台風第19号 浸水推定段彩図 荒川水系（入間川・越辺川・都幾川）」を読み込ませてみましたが、かなりのパフォーマンス劣化を感じました。
  • ただし、メッセージ毎に表示するズームレベルを固定していることから、追加データの表示レイヤを細かく調整することができればうまくいくかもしれません。たとえば、ズームレベル11でメッセージを見せる場合、minzoom=10.9、maxzoom=11.1 にする等の作戦が考えられます。
  • ただ、ここまで繊細な調整が必要になるのであれば、スタイルレイヤの visibility をオンオフできる機能を Storytelling のテンプレート内に組み込んだ方が早いような気がしてきました。

経験上、何かツールのテンプレートに大幅に手を入れないといけない際は、そのツールのスコープ外のことをやろうとしていることが多いので、もう少しこのツールの目的から研究してみる必要があるかもしれません。

• また、ストーリーを途中から始めたり、逆にたどっていくと、onChapterEnter や onChapterExit の実行タイミングが想定したものにならず、期待した表示にならない可能性もあります。

最後に

興味があった Storytelling に触れることができました。アトラクティブなアイデアであるとともに、レポジトリが準備されており、始める体制は整っているのですが、実際に有効に活用しようとすると、地図調整に相当気を使わないと、その価値を十分に発揮するのは難しそうな気がしました。

今回、災害に関連した取り組みの可能性や課題を認識できましたので、今後も、 Storytelling の有効な活用方法を探せていければと思います。