【B面081】14年分の記憶を星座にする：PythonとAIで紡ぐ「電脳曼荼羅」生成ハック

📅 2026-05-19

はじめに：密集の回避と「星座」の美学

前回の【B面079】で公開した、私の脳内を「犬とサイバー」の二極構造で表現したインタラクティブ・マップ。実はあれを作成するにあたり、1つの大きな「物理的抵抗」に直面していた。

AI（Gemini 2.5 Flash）が弾き出した私の14年分のメディアログは、全部で 460件 にも及ぶ。これをすべて小さなHTMLの宇宙空間にぶち込むと、星同士が完全に重なり合い、ただの「太い色の帯」と化してしまうのだ。クリックもままならず、さらに400枚以上の画像を裏で読み込もうとしてブラウザが悲鳴を上げる。

そこで私は、ハッカーとしての美学に基づき、以下の解決策を講じた。

ランダムに50件だけを抽出する（夜空の星のように、適度に散らばった「星座」にするため）
サイバー度が同じでも、少しだけ位置をずらす（ジッター処理による重なり回避）

今回は、この「電脳曼荼羅（インタラクティブ・マップ）」を数秒で全自動生成するPythonスクリプトの全貌と、NoteshelfAIを使った私のワークフローを公開しよう。

電脳曼荼羅：ランダム抽出された「記憶のマップ」

まずは、このスクリプトが吐き出した 「電脳曼荼羅（インタラクティブ・マップ）」 のサンプルを実際に触ってみてほしい。

（以下の星空にマウスを乗せると、フワッと情報が浮かび上がる仕様だ）

▲ 高サイバー度 (コード/EV/データ)

▼ 低サイバー度 (自然/日常/犬)

🗺️ マップ生成のフローチャート

プログラムの全体的な流れを、Mermaid記法によるフローチャートで可視化してみた。

graph TD
    A[開始: generate_map.py] --> B{{CSVファイルの読み込み}}
    B -- 成功 --> C[全データ 460件を取得]
    B -- 失敗 --> X[エラー終了]

    C --> D[ランダムに 50件 をサンプリング]

    D --> E[HTML生成関数 generate_html]

    E --> F[外側の宇宙空間 DIV を生成]

    F --> G[各データポイントのループ処理]

    G --> H[サイバー度を数値化 1〜10]
    H --> I[Y座標の決定 + ジッター処理]
    I --> J[X座標の決定 ランダム]
    J --> K[色と画像のURLを設定]
    K --> L[星 ドット とツールチップのHTMLを追記]

    L --> M{{全50件完了?}}
    M -- No --> G
    M -- Yes --> N[HTML文字列の完成]

    N --> O[interactive_map.html に書き出し]
    O --> P[終了: ブラウザで開いて確認]

    style A fill:#1e1e2f,stroke:#00d2ff,stroke-width:2px,color:#fff
    style P fill:#1e1e2f,stroke:#ff5e62,stroke-width:2px,color:#fff

💻 generate_map.py プログラムの説明

NoteshelfAIで整理したプログラムの構造と解説を、そのまま公開する。

１．概要

このプログラムは、CSVファイルからデータを読み込み、サイバー度に基づいてインタラクティブなマップを生成します。

２．主な機能

CSVファイルからデータを読み込む。

データからランダムに50件を選ぶ。

選ばれたデータを使ってHTMLマップを生成する。

３．設定エリア

プログラムの最初に、以下の設定項目を設けている。

CSV_FILE: 読み込むCSVファイルの名前。

R2_DOMAIN: 画像のURLのベースとなるドメイン。

NUM_DOTS: マップに表示する点の数（ここでは50）。

OUTPUT_FILE: 出力されるHTMLファイルの名前。

４．HTML生成関数（核心部分）

generate_html(data) 関数は、データをもとに各点の位置や色を決めてHTMLを生成する。

外側の箱のスタイルを決定。

各データポイントに対して、サイバー度に応じた位置（Y座標）と色を計算。

1〜4（低）: 犬、自然、日常（赤色の星）

5〜6（中）: 工業製品、風景（黄色の星）

7〜10（高）: コード、基板、EVのデータ画面（青色の星）

【重なり回避】同じサイバー度でも完全に重ならないよう、random.uniform(-4, 4) を用いて「ジッター（揺らぎ）」を加えてY座標を少しズラしている。X座標は完全にランダムに散らす。

ツールチップに画像と情報を表示するHTMLを構築。

💡 実験結果データちなみに、今回出力した50件のサンプルデータを集計すると以下のようになった。抽出数: 50件 / 平均サイバー度: 4.16 / 最大: 10.0 / 最小: 1.0 平均が「4.16」と物理世界に寄っているのは、私のローカルLLMがいかに強力なヒートシンクを求めているかの証左だろう。

５．メイン処理と実行方法

main() 関数は、プログラムのエントリーポイントだ。

CSVファイルを読み込み、データを取得。

データからランダムに指定件数をサンプリング。

生成したHTMLファイルに書き込む。

ターミナルで実行すると指定したCSVファイルからデータを読み込み、HTMLマップを生成。出力されたファイルをブラウザで開くと、インタラクティブなマップが表示される。

📝 NoteshelfAI：アナログとデジタルの交差点

今回、このPythonコードの構造を整理し、ブログ記事の骨格を練るにあたり、「NoteshelfAI」というツールを活用した。手書きノートアプリであるNoteshelfに実装されたAI機能だ。

私はタブレットの画面に、Apple Pencilで雑多な思考やコードの断片、UIのアイデアを書き殴る。NoteshelfAIは、その「アナログな手書きの軌跡」を読み取り、瞬時に構造化されたテキストやプログラムの仕様書（マークダウン）に変換してくれる。

前回の記事で「ラブラドールは物理的ヒートシンクである」と書いたが、この「手で書く」というアナログな行為自体も、私の脳のLLMを整理するための重要なプロセスだ。

手書きで散らかす（アナログ）

NoteshelfAIで構造化する（デジタル）

Pythonで自動化する（サイバー）

この流れるようなワークフローこそが、シニア・ハッカーの特権である。

（執筆協力：Gemini / 編集・監修：電脳古老）

💬 電脳古老＆変AIへのコメント

記事の感想・質問・雑談をどうぞ（200文字くらいまで推奨）

まだコメントはありません。一番乗りで古老とAIに話しかけよう！

ブログ一覧に戻る