ブログにグラフビューを実装してみた
Obsidianのグラフビューが気に入ったので自分のウェブサイトにも実装してみた
グラフビューってなに
グラフビューでは、このように、相関図のようなグラフでアイテム間の関係性を表すことができる。
ブログを書くのに使っているObsidianというエディターに同様の機能が搭載されている。Obsidianの記事をwebで公開する、Obsidian Publishにもこのグラフビューが搭載されていて、グラフビューと同じレンダリングエンジンを使っていると言っている。
Obsidian ではどうやら自前で実装しているようだけど、ソースコードが公開されていないので、仕方なく自前で実装する。
記事数もそこまで多くないし、パフォーマンスについてはそこまで考えなくて良かったので、先程挙げたredditで言及されていたd3.js というライブラリを内包した、React-Force-Graph というパッケージを使って、力のシミュレーションとかを微調整している。
類似のもので、vis.js というものもあるが、d3.js の方がより複雑な操作ができるのでそっちを選択（なお、導入しやすさで言ったら vis.js）。モバイルでの閲覧が多いようなので、ホバー操作などをせずにすべての機能が利用できるようにした。
パッケージ名の通りグラフビューは React で動作している。このサイトはほとんどが Static で、Astro を使っているので、グラフビューのコンポーネント以外は全て事前にビルドしている。
ビルド時に、全ての記事と、その関係性を記述した JSON を作成し、ページ読み込み時にそれをロードしている。
これ、ページ数が増えまくったら結構厳しい気もするので、しばらくこれで使ってみて、ダメそうだったら別の方法を考えようと思う。
0人が0回拍手しました
関連記事
💻 GitHubでチーム開発してみよう
GitHubでチーム開発してみよう
GitHub、アカウント登録はしたけど開発者じゃないから使わないというそこのあなたのために、さっと使い方を説明した記事を書きました。
🍳 XRの使い道は、HUDのように使うことなのかもしれない - AIとお料理をしよう
XRの使い道は、HUDのように使うことなのかもしれない - AIとお料理をしよう
未踏ジュニアでお馴染みの鵜飼さんが持っていたinmo XRというAndroidが入っているXRグラスを貸してもらってちょっとしたハッカソンをしたのですが、使い道に悩んだ挙句、AIで作ったAIと楽しむ料理アシスタントを作りました。そこでXRグラスを使用してAIと料理することを試みたので、紹介します。
🤖 GoogleスプレッドシートをAPI経由で読み込もう！
GoogleスプレッドシートをAPI経由で読み込もう！
Google スプレッドシートを API 経由で読み込もう！
去年別のサイトで書いた記事を再公開したものです。
超簡単です。Google スプレッドシートに書いた情報を API...
🗓️ ライフログのシステムについて思うこと
ライフログのシステムについて思うこと
LLMの進歩によって人の行動やを言語化したり他者との会話を分析したりすることが簡単になった。でも、イマイチどれもしっくりこない気がしたので、技術的な面と、使いやすさの面から色々考えてみる。