こんにちは、lumenHeroです。
実は最近、新規でWebサイトを立ち上げる機会がありました（諸事情により具体的な運用先は秘密ですが、 WordPressベースのサイトです）。
構築を進める中で「サイトマップ」のページを作る段階になったのですが、ただ記事へのリンクが箇条書きでズラッと並んでいるだけの一般的なサイトマップって、機能的ではあるものの少し味気ないですよね。
そんな時、個人的に普段から愛用しているメモアプリ「Obsidian」のグラフビュー（ノート同士が線で繋がって星座のように見えるアレです）を眺めていて、ふと閃きました。
「サイト”マップ”って言うくらいなんだから、いっそ本当の地図（地球儀）みたいに回せたら面白いんじゃないか？」
というわけで、ちょっとした遊び心から「地球儀風の3Dサイトマップ」を実装してみました。今回はその開発裏話を少しだけご紹介します。
裏側で動いている仕組みとライブラリ
「地球儀風」といってもゼロからすべての3D空間を計算して描画しているわけではありません。今回は、Web上で手軽にリッチな3D表現ができる強力なライブラリの力を借りています。
主に使ったのは以下の2つです。
- Three.js Webブラウザ上で3Dグラフィックを描画するための定番ライブラリ。今回は、背景の地球儀のワイヤーフレーム表現や、ライト（光源）の設定、SF風のUIホログラムなどの描画のベースとして活躍しています。
- 3d-force-graph これが今回の主役です。Three.jsをベースにしつつ、ノード（点）とリンク（線）を物理演算でフワフワと配置してくれるライブラリです。
ざっくりとした仕組み： 裏側のWordPress（PHP）で「カテゴリ」や「記事」のデータを取得し、それをJavaScript側に渡します。カテゴリを「大きなハブ」、個別の記事を「それにぶら下がる衛星」のように見立て、引力などのパラメーターを調整して球状（地球儀の表面）にマッピングしています。
ただ配置するだけでは分かりにくいので、マウスカーソルを乗せた時（ホバー時）に、記事のサムネイルやタイトルが「ターゲットロックオン」のようなSF風ポップアップで表示されるよう、UI側の制御もゴリゴリにカスタマイズしました。
結果・触ってみた感じ
実際に組み上がった地球儀サイトマップがこちらです。
スクリーンショット
操作動画
いかがでしょうか？ マウスでドラッグすると宇宙空間に浮かぶ地球儀全体が回転し、ノード（記事）をクリックすると、カメラがスッとその記事に向かってズームインします。
単に目的の記事を探すというより、宇宙を飛び回りながら「サイトを探索する」ようなワクワク感が出せたのではないかなと思っています。
衛星として飛ばしている記事は、wordpressの管理画面から設定できるようにしてあります。
まとめ
最初は思いつきから始まった「地球儀風サイトマップ」ですが、実際に形にしてみると想像以上に面白く、見栄えのするインタラクティブなUIになりました。
個人的にもかなり気に入ったアイデアなので、このTUKUMO logのどこかでも、こういった動的なマップ機能を使えたら面白いなーと妄想しています（当ブログの記事数や構造的な制約もあるので、そのままの形で実現できるかは未定ですが…！）。
そして今回一番嬉しかったのは、このサイト（TUKUMO log）の運営や構築で培ってきた「WordPressの自作テーマの書き方やカスタマイズ経験」が、全く別の新規プロジェクトでしっかり活きたことです。基礎の土台があったおかげで、今回のような少しトリッキーで面白い見せ方の実装にリソースを全振りして楽しむことができました。
これからも、面白い技術やUIのアイデアがあれば、裏側でゴリゴリ試していきたいと思います！
それでは、また。 lumenHero
