Obsidian使い方完全ガイド：基本から応用まで、最強の「第二の脳」構築術

import React, { useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const App = () => {

  useEffect(() => {
    // This is a workaround to load and render mermaid charts
    // as it's not natively supported in this environment.
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/mermaid@10.9.0/dist/mermaid.min.js';
    script.onload = () => {
      window.mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
      window.mermaid.run({
        nodes: document.querySelectorAll('.mermaid'),
      });
    };
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  const Section = ({ title, children }) => (
    <section className="mb-12">
      <h2 className="text-3xl font-bold mb-6 text-gray-800 border-b-2 border-purple-500 pb-2">{title}</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">{children}</div>
    </section>
  );

  const Card = ({ title, children, sourceUrl, sourceName, fullWidth = false }) => (
    <div className={`bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 ${fullWidth ? 'md:col-span-2' : ''}`}>
      <h3 className="text-xl font-semibold mb-3 text-gray-900">{title}</h3>
      <div className="text-gray-700 space-y-4">{children}</div>
      {sourceUrl && <div className="mt-4 text-sm text-right"><a href={sourceUrl} target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:text-purple-800 underline">出典: {sourceName}</a></div>}
    </div>
  );
  
    const comparisonData = [
    { name: 'Obsidian', '起動時間(秒)': 1.1, '料金(個人/年)': 0, 'オフライン利用': '完全対応' },
    { name: 'Notion', '起動時間(秒)': 3.2, '料金(個人/年)': 0, 'オフライン利用': '限定的' },
    { name: 'Roam Research', '起動時間(秒)': 2.6, '料金(個人/年)': 180, 'オフライン利用': '不可' },
    { name: 'Evernote', '起動時間(秒)': 4.5, '料金(個人/年)': 0, 'オフライン利用': '一部可' },
  ];

  const offlineMapping = { 0: '不可', 1: '限定的', 2: '一部可', 3: '完全対応' };
  const COLORS = { '完全対応': '#8884d8', '一部可': '#82ca9d', '限定的': '#ffc658', '不可': '#ff8042' };

  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      const data = payload[0].payload;
      return (
        <div className="bg-white p-4 border rounded-lg shadow-md">
          <p className="font-bold text-gray-800">{label}</p>
          <p className="text-sm text-gray-600">起動時間: {data['起動時間(秒)'] ? `${data['起動時間(秒)']}秒` : 'N/A'}</p>
          <p className="text-sm text-gray-600">料金(個人/年): ${data['料金(個人/年)'].toLocaleString()}</p>
          <p className="text-sm text-gray-600">オフライン利用: {data['オフライン利用']}</p>
        </div>
      );
    }
    return null;
  };

  const markdownData = [
    { '項目': '見出し', '記法': '`# 見出し`', '表示結果': '<h1 class="text-lg font-bold">見出し</h1>' },
    { '項目': '太字', '記法': '`**太字**`', '表示結果': '<strong class="font-bold">太字</strong>' },
    { '項目': 'イタリック', '記法': '`*イタリック*`', '表示結果': '<em>イタリック</em>' },
    { '項目': 'ハイライト', '記法': '`==ハイライト==`', '表示結果': '<mark class="bg-yellow-200 px-1 rounded">ハイライト</mark>' },
    { '項目': '箇条書き', '記法': '`- 項目`', '表示結果': '<ul class="list-disc list-inside"><li>項目</li></ul>' },
    { '項目': 'チェックボックス', '記法': '`- [x] タスク`', '表示結果': '<div class="flex items-center"><input type="checkbox" checked disabled class="mr-2" /><span>タスク</span></div>' },
    { '項目': '内部リンク', '記法': '`[[ノート名]]`', '表示結果': '<span class="text-purple-600 cursor-pointer font-semibold">ノート名</span>' },
    { '項目': '埋め込み', '記法': '`![[ファイル名]]`', '表示結果': '<div class="border-l-4 border-purple-400 pl-4 italic text-gray-600">ファイル内容がここに埋め込まれます</div>' },
  ];

  const pluginData = [
    { 
      name: 'Dataview',
      desc: 'ノート内のメタデータを活用し、動的なリストや表を自動生成するObsidianの心臓部。タスク管理や読書記録が劇的に効率化します。',
      sourceUrl: 'https://blog.astha.jp/post-3967/', 
      sourceName: '【知っ得！】Obsidian × Dataview',
      code: '```dataview\nTABLE file.mtime as "更新日時"\nFROM ""\nSORT file.mtime DESC\nLIMIT 5\n```'
    },
    { 
      name: 'Templater',
      desc: '日付や時刻、ファイル名などを自動挿入する高度なテンプレート機能。定型ノートの作成をワンクリックで完了させ、入力の手間を大幅に削減します。',
      sourceUrl: 'https://eiji.page/blog/obsidian-templater-howto/', 
      sourceName: 'ObsidianのTemplaterの使い方',
      code: '`---`\n`created: <% tp.file.creation_date("YYYY-MM-DD HH:mm:ss") %>`\n`---`\n`# <% tp.file.title %>`\n\n`本文: <% tp.file.cursor() %>`' 
    },
    {
      name: 'Excalidraw',
      desc: '手書き風の図やマインドマップをノート内に直接作成・埋め込み可能。複雑なアイデアやシステムの構造を視覚的に整理するのに最適です。',
      sourceUrl: 'https://zenn.dev/yuucu/articles/obsidian-plugin',
      sourceName: '生産性を最大化する厳選プラグイン10選'
    },
    {
      name: 'Full Calendar',
      desc: 'ノート内のタスクや予定をGoogleカレンダーのように表示。時間軸で予定を管理し、デイリーノートとの連携もスムーズです。',
      sourceUrl: 'https://zenn.dev/yuucu/articles/obsidian-plugin',
      sourceName: '生産性を最大化する厳選プラグイン10選'
    }
  ];

  const roadmapData = [
      { level: 'ゼロイチ期', notes: '0-10枚', goal: 'ノート作成、Markdown基本、リンク作成を覚える。' },
      { level: '育成期', notes: '10-100枚', goal: 'デイリーノート、フォルダ管理、定番プラグインの活用。' },
      { level: '発展期', notes: '100-1,000枚', goal: 'ホットキー活用、他ツール連携、タスク管理など高度なワークフローを構築。' },
      { level: '達人期', notes: '1,000枚以上', goal: 'Publishでの公開やプラグイン自作など、Obsidianを完全に自分の一部として使いこなす。' },
  ];
  
  return (
    <div className="bg-gray-50 min-h-screen font-sans text-gray-800">
      <header className="bg-white shadow-md p-6 mb-8 sticky top-0 z-10">
        <div className="container mx-auto">
          <h1 className="text-4xl font-bold text-center text-gray-800">Obsidian 活用ガイド：基本から応用まで</h1>
          <p className="text-center text-gray-600 mt-2">あなたの「第二の脳」を構築するための完全ロードマップ</p>
        </div>
      </header>

      <main className="container mx-auto p-4 md:p-8">
        <Section title="Obsidianとは？ なぜ『第二の脳』なのか">
          <Card title="Obsidianの3大特徴" sourceUrl="https://ainow.jp/obsidian-beginner-guide/" sourceName="ainow.jp" fullWidth={true}>
            <div className="grid md:grid-cols-3 gap-6 text-center">
                <div className="p-4">
                    <div className="text-5xl text-purple-500 mb-3 mx-auto w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full">🔗</div>
                    <h4 className="font-bold text-lg">双方向リンク</h4>
                    <p className="text-sm text-gray-600 mt-1">ノート同士を`[[リンク]]`で繋ぎ、知識のネットワークを構築。グラフビューで関係性を視覚的に把握できます。</p>
                </div>
                <div className="p-4">
                    <div className="text-5xl text-purple-500 mb-3 mx-auto w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full">💻</div>
                    <h4 className="font-bold text-lg">ローカルファースト</h4>
                    <p className="text-sm text-gray-600 mt-1">データは全てあなたのデバイスに保存。オフラインで動作し、プライバシーとデータの所有権を完全に守ります。</p>
                </div>
                 <div className="p-4">
                    <div className="text-5xl text-purple-500 mb-3 mx-auto w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full">🔌</div>
                    <h4 className="font-bold text-lg">無限のカスタマイズ性</h4>
                    <p className="text-sm text-gray-600 mt-1">豊富なプラグインとテーマで、タスク管理から図解作成まで、自分だけの最強ツールに進化させられます。</p>
                </div>
            </div>
          </Card>
          <Card title="主要ノートアプリとの比較" sourceUrl="https://note.com/kakeyang/n/n0eb2a491163d" sourceName="note.com" fullWidth={true}>
            <p className="text-sm text-gray-600 mb-4">Obsidianは特に、起動速度とオフラインでの利用、そして無料でありながら高いカスタマイズ性を持つ点で優位性があります。</p>
            <div style={{ width: '100%', height: 300 }}>
              <ResponsiveContainer>
                <BarChart data={comparisonData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis yAxisId="left" orientation="left" stroke="#8884d8" label={{ value: '起動時間(秒)', angle: -90, position: 'insideLeft', offset: 10 }} />
                  <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" label={{ value: '料金($/年)', angle: 90, position: 'insideRight', offset: 10 }}/>
                  <Tooltip content={<CustomTooltip />} />
                  <Legend wrapperStyle={{ paddingTop: '20px' }} />
                  <Bar yAxisId="left" dataKey="起動時間(秒)" fill="#8884d8" name="起動時間(秒)" />
                  <Bar yAxisId="right" dataKey="料金(個人/年)" fill="#82ca9d" name="料金(個人/年)" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </Card>
        </Section>

        <Section title="さあ、始めよう：基本操作マスター">
            <Card title="Markdown基本記法" sourceUrl="https://zenn.dev/kinnkinn/articles/dc4ad7e9404eb2" sourceName="Obsidianを始める方へ(v2.00)" fullWidth={true}>
                <div className="overflow-x-auto">
                    <table className="min-w-full bg-white border">
                        <thead className="bg-gray-100">
                            <tr>
  {Object.keys(markdownData[0]).map(key => <th key={key} className="py-2 px-4 border-b text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">{key}</th>)}
                            </tr>
                        </thead>
                        <tbody>
                            {markdownData.map((row, index) => (
  <tr key={index} className="hover:bg-gray-50">
  {Object.values(row).map((val, i) => <td key={i} className="py-2 px-4 border-b text-sm text-gray-700 align-middle" dangerouslySetInnerHTML={{ __html: val }}></td>)}
  </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </Card>
             <Card title="インストールから最初のノートまで" sourceUrl="https://zenn.dev/taku_sid/articles/20250428_obsidian_note" sourceName="うさぎでもわかるObsidian">
                 <ol className="list-decimal list-inside space-y-3">
                    <li><strong className="font-semibold">ダウンロード:</strong> <a href="https://obsidian.md/download" target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:underline">公式サイト</a>からインストーラーを入手し、実行します。</li>
                    <li><strong className="font-semibold">保管庫(Vault)の作成:</strong> 初回起動時に「Create new vault」を選択。これがあなたのノートを保存する「金庫」になります。</li>
                    <li><strong className="font-semibold">最初のノート作成:</strong> 左上の「新規ノート」ボタン (Ctrl+N) をクリックし、Markdown記法で書き始めます。</li>
                    <li><strong className="font-semibold">リンクを作成:</strong> `[[新しいノート名]]` と入力し、最初のノート間の繋がりを作ってみましょう。</li>
                 </ol>
            </Card>
        </Section>

        <Section title="応用編：『第二の脳』を構築する">
            <Card title="思考を繋げる: Zettelkastenメソッド" sourceUrl="https://zenn.dev/fukagawa/articles/9e0436fe7e6f25" sourceName="Zettelkastenの仕組みとObsidianでの実践">
              <p className="text-sm text-gray-600 mb-4">1つのノートに1つのアイデアを書き、それらを相互にリンクさせることで知識をネットワーク化するノート術。Obsidianのリンク機能と非常に相性が良いです。</p>
              <div className="mermaid bg-white p-4 rounded-lg border" data-mermaid>
                {`
                graph TD
                    A[Fleeting Note\n(ひらめきを一時記録)] --> B{自分の言葉で加工};
                    C[Literature Note\n(文献情報を要約)] --> B;
                    B --> D(Permanent Note\n1ノート1アイデアの永久ノート);
                    D <--> D;
                    D --> E(Structure Note\n関連ノートを地図のように整理);
                    E --> F(Index Note\n全体の目次);
                    subgraph Zettelkasten本体
                      D
                      E
                      F
                    end
                    subgraph サポートノート
                      A
                      C
                    end
                    
                    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px,color:#333;
                    classDef zettel fill:#e0d4ff,stroke:#8a2be2,stroke-width:2px;
                    classDef support fill:#e8e8e8,stroke:#aaa,stroke-width:1px;

                    class D,E,F zettel;
                    class A,C support;
                `}
              </div>
            </Card>
            <Card title="学習ロードマップ" sourceUrl="https://qiita.com/hann-solo/items/22bcaa81b695ddb47238" sourceName="ゼロイチObsidian">
                <p className="text-sm text-gray-600 mb-4">ノートの枚数に応じて、無理なくステップアップしていきましょう。</p>
                <ul className="space-y-4">
                  {roadmapData.map((item, index) => (
                    <li key={index} className="flex items-start">
                      <div className="w-16 h-16 bg-purple-100 text-purple-700 rounded-full flex flex-col items-center justify-center mr-4 flex-shrink-0">
                          <div className="font-bold text-lg">{item.level}</div>
                          <div className="text-xs">{item.notes}</div>
                      </div>
                      <div>
                          <h4 className="font-semibold">目標</h4>
                          <p className="text-gray-600">{item.goal}</p>
                      </div>
                    </li>
                  ))}
                </ul>
            </Card>
            <Card title="厳選コミュニティプラグイン" fullWidth={true}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {pluginData.map(plugin => (
                        <div key={plugin.name} className="bg-gray-50 p-4 rounded-lg border border-gray-200 hover:border-purple-300 transition-all">
                            <h4 className="font-bold text-lg text-purple-700">{plugin.name}</h4>
                            <p className="text-sm mt-1 text-gray-600">{plugin.desc}</p>
                            {plugin.code && <pre className="bg-gray-800 text-white p-3 rounded-md text-xs mt-3 overflow-x-auto"><code>{plugin.code}</code></pre>}
                            <div className="mt-2 text-xs text-right"><a href={plugin.sourceUrl} target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:text-purple-800 underline">出典: {plugin.sourceName}</a></div>
                        </div>
                    ))}
                </div>
            </Card>
        </Section>
      </main>

      <footer className="text-center text-sm text-gray-500 py-6 mt-8 border-t">
        <p>このページは、提供されたコンテキスト情報を基に生成AIによって作成されました。</p>
        <p>最終更新日: 2025-07-05</p>
      </footer>
    </div>
  );
};

export default App;