FOSS4G Hokkaido 2024 でSvelte MapLibre GLのハンズオンを行った話
721 Views
March 18, 25
スライド概要
株式会社MIERUNE所属 主にアプリケーションのフロントエンド開発をしています
（ダウンロード不可）
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.2M
各ページのテキスト
FOSS4G Hokkaido 2024 で Svelte MapLibre GLの ハンズオンを行った話 楢山哲弘
目次 01 ハンズオン実施の背景 02 環境準備で気をつけたこと 03 教材準備について 04 Svelte MapLibre GLの素晴らしさ 05 反省点と改善点 06 まとめ ©OpenStreetMap contributors
01 ハンズオン実施の背景 ©OpenStreetMap contributors
01 ハンズオン実施の背景 ● FOSS4G Hokkaido 2024のハンズオン担当を募集 していたが立候補者が少ないようだった ● 助けようと思ったのと、この機会にSvelte MapLibre GL JSでハンズオンをやってみようと思い立つ ● このタイミングでSvelte MapLibre GLをMIERUNE のfukadaさんが開発、公開 ©Project PLATEAU / MLIT Japan
02 環境準備で気をつけたこと ©OpenStreetMap contributors
02 環境準備で気をつけたこと 実施環境の選定 ● 当初の悩み ○ 参加者自身のPCに環境構築 vs オンライン環境 ● 参加者から「環境構築が難しい」との声があった ○ StackBlitzを採用 ■ オンラインIDEとして使いやすい ■ 過去の良好な利用体験 ©Project PLATEAU / MLIT Japan
02 環境準備で気をつけたこと StackBlitzの準備方針 ● 面倒な部分を省いたテンプレートを用意 ● 別途回答例も準備 ● 有料イベントのため一部を限定公開（URLを知っている人 のみアクセス可能） https://stackblitz.com/@northprint/collections/fos s4g-hokkaido-hands-on ©Project PLATEAU / MLIT Japan
02 環境準備で気をつけたこと ©Project PLATEAU / MLIT Japan
03 教材準備について ©OpenStreetMap contributors
03 教材準備について 設定した必要条件 ● オンラインで閲覧可能 ● コードのコピー・ペーストが容易 ©Project PLATEAU / MLIT Japan
03 教材準備について 教材プラットフォームの検討 ● Notionの検討 ● Zenn Book（限定公開不可と判明） ● 自前執筆環境の構築を決定 ©Project PLATEAU / MLIT Japan
03 教材準備について 公開方法 ● コンテナ化して公開事例を参考に実装 ● Google Cloud Runで公開 ● URLのみ参加者へ共有 bit.ly/4gK8oxY ©Project PLATEAU / MLIT Japan
03 教材準備について ©Project PLATEAU / MLIT Japan
04 Svelte MapLibre GL の素晴らしさ ©OpenStreetMap contributors
04 Svelte MapLibre GLの素晴らしさ 準備における課題 ● 業務の繁忙期と重複 ● 多くのサンプルが必要 ©Project PLATEAU / MLIT Japan
04 Svelte MapLibre GLの素晴らしさ Svelte MapLibre GLの強み ● データさえ用意できれば可視化実装が容易 ● ほぼノータイムで地図表示 ● Svelteのリアクティブ機能でUIとの連携も簡単 ● コード量が少なく、コピー・ペーストしやすい ©Project PLATEAU / MLIT Japan
04 Svelte MapLibre GLの素晴らしさ 実際の効果 ● 予想以上に多くのサンプルを短期間で作成できた ● 時間に余裕があり、参加者に自習で公式ドキュメントの例 をやってもらったが、ここでも問題は出なかった ©Project PLATEAU / MLIT Japan
05 反省点と改善点 ©OpenStreetMap contributors
05 反省点と改善点 ハンズオン内容について ● コピー・ペースト中心で手応えが物足りなかった可能性 ● もっと考えて手を動かす問題設計が必要だった ©Project PLATEAU / MLIT Japan
05 反省点と改善点 時間配分について ● 時間が大幅に余った ● さらに2〜3のサンプルを追加すべきだった ©Project PLATEAU / MLIT Japan
05 反省点と改善点 発展的な内容 ● フレームワークの特 性を活かし、実 用 的なアプリケーショ ン（例：ハザードマップWebGIS）の構 築まで踏み込める 可能性 ©Project PLATEAU / MLIT Japan
06 まとめ ©OpenStreetMap contributors
06 まとめ ⚫ Svelte MapLibre GLは地図アプリケーション開発において非常に効率的 ⚫ オンライン環境（StackBlitz）と充実した教材で円滑なハンズオンが実現 ⚫ 今後のハンズオンでは： より実践的な問題設計 実用アプリケーション開発を視野に 参加者のスキルレベルに合わせた柔軟な内容調整 © 地理院地図 全国最新写真（シームレス）