コンテンツにスキップ
高田ゼミ

ゼミ記事のリンク関係を可視化する

Author: Kazukichi

リンクの歴史

Section titled “リンクの歴史”
  • 1960年代、テッド・ネルソンがハイパーテキストという概念を提唱
    • 文書を線形に読むのではなく、双方向リンクによる非線形な読み方を構想
    • これはXanaduプロジェクトで部分的に実現された
  • 1960年代、ドイツの社会学者ニクラス・ルーマンがZettelkastenを実践
    • 紙のカードにメモを書き、カード間に参照リンクを張ることで知識を体系化する手法
    • 現代ではPKM(Personal Knowledge Management)の代表的な手法として再評価されている
    • 後にObsidian等のツールがその思想をデジタル化し、Webと融合していった
  • 1980年代、AppleのHyperCardがカード間をリンクで繋ぐという概念を広める
    • のちのWebのハイパーリンクの原型となる
  • ちなみに以前話した ヴァネヴァー・ブッシュと「As We May Think」 / ヒューマンインタフェースとダグラス・エンゲルバート / 続・ダグラス・エンゲルバートのサーベイ といった記事は1940年代〜1960年代の話であり、テッド・ネルソンとも深く関わってくる

リンクの価値

Section titled “リンクの価値”
  • 情報はリンクによって繋がることで価値が生まれる
  • 単体の情報は文脈を持たない
  • リンクによって繋がることで「この記事はあの記事の続きだ」「この概念はあの概念に影響を受けている」といった関係性・文脈が生まれる
  • リンクを辿ることで、探していなかった情報に出会うセレンディピティも生まれる

現状の課題

Section titled “現状の課題”
  • 高田ゼミ には検索機能があるが、記事間の関係性や文脈は見えない
  • 記事によっては別記事へのリンクがあるが、ゼミ全体で活用できているとは言えない
  • Obsidianのグラフビューのようにゼミ全体を俯瞰し、リンク関係を辿ることができない

作ったもの

Section titled “作ったもの”

アーキテクチャ

Section titled “アーキテクチャ”
  • syncスクリプト … 高田ゼミ からクローリング&スクレイピングし、リンク関係を保存
  • GitHub Actions … syncスクリプトを週次で実行する
  • Webページ … 保存されたリンク関係をリッチに描画

syncスクリプト

Section titled “syncスクリプト”
  • npm run sync で実行するスクリプト
  • GitHub Actionsによって週次で定期実行される

処理フロー

Section titled “処理フロー”
  1. サイトマップ( sitemap.xml )を取得し、全ページのパスを列挙する
  2. 各ページをスクレイピングし、本文中のリンクを抽出する
  3. サイト内リンクのみを対象に、参照関係を洗い出す
  4. 結果を public/graph.json に保存する

技術選定

Section titled “技術選定”
  • スクレイピングには node-html-parser を使用
  • HTMLを取得してリンクを抽出するだけのシンプルな用途のため、軽量なライブラリを選定

データ構造

Section titled “データ構造”
  • スクレイピング結果は以下の型で表現する
  • Graph は後述する force-graph にそのまま渡せる形式となっている
type Node = {
  id: string;            // pathと同様
  title: string;         // タイトル
  path: string;          // パス
  author: string | null; // 著者名
};


type Link = {
  source: string; // 参照元ノードの id
  target: string; // 参照先ノードの id
};


type Graph = {
  nodes: Node[];
  links: Link[];
};

実装方針

Section titled “実装方針”
  • 現時点では89ページ、40リンクのグラフが生成されている
  • ページ数・リンク数ともに少なく、実行頻度も週次であるため、毎回全ページを取得するようにしている
  • ページ数・リンク数が増えてきたら差分のみを取得・更新する仕組みを用意しても良いかもしれない

余談: リンクの収集

Section titled “余談: リンクの収集”
  • 当初はBFS(幅優先探索)でトップページを起点にリンクをクローリングする方式を想定していた
  • 途中でサイトマップが存在し、全ページのURLが一覧としてまとまっていることに気付いた
  • クローリングが不要になり、実装をシンプルにできた

Webページ

Section titled “Webページ”
  • リンク関係の描画とインタラクションなUIの提供

技術

Section titled “技術”
  • フロントエンドはSvelte + TypeScriptで構築
    • グラフを描画するだけのシンプルなUIのため、ランタイムが軽くコード量も少なく済むSvelteが適していた
  • グラフ描画には force-graph を採用
    • フォースシミュレーションによる自動レイアウトに対応した有向グラフが描画可能で、モダンかつ実装コストも低い

ノードの描画

Section titled “ノードの描画”
  • 各ノードの下にページタイトルを表示
  • yyyy/mm-dd/author 形式で日付と著者名も表示
  • 著者ごとにノードの色が異なり、誰の記事かが一目でわかる
  • ノードをクリックすると、対応するゼミ記事を新しいタブで開く

感想

Section titled “感想”
  • グラフを眺めていると、いくつかリンクの島ができていて、それぞれにカテゴリの特色があるのが面白かった
  • これがきっかけでリンクが育っていくと嬉しい