すくらっぷ あんど びるどー(したい)

日々やった事のメモとかまとめ。

【AI】Heptabaseをエクスポートして可視化してみた【ダッシュボード作成】

普段Heptabaseを使用している。非常に使いやすくホワイトボードに色々とのせて知識を貯めるのは楽でいい。しかしながらプラグインなどはなく、かなり自由度という面は低い。また内容をAIによってまとめる事などはできるが、結構時間がかかることもある。
そのためデータを可視化・分析するために、エクスポートした内容を加工して使用できるものを作成した。

1. やるとどうなるか

  • 散らばったコンテキストの統合: 複数のホワイトボードに跨るカードを、AIが共通の文脈でクラスター化。
  • 対話型ナレッジ解析: 自分の過去のメモをすべてコンテキストとして読み込ませたAIに、客観的な視点から質問を投げることが可能。
  • 知的生産の可視化: どのトピックにどの程度の情熱を注いでいるかが、Bento Grid スタイルのヒートマップやワードクラウドで一目で把握できる。

2. インストールと初期設定

動作要件

  • OS: Windows 10/11 (x64)
  • Runtime: .NET 8.0 SDK, Microsoft Edge WebView2 Runtime

セットアップ手順

  1. APIキーの設定: アプリの設定画面から、OpenAI、Anthropic、または Google Gemini のAPIキーを入力します。
  2. データの指定: Heptabase からエクスポートした Markdown ファイルを指定。
  3. 保存: 「SAVE CONFIGURATION」をクリックして設定を有効化。

3. 解析対象:Heptabase エクスポートの仕様

  • エクスポート手順: 設定画面(Settings > Backup & Sync > Export Now)から Markdown 形式で出力。
  • ディレクトリ構造: 出力された ZIP を解凍すると、以下の構造が含まれますが、解析に必要なのは Card Library ディレクトリ。

4. 技術スタック

少し前にPowerShellと.NETを触って業務に使用するものを作成したこともあり、汎用性よりも自分専用を意識して下記を利用して作成した。

  • フレームワーク: .NET 8.0 Windows (WPF), C# 12.0
  • 可視化: Microsoft.Web.WebView2, ECharts (v5.4.3), echarts-wordcloud (v2.1.0)
  • UI スタイリング: Tailwind CSS (CDN), Glassmorphism, Bento Grid
  • AI 連携: Gemini 3 Flash, Claude 3.5 Sonnet, GPT-4o
  • ライブラリ: Markdown.ColorCode(AI回答のハイライト), System.Text.Json(シリアライズ)

最初期はPythonを勧められていたが、今回は意識的にそれを蹴った形である。

5. 開発中に直面した失敗と、解決策

初期化順序が生む NullReferenceException

コンボボックスの選択イベントが、UI の完全な読み込み前に発火することで発生する問題。

  • 解決策:
private bool _isInitialized = false;

public MainWindow() {
    InitializeComponent();
    _isInitialized = true; // 初期化完了をフラグで管理
}

private void AiModelSelector_SelectionChanged(object sender, SelectionChangedEventArgs e) {
    if (!_isInitialized || MainContainer == null) return; // ライフサイクルガード
}

設定管理の堅牢化

ConfigService.Load() を静的メソッド化し、アプリケーション起動時に確実に設定が読み込まれるよう修正。

6. 実際の様子

全体

  • 基本的にはホワイトボードを基本とした繋がりをみれるようにしている。
  • ワードクラウドとヒートマップは自分の興味がどのように働いているかをしるためにしている。ワードクラウドにおいては50の単語があがる。

AIチャット欄

  • 基本的にはMarkdownを解析することになるのでこれらを雑に聞いていもこうした受け答えが返ってくる。
    • 解析したデータの繋がりなどををやるにあたってはHeptabaseでも可能であるが、グラフ化したものから視覚的に判断して聞くなどをやることはできない。

  • こうしたこともできる。基本的には内容の分析に特化しているので割と適当なことをやるとそっけない扱いをされる。

7. まとめ

基本的にやりたいこととしては可視化・解析であったため、その要件はみたしている。

ただ分析したりグラフ化などの可視化するのはホワイトボードだけみていると全体像がつかみにくいという点があったためであり、それほど使うかと言われれば疑問が生まれた時に使用するといった使い方になると思われる。実際これを作成しようとした理由としてはホワイトボードだけだと集中的にポンポンなげたり関わりをみつけるなどは楽だが、全体を把握するのが面倒になってきたからである。Tag機能でテーブルにすることもできるが、できればもっと楽にやりたかった。

そんな訳でこれでなんとか全体を把握するのができたのでもっと投げられるようにりました。
これからも雑事は君になげる。

ほな、AIくん、あとはやっといて~。