Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

日経ビジュアルデータにおける スクロールテリングと地図/nikkei-tech-talk-26

日経ビジュアルデータにおける スクロールテリングと地図/nikkei-tech-talk-26

日経ビジュアルデータにおけるスクロールテリングと地図 というタイトルで発表しました #nikkei_tech_talk

日本経済新聞社 編集 先端ビジュアルセンター
ニュースルームエンジニア
千﨑 亮平

https://nikkei.connpass.com/event/331637/

More Decks by 日本経済新聞社 エンジニア採用事務局

Other Decks in Technology

Transcript

  1. 1 2024/10/24 NIKKEI Tech Talk #26 日本経済新聞社 編集 先端ビジュアルセンター ニュースルームエンジニア

    千﨑 亮平 日経ビジュアルデータにおける スクロールテリングと地図
  2. 2 自己紹介 千﨑 亮平(せんざき りょうへい ) 日本経済新聞社 2022年入社 編集 先端ビジュアルセンター 戦略コンテンツグループ

    ニュースルームエンジニア 日経ビジュアルデータでのビジュアライゼーションに関するフロントエン ド開発に携わっています 大阪出身
  3. 3 本日話すこと • 日経ビジュアルデータ ◦ スクロールテリングとは • ビジュアルデータの制作裏側の紹介 ◦ 羽田空港、JAL機衝突事故

    ▪ スクロールテリングと3Dモデルの活用 ◦ 万博開幕まで半年 大阪再始動 ▪ 地図ライブラリ ▪ ベースマップ(PMTilesの活用)
  4. 16 JAL機炎上、そのとき何が 検証・羽田空港衝突事故 1. 飛行機以外の衛星地図の動きをGoogle Earth Studioで動画として出力 2. 1. のカメラの動きをBlenderに読み込ませる 3.

    「フライトレーダー24」からJAL機の航跡データ (KMLファイル)を取得 4. KMLファイルをBlenderに読み込み、飛行機の動 きを作成。動画に出力 → 1. と4. の2つの動画を重ねて、完成 https://www.nikkei.com/article/DGXZQOFH122VP0S4A110C2000000/
  5. 18 JAL機炎上、そのとき何が 検証・羽田空港衝突事故 どうして、パラパラ漫画方式で実装しているのか メリット デメリット 画像連番(パラパラ漫画方式) 動作が安定している ファイルサイズやファイル数が増えてしま う 動画(videoタグに動画を実装し、スクロー

    ル量と再生位置を同期) 画像連番に比べるとファイルサイズやファ イル数は少ない ブラウザや環境によって、意図しない挙動 があり、安定性に欠ける 3Dライブラリ(Three.jsやCesium.jsなど)を 利用 実装の自由度は高い リッチな3Dの場合、データ量が大きく、読み 込みに時間がかかる 報道機関として、どのような環境にいる読者にも、 環境に依存しない同一の情報を伝える必要がある。
  6. 20 万博開幕まで半年 大阪再始動 • 地図ライブラリ:MapLibre GL JS • PC画面にはスクロールテリング ◦ スクロールテリングの実装には

    IntersectionObserver でスクロール 要素(右図の赤枠)を監視 ◦ 適切なタイミングで地図を移動した り、表示するデータを切り替えたりす る MapLibre : https://maplibre.org/
  7. 22 万博開幕まで半年 大阪再始動 地図に表示するデータの作成 → QGIS でのジオリファレンスを活用 • 大阪メトロ中央線 夢洲駅への延伸区間 •

    万博会場、IR予定地 • グラングリーン大阪 Open Street Mapと大阪市の資料をもとに作成 https://www.city.osaka.lg.jp/port/page/0000002900.html https://www.city.osaka.lg.jp/osakatokei/page/0000005308.html ジオリファレンス:衛星画像や図を地図の座標系に結び 付けて、正確な位置に対応させる
  8. 23 地図で用いるタイル画像について • XYZ Tiles ◦ 予めタイル状に分割した画像を配信。多くのウェブ地図で利用されている • MBTiles ◦

    SQLiteデータベースを利用。地図タイル(ラスタ、ベクトル)を1つのファイルにまとめられ る ◦ タイルデータの配信にはTileServer GLなど専用のサーバー実装が必要 • PMTiles ◦ MBTiles同様、1つのファイルにタイルデータを格納 ◦ HTTP Range Requests に対応し、部分的なデータ取得が可能 ▪ Webサーバーへのアップロードだけで地図を公開できる ▪ MapLibreなどの地図ライブラリでベースマップとして実装可能
  9. 24 万博開幕まで半年 大阪再始動 ベースマップの作成方法 • OpenStreetMap(OSM) を使用 ◦ OSMのデータをPMTilesに変換していく OpenStreetMap :

    https://www.openstreetmap.org/copyright/ja Geofabrik Download Server : PBFファイルな どのOSMのデータをダウンロードできる planetiler : OSMのデータをMBTilesに変換したも のを出力してくれる https://download.geofabrik.de/ https://github.com/onthegomap/planetiler/tree/main
  10. go-pmtiles : MBTilesデータを PMTiles に変換 25 万博開幕まで半年 大阪再始動 Maputnik : MapLibreスタイルに基づいたビジュアルエ

    ディタ。スタイルJSONを出力でき、それをMapLibreで読 み込む ベースマップの作成方法 • OSMのデータをPMTilesに変換していく • スタイルを Maputnik で調整 https://github.com/protomaps/go-pmtiles https://maputnik.github.io/editor/
  11. 26 課題や展望 • 表現が先行して、読者にとってわかりにくくなっていないか ◦ 「リッチ」な表現を誰でも簡単に作れるようになった ◦ 地図(地図以外にもリッチな表現を含む)が必要な文脈とは何かを考える必要がある • スクロールテリングが最適な見せ方なのか

    ◦ スクロール量が多いと読者の離脱につながることも ◦ デバイスに合わせた表現に ▪ 「万博開幕まで半年 大阪再始動」:スマホではスクロールテリングをしない • 読者にとって最適な表現の模索を続けていく必要がある