電通大の学内マップ(非公式)の歴史と大改造
この記事はUEC2 Advent Calendar 2025の21日目の記事です。
関連リンク
- UEC Advent Calendar 2025
- team411 Advent Calendar 2025
- 25生の独自アドカレなんかもあるらしいです。すごいですね。
UEC2アドカレの昨日(20日目)の記事は、えぴたさんの記事でした。
2013年モデルというと、我々の代は小3の時期だと思います。12年の月日を自分の人生と重ねつつ、意外と使い物になるのがさすが上位といいう気持ちと、それでも辛い場面があるんだなぁという感じですね。ところで、Macってゴミ箱って言われたりおろし金って言われたりで大変ですねぇ。
はじめに
2024年春、私は自作の学内マップをはじめて公開しました。
前バージョンのスクリーンショット。
電通大の建物に特化し、一部建物の屋内マップを含めて表示できるという点が特徴で、新年度や新学期などの節目を中心に、多くの方にご利用いただいてきました。
B棟の屋内マップ
「仮公開」としてポストしてから1年半少しが経過した今、こっそり地図の全面的な刷新を行いました。この記事では、そもそもなぜ私が地図を作っているのか、またどのように地図を作り変えたのかをご説明します。
最新版のスクリーンショット
学内マップの歴史 - そもそもなぜ学内マップを作っているのか -
第73回調布祭Webサイト
はじめに地図と向き合うことになったのは2023年6月でした。
最初期の試作地図
私は調布祭実行委員会に所属していて、主にWebページの制作に関わってきました。そのなかで、自由に操作や検索ができるインタラクティブな地図を作ろう、と思い立ったのが私が地図サイトを作るようになった最初のきっかけです。
背景として表示されている地図は、学内組織で公開されていたPDFがベースになっているため、地図データそのものの作成はこの時点ではしていません。
このときに使っていたのはLeafletで、ラスター画像を読み込ませるためにPDFをPNG形式に変換して利用していました。
最終的に、第73回調布祭のWebサイトの地図は、ピンを変更して以下のようなデザインに落ち着きました。
最終版では、調布祭に来場される皆様によりわかりやすく伝わるよう、位置情報の表示機能を実装しました。「位置情報も見られます！」という点を当日も宣伝していただき、多くの方にご利用いただけたと思います。
さて、元となる地図データはXYの直交座標系で表示されていますが、位置情報は緯度と経度による地理座標系で取得されます。位置情報を地図上にマッピングするために、以下の記事で提示されているスクリプトを利用しました。
さらに、電通大の地図は前を通る国道20号・甲州街道を水平に描かれることが多いですが、実は東西軸に対して平行ではなく少し傾いて配置されています。
電通大は東西南北軸に沿って配置されているわけではない
2年ぶりに引き出してきた図であり、図中の数値が何の数字であるかは忘れましたが、とにかく傾いています。大して数学ができるわけでもないのに逆三角関数とにらめっこしながら、最終的にはこの傾きを 19.22° と定義しました。
これをもとに座標を補正したのが、前述の第73回調布祭Webサイトの学内マップである、ということになります。
マップデータ自作の機運
前述のマップ作りと並行して、大学側が提供している素材であるとはいえ、そのまま利用するのはどうなのかという葛藤もありました。そこで、裏側では独自データの整備が始まっていました。これが私が独自データとして公開し始める最初のデータになります。
実はこの初期データ、作成に使われているのはFigmaです。学内で公開されていた施設の配置図を手動でなぞりながら地図を作り上げていきました。
ただし、ベクトルデータであろうともそのままでは地理座標系にマッピングすることができません。そこで、svg2geojsonツールに頼ることになりました。
座標の対応関係をうまく示すことができれば、直交座標系のデータを地理座標系でかなり近い場所に配置することができます。
こうして作られたのが、冒頭に提示した学内マップ第一世代です。
実際には、GeoJSONのプロパティとして建物名などの属性を追加で付与しています。
屋内マップへの挑戦
こうして、屋外マップの内製化に成功したわけですが、夏休みに飛行機で旅行に行くにあたって見ていた羽田空港のマップに衝撃を受けました。
この地図は、屋内マップもインタラクティブに表示されて、さらには経路検索までできるようになっています。
もっとも、インタラクティブ屋内マップはGoogleマップ等でも実装されている機能ではありますが、私の気持ちを大きく動かしたのは間違いなくこの羽田空港の地図でした。
このインタラクティブな屋内マップ、調べていると有料のソリューションは何個も出てくるものの、手軽に実装できそうな手段を見つけることができませんでした。
屋外の地図と重ねて屋内マップを表示することはできないものか...。
妥協策としてたどり着いたのが、屋外マップと屋内マップを独立で表示するという選択でした。
この手法であれば、画像を表示するだけであってもピンを上から重ねれば"それっぽい"見た目にはなります。冒頭の画像も参照していただければわかりますが、羽田空港にインスピレーションを受けながら配色はかなりGoogleマップに寄せたものになっていますね。
ちなみに屋内マップもFigma製です。SVGでエクスポートしたものをそのまま読み込んでいます。
また、独立して作成した屋内マップに座標変換を施した上で屋外マップと重ねる、なども試行錯誤しましたが、それもうまくいきませんでした。
以上が、Figmaによる自作学内マップ第一世代の仕組みです。
その後、新しく東11号館(e-Nexus棟)が建ったこともあり、地図データに若干の変更を加えたこともありました。
第1世代学内マップの公開
こうして整備されたデータを元に、24生の入学時期に合わせて投稿したのが第1世代の学内マップでした。約1年半にわたって幅広く利用されてきました。ふと他人の画面が目に入ったときに表示されていたりすると「使ってもらえているな～」と嬉しくなったものです。
こうして公開された学内マップですが、データ自体は外部サイトからも取得できるようなAPIエンドポイント(OGC API仕様による)を立てていました。もっとも、OGCのAPI仕様に従ったクエリが可能ではあったものの、実際に個別取得するような用途では使われていなかったり、そもそもAPIエンドポイントの存在を公言していたわけでもありませんでした。
また、屋外マップはMaplibreで、屋内マップはLeafletで描画していて、似たライブラリを同時に使用していて効率が悪い面もありました。
第74回・第75回調布祭における学内マップの実装
そんなAPIを活用して作られたマップの1つが第74回調布祭(2024年度)および第75回調布祭(2025年度)の学内マップです。
APIと言っても、GeoJSONオブジェクトを全件取得しているだけではあります。
74回は主に同期が作成してくれたもので、75回は私が直接関与せず後輩が作り上げたものですが、勝手に紹介します。
SVGで作られたマップをGeoJSONの地物として提供しているため、スタイルはMapbox Style Specificationに基づいて自由に設定することができました。同じデータでも見た目が違っているのがお分かりかと思います。また、73回調布祭のようなラスター画像からベクトルデータに切り替わったことで、拡大・縮小がスムーズできれいにできるようになったのが特徴です。ところで75回調布祭のHPデザイン、かっこよかったですね。
さらなる挑戦: 地図データの再構築
第1世代データの歪み
第1世代の地図データですが、直交座標系で無理やり作ったSVGを無理やり地理座標系に変換していたため、とくに曲線や直角の描画が歪んで見えてしまうという課題がありました。
西9号館の曲線や西8号館との角度ずれなどに注目
しかし、直交座標系で地図を作って変換する限り、角度や距離を保ったまま正確に変換することは困難を極めます。
そこで、最初から地理座標系で地図を作れば良いのでは? と思い立ったのが第2世代マップを作り始めるきっかけでした。
しかし地理座標系で地図を作るにはどうするべきか。そう考えてたどり着いたのがQGISでした。
そもそもが地理情報を扱うことに長けているため、地理座標系に載せる地図の制作にはもってこいです。また、一般のラスター/ベクトルタイルも読み込めたため、航空写真なども見ながら位置関係を微調整したりもできました。
そして何よりも、地理座標上で(近似的に)直角や曲線の作図ができることが大きな魅力になりました。直線や曲線のツールに加えて高度なデジタイジングツールを用いることで、距離や角度を指定して描画ができます。これにより、かなり正確に施設のサイズを表現することができるようになりました。手作業なので多少のずれが生じる場合はありましたが、場所によっては面積もかなり正確に計算できる場合もありました。
丁寧に作図しています
屋内マップ実装への希望
さて、地理座標系でマップが作れるようになったということは、地理座標系で屋内マップも制作できるようになったということです。すなわち、地図描画をフロアごとに切り替えることさえできれば、QGISで正確に描画した屋内マップは屋外マップとそのまま重ねることができます。これは嬉しい。
先述のMapbox Style Specificationでは、地物の属性を利用したレイヤーの出し分けをすることもできます。したがって、屋内外マップをシームレスに切り替えることの実現可能性が急激に高まりました。
こうして2025年12月1日、学内マップ用の新リポジトリが動き始めました。
屋外に加えて屋内マップの制作も行うことには多大な手間がかかるため、講義室が存在する棟やフロアを優先的に作成しています。
また、棟ごとに独立した地図ではなく、すべてが連続して表示されるため、東4～6号館の渡り廊下のようなつながりもわかりやすく表示することができるようになりました。
東4～6号館の2階の屋内マップ。開発中の画面です。
屋内マップを再構築したおまけとして、リアルな3D表示が可能になりました。部屋のデータをそのまま持ち上げて表示しているだけですが、割と良い再現度になっていると思います。気が向いたら2本指で地図を傾けてみてください。屋内マップのデータが存在する一部建物・フロアのみ対応しています。
3D表示の例。開発中の画面です。
道をポリゴンではなく線で作る
第1世代のマップでは、道もポリゴンで描画されていました。これにより、細かい道の形も忠実に再現できていた面はあります。しかしポリゴンの作成はかなり手間がかかります。
そこで、手間の削減も兼ねて道を線で作ることにしました。GeoJSONで言えばLineStringです。道幅のデータも持たせれば、線同士の結合(交差点など)はスタイルを指定すれば地図描画ライブラリが適切に処理してくれます。
さて、道が直線であるということは、交差点および曲がり角とそれを結ぶ線の集合で道路ネットワークが表現されるということになります。つまりグラフとして表すことができ、したがって経路探索の実装が可能になりました。
第2世代学内マップでは、A*アルゴリズムによる経路探索機能も組み込みました。遠い建物間であってもおおよその所要時間を計算できるため、移動を始める時刻を見積もる役にも立ちます。また、地区をまたいだ移動では単純な距離に加えて信号待ちが発生するため、数分余裕をもって表示するようになっています。
さらに、道の属性を利用して、「通りやすい道」を優先した「最適経路」と、「とにかく短い道」を優先した「最短経路」の2パターンで検索が可能になっています。好みに合わせてご利用ください。
経路探索の例。開発中の画面です。
より広く使ってもらうために
さて、せっかくデータを整備したのですから、データも含めて多くの方々に利活用していただきたいというのが本心です。そこで、現在はMaplibreをベースにnpmパッケージとして地図データを利用できるような仕組みを検討しています。また、地図単独で<iframe>を用いた埋め込みもできるようにすることを検討しています。学内マップを表示したい場面、多くはなくてもたまにはあると思うので機会があればぜひ利用を検討してみてください。
さいごに
今回の地図を作成するにあたっては、学内向けに公開されている建物の設計や配置に関する各種データを参考にしました。それらを公開してくださっている電通大施設課の皆様に御礼申し上げます。
さて、学内マップ作りはこれで終わりではありません。さらに使いやすく正確で情報量のある地図データを引き続き構築していきます。時々開いてみると、建物の形が変わっていたり屋内マップが表示できる場所が増えているかもしれません。
追伸 データの後継者となってくれる後輩を募集しています。
XやDiscordのDMからお声がけください。
あとはアイコンも考えなきゃな～と思ってます。
Discussion