HiroKws · November 13, 2025 17:35
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsMind - マインドマップ</title>

    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsmind@0.9.0/style/jsmind.min.css" />

    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        h1 {
            text-align: center;
            margin: 15px 0;
            color: #333;
        }

        #controls {
            text-align: center;
            padding: 10px;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        #controls button,
        #controls select {
            padding: 8px 15px;
            margin: 0 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f0f0f0;
            cursor: pointer;
            font-size: 14px;
        }

        #controls button:hover,
        #controls select:hover {
            background-color: #e0e0e0;
        }

        #jsmind_container {
            width: 100%;
            height: 80vh;
            border-top: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
 </head>

 <body>

    <h1>jsMind - マインドマップ</h1>

    <div id="controls">
        <button id="expand_all">全展開</button>
        <button id="collapse_all">全収納</button>
        <select id="theme_selector">
            <option value="default" selected>Default</option>
            <option value="primary">Primary</option>
            <option value="warning">Warning</option>
            <option value="danger">Danger</option>
            <option value="success">Success</option>
            <option value="info">Info</option>
            <option value="greensea">Greensea</option>
            <option value="nephrite">Nephrite</option>
            <option value="belizehole">Belizehole</option>
            <option value="wisteria">Wisteria</option>
            <option value="asphalt">Asphalt</option>
            <option value="orange">Orange</option>
            <option value="pumpkin">Pumpkin</option>
            <option value="pomegranate">Pomegranate</option>
            <option value="clouds">Clouds</option>
        </select>
    </div>

    <div id="jsmind_container"></div>

    <!--- NotebookLMで、「マインドマップを作成します。表示はこちらで用意しますので、キーワードをmarkdownで階層化したテキストで表示してください。」を
    チャットのプロントとして指示し、表示された結果を<pre><code>から</code></pre>の間へ貼り付けてください。後はローカルファイルをブラウザで表示するなり、
    サーバー上で表示するなり、利用してください。このファイルにはサンプルとしてGeegleが提供しているNotebookLM自身のノートブックの結果を貼り付けてあります。 -->
    <div id="mindmap-data" style="display:none;">
        <pre><code>
 NotebookLM: AIを活用したリサーチと思考のパートナー
 • 基本コンセプトとUI
    ◦ AIリサーチ・思考パートナー
        ▪ 信頼できる情報（ユーザー提供のソース）に基づく
        ▪ Gemini AIを搭載
    ◦ 3パネルデザイン
        ▪ ソースパネル（左）: 入力エリア
        ▪ チャットパネル（中央）: 理解・対話エリア
        ▪ Studioパネル（右）: 出力エリア
        ▪ パネルは折りたたみ・展開が可能で、ワークフローに合わせて調整できる
    ◦ ノートブック
        ▪ プロジェクトごとに情報を整理する単位
        ▪ 各ノートブックは独立しており、情報を横断してアクセスすることはできない
 • 入力 (Sources Panel)
    ◦ ソースの追加方法
        ▪ ファイルのアップロード（PDF、テキスト、Markdown）
        ▪ Google Driveからインポート（Googleドキュメント、Googleスライド）
        ▪ Web URL
        ▪ YouTube URL（公開動画のみ）
        ▪ 音声ファイル（MP3, WAVなど）
        ▪ テキストのコピー＆ペースト
        ▪ Discover Sources機能: トピックを入力してWeb上の関連ソースを検索・追加
    ◦ ソースの仕様と制限
        ▪ 1ソースあたり最大50万語、または200MB
        ▪ ノートブックあたりのソース数:
            • 無料版: 最大50ソース
            • Pro版: 最大300ソース
        ▪ アップロードされたファイルは静的なコピーであり、元のファイルは編集されない
        ▪ Googleドキュメント/スライドの変更は手動で同期が必要
    ◦ ソースの自動概要
        ▪ ソースをアップロードすると、要約、主要トピック、質問候補が自動生成される
 • 理解 (Chat Panel)
    ◦ チャット機能
        ▪ ソースに基づいて質問に回答
        ▪ インライン引用により、回答の根拠をソース内で確認可能
        ▪ 引用をクリックするとソースの該当箇所にジャンプ
        ▪ 基本的にはソース内の情報のみを使用
    ◦ 高度な設定 (Pro版)
        ▪ 会話スタイルのカスタマイズ（デフォルト、アナリスト、ガイド、カスタム）
        ▪ 応答の長さの調整（短い、デフォルト、長い）
    ◦ 操作
        ▪ 特定のソースを選択してチャットの対象を絞り込み可能
        ▪ チャット履歴のクリア
        ▪ 気に入った回答を「ノート」として保存
 • 出力 (Studio Panel)
    ◦ Audio Overview (音声概要)
        ▪ AIホスト同士の対話形式でソース内容を要約
        ▪ 長さやトピックのカスタマイズが可能
        ▪ インタラクティブモードでAIホストと対話できる（英語のみ）
        ▪ 50以上の言語に対応
        ▪ ダウンロードやリンクでの共有が可能
    ◦ Video Overview (動画概要)
        ▪ ソース内の画像や図を引用したAIナレーション付きのスライド動画を生成
        ▪ トピックのカスタマイズが可能
        ▪ ダウンロードやリンクでの共有が可能
        ▪ 50以上の言語に対応
    ◦ Mind Map (マインドマップ)
        ▪ ソースの主要トピックと関連アイデアを視覚的に要約
        ▪ チャット内のチップから生成
        ▪ ノードを選択して特定のトピックについて質問可能
    ◦ Reports (レポート)
        ▪ FAQ、学習ガイド、タイムライン、ブリーフィングドキュメントなどを生成
    ◦ Notes (ノート)
        ▪ チャットの回答を保存、または自由にメモを作成
        ▪ ノートをソースに変換して、自分の考えをAIの分析対象にできる
        ▪ 複数のノートを要約したり、アウトラインを作成したりするクイックアクション機能がある
 • 共有とコラボレーション
    ◦ プライベート共有: 特定のユーザーを閲覧者または編集者として招待
    ◦ 公開共有: リンクを知っている全員が閲覧可能（コンシューマーアカウントのみ）
    ◦ Chat-only共有 (Pro版): ソースを隠し、チャット機能のみを共有
    ◦ Featured Notebooks: 専門家がキュレーションした高品質なソース集
 • モバイルアプリ
    ◦ AndroidとiOSで利用可能
    ◦ 外出先での質問や音声概要の聴取に特化
    ◦ 一部機能に制限あり（マインドマップ、動画概要、ノート作成などは未対応）
        </code></pre>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsmind@0.9.0/es6/jsmind.min.js"></script>

    <script type="text/javascript">
        function parseIndentedText(text) {
            const allLines = text.split('\n');
            let firstLineIndex = -1;
            for (let i = 0; i < allLines.length; i++) {
                if (allLines[i].trim() !== '') {
                    firstLineIndex = i;
                    break;
                }
            }
            if (firstLineIndex === -1) return null;

            const rootTopic = allLines[firstLineIndex].trim().replace(/^[•◦▪]\s*/, '');
            const rootNode = { id: 'root', topic: rootTopic, isroot: true, children: [], 'indent-level': -1 };
            const childLines = allLines.slice(firstLineIndex + 1);

            const parentStack = [rootNode];
            const indentRegex = /^( *)/;

            childLines.forEach((line, index) => {
                if (line.trim() === '') return;

                const indent = line.match(indentRegex)[1].length;
                const topic = line.trim().replace(/^[•◦▪]\s*/, '');

                const node = {
                    id: `node-${index}`,
                    topic: topic,
                    children: [],
                    'indent-level': indent
                };

                // 現在のインデントより深いインデントを持つ親が見つかるまでスタックを遡る
                while (parentStack[parentStack.length - 1]['indent-level'] >= indent) {
                    parentStack.pop();
                }

                // スタックの末尾が現在のノードの親
                parentStack[parentStack.length - 1].children.push(node);
                // 現在のノードをスタックに追加
                parentStack.push(node);
            });

            // 左右の振り分けロジック
            const rightCount = Math.ceil(rootNode.children.length / 2);
            rootNode.children.forEach((child, index) => {
                child.direction = (index < rightCount) ? 'right' : 'left';
            });

            return rootNode;
        }


        const indentedText = document.querySelector('#mindmap-data code').textContent;
        const mind_data_json = parseIndentedText(indentedText);

        const currentTheme = document.getElementById('theme_selector').value;

        const options = {
            container: 'jsmind_container',
            theme: currentTheme,
            editable: false,
            view: {
                engine: 'canvas',
                hmargin: 100,
                vmargin: 50,
                line_width: 2,
                line_color: '#555'
            }
        };

        if (mind_data_json) {

            const rootTopicText = mind_data_json.topic;
            document.querySelector('title').textContent = rootTopicText;
            document.querySelector('h1').textContent = rootTopicText;

            const jm = new jsMind(options);
            jm.show({
                meta: { name: "NotebookLM-マインドマップ", author: "HiroKws", version: "0.3.1" },
                format: "node_tree",
                data: mind_data_json
            });

            document.getElementById('expand_all').addEventListener('click', () => jm.expand_all());
            document.getElementById('collapse_all').addEventListener('click', () => jm.collapse_all());

            document.getElementById('theme_selector').addEventListener('change', (event) => {
                jm.set_theme(event.target.value);
            });

        } else {
            document.getElementById('jsmind_container').textContent = "表示するデータが見つかりませんでした。";
        }
    </script>

 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jsMind - マインドマップ</title>

	<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsmind@0.9.0/style/jsmind.min.css" />

	<style>
	body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	}

	h1 {
	text-align: center;
	margin: 15px 0;
	color: #333;
	}

	#controls {
	text-align: center;
	padding: 10px;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	#controls button,
	#controls select {
	padding: 8px 15px;
	margin: 0 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #f0f0f0;
	cursor: pointer;
	font-size: 14px;
	}

	#controls button:hover,
	#controls select:hover {
	background-color: #e0e0e0;
	}

	#jsmind_container {
	width: 100%;
	height: 80vh;
	border-top: 1px solid #ccc;
	background-color: #fff;
	}
	</style>
	</head>

	<body>

	<h1>jsMind - マインドマップ</h1>

	<div id="controls">
	<button id="expand_all">全展開</button>
	<button id="collapse_all">全収納</button>
	<select id="theme_selector">
	<option value="default" selected>Default</option>
	<option value="primary">Primary</option>
	<option value="warning">Warning</option>
	<option value="danger">Danger</option>
	<option value="success">Success</option>
	<option value="info">Info</option>
	<option value="greensea">Greensea</option>
	<option value="nephrite">Nephrite</option>
	<option value="belizehole">Belizehole</option>
	<option value="wisteria">Wisteria</option>
	<option value="asphalt">Asphalt</option>
	<option value="orange">Orange</option>
	<option value="pumpkin">Pumpkin</option>
	<option value="pomegranate">Pomegranate</option>
	<option value="clouds">Clouds</option>
	</select>
	</div>

	<div id="jsmind_container"></div>

	<!--- NotebookLMで、「マインドマップを作成します。表示はこちらで用意しますので、キーワードをmarkdownで階層化したテキストで表示してください。」を
	チャットのプロントとして指示し、表示された結果を<pre><code>から</code></pre>の間へ貼り付けてください。後はローカルファイルをブラウザで表示するなり、
	サーバー上で表示するなり、利用してください。このファイルにはサンプルとしてGeegleが提供しているNotebookLM自身のノートブックの結果を貼り付けてあります。 -->
	<div id="mindmap-data" style="display:none;">
	<pre><code>
	NotebookLM: AIを活用したリサーチと思考のパートナー
	• 基本コンセプトとUI
	◦ AIリサーチ・思考パートナー
	▪ 信頼できる情報（ユーザー提供のソース）に基づく
	▪ Gemini AIを搭載
	◦ 3パネルデザイン
	▪ ソースパネル（左）: 入力エリア
	▪ チャットパネル（中央）: 理解・対話エリア
	▪ Studioパネル（右）: 出力エリア
	▪ パネルは折りたたみ・展開が可能で、ワークフローに合わせて調整できる
	◦ ノートブック
	▪ プロジェクトごとに情報を整理する単位
	▪ 各ノートブックは独立しており、情報を横断してアクセスすることはできない
	• 入力 (Sources Panel)
	◦ ソースの追加方法
	▪ ファイルのアップロード（PDF、テキスト、Markdown）
	▪ Google Driveからインポート（Googleドキュメント、Googleスライド）
	▪ Web URL
	▪ YouTube URL（公開動画のみ）
	▪ 音声ファイル（MP3, WAVなど）
	▪ テキストのコピー＆ペースト
	▪ Discover Sources機能: トピックを入力してWeb上の関連ソースを検索・追加
	◦ ソースの仕様と制限
	▪ 1ソースあたり最大50万語、または200MB
	▪ ノートブックあたりのソース数:
	• 無料版: 最大50ソース
	• Pro版: 最大300ソース
	▪ アップロードされたファイルは静的なコピーであり、元のファイルは編集されない
	▪ Googleドキュメント/スライドの変更は手動で同期が必要
	◦ ソースの自動概要
	▪ ソースをアップロードすると、要約、主要トピック、質問候補が自動生成される
	• 理解 (Chat Panel)
	◦ チャット機能
	▪ ソースに基づいて質問に回答
	▪ インライン引用により、回答の根拠をソース内で確認可能
	▪ 引用をクリックするとソースの該当箇所にジャンプ
	▪ 基本的にはソース内の情報のみを使用
	◦ 高度な設定 (Pro版)
	▪ 会話スタイルのカスタマイズ（デフォルト、アナリスト、ガイド、カスタム）
	▪ 応答の長さの調整（短い、デフォルト、長い）
	◦ 操作
	▪ 特定のソースを選択してチャットの対象を絞り込み可能
	▪ チャット履歴のクリア
	▪ 気に入った回答を「ノート」として保存
	• 出力 (Studio Panel)
	◦ Audio Overview (音声概要)
	▪ AIホスト同士の対話形式でソース内容を要約
	▪ 長さやトピックのカスタマイズが可能
	▪ インタラクティブモードでAIホストと対話できる（英語のみ）
	▪ 50以上の言語に対応
	▪ ダウンロードやリンクでの共有が可能
	◦ Video Overview (動画概要)
	▪ ソース内の画像や図を引用したAIナレーション付きのスライド動画を生成
	▪ トピックのカスタマイズが可能
	▪ ダウンロードやリンクでの共有が可能
	▪ 50以上の言語に対応
	◦ Mind Map (マインドマップ)
	▪ ソースの主要トピックと関連アイデアを視覚的に要約
	▪ チャット内のチップから生成
	▪ ノードを選択して特定のトピックについて質問可能
	◦ Reports (レポート)
	▪ FAQ、学習ガイド、タイムライン、ブリーフィングドキュメントなどを生成
	◦ Notes (ノート)
	▪ チャットの回答を保存、または自由にメモを作成
	▪ ノートをソースに変換して、自分の考えをAIの分析対象にできる
	▪ 複数のノートを要約したり、アウトラインを作成したりするクイックアクション機能がある
	• 共有とコラボレーション
	◦ プライベート共有: 特定のユーザーを閲覧者または編集者として招待
	◦ 公開共有: リンクを知っている全員が閲覧可能（コンシューマーアカウントのみ）
	◦ Chat-only共有 (Pro版): ソースを隠し、チャット機能のみを共有
	◦ Featured Notebooks: 専門家がキュレーションした高品質なソース集
	• モバイルアプリ
	◦ AndroidとiOSで利用可能
	◦ 外出先での質問や音声概要の聴取に特化
	◦ 一部機能に制限あり（マインドマップ、動画概要、ノート作成などは未対応）
	</code></pre>
	</div>

	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsmind@0.9.0/es6/jsmind.min.js"></script>

	<script type="text/javascript">
	function parseIndentedText(text) {
	const allLines = text.split('\n');
	let firstLineIndex = -1;
	for (let i = 0; i < allLines.length; i++) {
	if (allLines[i].trim() !== '') {
	firstLineIndex = i;
	break;
	}
	}
	if (firstLineIndex === -1) return null;

	const rootTopic = allLines[firstLineIndex].trim().replace(/^[•◦▪]\s*/, '');
	const rootNode = { id: 'root', topic: rootTopic, isroot: true, children: [], 'indent-level': -1 };
	const childLines = allLines.slice(firstLineIndex + 1);

	const parentStack = [rootNode];
	const indentRegex = /^( *)/;

	childLines.forEach((line, index) => {
	if (line.trim() === '') return;

	const indent = line.match(indentRegex)[1].length;
	const topic = line.trim().replace(/^[•◦▪]\s*/, '');

	const node = {
	id: `node-${index}`,
	topic: topic,
	children: [],
	'indent-level': indent
	};

	// 現在のインデントより深いインデントを持つ親が見つかるまでスタックを遡る
	while (parentStack[parentStack.length - 1]['indent-level'] >= indent) {
	parentStack.pop();
	}

	// スタックの末尾が現在のノードの親
	parentStack[parentStack.length - 1].children.push(node);
	// 現在のノードをスタックに追加
	parentStack.push(node);
	});

	// 左右の振り分けロジック
	const rightCount = Math.ceil(rootNode.children.length / 2);
	rootNode.children.forEach((child, index) => {
	child.direction = (index < rightCount) ? 'right' : 'left';
	});

	return rootNode;
	}


	const indentedText = document.querySelector('#mindmap-data code').textContent;
	const mind_data_json = parseIndentedText(indentedText);

	const currentTheme = document.getElementById('theme_selector').value;

	const options = {
	container: 'jsmind_container',
	theme: currentTheme,
	editable: false,
	view: {
	engine: 'canvas',
	hmargin: 100,
	vmargin: 50,
	line_width: 2,
	line_color: '#555'
	}
	};

	if (mind_data_json) {

	const rootTopicText = mind_data_json.topic;
	document.querySelector('title').textContent = rootTopicText;
	document.querySelector('h1').textContent = rootTopicText;

	const jm = new jsMind(options);
	jm.show({
	meta: { name: "NotebookLM-マインドマップ", author: "HiroKws", version: "0.3.1" },
	format: "node_tree",
	data: mind_data_json
	});

	document.getElementById('expand_all').addEventListener('click', () => jm.expand_all());
	document.getElementById('collapse_all').addEventListener('click', () => jm.collapse_all());

	document.getElementById('theme_selector').addEventListener('change', (event) => {
	jm.set_theme(event.target.value);
	});

	} else {
	document.getElementById('jsmind_container').textContent = "表示するデータが見つかりませんでした。";
	}
	</script>

	</body>

	</html>
No results found