[{"data":1,"prerenderedAt":2721},["ShallowReactive",2],{"\u002Farticles\u002Fblog-5":3,"content-query-8D4AScxXeq":1532},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"category":10,"tag":12,"thumbnail":20,"createdAt":21,"updatedAt":22,"body":23,"_type":1526,"_id":1527,"_source":1528,"_file":1529,"_stem":1530,"_extension":1531},"\u002Farticles\u002Fblog-5","articles",false,"","ブログに簡単・安全に図解を入れたい","クライアントサイドでのMermaid描画で図解してみた",[11],"programming",[13,14,15,16,17,18,19],"web-standards","vue","ai","information-ed","thinking","mindmap","cg","blog-5.jpg","2026\u002F10\u002F30","2026\u002F11\u002F3",{"type":24,"children":25,"toc":1516},"root",[26,34,49,54,58,64,69,74,82,97,100,107,112,203,208,220,225,238,242,247,259,263,270,275,280,289,293,301,312,316,322,327,338,343,354,358,364,375,387,392,404,409,421,426,438,441,447,460,466,487,505,516,519,525,538,543,548,560,565,570,582,587,592,604,609,614,626,631,636,649,661,666,671,674,680,692,717,722,728,741,754,767,772,778,784,797,802,807,820,825,837,842,856,861,866,880,885,890,904,909,923,928,934,943,986,989,995,1006,1019,1024,1029,1042,1047,1054,1059,1065,1070,1105,1111,1150,1155,1158,1164,1169,1182,1188,1194,1199,1204,1216,1222,1227,1232,1255,1260,1266,1271,1282,1287,1298,1303,1309,1314,1320,1325,1336,1340,1345,1351,1356,1368,1373,1378,1383,1388,1392,1505,1508],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","　この記事では、",{"type":27,"tag":35,"props":36,"children":37},"ul",{},[38],{"type":27,"tag":39,"props":40,"children":41},"li",{},[42],{"type":27,"tag":43,"props":44,"children":46},"a",{"href":45},"\u002Farticles\u002Fblog-4",[47],{"type":32,"value":48},"🔗ブログのセキュリティ強化",{"type":27,"tag":28,"props":50,"children":51},{},[52],{"type":32,"value":53},"の続きについて述べます。",{"type":27,"tag":55,"props":56,"children":57},"br",{},[],{"type":27,"tag":59,"props":60,"children":62},"h2",{"id":61},"クライアントサイドでのmermaid描画で図解してみた",[63],{"type":32,"value":9},{"type":27,"tag":28,"props":65,"children":66},{},[67],{"type":32,"value":68},"　技術面の話など、複雑に入り組んだ場合、長文がだらだらと続くと理解しにくくなります。",{"type":27,"tag":28,"props":70,"children":71},{},[72],{"type":32,"value":73},"　生成AIに「図解して」と頼めば、美しいインフォグラフィックを作ってくれます。しかし、「〇〇を△△に修正して」と頼むと、意図に反する修正をしたり、画質を劣化させたりしがちです。文字化けもよく起こり、自分で文字を打ち換えられないのでイラっとします。",{"type":27,"tag":75,"props":76,"children":81},"img",{"src":77,"alt":78,"className":79},"\u002Fimg\u002Fcopiloterrorig.jpg","Copilotエラーのインフォグラフィック",[80],"imghr",[],{"type":27,"tag":28,"props":83,"children":84},{},[85,87,95],{"type":32,"value":86},"　「そんなに美しくなくていいから、シンプルな図形を使って文字を配置できないか……」と考えていたら、",{"type":27,"tag":43,"props":88,"children":92},{"href":89,"rel":90},"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FMermaid_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2)",[91],"nofollow",[93],{"type":32,"value":94},"🔗Mermaid図",{"type":32,"value":96}," というものがあることを知りました。すべてテキストで書け、Markdownに埋め込めるので、ブログ記事の中に入れてそのままデプロイ（アップロード）できそうです。",{"type":27,"tag":55,"props":98,"children":99},{},[],{"type":27,"tag":101,"props":102,"children":104},"h3",{"id":103},"ブログのシステムを-mermaid-対応にするには",[105],{"type":32,"value":106},"ブログのシステムを Mermaid 対応にするには",{"type":27,"tag":28,"props":108,"children":109},{},[110],{"type":32,"value":111},"　ここからは、例によって Gemini(AIモード) の助けを借りて進めます。",{"type":27,"tag":113,"props":114,"children":117},"div",{"className":115},[116],"balloon1",[118,120,134,136,145,176,181,193,198],{"type":32,"value":119},"\n  ",{"type":27,"tag":113,"props":121,"children":124},{"className":122},[123],"icon",[125,127,133],{"type":32,"value":126}," ",{"type":27,"tag":75,"props":128,"children":132},{"src":129,"alt":130,"width":131},"\u002Fimg\u002Faiagent.png","Gemini CLI",80,[],{"type":32,"value":126},{"type":32,"value":135},"\n　　：：：：：\n",{"type":27,"tag":28,"props":137,"children":138},{},[139],{"type":27,"tag":140,"props":141,"children":142},"strong",{},[143],{"type":32,"value":144},"✨ このアプローチがあなたのブログ運営に「最強」である理由",{"type":27,"tag":146,"props":147,"children":148},"ol",{},[149,166],{"type":27,"tag":39,"props":150,"children":151},{},[152,157,159,164],{"type":27,"tag":140,"props":153,"children":154},{},[155],{"type":32,"value":156},"環境依存トラブルの完全な撲滅：",{"type":32,"value":158}," PlaywrightやChromiumといったヘビーなブラウザエンジンをサーバー側（Cloudflare）で動かさないため、今後のNode.jsやNitroのアップデートでビルドがクラッシュするリスクが ",{"type":27,"tag":140,"props":160,"children":161},{},[162],{"type":32,"value":163},"永久にゼロ",{"type":32,"value":165}," になります。",{"type":27,"tag":39,"props":167,"children":168},{},[169,174],{"type":27,"tag":140,"props":170,"children":171},{},[172],{"type":32,"value":173},"VSCodeでの編集のしやすさ：",{"type":32,"value":175}," ::mermaid の中身はただのプレーンテキストなので、Geminiが吐き出したMermaidコードをそのままコピペして、日本語の文言をVSCode上でサクサク打ち替えるだけで即座に反映されます。",{"type":27,"tag":28,"props":177,"children":178},{},[179],{"type":32,"value":180},"　一度 npm run dev でローカルサーバーを動かし、このコンポーネント経由で図解が綺麗に表示されるか試してみてください。",{"type":27,"tag":28,"props":182,"children":183},{},[184,186,191],{"type":32,"value":185},"　コンポーネントの作成と、Markdownへの ",{"type":27,"tag":140,"props":187,"children":188},{},[189],{"type":32,"value":190},"::mermaid タグの埋め込み",{"type":32,"value":192}," はうまくいきそうでしょうか？",{"type":27,"tag":28,"props":194,"children":195},{},[196],{"type":32,"value":197},"　ローカル環境で「図解を読み込み中...」から無事に図形にパースされるか、確認してみてください！",{"type":27,"tag":28,"props":199,"children":200},{},[201],{"type":32,"value":202},"　　：：：：：",{"type":27,"tag":28,"props":204,"children":205},{},[206],{"type":32,"value":207},"　エラーの原因が明確になりました！",{"type":27,"tag":28,"props":209,"children":210},{},[211,213,218],{"type":32,"value":212},"　",{"type":27,"tag":140,"props":214,"children":215},{},[216],{"type":32,"value":217},"mermaid 自体の本体パッケージがまだプロジェクトにインストールされていないこと",{"type":32,"value":219}," が原因で、Vite（Nuxtのビルドエンジン）が「import('mermaid') しようとしたけれど、そんなパッケージは見つからないよ」と怒っています。",{"type":27,"tag":28,"props":221,"children":222},{},[223],{"type":32,"value":224},"　ターミナルで以下のコマンドを1行実行してください。",{"type":27,"tag":226,"props":227,"children":232},"pre",{"className":228,"code":230,"language":231,"meta":7},[229],"language-bash","npm install mermaid\n","bash",[233],{"type":27,"tag":234,"props":235,"children":236},"code",{"__ignoreMap":7},[237],{"type":32,"value":230},{"type":27,"tag":28,"props":239,"children":240},{},[241],{"type":32,"value":202},{"type":27,"tag":28,"props":243,"children":244},{},[245],{"type":32,"value":246},"　ついに Mermaidのエンジン（バージョン 12.2.0）が正常に起動し、Markdownの中身をパースするところまで到達しました！",{"type":27,"tag":28,"props":248,"children":249},{},[250,251,257],{"type":32,"value":212},{"type":27,"tag":234,"props":252,"children":254},{"className":253},[],[255],{"type":32,"value":256},"[plugin:vite:import-analysis] ",{"type":32,"value":258},"のエラーを突破できて、大きな前進です。",{"type":27,"tag":28,"props":260,"children":261},{},[262],{"type":32,"value":202},{"type":27,"tag":264,"props":265,"children":267},"h4",{"id":266},"軽量なmermaidvueコンポーネントを自作する",[268],{"type":32,"value":269},"軽量な「MermaidVueコンポーネント」を自作する",{"type":27,"tag":28,"props":271,"children":272},{},[273],{"type":32,"value":274},"　Nuxt Contentは、components\u002Fcontent\u002F ディレクトリの中にVueコンポーネントを置くと、Markdownファイルの中でそのコンポーネントを直接呼び出せる（MDC機能）という強力な仕様を持っています。",{"type":27,"tag":28,"props":276,"children":277},{},[278],{"type":32,"value":279},"　ユーザーのブラウザ側で安全にMermaidをレンダリングするコンポーネントを作ります。",{"type":27,"tag":28,"props":281,"children":282},{},[283],{"type":27,"tag":234,"props":284,"children":286},{"className":285},[],[287],{"type":32,"value":288},"components\u002Fcontent\u002FMermaid.vue",{"type":27,"tag":28,"props":290,"children":291},{},[292],{"type":32,"value":202},{"type":27,"tag":28,"props":294,"children":295},{},[296],{"type":27,"tag":140,"props":297,"children":298},{},[299],{"type":32,"value":300},"🛠️ 【インデント維持版】 components\u002Fcontent\u002FMermaid.vue",{"type":27,"tag":226,"props":302,"children":307},{"className":303,"code":305,"language":306,"meta":7},[304],"language-Mermaid.vue","\u003Ctemplate>\n  \u003Cdiv class=\"mermaid-wrapper my-6 flex justify-center w-full\">\n    \u003CClientOnly>\n      \u003C!-- 非表示のコンテナ。行頭のスペース（インデント）を壊さないよう pre で受ける -->\n      \u003Cpre v-show=\"false\" ref=\"sourceContainer\" style=\"white-space: pre !important;\">\u003Cslot \u002F>\u003C\u002Fpre>\n      \u003Cdiv ref=\"mermaidTarget\" class=\"mermaid\">\u003C\u002Fdiv>\n      \n      \u003Ctemplate #fallback>\n        \u003Cdiv class=\"animate-pulse bg-gray-100 h-32 w-full rounded flex items-center justify-center text-gray-400\">\n          図解を読み込み中...\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002FClientOnly>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, onMounted, nextTick } from 'vue'\n\nconst sourceContainer = ref(null)\nconst mermaidTarget = ref(null)\n\nonMounted(async () => {\n  if (process.client) {\n    const { default: mermaid } = await import('mermaid')\n    \n    mermaid.initialize({\n      startOnLoad: false,\n      theme: 'default',\n      securityLevel: 'loose',\n    })\n\n    await nextTick()\n\n    if (sourceContainer.value && mermaidTarget.value) {\n      \u002F\u002F innerText を使って、改行やスペース（インデント）を含んだ生のテキストを取得\n      const rawText = sourceContainer.value.innerText || sourceContainer.value.textContent\n      \n      \u002F\u002F 💡 修正ポイント：line.trim() を廃止！\n      \u002F\u002F 行頭のスペース（インデント）は絶対に削らず、純粋な空行だけを除去する\n      const cleanLines = rawText\n        .split('\\n')\n        .filter(line => line.trim().length > 0) \u002F\u002F 空白だけの行を除外\n        .join('\\n')\n\n      mermaidTarget.value.innerHTML = cleanLines\n      \n      try {\n        await mermaid.run({\n          nodes: [mermaidTarget.value]\n        })\n      } catch (error) {\n        console.error('Mermaid render error:', error)\n      }\n    }\n  }\n})\n\u003C\u002Fscript>\n","Mermaid.vue",[308],{"type":27,"tag":234,"props":309,"children":310},{"__ignoreMap":7},[311],{"type":32,"value":305},{"type":27,"tag":28,"props":313,"children":314},{},[315],{"type":32,"value":202},{"type":27,"tag":264,"props":317,"children":319},{"id":318},"markdown側の書き方超重要",[320],{"type":32,"value":321},"📝 Markdown側の書き方（超重要）",{"type":27,"tag":28,"props":323,"children":324},{},[325],{"type":32,"value":326},"　ここが一番のポイントです。Nuxt Contentに改行を壊されないようにするため、::mermaid の中に バッククォート3つ（ ``` ）のコードブロックをそのまま入れ子 にして記述します。",{"type":27,"tag":226,"props":328,"children":333},{"className":329,"code":331,"language":332,"meta":7},[330],"language-mermaid","flowchart TD\n    nodeA[ForgeNeo導入開始] --> nodeB(Copilotで迷走)\n    nodeB -->|ハルシネーション| nodeC[デッドロック]\n    nodeC -->|視点の転換| nodeD[Gemini 3.5 Flash]\n    nodeD --> nodeE[無事起動・成功！]\n","mermaid",[334],{"type":27,"tag":234,"props":335,"children":336},{"__ignoreMap":7},[337],{"type":32,"value":331},{"type":27,"tag":28,"props":339,"children":340},{},[341],{"type":32,"value":342},"　こうすることで、Nuxt Contentは「これはコードブロックだから改行を維持して渡さなきゃいけない」と正しく判断してくれます。",{"type":27,"tag":332,"props":344,"children":345},{},[346],{"type":27,"tag":226,"props":347,"children":349},{"className":348,"code":331,"language":332,"meta":7},[330],[350],{"type":27,"tag":234,"props":351,"children":352},{"__ignoreMap":7},[353],{"type":32,"value":331},{"type":27,"tag":28,"props":355,"children":356},{},[357],{"type":32,"value":202},{"type":27,"tag":264,"props":359,"children":361},{"id":360},"読者の環境で綺麗に表示される3つの理由",[362],{"type":32,"value":363},"🌐 読者の環境で綺麗に表示される3つの理由",{"type":27,"tag":146,"props":365,"children":366},{},[367],{"type":27,"tag":39,"props":368,"children":369},{},[370],{"type":27,"tag":140,"props":371,"children":372},{},[373],{"type":32,"value":374},"最終的に出力されるのは標準的な「SVG画像」だから",{"type":27,"tag":28,"props":376,"children":377},{},[378,380,385],{"type":32,"value":379},"　Mermaid.vueコンポーネントは、読者のブラウザ上でテキストを解析した直後、瞬時に「",{"type":27,"tag":140,"props":381,"children":382},{},[383],{"type":32,"value":384},"SVG（Scalable Vector Graphics）",{"type":32,"value":386},"」という形式のベクトル画像データに変換して画面に埋め込みます。",{"type":27,"tag":28,"props":388,"children":389},{},[390],{"type":32,"value":391},"　SVGは、Windows、Mac、iPhone、Androidなど、どんな画面サイズや解像度の端末で見ても、文字や矢印が一切ボケたり崩れたりしない世界標準の画像フォーマットです。そのため、端末依存による表示崩れが極めて起きにくいのが特徴です。",{"type":27,"tag":146,"props":393,"children":395},{"start":394},2,[396],{"type":27,"tag":39,"props":397,"children":398},{},[399],{"type":27,"tag":140,"props":400,"children":401},{},[402],{"type":32,"value":403},"フォントやスタイルがブログのデザインに自然に馴染む",{"type":27,"tag":28,"props":405,"children":406},{},[407],{"type":32,"value":408},"　Mermaid.jsはデフォルトで、そのOSの標準的なフォント（Windowsならメイリオや遊ゴシック、Mac\u002FiPhoneならヒラギノ角ゴ）を自動的に選択して文字を描画します。これにより、読者の環境に合わせて違和感のない読みやすい文字ツリーが構築されます。",{"type":27,"tag":146,"props":410,"children":412},{"start":411},3,[413],{"type":27,"tag":39,"props":414,"children":415},{},[416],{"type":27,"tag":140,"props":417,"children":418},{},[419],{"type":32,"value":420},"「動的インポート（Code Splitting）」で読者の端末に優しい",{"type":27,"tag":28,"props":422,"children":423},{},[424],{"type":32,"value":425},"　今回の Mermaid.vue は、図解（::mermaid）が含まれている記事ページを読者が開いた瞬間にだけ、Mermaidのプログラムを裏側でサッと読み込む仕組み（await import('mermaid')）にしています。",{"type":27,"tag":28,"props":427,"children":428},{},[429,431,436],{"type":32,"value":430},"　そのため、図解のない通常の文字だけの記事を読む読者に対しては、余計な通信量やスマホのメモリを一切消費させない、",{"type":27,"tag":140,"props":432,"children":433},{},[434],{"type":32,"value":435},"最高に軽量でエコなブログ構成",{"type":32,"value":437}," になっています。",{"type":27,"tag":55,"props":439,"children":440},{},[],{"type":27,"tag":101,"props":442,"children":444},{"id":443},"vscodeで入れ子構造のコードを一発で挿入するには",[445],{"type":32,"value":446},"VSCodeで入れ子構造のコードを一発で挿入するには",{"type":27,"tag":28,"props":448,"children":449},{},[450,452,458],{"type":32,"value":451},"※ 「AIモードあるある」のハルシネーション（嘘の出力）のせいで、",{"type":27,"tag":234,"props":453,"children":455},{"className":454},[],[456],{"type":32,"value":457},"\\",{"type":32,"value":459},"（バックスラッシュ）のないコード が生成できなかったので、相談相手をGeminiアプリに切り替えて、、、",{"type":27,"tag":264,"props":461,"children":463},{"id":462},"スニペットユーザー定義スニペットを使う-一番おすすめ",[464],{"type":32,"value":465},"スニペット（ユーザー定義スニペット）を使う 【一番おすすめ】",{"type":27,"tag":28,"props":467,"children":468},{},[469,471,477,479,485],{"type":32,"value":470},"　任意のキーワード（例: ",{"type":27,"tag":234,"props":472,"children":474},{"className":473},[],[475],{"type":32,"value":476},"mm",{"type":32,"value":478},"）を入力して ",{"type":27,"tag":234,"props":480,"children":482},{"className":481},[],[483],{"type":32,"value":484},"Ctrl + Space ➔ Enter",{"type":32,"value":486}," で、定型文を爆速で呼び出す方法です。",{"type":27,"tag":146,"props":488,"children":489},{},[490,495,500],{"type":27,"tag":39,"props":491,"children":492},{},[493],{"type":32,"value":494},"VS Codeのメニューから 設定（歯車マーク） > ユーザースニペット を開きます。",{"type":27,"tag":39,"props":496,"children":497},{},[498],{"type":32,"value":499},"検索窓が表示されるので、markdown と入力して markdown.json を選択します。",{"type":27,"tag":39,"props":501,"children":502},{},[503],{"type":32,"value":504},"ファイルの中に以下のJSONを設定します。",{"type":27,"tag":226,"props":506,"children":511},{"className":507,"code":509,"language":510,"meta":7},[508],"language-markdown.json","{\n  \"Mermaid Block\": {\n    \"prefix\": \"mm\",\n    \"body\": [\n      \"::mermaid\",\n      \"```mermaid\",\n      \"$1\",\n      \"```\",\n      \"::\"\n    ],\n    \"description\": \"Insert Mermaid block with :: wrapper\"\n  }\n}\n","markdown.json",[512],{"type":27,"tag":234,"props":513,"children":514},{"__ignoreMap":7},[515],{"type":32,"value":509},{"type":27,"tag":55,"props":517,"children":518},{},[],{"type":27,"tag":101,"props":520,"children":522},{"id":521},"forgeneo導入がcopilotのハルシネーションで失敗しgeminiで成功した経緯を図解に",[523],{"type":32,"value":524},"「ForgeNeo導入がCopilotのハルシネーションで失敗し、Geminiで成功した経緯」を図解に",{"type":27,"tag":35,"props":526,"children":527},{},[528],{"type":27,"tag":39,"props":529,"children":530},{},[531],{"type":27,"tag":43,"props":532,"children":535},{"href":533,"rel":534},"https:\u002F\u002Fkyodx.com\u002Farticles\u002Faipc-9",[91],[536],{"type":32,"value":537},"🔗デッドロックを乗り越え、ローカル生成AIを一新してみた（前編）",{"type":27,"tag":28,"props":539,"children":540},{},[541],{"type":32,"value":542},"を Mermaid で図解してみました。",{"type":27,"tag":28,"props":544,"children":545},{},[546],{"type":32,"value":547},"　簡易版は、先ほど示しました。今度は正式版です。",{"type":27,"tag":332,"props":549,"children":550},{},[551],{"type":27,"tag":226,"props":552,"children":555},{"className":553,"code":554,"language":332,"meta":7},[330],"flowchart TD\n    %% 全体の開始ノード\n    Start([ForgeNeo \u002F WanVideo 導入開始]) --> InputError[起動エラーが発生]\n\n    %% 左側：Copilotの迷走・自爆ルート\n    InputError --> CopilotRoute[Copilotに相談（検索依存の表層推論）]\n    \n    subgraph CopilotDilemma [【Copilot】ハルシネーションのドミノ倒しと地獄のループ]\n        direction TB\n        C1[1. 前提の崩壊] -->|名前と中身のねじれ| C1_Error[フォルダ名はClassic \u002F 中身はNeoの矛盾を誤認]\n        C1_Error -->|辻褄合わせの嘘| C1_Hals[公式リポジトリは存在しない \u002F 消えた中国版だ]\n        \n        C2[2. 推論のデッドロック] -->|会話の肥大化| C2_Loop[過去の自分の嘘を前提に参照]\n        C2_Loop -->|地獄のループ| C2_Action[フォルダ削除 ➔ Py3.12 ➔ Py3.10 ➔ 起動失敗 ➔ 削除]\n        \n        C3[3. 世代の限界] -->|表面的なWeb検索| C3_Fail[NumPy2.xやPython互換性の本質を見落とす]\n    end\n\n    CopilotRoute --> CopilotDilemma\n    C1_Hals --> CopilotLoop[思考のデッドロック（堂々巡り）]\n    C2_Action --> CopilotLoop\n    C3_Fail --> CopilotLoop\n    CopilotLoop -->|ユーザーのせいにする| CopilotEnd[\u002F虚偽の宣告：WanVideoは入っていないから諦めなさい\u002F]\n\n    %% 右側：Gemini 3.5 Flashの解決ルート\n    InputError --> GeminiRoute[Gemini 3.5 Flashに相談]\n    \n    subgraph GeminiSolution [【Gemini】構造論理から導くディープな推論]\n        direction TB\n        G1[コードの静的解析] --> G2[断片的な環境ログの精査]\n        G2 --> G3[NumPyのバージョン衝突をピンポイント特定]\n        G3 --> G4[hashes.pyのPython3.10互換バグを発見]\n    end\n\n    GeminiRoute --> GeminiSolution\n    G4 -->|的確な外科ハック指示| GeminiAction[hashes.pyのコードを直接書き換え]\n    GeminiAction --> GeminiEnd([無事にWanVideoが起動・動画生成に成功！])\n\n    %% スタイルの調整（ブログで見やすくするためのカラーリング）\n    classDef default fill:#f9f9f9,stroke:#333,stroke-width:1px;\n    classDef copilotStyle fill:#ffebee,stroke:#c62828,stroke-width:2px;\n    classDef geminiStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px;\n    classDef startEnd fill:#e3f2fd,stroke:#1565c0,stroke-width:2px;\n    \n    class CopilotRoute,CopilotLoop,CopilotEnd,C1_Hals,C2_Action,C3_Fail copilotStyle;\n    class GeminiRoute,GeminiSolution,G1,G2,G3,G4,GeminiAction,GeminiEnd geminiStyle;\n    class Start,InputError startEnd;\n",[556],{"type":27,"tag":234,"props":557,"children":558},{"__ignoreMap":7},[559],{"type":32,"value":554},{"type":27,"tag":28,"props":561,"children":562},{},[563],{"type":32,"value":564},"　なかなかよい図解だと思います。",{"type":27,"tag":28,"props":566,"children":567},{},[568],{"type":32,"value":569},"　ただ、【Copilot】ブロック の2列目と3列目が逆になっているのが気になって、修正を依頼すると、、、",{"type":27,"tag":332,"props":571,"children":572},{},[573],{"type":27,"tag":226,"props":574,"children":577},{"className":575,"code":576,"language":332,"meta":7},[330],"flowchart TD\n    %% 全体の開始ノード\n    Start([ForgeNeo \u002F WanVideo 導入開始]) --> InputError[起動エラーが発生]\n\n    %% 左右のルート分岐\n    InputError --> CopilotRoute[Copilotに相談（検索依存の表層推論）]\n    InputError --> GeminiRoute[Gemini 3.5 Flashに相談]\n    \n    %% ==========================================\n    %% 左側：Copilotの迷走（3本の柱を完全に同じ高さにする）\n    %% ==========================================\n    subgraph CopilotDilemma [【Copilot】ハルシネーションのドミノ倒しと地獄のループ]\n        direction TB\n        \n        subgraph HorizontalAlign [ ]\n            direction LR\n            C1[\"1. 前提の崩壊\"] --> C2[\"2. 推論のデッドロック\"] --> C3[\"3. 世代の限界\"]\n        end\n        style HorizontalAlign fill:none,stroke:none,color:none\n        \n        %% 1番の柱（垂直下方向へ）\n        C1 -->|名前と中身のねじれ| C1_Error[フォルダClassic \u002F 中身Neoの矛盾]\n        C1_Error --> C1_Hals[公式リポジトリは存在しない \u002F 消えた中国版だ]\n        \n        %% 2番の柱（垂直下方向へ）\n        C2 -->|会話の肥大化| C2_Loop[過去の自分の嘘を前提に参照]\n        C2_Loop --> C2_Action[フォルダ削除 ➔ Python変更 ➔ 失敗のループ]\n        \n        %% 3番の柱（垂直下方向へ）\n        C3 -->|表面的なWeb検索| C3_Fail[NumPy2.xやPython互換性の本質を見落とす]\n    end\n\n    %% 同時に見出しへ接続\n    CopilotRoute --> C1\n    CopilotRoute --> C2\n    CopilotRoute --> C3\n\n    %% 💡 限界突破のハック：3本の柱から「真ん中（2番）」の最下部だけを代表として引っこ抜く！\n    %% これにより、左右から引っ張られるねじれ（右肩下がり）が完全に消失します\n    C2_Action --> CopilotLoop[思考のデッドロック（堂々巡り）]\n    \n    %% 1番と3番の終わりは、2番のデッドロック（本質）に合流させる\n    C1_Hals --> CopilotLoop\n    C3_Fail --> CopilotLoop\n    \n    CopilotLoop -->|ユーザーのせいにする| CopilotEnd[\u002F虚偽の宣告：WanVideoは入っていないから諦めなさい\u002F]\n\n    %% ==========================================\n    %% 右側：Gemini 3.5 Flashの解決ルート\n    %% ==========================================\n    subgraph GeminiSolution [【Gemini】構造論理から導くディープな推論]\n        direction TB\n        G1[コードの静的解析] --> G2[断片的な環境ログの精査]\n        G2 --> G3[NumPyのバージョン衝突を特定]\n        G3 --> G4[hashes.pyのPython3.10互換バグを発見]\n    end\n\n    GeminiRoute --> GeminiSolution\n    G4 -->|的確な外科ハック指示| GeminiAction[hashes.py of コードを直接書き換え]\n    GeminiAction --> GeminiEnd([無事にWanVideoが起動・動画生成に成功！])\n\n    %% スタイルの調整\n    classDef default fill:#f9f9f9,stroke:#333,stroke-width:1px;\n    classDef copilotStyle fill:#ffebee,stroke:#c62828,stroke-width:2px;\n    classDef geminiStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px;\n    classDef startEnd fill:#e3f2fd,stroke:#1565c0,stroke-width:2px;\n    \n    class CopilotRoute,CopilotLoop,CopilotEnd,C1,C2,C3,C1_Error,C1_Hals,C2_Loop,C2_Action,C3_Fail copilotStyle;\n    class GeminiRoute,GeminiSolution,G1,G2,G3,G4,GeminiAction,GeminiEnd geminiStyle;\n    class Start,InputError startEnd;\n",[578],{"type":27,"tag":234,"props":579,"children":580},{"__ignoreMap":7},[581],{"type":32,"value":576},{"type":27,"tag":28,"props":583,"children":584},{},[585],{"type":32,"value":586},"　余分な矢印が追加されて、タテに間延びしてしまいました。",{"type":27,"tag":28,"props":588,"children":589},{},[590],{"type":32,"value":591},"　再度、修正を依頼しますが、、、",{"type":27,"tag":332,"props":593,"children":594},{},[595],{"type":27,"tag":226,"props":596,"children":599},{"className":597,"code":598,"language":332,"meta":7},[330],"flowchart TD\n    %% 全体の開始ノード\n    Start([ForgeNeo \u002F WanVideo 導入開始]) --> InputError[起動エラーが発生]\n\n    %% 左右のルート分岐\n    InputError --> CopilotRoute[Copilotに相談（検索依存の表層推論）]\n    InputError --> GeminiRoute[Gemini 3.5 Flashに相談]\n    \n    %% ==========================================\n    %% 左側：Copilotの迷走（Mermaidの得意な配置に合わせて中身を入れ替え）\n    %% ==========================================\n    subgraph CopilotDilemma [【Copilot】ハルシネーションのドミノ倒しと地獄のループ]\n        direction TB\n        \n        %% 💡 ハダノ様式ハック：Mermaidが左から「C1 ➔ C3 ➔ C2」の順で最も綺麗に並べる特性を活かし、\n        %% 真ん中（C3）に2番、右（C2）に3番のテキストを割り当てて画面上の「1➔2➔3」を実現する\n        C1[\"1. 前提の崩壊\"] ~~~ C3[\"2. 推論のデッドロック\"] ~~~ C2[\"3. 世代の限界\"]\n        \n        %% 【左の柱】1. 前提の崩壊ルート\n        C1 -->|名前と中身のねじれ| C1_Error[フォルダClassic \u002F 中身Neoの矛盾]\n        C1_Error -->|辻褄合わせの嘘| C1_Hals[公式リポジトリは存在しない \u002F 消えた中国版だ]\n        \n        %% 【真ん中の柱】2. 推論のデッドロックルート（元C3の配置場所）\n        C3 -->|会話の肥大化| C3_Loop[過去の自分の嘘を前提に参照]\n        C3_Loop -->|地獄のループ| C3_Action[フォルダ削除 ➔ Python変更 ➔ 失敗のループ]\n        \n        %% 【右の柱】3. 世代の限界ルート（元C2の配置場所）\n        C2 -->|表面的なWeb検索| C2_Fail[NumPy2.xやPython互換性の本質を見落とす]\n    end\n\n    %% 各見出しへ接続\n    CopilotRoute --> C1\n    CopilotRoute --> C3\n    CopilotRoute --> C2\n\n    %% 3本の柱の終点を綺麗に1つにまとめる\n    C1_Hals --> CopilotLoop[思考のデッドロック（堂々巡り）]\n    C3_Action --> CopilotLoop\n    C2_Fail --> CopilotLoop\n    CopilotLoop -->|ユーザーのせいにする| CopilotEnd[\u002F虚偽の宣告：WanVideoは入っていないから諦めなさい\u002F]\n\n    %% ==========================================\n    %% 右側：Gemini 3.5 Flashの解決ルート\n    %% ==========================================\n    subgraph GeminiSolution [【Gemini】構造論理から導くディープな推論]\n        direction TB\n        G1[コードの静的解析] --> G2[断片的な環境ログの精査]\n        G2 --> G3[NumPyのバージョン衝突を特定]\n        G3 --> G4[hashes.pyのPython3.10互換バグを発見]\n    end\n\n    GeminiRoute --> GeminiSolution\n    G4 -->|的確な外科ハック指示| GeminiAction[hashes.pyのコードを直接書き換え]\n    GeminiAction --> GeminiEnd([無事にWanVideoが起動・動画生成に成功！])\n\n    %% スタイルの調整\n    classDef default fill:#f9f9f9,stroke:#333,stroke-width:1px;\n    classDef copilotStyle fill:#ffebee,stroke:#c62828,stroke-width:2px;\n    classDef geminiStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px;\n    classDef startEnd fill:#e3f2fd,stroke:#1565c0,stroke-width:2px;\n    \n    class CopilotRoute,CopilotLoop,CopilotEnd,C1,C2,C3,C1_Error,C1_Hals,C3_Loop,C3_Action,C2_Fail copilotStyle;\n    class GeminiRoute,GeminiSolution,G1,G2,G3,G4,GeminiAction,GeminiEnd geminiStyle;\n    class Start,InputError startEnd;\n",[600],{"type":27,"tag":234,"props":601,"children":602},{"__ignoreMap":7},[603],{"type":32,"value":598},{"type":27,"tag":28,"props":605,"children":606},{},[607],{"type":32,"value":608},"　どうしても右肩下がりが直りません。",{"type":27,"tag":28,"props":610,"children":611},{},[612],{"type":32,"value":613},"　もしかして、「列の長さによって自動配列している」という前提が間違っているかもしれません。単純に、最初のコードの2列目の記述位置を3列目と入れ替えてみると、、、",{"type":27,"tag":332,"props":615,"children":616},{},[617],{"type":27,"tag":226,"props":618,"children":621},{"className":619,"code":620,"language":332,"meta":7},[330],"flowchart TD\n    %% 全体の開始ノード\n    Start([ForgeNeo \u002F WanVideo 導入開始]) --> InputError[起動エラーが発生]\n\n    %% 左側：Copilotの迷走・自爆ルート\n    InputError --> CopilotRoute[Copilotに相談（検索依存の表層推論）]\n    \n    subgraph CopilotDilemma [【Copilot】ハルシネーションのドミノ倒しと地獄のループ]\n        direction TB\n        C1[1. 前提の崩壊] -->|名前と中身のねじれ| C1_Error[フォルダ名はClassic \u002F 中身はNeoの矛盾を誤認]\n        C1_Error -->|辻褄合わせの嘘| C1_Hals[公式リポジトリは存在しない \u002F 消えた中国版だ]\n\n        C3[3. 世代の限界] -->|表面的なWeb検索| C3_Fail[NumPy2.xやPython互換性の本質を見落とす]\n\n        C2[2. 推論のデッドロック] -->|会話の肥大化| C2_Loop[過去の自分の嘘を前提に参照]\n        C2_Loop -->|地獄のループ| C2_Action[フォルダ削除 ➔ Py3.12 ➔ Py3.10 ➔ 起動失敗 ➔ 削除]\n    end\n\n    CopilotRoute --> CopilotDilemma\n    C1_Hals --> CopilotLoop[思考のデッドロック（堂々巡り）]\n    C2_Action --> CopilotLoop\n    C3_Fail --> CopilotLoop\n    CopilotLoop -->|ユーザーのせいにする| CopilotEnd[\u002F虚偽の宣告：WanVideoは入っていないから諦めなさい\u002F]\n\n    %% 右側：Gemini 3.5 Flashの解決ルート\n    InputError --> GeminiRoute[Gemini 3.5 Flashに相談]\n    \n    subgraph GeminiSolution [【Gemini】構造論理から導くディープな推論]\n        direction TB\n        G1[コードの静的解析] --> G2[断片的な環境ログの精査]\n        G2 --> G3[NumPyのバージョン衝突をピンポイント特定]\n        G3 --> G4[hashes.pyのPython3.10互換バグを発見]\n    end\n\n    GeminiRoute --> GeminiSolution\n    G4 -->|的確な外科ハック指示| GeminiAction[hashes.pyのコードを直接書き換え]\n    GeminiAction --> GeminiEnd([無事にWanVideoが起動・動画生成に成功！])\n\n    %% スタイルの調整（ブログで見やすくするためのカラーリング）\n    classDef default fill:#f9f9f9,stroke:#333,stroke-width:1px;\n    classDef copilotStyle fill:#ffebee,stroke:#c62828,stroke-width:2px;\n    classDef geminiStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px;\n    classDef startEnd fill:#e3f2fd,stroke:#1565c0,stroke-width:2px;\n    \n    class CopilotRoute,CopilotLoop,CopilotEnd,C1,C2,C3,C1_Error,C1_Hals,C2_Loop,C3_Fail,C2_Action copilotStyle;\n    class GeminiRoute,GeminiSolution,G1,G2,G3,G4,GeminiAction,GeminiEnd geminiStyle;\n    class Start,InputError startEnd;\n",[622],{"type":27,"tag":234,"props":623,"children":624},{"__ignoreMap":7},[625],{"type":32,"value":620},{"type":27,"tag":28,"props":627,"children":628},{},[629],{"type":32,"value":630},"　あっさり直りました。",{"type":27,"tag":28,"props":632,"children":633},{},[634],{"type":32,"value":635},"　どうやら、2番目に書いた部分が右端に来るようです。Mermaid図については、まだまだ深掘りする必要があります。",{"type":27,"tag":28,"props":637,"children":638},{},[639,641,647],{"type":32,"value":640},"　同じ図解をフローチャート形式から ",{"type":27,"tag":43,"props":642,"children":644},{"href":643},"\u002Ftag\u002Fmindmap",[645],{"type":32,"value":646},"🔗マインドマップ",{"type":32,"value":648}," 形式にしてみると、、、",{"type":27,"tag":332,"props":650,"children":651},{},[652],{"type":27,"tag":226,"props":653,"children":656},{"className":654,"code":655,"language":332,"meta":7},[330],"mindmap\n  root(( ForgeNeo導入の\u003Cbr>明暗 ))\n    [\"【失敗】Copilotの迷走\"]\n      [\"1. 前提の崩壊\"]\n        [\"歴史的経緯の誤認\"]\n          [\"名称はClassicでも中身はNeo\"]\n        [\"嘘のドミノ倒し\"]\n          [\"公式リポジトリは存在しない\"]\n          [\"消えた中国コミュニティ版だ\"]\n      [\"2. 推論のデッドロック\"]\n        [\"コンテキストの肥大化\"]\n          [\"過去の失敗ログの蓄積\"]\n        [\"地獄のループ\"]\n          [\"フォルダ削除とPython変更の堂々巡り\"]\n      [\"3. 世代の限界\"]\n        [\"表面的なWeb検索への依存\"]\n        [\"強制終了\"]\n          [\"WanVideoは入っていないから諦めろ\"]\n    [\"【成功】Geminiの解決\"]\n      [\"卓越したコード理解力\"]\n        [\"ソースコードの静的解析\"]\n        [\"断片的な環境ログの精査\"]\n      [\"ピンポイントのバグ特定\"]\n        [\"NumPyのバージョン衝突\"]\n        [\"hashes.pyのPython3.10互換エラー\"]\n      [\"ディープな推論\"]\n        [\"検索に頼らない構造論理\"]\n        [\"的確な外科ハック指示\"]\n",[657],{"type":27,"tag":234,"props":658,"children":659},{"__ignoreMap":7},[660],{"type":32,"value":655},{"type":27,"tag":28,"props":662,"children":663},{},[664],{"type":32,"value":665},"　あまりパッとしません。マインドマップ本来の曲線美が感じられません。",{"type":27,"tag":28,"props":667,"children":668},{},[669],{"type":32,"value":670},"　また、ブログに載せる場合は、縦長の図の方が見やすいでしょう。",{"type":27,"tag":55,"props":672,"children":673},{},[],{"type":27,"tag":101,"props":675,"children":677},{"id":676},"図解のカテゴリ別mermaidの活用例",[678],{"type":32,"value":679},"図解のカテゴリ別：Mermaidの活用例",{"type":27,"tag":28,"props":681,"children":682},{},[683,684,690],{"type":32,"value":212},{"type":27,"tag":43,"props":685,"children":687},{"href":686},"#zukai",[688],{"type":32,"value":689},"🔗「髙野 雄一 (著) ダイアグラム思考　次世代型リーダーは図解でチームを動かす」",{"type":32,"value":691}," によれば、",{"type":27,"tag":35,"props":693,"children":694},{},[695,707,712],{"type":27,"tag":39,"props":696,"children":697},{},[698,700,705],{"type":32,"value":699},"ビジュアルカテゴリは、",{"type":27,"tag":140,"props":701,"children":702},{},[703],{"type":32,"value":704},"比較、推移、階層、分類、構成、相関、範囲",{"type":32,"value":706}," の7つある。",{"type":27,"tag":39,"props":708,"children":709},{},[710],{"type":32,"value":711},"世の中には、複雑で緻密な図形を用いた図解も存在するが、それらの原型を辿ると、「7つのビジュアルカテゴリ」に行き着く。",{"type":27,"tag":39,"props":713,"children":714},{},[715],{"type":32,"value":716},"「ビジュアルカテゴリをそのまま使う図解」と、「ビジュアルカテゴリのちょっとした応用の図解」の2種類の図解で著者が描く図の約9割を占める。",{"type":27,"tag":28,"props":718,"children":719},{},[720],{"type":32,"value":721},"ということなので、これを Mermaid図 で表したいと思います。",{"type":27,"tag":75,"props":723,"children":727},{"src":724,"alt":725,"className":726},"\u002Fimg\u002Fdiagrams.jpg","比較、推移、階層、分類、構成、相関、範囲を図解して分かりやすく伝えようとしているライター",[80],[],{"type":27,"tag":28,"props":729,"children":730},{},[731,733,739],{"type":32,"value":732},"　Mermaid図にはさまざまな種類がありますが、",{"type":27,"tag":234,"props":734,"children":736},{"className":735},[],[737],{"type":32,"value":738},"VSCode",{"type":32,"value":740}," で編集しやすいものとしにくいものがあります。",{"type":27,"tag":35,"props":742,"children":743},{},[744],{"type":27,"tag":39,"props":745,"children":746},{},[747],{"type":27,"tag":43,"props":748,"children":751},{"href":749,"rel":750},"https:\u002F\u002Fcatchup.co.jp\u002Fblog\u002Fmedia\u002Farchives\u002F478",[91],[752],{"type":32,"value":753},"🔗Markdown管理の味方！VSCode拡張機能「Mermaid Graphical Editor」でER図やフローチャートをマウスで描く方法",{"type":27,"tag":28,"props":755,"children":756},{},[757,759,765],{"type":32,"value":758},"にあるように、",{"type":27,"tag":234,"props":760,"children":762},{"className":761},[],[763],{"type":32,"value":764},"Mermaid Graphical Editor",{"type":32,"value":766}," をインストールすると、5つ（FLOWCHART,SEQUENCE,CLASS,ER,STATE）がビジュアル編集できます。",{"type":27,"tag":28,"props":768,"children":769},{},[770],{"type":32,"value":771},"　そこでなるべく、 Flowchart などを中心に活用していくことにします。",{"type":27,"tag":75,"props":773,"children":777},{"src":774,"alt":775,"className":776},"\u002Fimg\u002Fflowcharts.jpg","比較、推移、階層、分類、構成、相関などをフローチャートで図解して分かりやすく伝えようとしているライター",[80],[],{"type":27,"tag":264,"props":779,"children":781},{"id":780},"️-カテゴリ別mermaidの具体的な書き方と活用例",[782],{"type":32,"value":783},"🛠️ カテゴリ別：Mermaidの具体的な書き方と活用例",{"type":27,"tag":146,"props":785,"children":786},{},[787],{"type":27,"tag":39,"props":788,"children":789},{},[790,795],{"type":27,"tag":140,"props":791,"children":792},{},[793],{"type":32,"value":794},"比較（2軸図・ポジショニング）",{"type":32,"value":796}," ➔ quadrantChart　⇒ flowchart TD",{"type":27,"tag":28,"props":798,"children":799},{},[800],{"type":32,"value":801},"　「重要度×緊急度」や「ツール比較」など、4象限のマトリクスを完全に自動生成できます。「なぜこのツール（Geminiなど）が良いのか」をポジショニングするのに最適です。",{"type":27,"tag":28,"props":803,"children":804},{},[805],{"type":32,"value":806},"⇒　flowchart TD で表現する場合は、subgraph を4つ（2×2）配置してクアドラント（4象限）の枠組みを作り、その中に比較対象のアイテムノードを配置します。",{"type":27,"tag":146,"props":808,"children":809},{"start":394},[810],{"type":27,"tag":39,"props":811,"children":812},{},[813,818],{"type":27,"tag":140,"props":814,"children":815},{},[816],{"type":32,"value":817},"推移（プロセス図・ステップ）",{"type":32,"value":819}," ➔ flowchart TD",{"type":27,"tag":28,"props":821,"children":822},{},[823],{"type":32,"value":824},"　時系列や手順の解説です。今回の「ForgeNeo導入の迷走と解決」のようなストーリーもこれで一発で図解できます。",{"type":27,"tag":146,"props":826,"children":827},{"start":411},[828],{"type":27,"tag":39,"props":829,"children":830},{},[831,836],{"type":27,"tag":140,"props":832,"children":833},{},[834],{"type":32,"value":835},"階層（ピラミッド図・組織）",{"type":32,"value":819},{"type":27,"tag":28,"props":838,"children":839},{},[840],{"type":32,"value":841},"　Mermaidには「三角形」を描く機能はありませんが、上から下へのフローを使って、ノードの形を「台形」にすることでピラミッドのような階層構造を表現できます。また、ノードの形を「四角」「角丸」「円」などに変えることで、階層のレイヤー（経営層、マネージャー層、現場層など）を視覚的に区別できます。",{"type":27,"tag":146,"props":843,"children":845},{"start":844},4,[846],{"type":27,"tag":39,"props":847,"children":848},{},[849,854],{"type":27,"tag":140,"props":850,"children":851},{},[852],{"type":32,"value":853},"分類（マトリクス図・ケース想定）",{"type":32,"value":855}," ➔ grid　⇒ flowchart TD",{"type":27,"tag":28,"props":857,"children":858},{},[859],{"type":32,"value":860},"　要素を綺麗に縦横のグリッド（表）に分類して見せたい場合は、Mermaidの grid 構文が使えます。",{"type":27,"tag":28,"props":862,"children":863},{},[864],{"type":32,"value":865},"⇒　flowchart TD で表現する場合は、subgraph を使ってキャンバスをいくつかのエリアに分割し、その中に分類ごとのノードを配置します。",{"type":27,"tag":146,"props":867,"children":869},{"start":868},5,[870],{"type":27,"tag":39,"props":871,"children":872},{},[873,878],{"type":27,"tag":140,"props":874,"children":875},{},[876],{"type":32,"value":877},"構成（ツリー図・マインドマップ）",{"type":32,"value":879}," ➔ mindmap　⇒ flowchart TD",{"type":27,"tag":28,"props":881,"children":882},{},[883],{"type":32,"value":884},"　長年広く親しまれているマインドマップそのものの構文がMermaidには用意されています。インデント（タブ）を下げるだけで、記事の目次や論理構造をツリー化できます。",{"type":27,"tag":28,"props":886,"children":887},{},[888],{"type":32,"value":889},"⇒　flowchart TD を使用し、全体像からパーツへと枝分かれさせます。親ノードから複数の子ノードへ分岐させるだけで、綺麗なツリー型の構成図が直感的に作れます。",{"type":27,"tag":146,"props":891,"children":893},{"start":892},6,[894],{"type":27,"tag":39,"props":895,"children":896},{},[897,902],{"type":27,"tag":140,"props":898,"children":899},{},[900],{"type":32,"value":901},"相関（モデル図・エコシステム）",{"type":32,"value":903}," ➔ graph　⇒ flowchart TD（graphの上位版なので）",{"type":27,"tag":28,"props":905,"children":906},{},[907],{"type":32,"value":908},"　ビジネスモデルや「ヒト・モノ・カネ・情報の動き」を可視化します。矢印の間にテキストを挟めるため、「誰が誰に何を渡しているか」が明確になります。",{"type":27,"tag":146,"props":910,"children":912},{"start":911},7,[913],{"type":27,"tag":39,"props":914,"children":915},{},[916,921],{"type":27,"tag":140,"props":917,"children":918},{},[919],{"type":32,"value":920},"範囲（ベン図・重なり）",{"type":32,"value":922}," ➔ ⚠️注意：Mermaidは非対応",{"type":27,"tag":28,"props":924,"children":925},{},[926],{"type":32,"value":927},"　残念ながら、現時点でMermaidは「ベン図（集合の重なり）」を綺麗に描く機能がありません。範囲や統計データを表現する場合は、代替案として pie（円グラフ）を使うか、このカテゴリだけは手書きや他のツールで画像化するのが現実的です。",{"type":27,"tag":75,"props":929,"children":933},{"src":930,"alt":931,"className":932},"\u002Fimg\u002Fclasser.jpg","分類、構成、相関をClass Diagram（クラス図）やER Diagram（実体関連図）で図解して分かりやすく伝えようとしているライター",[80],[],{"type":27,"tag":146,"props":935,"children":937},{"start":936},8,[938],{"type":27,"tag":39,"props":939,"children":940},{},[941],{"type":32,"value":942},"（おまけ）Flowchart以外のGUI対応タイプの活用例",{"type":27,"tag":35,"props":944,"children":945},{},[946,966],{"type":27,"tag":39,"props":947,"children":948},{},[949,951],{"type":32,"value":950},"Class Diagram（クラス図）:",{"type":27,"tag":35,"props":952,"children":953},{},[954],{"type":27,"tag":39,"props":955,"children":956},{},[957,959,964],{"type":32,"value":958},"本来はプログラムの設計図ですが、「プロパティ（属性）」と「メソッド（操作）」に分かれたボックス構造を持つため、「要素の構成要素や内部仕様を分解して説明する",{"type":27,"tag":140,"props":960,"children":961},{},[962],{"type":32,"value":963},"分類図",{"type":32,"value":965},"」としても流用価値があります。",{"type":27,"tag":39,"props":967,"children":968},{},[969,971],{"type":32,"value":970},"ER Diagram（実体関連図）:",{"type":27,"tag":35,"props":972,"children":973},{},[974],{"type":27,"tag":39,"props":975,"children":976},{},[977,979,984],{"type":32,"value":978},"データベースの関連図ですが、ヒト・モノ・カネなどの「エンティティ同士の多対多・1対多の構造的な関係性（",{"type":27,"tag":140,"props":980,"children":981},{},[982],{"type":32,"value":983},"構成・相関",{"type":32,"value":985},"）」を厳密に整理したいとき、綺麗なボックスとリレーション線で描画できます。",{"type":27,"tag":55,"props":987,"children":988},{},[],{"type":27,"tag":101,"props":990,"children":992},{"id":991},"svg画像の危険性はないか",[993],{"type":32,"value":994},"SVG画像の危険性はないか？",{"type":27,"tag":28,"props":996,"children":997},{},[998,1000,1004],{"type":32,"value":999},"　Mermaid図は、最終的には「",{"type":27,"tag":140,"props":1001,"children":1002},{},[1003],{"type":32,"value":384},{"type":32,"value":1005},"」という形式のベクトル画像データに変換されます。",{"type":27,"tag":35,"props":1007,"children":1008},{},[1009],{"type":27,"tag":39,"props":1010,"children":1011},{},[1012],{"type":27,"tag":43,"props":1013,"children":1016},{"href":1014,"rel":1015},"https:\u002F\u002Ftech.enigmo.co.jp\u002Fentry\u002F2025\u002F12\u002F07\u002F090000",[91],[1017],{"type":32,"value":1018},"🔗SVGファイルは本当に安全なのか？SVGの中にある危険な仕組みと対策",{"type":27,"tag":28,"props":1020,"children":1021},{},[1022],{"type":32,"value":1023},"など、SVGには命令を埋め込めるので、XSS（クロスサイトスクリプティング）攻撃に使える……という危険な一面があります。",{"type":27,"tag":28,"props":1025,"children":1026},{},[1027],{"type":32,"value":1028},"　教育DXブログが使用している Cloudflare でも実際に、",{"type":27,"tag":35,"props":1030,"children":1031},{},[1032],{"type":27,"tag":39,"props":1033,"children":1034},{},[1035],{"type":27,"tag":43,"props":1036,"children":1039},{"href":1037,"rel":1038},"https:\u002F\u002Frocket-boys.co.jp\u002Fsecurity-measures-lab\u002Fcloudflare_image_transformations_xss_20261029\u002F#index-2",[91],[1040],{"type":32,"value":1041},"🔗Cloudflare画像変換機能でXSS成立を実証　SVG処理とブラウザーのキャッシュ仕様を組み合わせ、正規ドメインでJavaScript実行",{"type":27,"tag":28,"props":1043,"children":1044},{},[1045],{"type":32,"value":1046},"と、警鐘が鳴らされています。",{"type":27,"tag":75,"props":1048,"children":1053},{"src":1049,"alt":1050,"className":1051},"\u002Fimg\u002Fclientsvg.jpg","クライアントサイドで動的にSVGを描画することにより、サイバー攻撃に強い安全なシステムにしたエンジニア",[1052],"imghc",[],{"type":27,"tag":28,"props":1055,"children":1056},{},[1057],{"type":32,"value":1058},"　さて、今回の Mermaid 導入は、大丈夫でしょうか？",{"type":27,"tag":264,"props":1060,"children":1062},{"id":1061},"_1-なぜ大丈夫なのか安全な理由",[1063],{"type":32,"value":1064},"1. なぜ「大丈夫」なのか（安全な理由）",{"type":27,"tag":28,"props":1066,"children":1067},{},[1068],{"type":32,"value":1069},"　今回の脆弱性は、Cloudflareの「画像変換機能（Image Transformations）」がSVGファイルを処理・キャッシュする際の挙動に起因するものです。今回の実装とは以下の決定的な違いがあります。",{"type":27,"tag":35,"props":1071,"children":1072},{},[1073,1089],{"type":27,"tag":39,"props":1074,"children":1075},{},[1076,1081],{"type":27,"tag":140,"props":1077,"children":1078},{},[1079],{"type":32,"value":1080},"Cloudflare画像変換を介していない",{"type":27,"tag":35,"props":1082,"children":1083},{},[1084],{"type":27,"tag":39,"props":1085,"children":1086},{},[1087],{"type":32,"value":1088},"教育DXブログは、クライアントサイド（ブラウザ上）で import('mermaid') を実行し、Markdown内のテキストから直接SVGのDOM要素を生成・描画しています。Cloudflareのサーバー側でSVGファイルを画像に変換するパイプライン（\u002Fcdn-cgi\u002Fimage\u002F... など）を通していません。",{"type":27,"tag":39,"props":1090,"children":1091},{},[1092,1097],{"type":27,"tag":140,"props":1093,"children":1094},{},[1095],{"type":32,"value":1096},"SSG（静的サイト生成）による完全な静的配信",{"type":27,"tag":35,"props":1098,"children":1099},{},[1100],{"type":27,"tag":39,"props":1101,"children":1102},{},[1103],{"type":32,"value":1104},"サーバー側で動的にユーザー入力を処理してSVGや画像を生成・返却するエンドポイントを持たず、ビルド済みの純粋なHTML\u002FJS\u002FCSSファイルをCDNから配信しているため、サーバー起因のインジェクションやキャッシュ汚染の余地がありません。",{"type":27,"tag":264,"props":1106,"children":1108},{"id":1107},"_2-これを参考に挑戦してみたい方に向けた注意点ベストプラクティス",[1109],{"type":32,"value":1110},"2. これを参考に挑戦してみたい方に向けた注意点・ベストプラクティス",{"type":27,"tag":35,"props":1112,"children":1113},{},[1114,1130],{"type":27,"tag":39,"props":1115,"children":1116},{},[1117,1122],{"type":27,"tag":140,"props":1118,"children":1119},{},[1120],{"type":32,"value":1121},"SVGの外部読み込みや画像変換機能との混同に注意する",{"type":27,"tag":35,"props":1123,"children":1124},{},[1125],{"type":27,"tag":39,"props":1126,"children":1127},{},[1128],{"type":32,"value":1129},"Mermaidで生成したSVGを「一度ファイルとして保存し、Cloudflareの画像変換機能経由で配信する」ような構成に改造すると、今回の脆弱性のリスクを踏む可能性があります。あくまで「ブラウザ上のクライアントサイドで動的に描画（SVGをインライン展開）する」方式を維持することが重要です。",{"type":27,"tag":39,"props":1131,"children":1132},{},[1133,1137],{"type":27,"tag":140,"props":1134,"children":1135},{},[1136],{"type":32,"value":1121},{"type":27,"tag":35,"props":1138,"children":1139},{},[1140,1145],{"type":27,"tag":39,"props":1141,"children":1142},{},[1143],{"type":32,"value":1144},"もし将来、ブログにコメント欄などを設けて「他人が書いたMarkdownやMermaidコード」をそのままビルド・表示する仕組みにする場合、悪意あるコード（XSS）が混入するリスクが生じます。",{"type":27,"tag":39,"props":1146,"children":1147},{},[1148],{"type":32,"value":1149},"自身が執筆する個人の技術ブログであれば問題ありませんが、他者の入力を受け付ける設計にする場合は、Mermaidの出力やHTMLに対する適切なサニタイズ（DOMPurifyの導入など）が必要になるでしょう。",{"type":27,"tag":28,"props":1151,"children":1152},{},[1153],{"type":32,"value":1154},"　技術的な仕組みを正しく切り分けて設計されているため、現在のモダンでセキュアな構成（Nuxt Content MDC ＋ クライアントサイドMermaid）に自信を持って取り組んで大丈夫です。",{"type":27,"tag":55,"props":1156,"children":1157},{},[],{"type":27,"tag":101,"props":1159,"children":1161},{"id":1160},"まとめクライアントサイドmermaidならブログに簡単安全に図解を入れられる",[1162],{"type":32,"value":1163},"【まとめ】クライアントサイドMermaidなら、ブログに簡単・安全に図解を入れられる",{"type":27,"tag":28,"props":1165,"children":1166},{},[1167],{"type":32,"value":1168},"　依然として、「サイバー攻撃・情報漏洩」が止まりません、、、",{"type":27,"tag":28,"props":1170,"children":1171},{},[1172,1173,1180],{"type":32,"value":212},{"type":27,"tag":43,"props":1174,"children":1177},{"href":1175,"rel":1176},"https:\u002F\u002Fwirelesswire.jp\u002F2026\u002F10\u002F94824\u002F",[91],[1178],{"type":32,"value":1179},"🔗清水亮氏の記事「【PHPはオワコン】AIが書いたコードをなぜ信用できるのか？ 数学的証明で守る新しいサーバーサイド言語『QED Script』を作った」",{"type":32,"value":1181}," は、現代のソフトウェア開発、そしてセキュリティが直面している根本的な矛盾に対して、非常に挑発的かつ示唆に富んだアプローチを提示しています。",{"type":27,"tag":75,"props":1183,"children":1187},{"src":1184,"alt":1185,"className":1186},"\u002Fimg\u002Fphppatch.jpg","穴の開いたPHPに必死でパッチを当て続けることに追われているサイバーセキュリティ現場をなげくエンジニア",[1052],[],{"type":27,"tag":264,"props":1189,"children":1191},{"id":1190},"_1-パッチを当てる文化穴の開いた船の限界と近年のサイバー攻撃",[1192],{"type":32,"value":1193},"1. 「パッチを当てる文化（穴の開いた船）」の限界と、近年のサイバー攻撃",{"type":27,"tag":28,"props":1195,"children":1196},{},[1197],{"type":32,"value":1198},"　ここ数年、国内外を問わず、サプライチェーンやインフラを標的とした大規模なランサムウェア攻撃や情報漏洩事件（国内でも大手流通やインフラ企業が多数被害）が後を絶ちません。",{"type":27,"tag":28,"props":1200,"children":1201},{},[1202],{"type":32,"value":1203},"　これまでのウェブ開発（その代表格であるPHPやWordPressエコシステムなど）は、「便利さ」と「柔軟性」を最優先して発展してきました。ファイルシステムへのアクセス、外部ネットワークとの接続、OSコマンドの呼び出しなどが容易に書けるからこそ、素早い開発が可能でした。",{"type":27,"tag":28,"props":1205,"children":1206},{},[1207,1209,1214],{"type":32,"value":1208},"　しかし、その「便利さ」は、",{"type":27,"tag":140,"props":1210,"children":1211},{},[1212],{"type":32,"value":1213},"攻撃者にとっても極めて都合の良い踏み台",{"type":32,"value":1215}," になります。脆弱性が一つ見つかれば、そこからシステム全体へと権限が拡大し、甚大な被害につながる。現代のサイバーセキュリティは、穴の開いた船に必死でパッチを当て続けるような、モグラ叩きの状態に陥っています。",{"type":27,"tag":264,"props":1217,"children":1219},{"id":1218},"_2-aiがコードを書く時代がもたらす新たな脅威",[1220],{"type":32,"value":1221},"2. 「AIがコードを書く時代」がもたらす新たな脅威",{"type":27,"tag":28,"props":1223,"children":1224},{},[1225],{"type":32,"value":1226},"　さらに状況を複雑にしているのが、AIの急速な進化です。",{"type":27,"tag":28,"props":1228,"children":1229},{},[1230],{"type":32,"value":1231},"　現在、人間よりもはるかに高速に、膨大なコードを生成できるAI（LLMやエージェント）が普及しています。これは開発の生産性を爆発的に高める一方で、セキュリティの観点からは「脅威の民主化と加速」を意味します。",{"type":27,"tag":35,"props":1233,"children":1234},{},[1235,1245],{"type":27,"tag":39,"props":1236,"children":1237},{},[1238,1243],{"type":27,"tag":140,"props":1239,"children":1240},{},[1241],{"type":32,"value":1242},"攻撃側：",{"type":32,"value":1244}," AIが悪意ある脆弱性を一瞬で見つけ出し、高度な攻撃コードや自動侵入エージェントを大量生産する。",{"type":27,"tag":39,"props":1246,"children":1247},{},[1248,1253],{"type":27,"tag":140,"props":1249,"children":1250},{},[1251],{"type":32,"value":1252},"防御側：",{"type":32,"value":1254}," 人間が書くよりも複雑で大量のコードをAIが生成するため、人間がその安全性を精査しきれなくなる。",{"type":27,"tag":28,"props":1256,"children":1257},{},[1258],{"type":32,"value":1259},"　「AIが善意で（あるいはユーザーの指示通りに）親切に危険な設定や穴だらけのコードを書く」というリスクは、今後のシステム開発において深刻なボトルネックになります。もはや、「人間が注意深くコードを書くから安全だ」という前提は崩れ去りつつあります。",{"type":27,"tag":264,"props":1261,"children":1263},{"id":1262},"_3-qed-script-qedosの思想が示すアプローチの正当性",[1264],{"type":32,"value":1265},"3. 「QED Script \u002F QEDOS」の思想が示すアプローチの正当性",{"type":27,"tag":28,"props":1267,"children":1268},{},[1269],{"type":32,"value":1270},"　こうした背景を踏まえると、清水氏が提案する「QED Script」や実験的OS「QEDOS」の設計思想には、AI時代を生き抜くための極めて重要なヒントがあります。",{"type":27,"tag":35,"props":1272,"children":1273},{},[1274],{"type":27,"tag":39,"props":1275,"children":1276},{},[1277],{"type":27,"tag":140,"props":1278,"children":1279},{},[1280],{"type":32,"value":1281},"「できないことは、最初からできないようにする」（機能の極小化とコンパートメント化）",{"type":27,"tag":28,"props":1283,"children":1284},{},[1285],{"type":32,"value":1286},"　シェルも不要なファイルアクセスも最初から削ぎ落とし、万が一1つの領域が破られてもシステム全体を乗っ取られないように隔離する。これは、ゼロトラストアーキテクチャの究極形と言えます。",{"type":27,"tag":35,"props":1288,"children":1289},{},[1290],{"type":27,"tag":39,"props":1291,"children":1292},{},[1293],{"type":27,"tag":140,"props":1294,"children":1295},{},[1296],{"type":32,"value":1297},"「AIや人間を信用せず、数学的証明を信用する」",{"type":27,"tag":28,"props":1299,"children":1300},{},[1301],{"type":32,"value":1302},"　記事の最も本質的な部分は、「AIが書いたコードや証明が正当であるかを、人間が個別に信頼するのではなく、機械的な検証器と数学的証明によって担保する」という逆転の発想です。",{"type":27,"tag":264,"props":1304,"children":1306},{"id":1305},"_4-これからの信頼の形",[1307],{"type":32,"value":1308},"4. 「これからの信頼の形」",{"type":27,"tag":28,"props":1310,"children":1311},{},[1312],{"type":32,"value":1313},"　どれほどAIが高度になろうとも、ハルシネーション（幻覚）や文脈の誤認、セキュリティ上の「うっかり」をゼロにすることはできません。だからこそ、清水氏が言うように、「プログラムの正しさや安全性を、人間より賢いかもしれない存在とは無関係な『数学的証明』の枠組みに落とし込み、機械的に検証する」というアプローチは、今後の高信頼システムにおいて不可欠な方向性になります。",{"type":27,"tag":75,"props":1315,"children":1319},{"src":1316,"alt":1317,"className":1318},"\u002Fimg\u002Fqedscript.jpg","便利なPHPに頼らず、機械的な検証器と数学的証明による高信頼システムを構築しようとしているエンジニア",[1052],[],{"type":27,"tag":28,"props":1321,"children":1322},{},[1323],{"type":32,"value":1324},"　「PHPはオワコンか」という刺激的な問いの裏で、私たちが直面している本質は、「これまでの『便利さと後方互換性』の文化から、いかにして『証明された堅牢性』の文化へパラダイムシフトするか」という点にあります。AIの進化が加速する現代において、コードの書き手だけでなく、インフラや言語の設計思想そのものを根本から問い直す時期に来ている――記事からは、そうした強い危機感と未来へのラディカルな提案が伝わってきます。",{"type":27,"tag":28,"props":1326,"children":1327},{},[1328,1330],{"type":32,"value":1329},"　※ 『数学的証明』については、ゲーデルの不完全性定理もあることから絶対視は禁物ですが、よりましなパッチワークになるでしょう。　→ ",{"type":27,"tag":43,"props":1331,"children":1333},{"href":1332},"\u002Farticles\u002Fscientific",[1334],{"type":32,"value":1335},"🔗自然科学の法則は証明できない",{"type":27,"tag":1337,"props":1338,"children":1339},"hr",{},[],{"type":27,"tag":28,"props":1341,"children":1342},{},[1343],{"type":32,"value":1344},"　せっかくなので、この清水亮氏の記事の紹介を図解にしてみました（右半分が Mermaid Graphical Editor による編集画面）。",{"type":27,"tag":75,"props":1346,"children":1350},{"src":1347,"alt":1348,"width":1349},"\u002Fimg\u002Fmermaideditor.jpg","Mermaid編集画面","100%",[],{"type":27,"tag":28,"props":1352,"children":1353},{},[1354],{"type":32,"value":1355},"　ブログに埋め込むと、、、",{"type":27,"tag":332,"props":1357,"children":1358},{},[1359],{"type":27,"tag":226,"props":1360,"children":1363},{"className":1361,"code":1362,"language":332,"meta":7},[330],"flowchart TD\n    A[現代のソフトウェア開発の危機] --> B[従来の開発環境の限界]\n    A --> C[AIによるコード生成の加速]\n    \n    B --> B1[柔軟な開発が招く脆弱性とサイバー攻撃]\n    C --> C1[膨大なコードを人間が精査しきれないリスク]\n    \n    B1 --> D[新しいアプローチの必要性]\n    C1 --> D\n    \n    D --> E[\"QED ScriptとQEDOSの思想\"]\n    E --> E1[不要な機能を削ぎ落とし隔離を徹底する]\n    E --> E2[人間やAIを過信せず数学的証明で検証する]\n    \n    E1 --> F[AI時代の強固な信頼性の確立]\n    E2 --> F\n",[1364],{"type":27,"tag":234,"props":1365,"children":1366},{"__ignoreMap":7},[1367],{"type":32,"value":1362},{"type":27,"tag":28,"props":1369,"children":1370},{},[1371],{"type":32,"value":1372},"と表示されます。",{"type":27,"tag":28,"props":1374,"children":1375},{},[1376],{"type":32,"value":1377},"　これなら、あとで見返す場合も一瞬で思い出せるでしょう。",{"type":27,"tag":28,"props":1379,"children":1380},{},[1381],{"type":32,"value":1382},"　このように、クライアントサイドMermaidによって、ブログに簡単・安全に図解を入れられるようになりました。",{"type":27,"tag":28,"props":1384,"children":1385},{},[1386],{"type":32,"value":1387},"　図解を活用した分かりやすいブログにしていきますので、これからも応援よろしくお願いします。",{"type":27,"tag":55,"props":1389,"children":1391},{"id":1390},"zukai",[],{"type":27,"tag":113,"props":1393,"children":1396},{"className":1394},[1395],"kattene",[1397,1399,1415,1416],{"type":32,"value":1398},"\n    ",{"type":27,"tag":113,"props":1400,"children":1403},{"className":1401},[1402],"kattene__imgpart",[1404],{"type":27,"tag":43,"props":1405,"children":1410},{"target":1406,"rel":1407,"href":1409},"_blank",[1408],"noopener","https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F1c31a7e9.545b2c08.1c31a7ea.d83a8f7a\u002F_RTLink50200?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Faf227b86d29ae2e40307721b2ed62d87%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjEsImFtcCI6ZmFsc2V9",[1411],{"type":27,"tag":75,"props":1412,"children":1414},{"src":1413},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F1325\u002F9784798181325_1_122.jpg?_ex=240x240",[],{"type":32,"value":1398},{"type":27,"tag":113,"props":1417,"children":1420},{"className":1418},[1419],"kattene__infopart",[1421,1423,1434,1435,1455,1456,1504],{"type":32,"value":1422},"\n      ",{"type":27,"tag":113,"props":1424,"children":1427},{"className":1425},[1426],"kattene__title",[1428],{"type":27,"tag":43,"props":1429,"children":1431},{"target":1406,"rel":1430,"href":1409},[1408],[1432],{"type":32,"value":1433},"ダイアグラム思考　次世代型リーダーは図解でチームを動かす [ 高野 雄一 ]",{"type":32,"value":1422},{"type":27,"tag":113,"props":1436,"children":1439},{"className":1437},[1438],"kattene__description",[1440,1443,1445,1448,1450,1453],{"type":27,"tag":55,"props":1441,"children":1442},{},[],{"type":32,"value":1444},"※ 教員時代、「思考ツール」と呼ばれる図解の技法がアクティブラーニングに有効としてもてはやされた時期がありました。",{"type":27,"tag":55,"props":1446,"children":1447},{},[],{"type":32,"value":1449},"ハダノはそれより10年以上早くマインドマップに目を付け、活用していました。",{"type":27,"tag":55,"props":1451,"children":1452},{},[],{"type":32,"value":1454},"図解を単なる技法として終わらせず、課題解決力を高める思考法として身につけるには、この本が役立ちます。",{"type":32,"value":1422},{"type":27,"tag":113,"props":1457,"children":1461},{"className":1458},[1459,1460],"kattene__btns","__three",[1462,1464,1476,1478,1490,1491,1503],{"type":32,"value":1463},"\n      \t",{"type":27,"tag":113,"props":1465,"children":1466},{},[1467],{"type":27,"tag":43,"props":1468,"children":1473},{"className":1469,"target":1406,"rel":1472,"href":1409},[1470,1471],"kattene__btn","__red",[1408],[1474],{"type":32,"value":1475},"楽天",{"type":32,"value":1477},"\n        ",{"type":27,"tag":113,"props":1479,"children":1480},{},[1481],{"type":27,"tag":43,"props":1482,"children":1487},{"className":1483,"target":1406,"rel":1485,"href":1486},[1470,1484],"__orange",[1408],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB0CPFG14FF",[1488],{"type":32,"value":1489},"Amazon",{"type":32,"value":1477},{"type":27,"tag":113,"props":1492,"children":1493},{},[1494],{"type":27,"tag":43,"props":1495,"children":1500},{"className":1496,"target":1406,"rel":1498,"href":1499},[1470,1497],"__green",[1408],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Fbookfan%2Fbk-4798181323.html%3Fsc_i%3Dshopping-pc-web-result-item-rsltlst-img",[1501],{"type":32,"value":1502},"Yahoo!",{"type":32,"value":1422},{"type":32,"value":1398},{"type":27,"tag":1337,"props":1506,"children":1507},{},[],{"type":27,"tag":28,"props":1509,"children":1510},{},[1511],{"type":27,"tag":43,"props":1512,"children":1513},{"href":45},[1514],{"type":32,"value":1515},"←前へ　ブログのセキュリティ強化",{"title":7,"searchDepth":394,"depth":394,"links":1517},[1518],{"id":61,"depth":394,"text":9,"children":1519},[1520,1521,1522,1523,1524,1525],{"id":103,"depth":411,"text":106},{"id":443,"depth":411,"text":446},{"id":521,"depth":411,"text":524},{"id":676,"depth":411,"text":679},{"id":991,"depth":411,"text":994},{"id":1160,"depth":411,"text":1163},"markdown","content:articles:blog-5.md","content","articles\u002Fblog-5.md","articles\u002Fblog-5","md",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"category":1533,"tag":1534,"thumbnail":20,"createdAt":21,"updatedAt":22,"body":1535,"_type":1526,"_id":1527,"_source":1528,"_file":1529,"_stem":1530,"_extension":1531},[11],[13,14,15,16,17,18,19],{"type":24,"children":1536,"toc":2711},[1537,1541,1551,1555,1558,1562,1566,1570,1574,1584,1587,1591,1595,1662,1666,1675,1679,1687,1691,1695,1705,1709,1713,1717,1721,1729,1733,1740,1748,1752,1756,1760,1768,1772,1783,1787,1791,1801,1810,1814,1824,1828,1838,1842,1851,1854,1858,1868,1872,1888,1903,1911,1914,1918,1929,1933,1937,1948,1952,1956,1967,1971,1975,1986,1990,1994,2005,2009,2013,2022,2033,2037,2041,2044,2048,2057,2077,2081,2085,2095,2106,2116,2120,2124,2128,2139,2143,2147,2158,2162,2173,2177,2188,2192,2196,2207,2211,2215,2226,2230,2241,2245,2249,2256,2291,2294,2298,2307,2318,2322,2326,2337,2341,2345,2349,2353,2357,2388,2392,2427,2431,2434,2438,2442,2452,2456,2460,2464,2468,2477,2481,2485,2489,2508,2512,2516,2520,2530,2534,2544,2548,2552,2556,2560,2564,2572,2575,2579,2582,2586,2597,2601,2605,2609,2613,2616,2701,2704],{"type":27,"tag":28,"props":1538,"children":1539},{},[1540],{"type":32,"value":33},{"type":27,"tag":35,"props":1542,"children":1543},{},[1544],{"type":27,"tag":39,"props":1545,"children":1546},{},[1547],{"type":27,"tag":43,"props":1548,"children":1549},{"href":45},[1550],{"type":32,"value":48},{"type":27,"tag":28,"props":1552,"children":1553},{},[1554],{"type":32,"value":53},{"type":27,"tag":55,"props":1556,"children":1557},{},[],{"type":27,"tag":59,"props":1559,"children":1560},{"id":61},[1561],{"type":32,"value":9},{"type":27,"tag":28,"props":1563,"children":1564},{},[1565],{"type":32,"value":68},{"type":27,"tag":28,"props":1567,"children":1568},{},[1569],{"type":32,"value":73},{"type":27,"tag":75,"props":1571,"children":1573},{"src":77,"alt":78,"className":1572},[80],[],{"type":27,"tag":28,"props":1575,"children":1576},{},[1577,1578,1583],{"type":32,"value":86},{"type":27,"tag":43,"props":1579,"children":1581},{"href":89,"rel":1580},[91],[1582],{"type":32,"value":94},{"type":32,"value":96},{"type":27,"tag":55,"props":1585,"children":1586},{},[],{"type":27,"tag":101,"props":1588,"children":1589},{"id":103},[1590],{"type":32,"value":106},{"type":27,"tag":28,"props":1592,"children":1593},{},[1594],{"type":32,"value":111},{"type":27,"tag":113,"props":1596,"children":1598},{"className":1597},[116],[1599,1600,1609,1610,1617,1641,1645,1654,1658],{"type":32,"value":119},{"type":27,"tag":113,"props":1601,"children":1603},{"className":1602},[123],[1604,1605,1608],{"type":32,"value":126},{"type":27,"tag":75,"props":1606,"children":1607},{"src":129,"alt":130,"width":131},[],{"type":32,"value":126},{"type":32,"value":135},{"type":27,"tag":28,"props":1611,"children":1612},{},[1613],{"type":27,"tag":140,"props":1614,"children":1615},{},[1616],{"type":32,"value":144},{"type":27,"tag":146,"props":1618,"children":1619},{},[1620,1633],{"type":27,"tag":39,"props":1621,"children":1622},{},[1623,1627,1628,1632],{"type":27,"tag":140,"props":1624,"children":1625},{},[1626],{"type":32,"value":156},{"type":32,"value":158},{"type":27,"tag":140,"props":1629,"children":1630},{},[1631],{"type":32,"value":163},{"type":32,"value":165},{"type":27,"tag":39,"props":1634,"children":1635},{},[1636,1640],{"type":27,"tag":140,"props":1637,"children":1638},{},[1639],{"type":32,"value":173},{"type":32,"value":175},{"type":27,"tag":28,"props":1642,"children":1643},{},[1644],{"type":32,"value":180},{"type":27,"tag":28,"props":1646,"children":1647},{},[1648,1649,1653],{"type":32,"value":185},{"type":27,"tag":140,"props":1650,"children":1651},{},[1652],{"type":32,"value":190},{"type":32,"value":192},{"type":27,"tag":28,"props":1655,"children":1656},{},[1657],{"type":32,"value":197},{"type":27,"tag":28,"props":1659,"children":1660},{},[1661],{"type":32,"value":202},{"type":27,"tag":28,"props":1663,"children":1664},{},[1665],{"type":32,"value":207},{"type":27,"tag":28,"props":1667,"children":1668},{},[1669,1670,1674],{"type":32,"value":212},{"type":27,"tag":140,"props":1671,"children":1672},{},[1673],{"type":32,"value":217},{"type":32,"value":219},{"type":27,"tag":28,"props":1676,"children":1677},{},[1678],{"type":32,"value":224},{"type":27,"tag":226,"props":1680,"children":1682},{"className":1681,"code":230,"language":231,"meta":7},[229],[1683],{"type":27,"tag":234,"props":1684,"children":1685},{"__ignoreMap":7},[1686],{"type":32,"value":230},{"type":27,"tag":28,"props":1688,"children":1689},{},[1690],{"type":32,"value":202},{"type":27,"tag":28,"props":1692,"children":1693},{},[1694],{"type":32,"value":246},{"type":27,"tag":28,"props":1696,"children":1697},{},[1698,1699,1704],{"type":32,"value":212},{"type":27,"tag":234,"props":1700,"children":1702},{"className":1701},[],[1703],{"type":32,"value":256},{"type":32,"value":258},{"type":27,"tag":28,"props":1706,"children":1707},{},[1708],{"type":32,"value":202},{"type":27,"tag":264,"props":1710,"children":1711},{"id":266},[1712],{"type":32,"value":269},{"type":27,"tag":28,"props":1714,"children":1715},{},[1716],{"type":32,"value":274},{"type":27,"tag":28,"props":1718,"children":1719},{},[1720],{"type":32,"value":279},{"type":27,"tag":28,"props":1722,"children":1723},{},[1724],{"type":27,"tag":234,"props":1725,"children":1727},{"className":1726},[],[1728],{"type":32,"value":288},{"type":27,"tag":28,"props":1730,"children":1731},{},[1732],{"type":32,"value":202},{"type":27,"tag":28,"props":1734,"children":1735},{},[1736],{"type":27,"tag":140,"props":1737,"children":1738},{},[1739],{"type":32,"value":300},{"type":27,"tag":226,"props":1741,"children":1743},{"className":1742,"code":305,"language":306,"meta":7},[304],[1744],{"type":27,"tag":234,"props":1745,"children":1746},{"__ignoreMap":7},[1747],{"type":32,"value":305},{"type":27,"tag":28,"props":1749,"children":1750},{},[1751],{"type":32,"value":202},{"type":27,"tag":264,"props":1753,"children":1754},{"id":318},[1755],{"type":32,"value":321},{"type":27,"tag":28,"props":1757,"children":1758},{},[1759],{"type":32,"value":326},{"type":27,"tag":226,"props":1761,"children":1763},{"className":1762,"code":331,"language":332,"meta":7},[330],[1764],{"type":27,"tag":234,"props":1765,"children":1766},{"__ignoreMap":7},[1767],{"type":32,"value":331},{"type":27,"tag":28,"props":1769,"children":1770},{},[1771],{"type":32,"value":342},{"type":27,"tag":332,"props":1773,"children":1774},{},[1775],{"type":27,"tag":226,"props":1776,"children":1778},{"className":1777,"code":331,"language":332,"meta":7},[330],[1779],{"type":27,"tag":234,"props":1780,"children":1781},{"__ignoreMap":7},[1782],{"type":32,"value":331},{"type":27,"tag":28,"props":1784,"children":1785},{},[1786],{"type":32,"value":202},{"type":27,"tag":264,"props":1788,"children":1789},{"id":360},[1790],{"type":32,"value":363},{"type":27,"tag":146,"props":1792,"children":1793},{},[1794],{"type":27,"tag":39,"props":1795,"children":1796},{},[1797],{"type":27,"tag":140,"props":1798,"children":1799},{},[1800],{"type":32,"value":374},{"type":27,"tag":28,"props":1802,"children":1803},{},[1804,1805,1809],{"type":32,"value":379},{"type":27,"tag":140,"props":1806,"children":1807},{},[1808],{"type":32,"value":384},{"type":32,"value":386},{"type":27,"tag":28,"props":1811,"children":1812},{},[1813],{"type":32,"value":391},{"type":27,"tag":146,"props":1815,"children":1816},{"start":394},[1817],{"type":27,"tag":39,"props":1818,"children":1819},{},[1820],{"type":27,"tag":140,"props":1821,"children":1822},{},[1823],{"type":32,"value":403},{"type":27,"tag":28,"props":1825,"children":1826},{},[1827],{"type":32,"value":408},{"type":27,"tag":146,"props":1829,"children":1830},{"start":411},[1831],{"type":27,"tag":39,"props":1832,"children":1833},{},[1834],{"type":27,"tag":140,"props":1835,"children":1836},{},[1837],{"type":32,"value":420},{"type":27,"tag":28,"props":1839,"children":1840},{},[1841],{"type":32,"value":425},{"type":27,"tag":28,"props":1843,"children":1844},{},[1845,1846,1850],{"type":32,"value":430},{"type":27,"tag":140,"props":1847,"children":1848},{},[1849],{"type":32,"value":435},{"type":32,"value":437},{"type":27,"tag":55,"props":1852,"children":1853},{},[],{"type":27,"tag":101,"props":1855,"children":1856},{"id":443},[1857],{"type":32,"value":446},{"type":27,"tag":28,"props":1859,"children":1860},{},[1861,1862,1867],{"type":32,"value":451},{"type":27,"tag":234,"props":1863,"children":1865},{"className":1864},[],[1866],{"type":32,"value":457},{"type":32,"value":459},{"type":27,"tag":264,"props":1869,"children":1870},{"id":462},[1871],{"type":32,"value":465},{"type":27,"tag":28,"props":1873,"children":1874},{},[1875,1876,1881,1882,1887],{"type":32,"value":470},{"type":27,"tag":234,"props":1877,"children":1879},{"className":1878},[],[1880],{"type":32,"value":476},{"type":32,"value":478},{"type":27,"tag":234,"props":1883,"children":1885},{"className":1884},[],[1886],{"type":32,"value":484},{"type":32,"value":486},{"type":27,"tag":146,"props":1889,"children":1890},{},[1891,1895,1899],{"type":27,"tag":39,"props":1892,"children":1893},{},[1894],{"type":32,"value":494},{"type":27,"tag":39,"props":1896,"children":1897},{},[1898],{"type":32,"value":499},{"type":27,"tag":39,"props":1900,"children":1901},{},[1902],{"type":32,"value":504},{"type":27,"tag":226,"props":1904,"children":1906},{"className":1905,"code":509,"language":510,"meta":7},[508],[1907],{"type":27,"tag":234,"props":1908,"children":1909},{"__ignoreMap":7},[1910],{"type":32,"value":509},{"type":27,"tag":55,"props":1912,"children":1913},{},[],{"type":27,"tag":101,"props":1915,"children":1916},{"id":521},[1917],{"type":32,"value":524},{"type":27,"tag":35,"props":1919,"children":1920},{},[1921],{"type":27,"tag":39,"props":1922,"children":1923},{},[1924],{"type":27,"tag":43,"props":1925,"children":1927},{"href":533,"rel":1926},[91],[1928],{"type":32,"value":537},{"type":27,"tag":28,"props":1930,"children":1931},{},[1932],{"type":32,"value":542},{"type":27,"tag":28,"props":1934,"children":1935},{},[1936],{"type":32,"value":547},{"type":27,"tag":332,"props":1938,"children":1939},{},[1940],{"type":27,"tag":226,"props":1941,"children":1943},{"className":1942,"code":554,"language":332,"meta":7},[330],[1944],{"type":27,"tag":234,"props":1945,"children":1946},{"__ignoreMap":7},[1947],{"type":32,"value":554},{"type":27,"tag":28,"props":1949,"children":1950},{},[1951],{"type":32,"value":564},{"type":27,"tag":28,"props":1953,"children":1954},{},[1955],{"type":32,"value":569},{"type":27,"tag":332,"props":1957,"children":1958},{},[1959],{"type":27,"tag":226,"props":1960,"children":1962},{"className":1961,"code":576,"language":332,"meta":7},[330],[1963],{"type":27,"tag":234,"props":1964,"children":1965},{"__ignoreMap":7},[1966],{"type":32,"value":576},{"type":27,"tag":28,"props":1968,"children":1969},{},[1970],{"type":32,"value":586},{"type":27,"tag":28,"props":1972,"children":1973},{},[1974],{"type":32,"value":591},{"type":27,"tag":332,"props":1976,"children":1977},{},[1978],{"type":27,"tag":226,"props":1979,"children":1981},{"className":1980,"code":598,"language":332,"meta":7},[330],[1982],{"type":27,"tag":234,"props":1983,"children":1984},{"__ignoreMap":7},[1985],{"type":32,"value":598},{"type":27,"tag":28,"props":1987,"children":1988},{},[1989],{"type":32,"value":608},{"type":27,"tag":28,"props":1991,"children":1992},{},[1993],{"type":32,"value":613},{"type":27,"tag":332,"props":1995,"children":1996},{},[1997],{"type":27,"tag":226,"props":1998,"children":2000},{"className":1999,"code":620,"language":332,"meta":7},[330],[2001],{"type":27,"tag":234,"props":2002,"children":2003},{"__ignoreMap":7},[2004],{"type":32,"value":620},{"type":27,"tag":28,"props":2006,"children":2007},{},[2008],{"type":32,"value":630},{"type":27,"tag":28,"props":2010,"children":2011},{},[2012],{"type":32,"value":635},{"type":27,"tag":28,"props":2014,"children":2015},{},[2016,2017,2021],{"type":32,"value":640},{"type":27,"tag":43,"props":2018,"children":2019},{"href":643},[2020],{"type":32,"value":646},{"type":32,"value":648},{"type":27,"tag":332,"props":2023,"children":2024},{},[2025],{"type":27,"tag":226,"props":2026,"children":2028},{"className":2027,"code":655,"language":332,"meta":7},[330],[2029],{"type":27,"tag":234,"props":2030,"children":2031},{"__ignoreMap":7},[2032],{"type":32,"value":655},{"type":27,"tag":28,"props":2034,"children":2035},{},[2036],{"type":32,"value":665},{"type":27,"tag":28,"props":2038,"children":2039},{},[2040],{"type":32,"value":670},{"type":27,"tag":55,"props":2042,"children":2043},{},[],{"type":27,"tag":101,"props":2045,"children":2046},{"id":676},[2047],{"type":32,"value":679},{"type":27,"tag":28,"props":2049,"children":2050},{},[2051,2052,2056],{"type":32,"value":212},{"type":27,"tag":43,"props":2053,"children":2054},{"href":686},[2055],{"type":32,"value":689},{"type":32,"value":691},{"type":27,"tag":35,"props":2058,"children":2059},{},[2060,2069,2073],{"type":27,"tag":39,"props":2061,"children":2062},{},[2063,2064,2068],{"type":32,"value":699},{"type":27,"tag":140,"props":2065,"children":2066},{},[2067],{"type":32,"value":704},{"type":32,"value":706},{"type":27,"tag":39,"props":2070,"children":2071},{},[2072],{"type":32,"value":711},{"type":27,"tag":39,"props":2074,"children":2075},{},[2076],{"type":32,"value":716},{"type":27,"tag":28,"props":2078,"children":2079},{},[2080],{"type":32,"value":721},{"type":27,"tag":75,"props":2082,"children":2084},{"src":724,"alt":725,"className":2083},[80],[],{"type":27,"tag":28,"props":2086,"children":2087},{},[2088,2089,2094],{"type":32,"value":732},{"type":27,"tag":234,"props":2090,"children":2092},{"className":2091},[],[2093],{"type":32,"value":738},{"type":32,"value":740},{"type":27,"tag":35,"props":2096,"children":2097},{},[2098],{"type":27,"tag":39,"props":2099,"children":2100},{},[2101],{"type":27,"tag":43,"props":2102,"children":2104},{"href":749,"rel":2103},[91],[2105],{"type":32,"value":753},{"type":27,"tag":28,"props":2107,"children":2108},{},[2109,2110,2115],{"type":32,"value":758},{"type":27,"tag":234,"props":2111,"children":2113},{"className":2112},[],[2114],{"type":32,"value":764},{"type":32,"value":766},{"type":27,"tag":28,"props":2117,"children":2118},{},[2119],{"type":32,"value":771},{"type":27,"tag":75,"props":2121,"children":2123},{"src":774,"alt":775,"className":2122},[80],[],{"type":27,"tag":264,"props":2125,"children":2126},{"id":780},[2127],{"type":32,"value":783},{"type":27,"tag":146,"props":2129,"children":2130},{},[2131],{"type":27,"tag":39,"props":2132,"children":2133},{},[2134,2138],{"type":27,"tag":140,"props":2135,"children":2136},{},[2137],{"type":32,"value":794},{"type":32,"value":796},{"type":27,"tag":28,"props":2140,"children":2141},{},[2142],{"type":32,"value":801},{"type":27,"tag":28,"props":2144,"children":2145},{},[2146],{"type":32,"value":806},{"type":27,"tag":146,"props":2148,"children":2149},{"start":394},[2150],{"type":27,"tag":39,"props":2151,"children":2152},{},[2153,2157],{"type":27,"tag":140,"props":2154,"children":2155},{},[2156],{"type":32,"value":817},{"type":32,"value":819},{"type":27,"tag":28,"props":2159,"children":2160},{},[2161],{"type":32,"value":824},{"type":27,"tag":146,"props":2163,"children":2164},{"start":411},[2165],{"type":27,"tag":39,"props":2166,"children":2167},{},[2168,2172],{"type":27,"tag":140,"props":2169,"children":2170},{},[2171],{"type":32,"value":835},{"type":32,"value":819},{"type":27,"tag":28,"props":2174,"children":2175},{},[2176],{"type":32,"value":841},{"type":27,"tag":146,"props":2178,"children":2179},{"start":844},[2180],{"type":27,"tag":39,"props":2181,"children":2182},{},[2183,2187],{"type":27,"tag":140,"props":2184,"children":2185},{},[2186],{"type":32,"value":853},{"type":32,"value":855},{"type":27,"tag":28,"props":2189,"children":2190},{},[2191],{"type":32,"value":860},{"type":27,"tag":28,"props":2193,"children":2194},{},[2195],{"type":32,"value":865},{"type":27,"tag":146,"props":2197,"children":2198},{"start":868},[2199],{"type":27,"tag":39,"props":2200,"children":2201},{},[2202,2206],{"type":27,"tag":140,"props":2203,"children":2204},{},[2205],{"type":32,"value":877},{"type":32,"value":879},{"type":27,"tag":28,"props":2208,"children":2209},{},[2210],{"type":32,"value":884},{"type":27,"tag":28,"props":2212,"children":2213},{},[2214],{"type":32,"value":889},{"type":27,"tag":146,"props":2216,"children":2217},{"start":892},[2218],{"type":27,"tag":39,"props":2219,"children":2220},{},[2221,2225],{"type":27,"tag":140,"props":2222,"children":2223},{},[2224],{"type":32,"value":901},{"type":32,"value":903},{"type":27,"tag":28,"props":2227,"children":2228},{},[2229],{"type":32,"value":908},{"type":27,"tag":146,"props":2231,"children":2232},{"start":911},[2233],{"type":27,"tag":39,"props":2234,"children":2235},{},[2236,2240],{"type":27,"tag":140,"props":2237,"children":2238},{},[2239],{"type":32,"value":920},{"type":32,"value":922},{"type":27,"tag":28,"props":2242,"children":2243},{},[2244],{"type":32,"value":927},{"type":27,"tag":75,"props":2246,"children":2248},{"src":930,"alt":931,"className":2247},[80],[],{"type":27,"tag":146,"props":2250,"children":2251},{"start":936},[2252],{"type":27,"tag":39,"props":2253,"children":2254},{},[2255],{"type":32,"value":942},{"type":27,"tag":35,"props":2257,"children":2258},{},[2259,2275],{"type":27,"tag":39,"props":2260,"children":2261},{},[2262,2263],{"type":32,"value":950},{"type":27,"tag":35,"props":2264,"children":2265},{},[2266],{"type":27,"tag":39,"props":2267,"children":2268},{},[2269,2270,2274],{"type":32,"value":958},{"type":27,"tag":140,"props":2271,"children":2272},{},[2273],{"type":32,"value":963},{"type":32,"value":965},{"type":27,"tag":39,"props":2276,"children":2277},{},[2278,2279],{"type":32,"value":970},{"type":27,"tag":35,"props":2280,"children":2281},{},[2282],{"type":27,"tag":39,"props":2283,"children":2284},{},[2285,2286,2290],{"type":32,"value":978},{"type":27,"tag":140,"props":2287,"children":2288},{},[2289],{"type":32,"value":983},{"type":32,"value":985},{"type":27,"tag":55,"props":2292,"children":2293},{},[],{"type":27,"tag":101,"props":2295,"children":2296},{"id":991},[2297],{"type":32,"value":994},{"type":27,"tag":28,"props":2299,"children":2300},{},[2301,2302,2306],{"type":32,"value":999},{"type":27,"tag":140,"props":2303,"children":2304},{},[2305],{"type":32,"value":384},{"type":32,"value":1005},{"type":27,"tag":35,"props":2308,"children":2309},{},[2310],{"type":27,"tag":39,"props":2311,"children":2312},{},[2313],{"type":27,"tag":43,"props":2314,"children":2316},{"href":1014,"rel":2315},[91],[2317],{"type":32,"value":1018},{"type":27,"tag":28,"props":2319,"children":2320},{},[2321],{"type":32,"value":1023},{"type":27,"tag":28,"props":2323,"children":2324},{},[2325],{"type":32,"value":1028},{"type":27,"tag":35,"props":2327,"children":2328},{},[2329],{"type":27,"tag":39,"props":2330,"children":2331},{},[2332],{"type":27,"tag":43,"props":2333,"children":2335},{"href":1037,"rel":2334},[91],[2336],{"type":32,"value":1041},{"type":27,"tag":28,"props":2338,"children":2339},{},[2340],{"type":32,"value":1046},{"type":27,"tag":75,"props":2342,"children":2344},{"src":1049,"alt":1050,"className":2343},[1052],[],{"type":27,"tag":28,"props":2346,"children":2347},{},[2348],{"type":32,"value":1058},{"type":27,"tag":264,"props":2350,"children":2351},{"id":1061},[2352],{"type":32,"value":1064},{"type":27,"tag":28,"props":2354,"children":2355},{},[2356],{"type":32,"value":1069},{"type":27,"tag":35,"props":2358,"children":2359},{},[2360,2374],{"type":27,"tag":39,"props":2361,"children":2362},{},[2363,2367],{"type":27,"tag":140,"props":2364,"children":2365},{},[2366],{"type":32,"value":1080},{"type":27,"tag":35,"props":2368,"children":2369},{},[2370],{"type":27,"tag":39,"props":2371,"children":2372},{},[2373],{"type":32,"value":1088},{"type":27,"tag":39,"props":2375,"children":2376},{},[2377,2381],{"type":27,"tag":140,"props":2378,"children":2379},{},[2380],{"type":32,"value":1096},{"type":27,"tag":35,"props":2382,"children":2383},{},[2384],{"type":27,"tag":39,"props":2385,"children":2386},{},[2387],{"type":32,"value":1104},{"type":27,"tag":264,"props":2389,"children":2390},{"id":1107},[2391],{"type":32,"value":1110},{"type":27,"tag":35,"props":2393,"children":2394},{},[2395,2409],{"type":27,"tag":39,"props":2396,"children":2397},{},[2398,2402],{"type":27,"tag":140,"props":2399,"children":2400},{},[2401],{"type":32,"value":1121},{"type":27,"tag":35,"props":2403,"children":2404},{},[2405],{"type":27,"tag":39,"props":2406,"children":2407},{},[2408],{"type":32,"value":1129},{"type":27,"tag":39,"props":2410,"children":2411},{},[2412,2416],{"type":27,"tag":140,"props":2413,"children":2414},{},[2415],{"type":32,"value":1121},{"type":27,"tag":35,"props":2417,"children":2418},{},[2419,2423],{"type":27,"tag":39,"props":2420,"children":2421},{},[2422],{"type":32,"value":1144},{"type":27,"tag":39,"props":2424,"children":2425},{},[2426],{"type":32,"value":1149},{"type":27,"tag":28,"props":2428,"children":2429},{},[2430],{"type":32,"value":1154},{"type":27,"tag":55,"props":2432,"children":2433},{},[],{"type":27,"tag":101,"props":2435,"children":2436},{"id":1160},[2437],{"type":32,"value":1163},{"type":27,"tag":28,"props":2439,"children":2440},{},[2441],{"type":32,"value":1168},{"type":27,"tag":28,"props":2443,"children":2444},{},[2445,2446,2451],{"type":32,"value":212},{"type":27,"tag":43,"props":2447,"children":2449},{"href":1175,"rel":2448},[91],[2450],{"type":32,"value":1179},{"type":32,"value":1181},{"type":27,"tag":75,"props":2453,"children":2455},{"src":1184,"alt":1185,"className":2454},[1052],[],{"type":27,"tag":264,"props":2457,"children":2458},{"id":1190},[2459],{"type":32,"value":1193},{"type":27,"tag":28,"props":2461,"children":2462},{},[2463],{"type":32,"value":1198},{"type":27,"tag":28,"props":2465,"children":2466},{},[2467],{"type":32,"value":1203},{"type":27,"tag":28,"props":2469,"children":2470},{},[2471,2472,2476],{"type":32,"value":1208},{"type":27,"tag":140,"props":2473,"children":2474},{},[2475],{"type":32,"value":1213},{"type":32,"value":1215},{"type":27,"tag":264,"props":2478,"children":2479},{"id":1218},[2480],{"type":32,"value":1221},{"type":27,"tag":28,"props":2482,"children":2483},{},[2484],{"type":32,"value":1226},{"type":27,"tag":28,"props":2486,"children":2487},{},[2488],{"type":32,"value":1231},{"type":27,"tag":35,"props":2490,"children":2491},{},[2492,2500],{"type":27,"tag":39,"props":2493,"children":2494},{},[2495,2499],{"type":27,"tag":140,"props":2496,"children":2497},{},[2498],{"type":32,"value":1242},{"type":32,"value":1244},{"type":27,"tag":39,"props":2501,"children":2502},{},[2503,2507],{"type":27,"tag":140,"props":2504,"children":2505},{},[2506],{"type":32,"value":1252},{"type":32,"value":1254},{"type":27,"tag":28,"props":2509,"children":2510},{},[2511],{"type":32,"value":1259},{"type":27,"tag":264,"props":2513,"children":2514},{"id":1262},[2515],{"type":32,"value":1265},{"type":27,"tag":28,"props":2517,"children":2518},{},[2519],{"type":32,"value":1270},{"type":27,"tag":35,"props":2521,"children":2522},{},[2523],{"type":27,"tag":39,"props":2524,"children":2525},{},[2526],{"type":27,"tag":140,"props":2527,"children":2528},{},[2529],{"type":32,"value":1281},{"type":27,"tag":28,"props":2531,"children":2532},{},[2533],{"type":32,"value":1286},{"type":27,"tag":35,"props":2535,"children":2536},{},[2537],{"type":27,"tag":39,"props":2538,"children":2539},{},[2540],{"type":27,"tag":140,"props":2541,"children":2542},{},[2543],{"type":32,"value":1297},{"type":27,"tag":28,"props":2545,"children":2546},{},[2547],{"type":32,"value":1302},{"type":27,"tag":264,"props":2549,"children":2550},{"id":1305},[2551],{"type":32,"value":1308},{"type":27,"tag":28,"props":2553,"children":2554},{},[2555],{"type":32,"value":1313},{"type":27,"tag":75,"props":2557,"children":2559},{"src":1316,"alt":1317,"className":2558},[1052],[],{"type":27,"tag":28,"props":2561,"children":2562},{},[2563],{"type":32,"value":1324},{"type":27,"tag":28,"props":2565,"children":2566},{},[2567,2568],{"type":32,"value":1329},{"type":27,"tag":43,"props":2569,"children":2570},{"href":1332},[2571],{"type":32,"value":1335},{"type":27,"tag":1337,"props":2573,"children":2574},{},[],{"type":27,"tag":28,"props":2576,"children":2577},{},[2578],{"type":32,"value":1344},{"type":27,"tag":75,"props":2580,"children":2581},{"src":1347,"alt":1348,"width":1349},[],{"type":27,"tag":28,"props":2583,"children":2584},{},[2585],{"type":32,"value":1355},{"type":27,"tag":332,"props":2587,"children":2588},{},[2589],{"type":27,"tag":226,"props":2590,"children":2592},{"className":2591,"code":1362,"language":332,"meta":7},[330],[2593],{"type":27,"tag":234,"props":2594,"children":2595},{"__ignoreMap":7},[2596],{"type":32,"value":1362},{"type":27,"tag":28,"props":2598,"children":2599},{},[2600],{"type":32,"value":1372},{"type":27,"tag":28,"props":2602,"children":2603},{},[2604],{"type":32,"value":1377},{"type":27,"tag":28,"props":2606,"children":2607},{},[2608],{"type":32,"value":1382},{"type":27,"tag":28,"props":2610,"children":2611},{},[2612],{"type":32,"value":1387},{"type":27,"tag":55,"props":2614,"children":2615},{"id":1390},[],{"type":27,"tag":113,"props":2617,"children":2619},{"className":2618},[1395],[2620,2621,2632,2633],{"type":32,"value":1398},{"type":27,"tag":113,"props":2622,"children":2624},{"className":2623},[1402],[2625],{"type":27,"tag":43,"props":2626,"children":2628},{"target":1406,"rel":2627,"href":1409},[1408],[2629],{"type":27,"tag":75,"props":2630,"children":2631},{"src":1413},[],{"type":32,"value":1398},{"type":27,"tag":113,"props":2634,"children":2636},{"className":2635},[1419],[2637,2638,2647,2648,2664,2665,2700],{"type":32,"value":1422},{"type":27,"tag":113,"props":2639,"children":2641},{"className":2640},[1426],[2642],{"type":27,"tag":43,"props":2643,"children":2645},{"target":1406,"rel":2644,"href":1409},[1408],[2646],{"type":32,"value":1433},{"type":32,"value":1422},{"type":27,"tag":113,"props":2649,"children":2651},{"className":2650},[1438],[2652,2655,2656,2659,2660,2663],{"type":27,"tag":55,"props":2653,"children":2654},{},[],{"type":32,"value":1444},{"type":27,"tag":55,"props":2657,"children":2658},{},[],{"type":32,"value":1449},{"type":27,"tag":55,"props":2661,"children":2662},{},[],{"type":32,"value":1454},{"type":32,"value":1422},{"type":27,"tag":113,"props":2666,"children":2668},{"className":2667},[1459,1460],[2669,2670,2679,2680,2689,2690,2699],{"type":32,"value":1463},{"type":27,"tag":113,"props":2671,"children":2672},{},[2673],{"type":27,"tag":43,"props":2674,"children":2677},{"className":2675,"target":1406,"rel":2676,"href":1409},[1470,1471],[1408],[2678],{"type":32,"value":1475},{"type":32,"value":1477},{"type":27,"tag":113,"props":2681,"children":2682},{},[2683],{"type":27,"tag":43,"props":2684,"children":2687},{"className":2685,"target":1406,"rel":2686,"href":1486},[1470,1484],[1408],[2688],{"type":32,"value":1489},{"type":32,"value":1477},{"type":27,"tag":113,"props":2691,"children":2692},{},[2693],{"type":27,"tag":43,"props":2694,"children":2697},{"className":2695,"target":1406,"rel":2696,"href":1499},[1470,1497],[1408],[2698],{"type":32,"value":1502},{"type":32,"value":1422},{"type":32,"value":1398},{"type":27,"tag":1337,"props":2702,"children":2703},{},[],{"type":27,"tag":28,"props":2705,"children":2706},{},[2707],{"type":27,"tag":43,"props":2708,"children":2709},{"href":45},[2710],{"type":32,"value":1515},{"title":7,"searchDepth":394,"depth":394,"links":2712},[2713],{"id":61,"depth":394,"text":9,"children":2714},[2715,2716,2717,2718,2719,2720],{"id":103,"depth":411,"text":106},{"id":443,"depth":411,"text":446},{"id":521,"depth":411,"text":524},{"id":676,"depth":411,"text":679},{"id":991,"depth":411,"text":994},{"id":1160,"depth":411,"text":1163},1793696554609]