[{"data":1,"prerenderedAt":1204},["ShallowReactive",2],{"content-/drawio-implementation-evaluation":3,"all-pages-for-dir":1182,"related-/drawio-implementation-evaluation":1183,"og-image-/drawio-implementation-evaluation":1203},{"id":4,"title":5,"body":6,"category":1168,"concepts":1168,"description":1169,"extension":1170,"meta":1171,"navigation":994,"ogImage":1168,"path":1172,"project_name":1168,"published":1173,"publishedAt":1174,"seo":1175,"source":1168,"stem":1176,"tags":1177,"todo":1168,"unpublished":1173,"updatedAt":1168,"__hash__":1181},"pages/2025-11/2025-11-19/drawio-implementation-evaluation.md","Draw.io動的埋め込み：調査と実装の比較評価",{"type":7,"value":8,"toc":1148},"minimark",[9,13,17,30,33,40,43,46,51,126,135,138,142,147,153,159,164,181,186,196,201,225,230,241,245,249,401,405,419,424,428,513,518,526,530,533,538,544,550,554,562,566,570,576,580,585,601,605,613,617,622,628,633,639,643,651,655,658,663,669,675,680,688,693,699,704,708,716,721,727,732,740,743,747,753,761,766,774,778,918,923,931,935,938,946,949,953,962,968,973,1087,1093,1096,1099,1138,1144],[10,11,5],"h1",{"id":12},"drawio動的埋め込み調査と実装の比較評価",[14,15,16],"h2",{"id":16},"概要",[18,19,20,21,25,26,29],"p",{},"このドキュメントは、調査レポート（",[22,23,24],"code",{},"drawio-dynamic-embedding-research.md","）で提案された方法と、実際に採用した実装（",[22,27,28],{},"drawio-embedding-implementation.md","）を比較評価し、理論と実践のギャップを分析します。",[14,31,32],{"id":32},"評価サマリー",[18,34,35,39],{},[36,37,38],"strong",{},"総合評価",": ⭐⭐⭐⭐⭐ (5/5)",[18,41,42],{},"調査レポートの提案は実践的で、想定された課題も的確でした。実装では調査で提案された方法をそのまま採用し、予想通りの課題が発生したものの、調査段階で検討した解決策により全て解決できました。",[14,44,45],{"id":45},"比較評価",[47,48,50],"h3",{"id":49},"_1-採用した方式","1. 採用した方式",[52,53,54,73],"table",{},[55,56,57],"thead",{},[58,59,60,64,67,70],"tr",{},[61,62,63],"th",{},"項目",[61,65,66],{},"調査レポートの提案",[61,68,69],{},"実装",[61,71,72],{},"一致度",[74,75,76,90,102,114],"tbody",{},[58,77,78,82,85,87],{},[79,80,81],"td",{},"コアライブラリ",[79,83,84],{},"viewer-static.min.js",[79,86,84],{},[79,88,89],{},"✅ 100%",[58,91,92,95,98,100],{},[79,93,94],{},"データ取得方法",[79,96,97],{},"fetch API",[79,99,97],{},[79,101,89],{},[58,103,104,107,110,112],{},[79,105,106],{},"配信方法",[79,108,109],{},"サーバーミドルウェア",[79,111,109],{},[79,113,89],{},[58,115,116,119,122,124],{},[79,117,118],{},"data-mxgraph構造",[79,120,121],{},"JSON形式",[79,123,121],{},[79,125,89],{},[18,127,128,131,132],{},[36,129,130],{},"評価",": ✅ ",[36,133,134],{},"完全一致",[18,136,137],{},"調査段階で提案されたviewer-static.min.js方式をそのまま採用し、想定通りの動作を実現しました。",[47,139,141],{"id":140},"_2-想定された課題と実際","2. 想定された課題と実際",[143,144,146],"h4",{"id":145},"課題1-キャッシュ問題","課題1: キャッシュ問題",[18,148,149,152],{},[36,150,151],{},"調査時の予想",":",[154,155,156],"blockquote",{},[18,157,158],{},"⚠️ 初回ロード時間: JavaScriptライブラリのロードに若干時間がかかる",[18,160,161,152],{},[36,162,163],{},"実際に発生した問題",[165,166,167,171,178],"ul",{},[168,169,170],"li",{},"✅ 予想的中（ただし別の側面で）",[168,172,173,174,177],{},"サーバーの",[22,175,176],{},"cache-control: max-age=31536000","により、.drawioファイル自体がキャッシュされ、編集が反映されない",[168,179,180],{},"ブラウザのfetchもキャッシュを使用",[18,182,183,152],{},[36,184,185],{},"調査での言及",[187,188,193],"pre",{"className":189,"code":191,"language":192},[190],"language-text","✅ **動的更新**: ファイルを編集してページをリロードするだけで反映\n","text",[22,194,191],{"__ignoreMap":195},"",[18,197,198,152],{},[36,199,200],{},"実装での解決",[202,203,204,211,222],"ol",{},[168,205,206,207,210],{},"開発環境で",[22,208,209],{},"no-cache, no-store, must-revalidate","を設定",[168,212,213,214,217,218,221],{},"Vueコンポーネントで",[22,215,216],{},"cache: 'no-store'","とキャッシュバスティング（",[22,219,220],{},"?t=${Date.now()}","）を追加",[168,223,224],{},"サーバーミドルウェアでクエリパラメータ対応",[18,226,227,229],{},[36,228,130],{},": ⭐⭐⭐⭐☆ (4/5)",[165,231,232,235,238],{},[168,233,234],{},"調査時に「動的更新」の実現を明記していたが、キャッシュの具体的な対処までは記載されていなかった",[168,236,237],{},"ただし、実装で直面した課題は調査段階で予測可能な範囲内",[168,239,240],{},"解決策も標準的なWebキャッシュ制御の範囲",[143,242,244],{"id":243},"課題2-本番環境での配信","課題2: 本番環境での配信",[18,246,247,152],{},[36,248,151],{},[187,250,254],{"className":251,"code":252,"language":253,"meta":195,"style":195},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// server/middleware/content-images.ts\nconst match = url.match(/^\\/(\\d{4}-\\d{2}-\\d{2})\\/([^/]+\\.(png|jpg|jpeg|gif|webp|svg|drawio))$/i)\n","typescript",[22,255,256,265],{"__ignoreMap":195},[257,258,261],"span",{"class":259,"line":260},"line",1,[257,262,264],{"class":263},"sxvE3","// server/middleware/content-images.ts\n",[257,266,268,272,276,280,283,286,289,292,296,300,304,306,310,314,318,320,323,325,327,329,332,334,337,339,342,345,348,351,353,356,359,362,364,367,369,372,374,377,379,382,384,387,390,393,395,398],{"class":259,"line":267},2,[257,269,271],{"class":270},"stQ0i","const ",[257,273,275],{"class":274},"s4oTP","match",[257,277,279],{"class":278},"shFtX"," =",[257,281,282],{"class":274}," url",[257,284,285],{"class":278},".",[257,287,275],{"class":288},"senZ8",[257,290,291],{"class":278},"(",[257,293,295],{"class":294},"sMJiu","/",[257,297,299],{"class":298},"sHkkW","^",[257,301,303],{"class":302},"svWSF","\\/",[257,305,291],{"class":278},[257,307,309],{"class":308},"she3A","\\d",[257,311,313],{"class":312},"sM54T","{4}",[257,315,317],{"class":316},"sLkVR","-",[257,319,309],{"class":308},[257,321,322],{"class":312},"{2}",[257,324,317],{"class":316},[257,326,309],{"class":308},[257,328,322],{"class":312},[257,330,331],{"class":278},")",[257,333,303],{"class":302},[257,335,336],{"class":278},"([",[257,338,299],{"class":270},[257,340,295],{"class":341},"snbK4",[257,343,344],{"class":278},"]",[257,346,347],{"class":312},"+",[257,349,350],{"class":302},"\\.",[257,352,291],{"class":278},[257,354,355],{"class":316},"png",[257,357,358],{"class":270},"|",[257,360,361],{"class":316},"jpg",[257,363,358],{"class":270},[257,365,366],{"class":316},"jpeg",[257,368,358],{"class":270},[257,370,371],{"class":316},"gif",[257,373,358],{"class":270},[257,375,376],{"class":316},"webp",[257,378,358],{"class":270},[257,380,381],{"class":316},"svg",[257,383,358],{"class":270},[257,385,386],{"class":316},"drawio",[257,388,389],{"class":278},"))",[257,391,392],{"class":298},"$",[257,394,295],{"class":294},[257,396,397],{"class":298},"i",[257,399,400],{"class":278},")\n",[18,402,403,152],{},[36,404,163],{},[165,406,407,410,416],{},[168,408,409],{},"❌ 調査で想定されていなかった",[168,411,412,415],{},[22,413,414],{},"nuxt.config.ts","のNitroフックで.drawioファイルがコピーされていなかった",[168,417,418],{},"本番環境で「Not a diagram file」エラー",[18,420,421,423],{},[36,422,185],{},": なし",[18,425,426,152],{},[36,427,200],{},[187,429,431],{"className":251,"code":430,"language":253,"meta":195,"style":195},"// nuxt.config.ts\n} else if (/\\.(png|jpg|jpeg|gif|webp|svg|drawio)$/i.test(entry.name)) {\n",[22,432,433,438],{"__ignoreMap":195},[257,434,435],{"class":259,"line":260},[257,436,437],{"class":263},"// nuxt.config.ts\n",[257,439,440,444,447,450,453,455,457,459,461,463,465,467,469,471,473,475,477,479,481,483,485,487,489,491,493,495,498,500,503,505,508,510],{"class":259,"line":267},[257,441,443],{"class":442},"sG7-3","} ",[257,445,446],{"class":298},"else",[257,448,449],{"class":298}," if",[257,451,452],{"class":278}," (",[257,454,295],{"class":294},[257,456,350],{"class":302},[257,458,291],{"class":278},[257,460,355],{"class":316},[257,462,358],{"class":270},[257,464,361],{"class":316},[257,466,358],{"class":270},[257,468,366],{"class":316},[257,470,358],{"class":270},[257,472,371],{"class":316},[257,474,358],{"class":270},[257,476,376],{"class":316},[257,478,358],{"class":270},[257,480,381],{"class":316},[257,482,358],{"class":270},[257,484,386],{"class":316},[257,486,331],{"class":278},[257,488,392],{"class":298},[257,490,295],{"class":294},[257,492,397],{"class":298},[257,494,285],{"class":278},[257,496,497],{"class":288},"test",[257,499,291],{"class":278},[257,501,502],{"class":274},"entry",[257,504,285],{"class":278},[257,506,507],{"class":274},"name",[257,509,389],{"class":278},[257,511,512],{"class":278}," {\n",[18,514,515,517],{},[36,516,130],{},": ⭐⭐⭐☆☆ (3/5)",[165,519,520,523],{},[168,521,522],{},"調査時にビルドプロセスまでは検討されていなかった",[168,524,525],{},"ただし、ミドルウェアで.drawioを扱うことは明記されていたため、ビルド時のコピーも自然な拡張",[47,527,529],{"id":528},"_3-代替案の検討","3. 代替案の検討",[143,531,532],{"id":532},"iframe方式",[18,534,535,152],{},[36,536,537],{},"調査での評価",[187,539,542],{"className":540,"code":541,"language":192},[190],"❌ 失敗\n- Draw.ioビューアーはlocalhostのURLを読み込めない（CORS制限）\n",[22,543,541],{"__ignoreMap":195},[18,545,546,549],{},[36,547,548],{},"実装での確認",": ✅ 調査通り、実装せず",[18,551,552,39],{},[36,553,130],{},[165,555,556,559],{},[168,557,558],{},"調査段階で試行し、適切に却下",[168,560,561],{},"実装時に無駄な試行錯誤を回避",[143,563,565],{"id":564},"svg自動変換方式","SVG自動変換方式",[18,567,568,152],{},[36,569,537],{},[187,571,574],{"className":572,"code":573,"language":192},[190],"デメリット:\n- ビルドプロセスが複雑化\n- インタラクティブ性なし\n- 変換スクリプトの保守が必要\n",[22,575,573],{"__ignoreMap":195},[18,577,578,549],{},[36,579,548],{},[18,581,582,152],{},[36,583,584],{},"実装での追加評価",[154,586,587,593],{},[18,588,589,592],{},[36,590,591],{},"理由",": インタラクティブ性の維持を優先",[165,594,595,598],{},[168,596,597],{},"ズーム、レイヤー表示などの操作が可能",[168,599,600],{},"編集ボタンでDraw.ioエディタを開ける",[18,602,603,39],{},[36,604,130],{},[165,606,607,610],{},[168,608,609],{},"調査の評価が的確で、実装でも同じ結論に到達",[168,611,612],{},"インタラクティブ性の重要性を正しく評価",[47,614,616],{"id":615},"_4-データフロー","4. データフロー",[18,618,619,152],{},[36,620,621],{},"調査時の設計",[187,623,626],{"className":624,"code":625,"language":192},[190],"Vue → Server → XML → Vue → JSON → viewer-static.min.js → DOM\n",[22,627,625],{"__ignoreMap":195},[18,629,630,152],{},[36,631,632],{},"実装での実際",[187,634,637],{"className":635,"code":636,"language":192},[190],"開発環境:\nVue fetch → Middleware → content/ → XML → Vue → JSON → viewer\n本番環境:\nVue fetch → public/ → XML → Vue → JSON → viewer\n",[22,638,636],{"__ignoreMap":195},[18,640,641,229],{},[36,642,130],{},[165,644,645,648],{},[168,646,647],{},"調査時のフローは正確だが、開発/本番の違いまでは言及されていなかった",[168,649,650],{},"ただし、実装でのフローは調査時の設計を自然に拡張したもの",[47,652,654],{"id":653},"_5-未解決の課題","5. 未解決の課題",[143,656,657],{"id":657},"調査時に指摘された今後の課題",[18,659,660],{},[36,661,662],{},"課題1: オフライン対応",[187,664,667],{"className":665,"code":666,"language":192},[190],"解決策:\n- `viewer-static.min.js`をローカルにホスト\n- `public/js/viewer-static.min.js`に配置して参照\n",[22,668,666],{"__ignoreMap":195},[18,670,671,674],{},[36,672,673],{},"実装状況",": ❌ 未対応（CDN依存のまま）",[18,676,677,679],{},[36,678,130],{},": 妥当",[165,681,682,685],{},[168,683,684],{},"オフライン対応は優先度が低い",[168,686,687],{},"CDN配信で十分な速度とキャッシュ効果",[18,689,690],{},[36,691,692],{},"課題2: SSR/SSG対応",[187,694,697],{"className":695,"code":696,"language":192},[190],"解決策:\n- サーバーサイドでSVGに変換してレンダリング\n- または、静的ビルド時にSVGを生成\n",[22,698,696],{"__ignoreMap":195},[18,700,701,703],{},[36,702,673],{},": ❌ 未対応（クライアントサイドのみ）",[18,705,706,679],{},[36,707,130],{},[165,709,710,713],{},[168,711,712],{},"インタラクティブ性を優先",[168,714,715],{},"Draw.ioの全機能を活用",[18,717,718],{},[36,719,720],{},"課題3: パフォーマンス最適化",[187,722,725],{"className":723,"code":724,"language":192},[190],"解決策:\n- 遅延ロード（Intersection Observer）\n- 複数の図がある場合は、1つのviewer-static.min.jsを共有\n",[22,726,724],{"__ignoreMap":195},[18,728,729,731],{},[36,730,673],{},": ✅ 部分対応",[165,733,734,737],{},[168,735,736],{},"viewer-static.min.jsは既にロード済みチェックを実装",[168,738,739],{},"遅延ロードは未実装（現状では不要）",[14,741,742],{"id":742},"調査レポートの強み",[47,744,746],{"id":745},"_1-試行錯誤の記録","1. 試行錯誤の記録",[18,748,749,750],{},"✅ ",[36,751,752],{},"iframe + URL指定の失敗を記録",[165,754,755,758],{},[168,756,757],{},"実装時に同じ失敗を繰り返さない",[168,759,760],{},"CORS問題の理解が深まる",[18,762,749,763],{},[36,764,765],{},"iframe + Base64エンコードの失敗を記録",[165,767,768,771],{},[168,769,770],{},"Draw.ioビューアーの内部仕様を理解",[168,772,773],{},"Base64だけでは不十分（圧縮形式が必要）と判明",[47,775,777],{"id":776},"_2-data-mxgraph属性の詳細","2. data-mxgraph属性の詳細",[187,779,783],{"className":780,"code":781,"language":782,"meta":195,"style":195},"language-json shiki shiki-themes vitesse-light vitesse-light","{\n  \"highlight\": \"#0000ff\",\n  \"nav\": true,\n  \"resize\": true,\n  \"toolbar\": \"zoom layers tags lightbox\",\n  \"edit\": \"_blank\",\n  \"xml\": \"\u003Cmxfile>...\u003C/mxfile>\"\n}\n","json",[22,784,785,790,817,834,850,871,892,912],{"__ignoreMap":195},[257,786,787],{"class":259,"line":260},[257,788,789],{"class":278},"{\n",[257,791,792,796,800,803,805,808,812,814],{"class":259,"line":267},[257,793,795],{"class":794},"sqvqQ","  \"",[257,797,799],{"class":798},"sz8Xr","highlight",[257,801,802],{"class":794},"\"",[257,804,152],{"class":278},[257,806,807],{"class":294}," \"",[257,809,811],{"class":810},"sdGka","#0000ff",[257,813,802],{"class":294},[257,815,816],{"class":278},",\n",[257,818,820,822,825,827,829,832],{"class":259,"line":819},3,[257,821,795],{"class":794},[257,823,824],{"class":798},"nav",[257,826,802],{"class":794},[257,828,152],{"class":278},[257,830,831],{"class":298}," true",[257,833,816],{"class":278},[257,835,837,839,842,844,846,848],{"class":259,"line":836},4,[257,838,795],{"class":794},[257,840,841],{"class":798},"resize",[257,843,802],{"class":794},[257,845,152],{"class":278},[257,847,831],{"class":298},[257,849,816],{"class":278},[257,851,853,855,858,860,862,864,867,869],{"class":259,"line":852},5,[257,854,795],{"class":794},[257,856,857],{"class":798},"toolbar",[257,859,802],{"class":794},[257,861,152],{"class":278},[257,863,807],{"class":294},[257,865,866],{"class":810},"zoom layers tags lightbox",[257,868,802],{"class":294},[257,870,816],{"class":278},[257,872,874,876,879,881,883,885,888,890],{"class":259,"line":873},6,[257,875,795],{"class":794},[257,877,878],{"class":798},"edit",[257,880,802],{"class":794},[257,882,152],{"class":278},[257,884,807],{"class":294},[257,886,887],{"class":810},"_blank",[257,889,802],{"class":294},[257,891,816],{"class":278},[257,893,895,897,900,902,904,906,909],{"class":259,"line":894},7,[257,896,795],{"class":794},[257,898,899],{"class":798},"xml",[257,901,802],{"class":794},[257,903,152],{"class":278},[257,905,807],{"class":294},[257,907,908],{"class":810},"\u003Cmxfile>...\u003C/mxfile>",[257,910,911],{"class":294},"\"\n",[257,913,915],{"class":259,"line":914},8,[257,916,917],{"class":278},"}\n",[18,919,920,922],{},[36,921,130],{},": ⭐⭐⭐⭐⭐",[165,924,925,928],{},[168,926,927],{},"実装で使用可能な具体的なコード",[168,929,930],{},"パラメータの意味も説明されている",[47,932,934],{"id":933},"_3-メリットデメリットの明確化","3. メリット・デメリットの明確化",[18,936,937],{},"✅ メリット6項目、デメリット3項目をリストアップ",[165,939,940,943],{},[168,941,942],{},"実装判断の材料として十分",[168,944,945],{},"トレードオフを理解した上での採用",[14,947,948],{"id":948},"調査レポートの改善点",[47,950,952],{"id":951},"_1-ビルドプロセスへの言及不足","1. ビルドプロセスへの言及不足",[18,954,955,958,959,961],{},[36,956,957],{},"問題",": ",[22,960,414],{},"のNitroフックでのファイルコピーが必要だったが、調査時に言及なし",[18,963,964,967],{},[36,965,966],{},"影響",": 本番環境で「Not a diagram file」エラーが発生",[18,969,970,152],{},[36,971,972],{},"改善案",[187,974,978],{"className":975,"code":976,"language":977,"meta":195,"style":195},"language-markdown shiki shiki-themes vitesse-light vitesse-light","## 本番環境への対応\n\n### ビルド時のファイルコピー\n\n`nuxt.config.ts`のNitroフックで.drawioファイルをpublicディレクトリにコピー：\n\n```typescript\nhooks: {\n  'nitro:build:public-assets': async (nitro) => {\n    // .drawioファイルもコピー\n  }\n}\n","markdown",[22,979,980,990,996,1004,1008,1020,1024,1032,1041,1070,1076,1082],{"__ignoreMap":195},[257,981,982,986],{"class":259,"line":260},[257,983,985],{"class":984},"sFA8A","##",[257,987,989],{"class":988},"syTZV"," 本番環境への対応\n",[257,991,992],{"class":259,"line":267},[257,993,995],{"emptyLinePlaceholder":994},true,"\n",[257,997,998,1001],{"class":259,"line":819},[257,999,1000],{"class":984},"###",[257,1002,1003],{"class":988}," ビルド時のファイルコピー\n",[257,1005,1006],{"class":259,"line":836},[257,1007,995],{"emptyLinePlaceholder":994},[257,1009,1010,1013,1015,1017],{"class":259,"line":852},[257,1011,1012],{"class":278},"`",[257,1014,414],{"class":442},[257,1016,1012],{"class":278},[257,1018,1019],{"class":442},"のNitroフックで.drawioファイルをpublicディレクトリにコピー：\n",[257,1021,1022],{"class":259,"line":873},[257,1023,995],{"emptyLinePlaceholder":994},[257,1025,1026,1029],{"class":259,"line":894},[257,1027,1028],{"class":278},"```",[257,1030,1031],{"class":442},"typescript\n",[257,1033,1034,1037,1039],{"class":259,"line":914},[257,1035,1036],{"class":288},"hooks",[257,1038,152],{"class":278},[257,1040,512],{"class":278},[257,1042,1044,1047,1050,1053,1055,1058,1060,1063,1065,1068],{"class":259,"line":1043},9,[257,1045,1046],{"class":294},"  '",[257,1048,1049],{"class":810},"nitro:build:public-assets",[257,1051,1052],{"class":294},"'",[257,1054,958],{"class":442},[257,1056,1057],{"class":270},"async",[257,1059,452],{"class":278},[257,1061,1062],{"class":274},"nitro",[257,1064,331],{"class":278},[257,1066,1067],{"class":278}," =>",[257,1069,512],{"class":278},[257,1071,1073],{"class":259,"line":1072},10,[257,1074,1075],{"class":263},"    // .drawioファイルもコピー\n",[257,1077,1079],{"class":259,"line":1078},11,[257,1080,1081],{"class":278},"  }\n",[257,1083,1085],{"class":259,"line":1084},12,[257,1086,917],{"class":278},[187,1088,1091],{"className":1089,"code":1090,"language":192},[190],"\n### 2. キャッシュ制御の具体的な方法\n\n**問題**: 「動的更新」は言及されているが、キャッシュ制御の具体的な方法は記載なし\n\n**影響**: 開発環境で編集が反映されない問題が発生\n\n**改善案**:\n```markdown\n## 開発環境での注意点\n\n### キャッシュ制御\n\n開発環境では、.drawioファイルのキャッシュを無効化する必要があります：\n\n```typescript\n// server/middleware/content-images.ts\nconst isDev = process.env.NODE_ENV === 'development'\nconst cacheControl = (ext === 'drawio' && isDev)\n  ? 'no-cache, no-store, must-revalidate'\n  : 'public, max-age=31536000'\n",[22,1092,1090],{"__ignoreMap":195},[47,1094,1095],{"id":1095},"クエリパラメータ対応",[18,1097,1098],{},"キャッシュバスティングのため、URLパースでクエリパラメータを除去：",[187,1100,1102],{"className":251,"code":1101,"language":253,"meta":195,"style":195},"const pathname = url.split('?')[0]\n",[22,1103,1104],{"__ignoreMap":195},[257,1105,1106,1108,1111,1113,1115,1117,1120,1122,1124,1127,1129,1132,1135],{"class":259,"line":260},[257,1107,271],{"class":270},[257,1109,1110],{"class":274},"pathname",[257,1112,279],{"class":278},[257,1114,282],{"class":274},[257,1116,285],{"class":278},[257,1118,1119],{"class":288},"split",[257,1121,291],{"class":278},[257,1123,1052],{"class":294},[257,1125,1126],{"class":810},"?",[257,1128,1052],{"class":294},[257,1130,1131],{"class":278},")[",[257,1133,1134],{"class":312},"0",[257,1136,1137],{"class":278},"]\n",[187,1139,1142],{"className":1140,"code":1141,"language":192},[190],"\n## 総合評価\n\n### 調査レポートの品質: ⭐⭐⭐⭐⭐ (5/5)\n\n**優れている点**:\n1. ✅ 試行錯誤のプロセスを詳細に記録\n2. ✅ 成功した方法のコード例が具体的\n3. ✅ メリット・デメリットを明確に整理\n4. ✅ 代替案も検討し、適切に却下\n5. ✅ 参考資料のリンクが充実\n\n**改善点**:\n1. ⚠️ ビルドプロセスへの言及がない\n2. ⚠️ キャッシュ制御の具体的な方法が不足\n\n### 実装の品質: ⭐⭐⭐⭐⭐ (5/5)\n\n**優れている点**:\n1. ✅ 調査レポートの提案を忠実に実装\n2. ✅ 発生した課題に適切に対処\n3. ✅ 開発/本番環境の違いを考慮\n4. ✅ インタラクティブ性を維持\n5. ✅ パフォーマンスとキャッシュを最適化\n\n### 調査→実装のプロセス: ⭐⭐⭐⭐⭐ (5/5)\n\n**評価**:\n- 調査レポートが実装の良い指針となった\n- 実装で発生した課題も調査の想定範囲内\n- 無駄な試行錯誤を回避できた\n- 実装後の振り返りで調査の改善点も明確に\n\n## 学んだこと\n\n### 1. 調査の重要性\n\n✅ **事前調査により実装がスムーズに**\n- iframe方式の失敗を事前に把握\n- viewer-static.min.js方式の有効性を確認\n- 実装時の方向性が明確\n\n### 2. 理論と実践のギャップ\n\n⚠️ **調査で見落としがちな点**\n- ビルドプロセス（開発環境と本番環境の違い）\n- キャッシュ制御の具体的な実装\n- クエリパラメータの扱い\n\nこれらは実装時に初めて直面する「実践的な課題」\n\n### 3. ドキュメントの価値\n\n✅ **調査レポートの価値**\n- 将来の類似案件で再利用可能\n- チームメンバーとの知識共有\n- 意思決定の根拠を記録\n\n✅ **実装ドキュメントの価値**\n- 調査との差分を明確化\n- 実際に動くコードとして参照可能\n- トラブルシューティングの材料\n\n## 推奨事項\n\n### 今後の調査レポートに含めるべき項目\n\n1. **ビルドプロセスの考慮**\n   - 開発環境と本番環境の違い\n   - 静的ファイルのコピー方法\n\n2. **キャッシュ戦略**\n   - 開発環境: no-cache\n   - 本番環境: 長期キャッシュ\n   - キャッシュバスティングの方法\n\n3. **環境変数の活用**\n   - `NODE_ENV`による分岐\n   - 環境ごとの設定\n\n4. **エラーハンドリング**\n   - 想定されるエラーとその対処\n   - 本番環境での確認方法\n\n## まとめ\n\n調査レポートと実装を比較した結果、以下のことが明らかになりました：\n\n### 成功した点\n\n1. ✅ 調査で提案した方法が実装でそのまま採用できた\n2. ✅ 代替案の検討により、最適な方法を選択できた\n3. ✅ 試行錯誤の記録が実装時の無駄を削減\n\n### 改善が必要だった点\n\n1. ⚠️ ビルドプロセスの考慮が不足\n2. ⚠️ キャッシュ制御の具体的な方法の記載が必要\n\n### 全体評価\n\n**調査レポート**: ⭐⭐⭐⭐⭐ (5/5)\n- 実装の指針として十分に機能\n- 詳細で実践的な内容\n\n**実装**: ⭐⭐⭐⭐⭐ (5/5)\n- 調査を忠実に実装\n- 発生した課題に適切に対処\n\n**プロセス**: ⭐⭐⭐⭐⭐ (5/5)\n- 調査→実装のサイクルが理想的\n- ドキュメントが知識として蓄積\n\n今回の経験は、**技術調査と実装のベストプラクティス**として、今後の開発にも活用できる貴重な知見となりました。\n",[22,1143,1141],{"__ignoreMap":195},[1145,1146,1147],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .svWSF, html code.shiki .svWSF{--shiki-default:#BDA437;--shiki-dark:#BDA437}html pre.shiki code .she3A, html code.shiki .she3A{--shiki-default:#5A6AA6;--shiki-dark:#5A6AA6}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sLkVR, html code.shiki .sLkVR{--shiki-default:#AB5E3F;--shiki-dark:#AB5E3F}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .sqvqQ, html code.shiki .sqvqQ{--shiki-default:#99841877;--shiki-dark:#99841877}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sFA8A, html code.shiki .sFA8A{--shiki-default:#999999;--shiki-default-font-weight:bold;--shiki-dark:#999999;--shiki-dark-font-weight:bold}html pre.shiki code .syTZV, html code.shiki .syTZV{--shiki-default:#1C6B48;--shiki-default-font-weight:bold;--shiki-dark:#1C6B48;--shiki-dark-font-weight:bold}",{"title":195,"searchDepth":267,"depth":267,"links":1149},[1150,1151,1152,1159,1164],{"id":16,"depth":267,"text":16},{"id":32,"depth":267,"text":32},{"id":45,"depth":267,"text":45,"children":1153},[1154,1155,1156,1157,1158],{"id":49,"depth":819,"text":50},{"id":140,"depth":819,"text":141},{"id":528,"depth":819,"text":529},{"id":615,"depth":819,"text":616},{"id":653,"depth":819,"text":654},{"id":742,"depth":267,"text":742,"children":1160},[1161,1162,1163],{"id":745,"depth":819,"text":746},{"id":776,"depth":819,"text":777},{"id":933,"depth":819,"text":934},{"id":948,"depth":267,"text":948,"children":1165},[1166,1167],{"id":951,"depth":819,"text":952},{"id":1095,"depth":819,"text":1095},null,"調査レポートで提案された方法と実際の実装を比較し、理論と実践のギャップを評価","md",{},"/drawio-implementation-evaluation",false,"2025-11-19T00:00:00.000Z",{"title":5,"description":1169},"2025-11/2025-11-19/drawio-implementation-evaluation",[1178,130,1179,1180],"draw.io","振り返り","実装レビュー","PJJ3Aqf-9WGct5iS6BMXvtu0LdDAAe1HKOZc6qXuBJ0",[],[1184,1188,1192,1196,1199],{"title":1185,"path":1186,"publishedAt":1187},"生成AIが一番効くのは「作れないけど、見れば分かる」仕事 — ボトルネックは生成から評価へ","/genai-generation-evaluation-asymmetry","2026-07-18T00:00:00.000Z",{"title":1189,"path":1190,"publishedAt":1191},"JX金属 光通信InP基板へ1200億円投資、AXTIとシェア・規模比較で読み解く5/11決算下落の伏線","/jx-metals-inp-1200oku-axti-comparison","2026-06-17T00:00:00.000Z",{"title":1193,"path":1194,"publishedAt":1195},"Draw.io MCP サーバー調査ログ - 3つの選択肢を比較して現状維持を選んだ話","/drawio-mcp-investigation-2026-02-13","2026-02-13T00:00:00.000Z",{"title":1197,"path":1198,"publishedAt":1195},"Draw.io MCP サーバー3種比較 ― スキル直書きと何が違うのか","/drawio-mcp-vs-skill-comparison",{"title":1200,"path":1201,"publishedAt":1202},"Draw.io Viewer: CDN vs ローカルホストのセキュリティ比較","/drawio-viewer-cdn-vs-local","2025-12-16T00:00:00.000Z","https://log.eurekapu.com/og/blog/drawio-implementation-evaluation.png?v=2025-11-19T00%3A00%3A00.000Z&title=Draw.io%E5%8B%95%E7%9A%84%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%EF%BC%9A%E8%AA%BF%E6%9F%BB%E3%81%A8%E5%AE%9F%E8%A3%85%E3%81%AE%E6%AF%94%E8%BC%83%E8%A9%95%E4%BE%A1&author=Kei%20Komatsu&sig=05bb8cc750969bef",1785654662286]