編集

影織文庫の全記事連関図を構築してみた

2026 /01 /19

影織文庫の愛読者のみんな達〜〜みてみて〜〜〜
新しいアプリを作ってみたの〜！＼( 'ω')／

影織文庫内の2400本近い記事がどう繋がっているのか、インタラクティブなネットワーク図として可視化しました。
2026/1/11現在、919単語・22391リンクあります。

ちなみに、トップページの上部のリンク集（網書）からも閲覧できます。

割ととんでもないことになってる。

単語のつながりが見える。

プロジェクト概要

記事タイトルおよび本文を共起ネットワークで可視化しています。

BloggerAPIで記事を全件取得し、形態素解析でタイトルと本文から2文字以上からなる名詞のみ取得して、それらの単語がどの記事で一緒に使われているかを視覚化しています。

もう少し詳しい解説

つまりどゆこと？？？

具体例を考えてみましょう。

たとえばこんな文章を書いたとします。

記事1: 「ARと切り絵で作品制作してみた...」

記事2: 「AR技術の基礎解説...」

記事3: 「切り絵作品の作り方...」

ここから、2文字以上の名詞のみ取り出します。

記事1: AR, 切り絵, 作品, 制作

記事2: AR, 技術, 基礎, 解説

記事3: 切り絵, 作品, 作り方

同じ記事に出現した単語ペアをカウントします。

AR × 切り絵　1回　記事1

AR × 作品　1回　記事1

AR × 技術　1回　記事2

切り絵 × 作品　2回　記事1, 3

で、このカウントをグラフとして可視化します。
出現回数が多ければ多いほど、ネットワークの線が太くなっていきます。

タイトルと本文から取り出した名詞で、このグラフを作ってみた、ということです。

ツールの目的

2400記事近くあるブログが死蔵されてるの、もったいないよな。

もっと記事同士の連関が見やすくならないものか。

いろいろなところで似たような角度で同じような話をしているけれど、それを一括で総覧できないか。

というのがずっと問題意識としてあり、読者さんからもお声をいただいていたのを、なんとかしたくって作りました。

かなりいい感じにできたのではなかろうか。

実装は相当AIに助けられました。ありがとうClaudeパイセン。

使い方

全体ネットワークから1つ目の単語をクリックすると、その単語と関連のある単語にのみ絞り込まれ、2つ目の単語を選ぶと、その2語を含む記事を総覧できます。

ちなみに1つ目の単語は、検索窓から単語の検索も可能です。

赤＝考え方、青＝海外、黄＝技術、灰＝それ以外のラベルに分類されるワードです。

たまに両方にまたがるものもあります（例えば「自然」という言葉が、"自然と解決した"のような考え方の文脈で出てきたり、"自然の中を散歩した"のような海外生活の文脈で出てきたり）。その場合は技術 > 海外 > 考え方の順で優先されるようになっています。

カテゴリごとにエリアが分かれており、だいたい近くにある単語ほど一緒に使われることが多い傾向にあります。

月1回、自動（CI/CD）でブログ情報のデータを更新します。

ブラウザキャッシュも自動で更新されるため、常に最新のブログ内容が反映される（はず）。ダメそうだったらスーパーリロードしてください。

一応レスポンシブデザインにはしてあり、スマホでも閲覧可能です。が、ノード数が多くてごしゃごしゃするので、快適な操作のためにも、PCでの閲覧を推奨します。

集合体恐怖症の人は注意。

技術スタック

フロントエンド

sigma.js 3.0 - グラフ可視化ライブラリ

graphology - グラフデータ構造

ForceAtlas2 - レイアウトアルゴリズム

@sigma/node-border - ノード装飾

Vite - ビルドツール

バックエンド

Node.js - データ処理

Blogger API v3 - 記事データ取得

kuromoji.js - 日本語形態素解析

インフラ

GitLab Pages - ホスティング

GitLab CI/CD - 自動デプロイ & データ更新

カスタムドメイン - network.kageori.com

大変だったこと

描画重すぎ問題

最初は、タイトルだけを使って算出していたのですが、その時点で、3,207ノード（単語） + 17,630リンク（単語を繋ぐ線）＝ 描画がやばい。そりゃそうなんだよ。

元々、D3.jsというライブラリを使って実装をスタートしていました。
これでPCならギリギリ動いてはいたのですが、検証ツールが重すぎて動かなかったり、スマホだとガタガタしたりと、だいぶ挙動が怪しくはありました。

当初の予定では、単語をクリックで、該当する語をタイトルに含む記事に飛ぶ、というだけの実装を考えていたのですが、単語同士の組み合わせでタイトルを見たいよなとか、絞り込み機能が欲しいよな、と考えて追加していくうちに、とうとうフリーズして何も動かない状態になりました。そりゃそうなんだよ。

旧版のスクショ動画をここで供養。
けっこうおしゃれで好きだったんですけどねぇ...D3.jsは基本、SVG で描画していくので、こんなアホみたいな数の描画にはさすがに耐えられなかったようです。そりゃそうなんだよ。

で、諦めて、ライブラリを選定し直して、再実装しました。
sigma.jsはWebGL (Canvas) で描画しているので、前よりだいぶサクサク快適に動くようになりました。よかった〜〜〜〜〜〜〜〜

パラメータ調整が大変だった

最初はタイトルだけでうまくできるかな、と思ったのですが、単語の連関で表示される記事がそこまでたくさん出てこなくて、なんだか微妙だったのです。

ということで、本文も全部突っ込んでみることにしました。

何も絞り込みをかけずに進めた結果、単語のつながり総数が374万リンクと、あまりに巨大すぎて処理落ちして、データ生成に失敗しました。それはもはや共起というか狂気ネットワークなんよ。

なので、頻出単語がどれくらいの分布をしているかと、共起の頻度に応じてそれぞれどれくらいの量のペアがあるのかを算出して、ほどほどのバランスを見つけました。

ちなみに本当は動詞も含めたかったのですが、さまざまな語尾から原型だけ取り出して処理するのが難しそうだったので無しにした、という経緯があります。そも、名詞だけでもそこそこのボリュームだからね。

10回以上ブログ内に出てくる名詞が約1000語弱で、全体の5%くらいらしいです。

この中で8回以上共起するものだけでネットワークを作るようにして、ようやくいい感じに絞り込みができました。ふぅ。

それでもまぁ、かなり探索のし甲斐があるネットワークになりました。

もちろんノイズも多少出てしまうのですが、どこの記事にでも出てしまいそうなワード（「今日」とか、「最近」とか）を削るなどして、頑張って精度を高めています。

ノイズっぽい変なワードが紛れ込んでたら、こっそり教えてください。笑

こんな感じで絞り込めるよ！

かなり横断的に取れてるのでは？

自分のブログの傾向がわかって楽しい

これよ。

何気なく書いてきた自分のブログの傾向がグラフから見えるの、ワクワクします。

一般的な語を抜いた頻出ワードの1位が「ブログ」だったのですが、2位が「好き」っていうところに感動しました。

このブログ、ちゃんと自分の「好き」をいっぱい蓄積してきたのだな、と。

この頻出ワードTop50もここで公開しちゃおう。

2026/1現在の影織文庫頻出ワードTop50（折りたたんでいます。ここをクリックで展開）

1. ブログ: 413回

2. 好き: 343回

3. 切り: 331回

4. 作品: 310回

5. 世界: 305回

6. 言葉: 290回

7. 行動: 286回

8. 問題: 276回

9. 写真: 276回

10. 作業: 274回

11. 選択: 263回

12. 思い: 263回

13. 不安: 249回

14. 安心: 244回

15. 人生: 237回

16. 素敵: 236回

17. 簡単: 233回

18. 創作: 230回

19. 紹介: 220回

20. 情報: 220回

21. 場所: 219回

22. 過去: 213回

23. 販売: 213回

24. 日記: 211回

25. 経験: 207回

26. 展示: 205回

27. 表現: 202回

28. 感覚: 200回

29. 気分: 199回

30. 仕事: 197回

31. 大丈夫: 195回

32. 瞬間: 193回

33. 意識: 193回

34. 自由: 191回

35. タイミング: 190回

36. 設定: 188回

37. ポイント: 188回

38. 表示: 186回

39. 自然: 182回

40. 意味: 181回

41. アプリ: 180回

42. ダメ: 179回

43. 完成: 177回

44. 体験: 173回

45. 相手: 172回

46. 可能: 171回

47. 解決: 171回

48. 確認: 169回

49. 画面: 169回

50. 手順: 168回

まとめ

影織文庫が、より情報集約された図書館っぽくなったかしら。どうだろう。

遊びに来てくれた人が、少しでも楽しく探索できますようにと願いを込めて、筆を置きます。

ぜひ遊びに来てくださいね。