CosenseLink

CosenseLink — 仕様書

バージョン: 1.0 作成日: 2026-03-07 対象リポジトリ: NAKADANobuhiro/CosenseLink

1. 概要

CosenseLink は、Cosense（旧 Scrapbox）のエクスポートデータを読み込み、ページ間のリンク関係をインタラクティブなネットワークグラフとして可視化するブラウザアプリケーションである。

現在のリリース（CosenseLink-A6J.html）は「アトロク2ファンサイト」プロジェクトに特化したデータを同梱したスタンドアロン版として提供される。コアエンジン（cosense-graph.js）は他プロジェクトからも再利用可能な汎用設計となっている。

2. 対象ユーザー

Cosense / Scrapbox を利用しているコンテンツ作成者・ファン
ページ間のリンク関係を視覚的に探索したいユーザー
「アトロク2」ファンサイトの閲覧者

3. 動作環境

項目	要件
実行環境	モダンブラウザ（Chrome / Firefox / Safari / Edge 最新版）
ネットワーク	CDN から D3.js v7 を読み込むため、初回はオンライン必須（キャッシュ後はオフライン可）
サーバー	不要（静的ファイルのみ。ローカルファイルシステムまたは任意のHTTPサーバーで動作）
外部依存	D3.js v7（`https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js`）

4. 機能仕様

4.1 グラフ表示

Cosense のエクスポート JSON からページ群をノード、リンクをエッジとしてフォース有向グラフを描画する。
グラフは HTML5 Canvas 上に D3.js フォースシミュレーションを用いてレイアウトされる。
ノードの大きさはそのページが持つリンク数（次数）に比例してスケールされる（最小半径 3.5px、最大 17.5px）。
エッジは双方向リンクを実線、片方向リンクを破線＋矢印で区別して描画する。

4.2 ノードカテゴリと配色

ページのタイトルまたは本文先頭行に基づき、以下のカテゴリに自動分類される。

カテゴリ	判定条件	表示色
`date`（日付）	タイトルが `YYYY-MM-DD` 形式で始まる	黄（`#e3b341`）
`movie`（映画）	本文に `[映画]` タグを含む	紫（`#d2a8ff`）
`person`（人物）	本文に `[人物]` タグを含む	白（`#ffffff`）
`default`（その他）	上記以外	青（`#58a6ff`）

カテゴリ判定の優先順位は date > movie > person とする。

4.3 ノード選択とハイライト

ノードをクリックすると選択状態になり、選択ノードを赤（#f78166）、隣接ノードをカテゴリ色で強調表示する。
非隣接ノードおよびエッジは暗転（透明度を下げる）して表示される。
グラフは選択ノードが画面中央に来るようにスムーズに移動・ズームする（flyTo アニメーション、600ms）。
グラフ上の空白部分をクリックすると選択が解除される。

4.4 ズームとパン

マウスホイールまたはピンチ操作でズーム（拡大縮小率: 0.04〜12 倍）。
ドラッグ操作でパン（移動）。
ズーム倍率が 0.5 以上のとき、次数が高いノードや選択・隣接ノードのラベルを表示する。
ズーム倍率が 1.5 以上のとき、すべてのノードにラベルを表示する。
ズーム倍率が 0.3 以上のとき、片方向エッジに矢印を描画する。

4.5 サイドパネル（ページ詳細）

ノードを選択するとサイドパネル（幅 460px）が右側に展開し、以下の情報を表示する。

ページタイトル
メタ情報： リンク数、バックリンク数、閲覧数、最終更新日
本文： Cosense マークアップをHTMLにレンダリング（後述）
出リンク一覧： クリックで該当ノードへジャンプ（存在しないページはグレーで表示）
バックリンク一覧： このページを参照しているページ一覧

パネルには「戻る（←）」ボタンがあり、直前に閲覧したページに戻れる。「×」ボタンでパネルを閉じる。

4.6 Cosense マークアップのレンダリング

サイドパネル内でのCosense 独自記法のHTMLへの変換ルールを以下に示す。

記法	出力
`[*** テキスト]`	大見出し（`font-size: 1.25em`）
`[** テキスト]`	中見出し（`font-size: 1.1em`）
`[* テキスト]`	太字（`<strong>`）
`[/ テキスト]`	イタリック（`<em>`）
`[- テキスト]`	取り消し線（`<del>`）
`code`	インラインコード（`<code>`）
`[画像URL]`	画像（`<img>`）
`[YouTube/Vimeo URL]`	動画リンク（`▶ 動画`）
`[ラベル URL]`	外部リンク（`<a target="_blank">`）
`[URL]`	URL そのままをリンク表示
`[ページ名]`	内部リンク（クリックでそのページへ移動）
`#タグ`	ハッシュタグ（内部リンクと同等）
`code:言語名`	コードブロック（ファイル名付き）
`> テキスト`	引用
タブインデント	箇条書き（レベルに応じて `•` / `◦` / `▸` を表示）

4.7 検索

ヘッダー右端の検索ボックスにキーワードを入力するとリアルタイムでページ名を絞り込む。
最大12件をリンク数（次数）降順で表示する。
検索結果のアイテムをクリックするとそのノードを選択し、パネルを開く。

4.8 閲覧履歴（ヒストリーバー）

グラフ左下に最大6件の直近閲覧ページをタグ形式で表示する（全体で最大20件を保持）。
現在選択中のページは青背景で強調表示される。
タグをクリックすると該当ページに移動する。

4.9 エラーハンドリング

JavaScript のランタイムエラーおよびPromiseの未捕捉例外をキャッチし、画面中央にオーバーレイ表示する。
「閉じる」ボタンでオーバーレイを非表示にできる。
処理状況（データ読み込み中、レイアウト完了など）は画面下部のログバーに一時的に表示される（4秒後に自動消去）。

4.10 データ読み込み方式

コアエンジンは2つの読み込み方式をサポートする。

方式 A（自動起動）： window.COSENSE_DATA にデータをセットした後 cosense-graph.js を読み込むと、DOMContentLoaded 時に自動でグラフを初期化する。

方式 B（手動起動）： cosense-graph.js 読み込み後、任意のタイミングで initGraph(data) を呼び出す。fetch() などで非同期にデータを取得してから初期化する場合に使用する。

5. 非機能要件

項目	要件
パフォーマンス	フォースシミュレーション収束後はアニメーションを停止し、CPU 使用率を抑える
可搬性	単一ディレクトリ（HTML + JS + CSS）で動作し、サーバー不要
拡張性	コアエンジン（`cosense-graph.js`）を他プロジェクトに流用可能
セキュリティ	外部サイトへのリンクは `rel="noopener"` を付与する
アクセシビリティ	現バージョンでは特段の対応なし（将来課題）

6. データ形式

入力データは Cosense のエクスポート JSON 形式に準拠する。

{
  "name": "project-id",
  "displayName": "プロジェクト表示名",
  "pages": [
    {
      "title": "ページタイトル",
      "lines": [
        { "text": "ページタイトル（1行目）" },
        { "text": "本文..." }
      ],
      "linksLc": ["リンク先タイトル（小文字）"],
      "views": 100,
      "updated": 1700000000
    }
  ]
}

pages が直接配列として渡される形式にも対応する。

7. ファイル構成

CosenseLink/
├── CosenseLink-A6J.html   # アトロク2ファンサイト向けエントリーポイント
├── a6j.js                 # アトロク2ファンサイトのデータ（window.COSENSE_DATA）
├── js/
│   └── cosense-graph.js   # コアグラフエンジン（汎用）
└── css/
    └── cosense-graph.css  # スタイルシート

8. 制約・既知の制限

データファイル（a6j.js）は約 9.5MB あり、モバイル環境では読み込みに時間がかかる場合がある。
ノードが極端に多い場合（数千件以上）はフォースシミュレーションの処理負荷が増大する。
現バージョンはデータの書き込み・編集機能を持たない（読み取り専用）。
CORS 制約があるため、fetch() を使う場合はHTTPサーバー経由での提供が必要。

This site is open source. Improve this page.