[{"data":1,"prerenderedAt":208},["ShallowReactive",2],{"content-/ai-adoption-steps-page":3,"all-pages-for-dir":206,"og-image-/ai-adoption-steps-page":207},{"id":4,"title":5,"body":6,"category":187,"concepts":188,"description":189,"extension":190,"meta":191,"navigation":192,"ogImage":188,"path":193,"project_name":194,"published":195,"publishedAt":196,"seo":197,"stem":198,"tags":199,"todo":188,"unpublished":195,"updatedAt":188,"__hash__":205},"pages/2026-07/2026-07-17/ai-adoption-steps-page.md","英語の図解Artifactを日本語化して単独Vueページで公開するまで - AI導入5ステップの移植記録",{"type":7,"value":8,"toc":178},"minimark",[9,14,18,23,26,29,32,35,43,46,65,68,76,79,82,88,93,96,99,103,106,113,144,147,150,153,161,164],[10,11,13],"h1",{"id":12},"英語の図解artifactを日本語化して単独vueページで公開するまで","英語の図解Artifactを日本語化して単独Vueページで公開するまで",[15,16,17],"p",{},"claude.ai の共有 Artifact に、組織の AI 導入を5段階で整理した英語の図解「Steps of AI Adoption」（Boris Cherny 氏、2026年7月16日公開）があった。これを日本語で読みたい。ついでに言うと、元の表は横幅が足りなくて窮屈だ。日本語訳とレイアウト調整をまとめて片付けたい、というのが出発点だった。",[19,20,22],"h2",{"id":21},"読み取り-外からは塞がれていた","読み取り: 外からは塞がれていた",[15,24,25],{},"まず中身が取れるかどうかから怪しかった。WebFetch はネットワークエラーを返し、リトライすると「しばらくお待ちください...」の Cloudflare チャレンジ画面で止まる。agent-browser に切り替えさせても、今度は claude-in-chrome 拡張が接続されていない。外から取りに行く経路は、ことごとく塞がれていた。",[15,27,28],{},"ところが、答えは手元にあった。自分の Chrome には、この Artifact のタブがすでに開いている。Chrome DevTools MCP でそのタブに繋がせると、本体は claudeusercontent.com の iframe の中にいることが分かった。親ページをいくら眺めても本文が出てこないわけだ。iframe の URL を直接取らせて、ようやく全文が手に入った。",[15,30,31],{},"テキストが取れたあとも鵜呑みにはせず、Chrome で開かせてスクリーンショットで描画まで確認させてから訳に入った。",[19,33,34],{"id":34},"日本語化と4カラム調整",[15,36,37,38,42],{},"日本語訳は ",[39,40,41],"code",{},"memo/2026-07-17/steps-of-ai-adoption-ja.html"," に書き出させ、元の Artifact の隣のタブに開いてもらった。原文と訳文をタブの行き来で見比べられる。",[15,44,45],{},"中身は、AI 導入の段階を同時に動くエージェント数で刻んだ表だった。",[47,48,49,53,56,59,62],"ul",{},[50,51,52],"li",{},"ステップ0: ゲートあり（Gated）── エージェント 0体",[50,54,55],{},"ステップ1: アシスト（Assisted）── 〜1体",[50,57,58],{},"ステップ2: 並列（Parallel）── 〜10体",[50,60,61],{},"ステップ3: 監督付き自律（Supervised autonomy）── 〜100体",[50,63,64],{},"ステップ4: AIネイティブ（AI-native）── 〜1,000体超",[15,66,67],{},"各ステップに「どんな状態か」「ボトルネック」「役立つプロダクト」「ガードレール」の4つの観点が付き、ステップの間には「次へ進むには何が要るか」の遷移条件が挟まる。この遷移条件が具体的でいい。",[47,69,70,73],{},[50,71,72],{},"ステップ1→2: エージェントを同時に複数動かす。テスト・ビルド・lint を束ねた自己検証ループ。許可プロンプトで作業が止まらないオートモード。コードレビューの自動化",[50,74,75],{},"ステップ2→3: Claude が自力でコード・Wiki・議論を読める経路。仕事をループとルーチンに分解する。Claude が Claude を起動できる仕組み",[15,77,78],{},"訳していくと、図解というよりそのまま使える導入チェックリストに近い。",[15,80,81],{},"各ステップで「解放されるもの」を書いた一行も印象に残った。",[83,84,85],"blockquote",{},[15,86,87],{},"午後まるごと潰れていた変更が、会議の合間に終わるようになる。（アシスト段階）",[83,89,90],{},[15,91,92],{},"チームで数週間かかっていたバックログが、エンジニア1人の午後のオーケストレーション作業に収まる。（並列段階）",[15,94,95],{},"段階が上がると何が変わるのかを、機能の羅列ではなく時間の感覚で言い当てている。",[15,97,98],{},"ただ、最初の訳文版はまだ縦に長かった。4つの観点が縦に積まれていて、ステップ同士を見比べようとすると視線が上下に往復する。この4セクションを横一列の4カラムに並べ替えるよう指示して、スクリーンショットを撮らせては収まりを確認した。4列がきれいに画面に収まった時点で、手元用としてはいったん完成。",[19,100,102],{"id":101},"htmlからvueページへ持ち替える","HTMLからVueページへ持ち替える",[15,104,105],{},"ここで欲が出た。手元の HTML のままでは自分しか見られない。公開したい。ただし条件がある。横4カラムでも縦1列でも見たいし、いま詰めた見た目をそのまま保ちたい。",[15,107,108,109,112],{},"Markdown のブログ記事にすると @nuxt/content のレンダリングに縛られて、表示切替のトグルが作りにくい。ブログではなく、",[39,110,111],{},"apps/web/app/pages/ai-adoption-steps.vue"," の単独 Vue ページとしてカードコンポーネントで組み直させた。",[47,114,115,118,125,128,131,137],{},[50,116,117],{},"5つのステップをデータ配列に持たせ、テンプレートはカードの繰り返しにする",[50,119,120,121,124],{},"「横に見る（4列）」「縦に見る（1列）」のトグルで ",[39,122,123],{},"grid-template-columns"," を切り替える。狭い画面では自動で2列→1列に落とす",[50,126,127],{},"「ステップ0から1へ進むには」といった遷移条件は、カードとカードの間に挟んで原文の流れを保つ",[50,129,130],{},"「ペア」「オーケストレーター」といった各ステップでの人間の役割ラベルもカードに残す",[50,132,133,136],{},[39,134,135],{},"useSeoMeta"," でタイトル・description・OGP を設定して、単独ページとして共有できる形にする",[50,138,139,140,143],{},"外部リンクはサイトのルール通り ",[39,141,142],{},"target=\"_blank\""," 付きのアンカーで統一する",[15,145,146],{},"dev サーバーで縦横の切替を動かして確認し、OpenTelemetry リンクの改行が崩れていた箇所は computed style まで見させて直りを確かめた。手元の HTML で一度レイアウトを詰めてあったので、Vue 側の作業はほぼ移植に徹することができた。",[19,148,149],{"id":149},"デプロイ",[15,151,152],{},"/deploy で本番に出した。ローカルでビルドして Cloudflare Pages に直接デプロイする流れで、デプロイスクリプトを apps/web 配下で探して一度空振りし、リポジトリルートにあると分かって実行し直す小さなつまずきはあった。それでも 5,693 ルートのプリレンダリングが通ってアップロードまで完了。本番の表示・コンソール・payload の確認まで済ませてもらった。4カラムのカード表示と「縦に見る（1列）」のトグルが、本番でもそのまま動いている。",[15,154,155,156],{},"公開ページはこちら: ",[157,158,160],"a",{"href":159},"/ai-adoption-steps","AI導入のステップ",[19,162,163],{"id":163},"学び",[47,165,166,169,172,175],{},[50,167,168],{},"外から読めないページでも、自分の Chrome にタブが開いていればそこから抽出できる。WebFetch → agent-browser → Chrome DevTools MCP と落としていくフォールバックが今回も効いた",[50,170,171],{},"claude.ai の Artifact の本体は claudeusercontent.com の iframe 内にある。親ページを取っても本文は出てこない",[50,173,174],{},"「縦でも横でも見たい」のような、表示そのものが要件のコンテンツは、Markdown 記事に押し込むより単独 Vue ページのほうが素直に作れる",[50,176,177],{},"結果的に、memo の HTML でレイアウトを詰めてから Vue に移す2段構えになった。試行錯誤の段階ではビルドも dev サーバーも要らないので、往復が速い",{"title":179,"searchDepth":180,"depth":180,"links":181},"",2,[182,183,184,185,186],{"id":21,"depth":180,"text":22},{"id":34,"depth":180,"text":34},{"id":101,"depth":180,"text":102},{"id":149,"depth":180,"text":149},{"id":163,"depth":180,"text":163},"dev",null,"claude.aiで共有されていた英語の図解「Steps of AI Adoption」をChrome経由で読み取って日本語訳し、横4カラム/縦1列を切り替えられる単独Vueページとして本番公開するまでの記録。","md",{},true,"/ai-adoption-steps-page","mdx-playground",false,"2026-07-17T00:00:00.000Z",{"title":5,"description":189},"2026-07/2026-07-17/ai-adoption-steps-page",[200,201,202,203,204],"Artifact","Vue","Nuxt","agent-browser","Cloudflare Pages","Anv-ctTMV8dCIEX9S3_IOZSDDOr3zbv9QrOyGNnH-A8",[],"https://log.eurekapu.com/og/blog/ai-adoption-steps-page.png?v=2026-07-17T00%3A00%3A00.000Z&title=%E8%8B%B1%E8%AA%9E%E3%81%AE%E5%9B%B3%E8%A7%A3Artifact%E3%82%92%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96%E3%81%97%E3%81%A6%E5%8D%98%E7%8B%ACVue%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E3%81%BE%E3%81%A7%20-%20AI%E5%B0%8E%E5%85%A55%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%81%AE%E7%A7%BB%E6%A4%8D%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=65f2edc00e8a7369",1784341311605]