Vibe Coding Adobe Edge Delivery Blocks with AI: ロボットに料理を任せよう

style

border-bottom-glow

今、開発の世界ではいろいろなことが起こっています。

AI の伝道師の中には、不安定な WordPress サイトを React に変換するようモデルに依頼し、悟りを開いたと思っている人もいます。ベビーブーマー世代の終末論者たちは、5年後には誰もコードの書き方を知らず、インターネットは崩壊すると確信している。そして、誰にも言わずに AI を使って社内ツールを 12 分で出荷し、早く帰宅する静かな人もいます。

私はどちらの陣営にも属していません。私はこう考えています。 「AIはツールだ。使いこなせ。能力があるという妄想を抱いた、派手なオートコンプリート機能だ」

この投稿では、AI を使用して新しいAdobe Edge Delivery Services (EDS) ブロックのバイブコーディングを行う方法、さらに重要な点として、問題点をどのように修正したかについて説明します。

農家から学ぶ

私は農場で育ちました。ファームのロジックはシンプルです。

何かが壊れたら、直します。

アマゾンなんてない。ただ、傾きそうなくらいたくさんの物が詰まった古い納屋があるだけだ。交換品を注文する余裕もなければ、完璧なレプリカの作り方を学ぶ時間もありません。ランダムに金属くず、南北戦争よりも古いハンマー、そしておそらくダクトテープを拾い上げます。あなたはそれを機能させます。即興で対応し、適応し、克服する。

このため、納屋には 150 年分の道具や「潜在的に役に立つ」物が蓄積されるのです。父はよくこう言っていました。「いつそれが必要になるか分からないよ。」

要点は次のとおりです。

道具を一から鍛造する方法を知る必要はありません。しかし、壊れたときに修理できるだけの知識は必要です。

AI 生成コードも同様です。

AIは実装を生成できます。修復、調整、アップグレードできる程度に理解するだけで十分です。

バイブコーディングとは何でしょうか?

バイブコーディングは、私たち全員が徐々に認めつつあるワークフローです。

大まかに欲しいものを説明する -> AI に調理させる -> 混乱を修正する -> 出荷する。

それは「プロンプトエンジニアリング」ではありません。「AIを活用した開発」ではありません。それは文字通り、雰囲気 + 文脈 + 味 + あなたです。

私がこれを「バイブコーディング」と呼んでいるのは、まさにそのように感じるからです。つまり、仕様を書いたり、厳格なテスト概要に従ったりしているわけではないのです。AI と調和し、80% の完成度を実現し、その後は自分の判断力と経験を活かして、実際に良いものに仕上げます。これは、非常に自信があるが、時々間違ったパートナー（私たちは両方ともそうです）との共同即興演奏です。

バイブコーディングの3つのルール

HTML を知っていても金魚のような記憶力しかない人に教えるつもりで仕事内容を説明します。
冗長にしてください。過剰に説明する。IKEA の説明書を書いているつもりでください。
モデルにラフカットをさせましょう。
形は整っています。あとはやすりで磨くだけです。
実際のスキルを使用して、不完全な部分を修正します。
モデルは最終的に何か呪われたことをするでしょう。

モデルとコード生成に関する私の経験

私はこれらすべてをWindsurfで行っています。同じワークスペースでプロンプトとコードを実行するのは最高だからです。Cursor や GitHub Copilot を搭載した VSCode など、AI が組み込まれた他の IDE もありますので、お好みのものを選んでください。Windsurf は価格競争力があり、私にとってはすぐに使える製品でした。

クロード・ソネット 4.5 : 現実を見失うことなく、使える最初の草稿を提供することに長けた人物。Sonnet の方が高速で、必要な機能を備えているため、Opus ではあまりテストを行っていません。

GPT : 物事の説明やドキュメントの作成などの自然言語タスクには最適ですが、私の経験では時間がかかりすぎ、プロンプトにも従いません。

DeepSeek : キッチンにいるアライグマを信頼するのと同じくらい信頼しています。

Grok : 有望ですが、Windsurf にはまだイメージ入力がないので、ベンチ状態です。

Gemini 2.5 : 試してみました。次のようなメッセージが何度も繰り返されました。「進捗状況をお知らせするために、このタスクを TODO リストに追加します。まずはファイルの作成から始めます。まず blog-featured-hero.js ファイルを作成します。その後、blog-featured-hero.css ファイルを作成します。」これを書いている時点では、Gemini 3 はまだ入手できませんでしたが、噂によると非常に優れているとのことなので、次はそれを試してみるつもりです。

本当にテリー・デイビスの精神を発揮したいのであれば、適切なリグを使用してセルフホストルートを採用できます (VRAM が重要ですが、必要に応じて一部の処理を RAM にオフロードできます。速度は かなり 遅くなりますが、動作します)。まずは Ollama - CLI または GUI ( https://ollama.com/ ) から始めて、そこにいくつかのカスタムモデルを追加し (gemma3:27b の自然言語タスクでうまくいきました - https://ollama.com/library/gemma3 )、Continue ( https://github.com/continuedev/continue ) などの VS Code のプラグインを使用することをお勧めします。組み込まれた IDE のすべての機能を使用できるわけではありませんが、少なくともデータがどこに保存されるかはわかります。いいえ、これは広告ではありません。

EDSとAIがPB&Jのように相性が良い理由

EDS ブロックは、次の理由から AI 製図に最適です。

ブロックは文字通り HTML + CSS + バニラ JS です。
これは LLM が訓練される内容です。生の HTML とコンテキストをフィードしますか?ブゥルルという音が出ます。
EDS には明確なパターンがあります。
モデルは文字通りパターンを見つけるために構築されます。それが彼らの仕事です。
最終的な仕上げを決めるのはあなた（そうです、あなたです）です。
AIは80%を与えます。恥ずかしくない最後の 20% はあなたの脳が教えてくれます。

明確な例を伴う適切なプロンプト = より良い出力。

よし、ヒーローブロックを作ろう

私たちのブログに新しいブログ注目ヒーローブロックを作成したいと考えています。

全幅の背景画像
左側の画像カルーセル
タイトル + サブタイトル + 説明 + 「続きを読む」ボタンが付いたぼやけたガラスのカード
レスポンシブ + アクセス可能
EDSパターンに従うので、未来の自分が過去の自分を嫌わないようにする

生のドキュメント作成ブロックは次のようになります。

EDS はこれを次のように生の装飾前の HTML に変換します。

<div class="blog-featured-hero block" data-block-name="blog-featured-hero" data-block-status="loaded">
    <div>
        <div>
            <picture>
                <source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                <source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&amp;format=webply&amp;optimize=medium">
                <source type="image/jpeg" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                <img loading="eager" alt="" src="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="5464" height="3640">
            </picture>
        </div>
    </div>
    <div>
        <div>
            <p>
                <a href="/en/blog/adaptto-2025-recap" title="">
                    <picture>
                        <source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                        <source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&amp;format=webply&amp;optimize=medium">
                        <source type="image/png" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
                        <img loading="lazy" alt="" src="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&amp;format=png&amp;optimize=medium" width="2862" height="1583">
                    </picture>
                </a>
            </p>
            <h3 id="">
                <picture>
                  <source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                  <source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&amp;format=webply&amp;optimize=medium">
                  <source type="image/jpeg" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                  <img loading="lazy" alt="" src="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="1768" height="877">
                </picture>
              </h3>
            <p>
                <picture>
                    <source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                    <source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&amp;format=webply&amp;optimize=medium">
                    <source type="image/jpeg" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                    <img loading="lazy" alt="" src="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="1776" height="1184">
                </picture>
            </p>
        </div>
    </div>
    <div>
        <div>
            <h3 id="recap-of-adaptto-2025---the-hard-core-aem-developers-conference"><a href="/en/blog/adaptto-2025-recap" title="Recap of adaptTo() 2025 - the hard-core AEM Developers Conference">Recap of adaptTo() 2025 - the hard-core AEM Developers Conference</a></h3>
        </div>
    </div>
    <div>
        <div>
            <p>Highlights, New Releases, and Takeaways</p>
        </div>
    </div>
    <div>
        <div>
            <p>A recap of the top sessions of the adaptTo() 2025 Conference, with everything you should catch up on to further your AEM career.&nbsp; AI refactoring for cloud migrations, Edge Workers for EDS, a replacement for the Groovy console, a deep
                dive on <a href="https://blog.arborydigital.com/en/blog/what-is-document-authoring-for-edge-delivery" title="Document Authoring (DA)">Document Authoring (DA)</a>, as well as a presentation from our own on the <a href="https://blog.arborydigital.com/en/podcast/solving-china-web-performance"
                title="China Web Performance Problem">China Web Performance Problem</a> - what are you waiting for, let's dive in!</p>
        </div>
    </div>
</div>

プロンプト

以下は、私が Claude に提供したものを整理したバージョンです (DA のスクリーンショットを含む)。

Create an Adobe Edge Delivery Services (EDS) block using vanilla JavaScript and CSS.

## Block Requirements
**Name**: blog-featured-hero
**Purpose**: Featured blog hero with background image and content overlay

## Learn from Existing Blocks
Examine css and js file in /blocks/hero/, /blocks/columns/, /blocks/blog-post-hero/,
and /blocks/carousel/ for EDS patterns.

## Raw HTML from EDS (before our JS/CSS decoration)
[raw html here]

## Your Task
Transform this raw HTML into:
- Row 1 image becomes full-width background
- Overlay container with:
  - LEFT: Row 2 images as carousel with minimal navigation icons, no background just chevrons
  - RIGHT (glass card): Row 3 Title/Link, Row 4 Subtitle, Row 5 Description,
    Button "Read More" linking to Row 3 URL

## JavaScript Requirements
Parse the block's child divs (rows) and reconstruct into the layout above.
Use vanilla JavaScript only - no frameworks.
Handle missing rows gracefully.

## CSS Requirements
- Mobile responsive (stack on small screens)
- glass background on card
- high contrast mode

Generate blog-featured-hero.js and blog-featured-hero.css files.

AIの最初の草稿

クロードは両方のファイルを除外しました。正直に言うと？かなりしっかりしていました。

良かった点

レイアウトは基本的に正しかった
カルーセルは機能しました
背景画像ロジック: 処理済み
レスポンシブスタッキング：処理済み

人間の手が必要だったもの

それでも、問題がありました。

ビジュアルの洗練: 色が一致しておらず、タイポグラフィも改善の余地あり
UX の問題: カルーセルが自動再生されず、リンクやボタンのホバー遷移も行われない
パフォーマンス: 背景画像が正しく読み込まれない
レイアウト: 左の列を div の上部に垂直に揃える

それで私は仕事に取り掛かりました。

ブロックを磨く（実際に給料を稼ぐ場所）

グローバルスタイルの上書き

一つ気づいたことがあります。クロードにはあなたのカスケードの記憶がないのです。グローバルスタイルが来てそれを解体するまでは、完全に意味のあるルールが生成されます。

EDS には、セクションを約 1200 ピクセルに制限するグローバル最大幅 + パディングがあります。クロードの最初の草稿ではこの点が考慮されていなかったため、主人公は実際にはフルブリードではありませんでした。!importantを使用して回避する代わりに、セレクターの先頭にmain追加して詳細度を高めました。

/* My fix - higher specificity wins */
main .blog-featured-hero-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

main .blog-featured-hero-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

main .blog-featured-hero {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;
}

ヒーロー = フルブリード。カスケード = 汚染されていない。

ビジュアルの洗練: 色、タイポグラフィ、ボタン

ブランドの緑色に差し替え、タイポグラフィを調整し、「続きを読む」ボタンの特定の問題を再度修正しました。ボタンをグローバルオプションよりも少し簡素化した外観にしたかったのです。神の意図どおり、ホバー時のease-in-outトランジションも追加しました。

/* Read More button */
.featured-content-card .featured-read-more {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--link-hover-color);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius);
  text-transform: uppercase;
  font-family: var(--heading-font-family);
  letter-spacing: -1px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

.featured-content-card .featured-read-more:hover {
  background-color: var(--link-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

UX修正：カルーセルのタイミング

カルーセルが自動再生されない問題を修正するために、次のロジックを追加しました。

5秒ごとにスライドが自動で進みます
ホバーとキーボードフォーカスで一時停止
手動ナビゲーション後の再起動
矢印キーナビゲーション

自動再生はスライドが複数ある場合にのみ実行され、すべての一時停止/再開ロジックにより、ユーザーの操作を中断することなくスムーズな UX が保証されます。

let autoplayInterval = null;

const startAutoplay = () => {
  if (autoplayInterval) return;
  
  autoplayInterval = setInterval(() => {
    const currentSlide = parseInt(carousel.dataset.activeSlide || '0', 10);
    showSlide(carousel, currentSlide + 1);
  }, 5000);
};

const stopAutoplay = () => {
  if (autoplayInterval) {
    clearInterval(autoplayInterval);
    autoplayInterval = null;
  }
};

// Pause on hover and focus
carousel.addEventListener('mouseenter', stopAutoplay);
carousel.addEventListener('mouseleave', startAutoplay);
carousel.addEventListener('focusin', stopAutoplay);
carousel.addEventListener('focusout', startAutoplay);

// Arrow key navigation
carousel.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') handlePrev();
  if (e.key === 'ArrowRight') handleNext();
});

startAutoplay();

パフォーマンス

ブロックを構築した後、ページを Lighthouse で実行しました。パフォーマンススコアは 99 でした (これは EDS の話です) が、まだいくつかの小さな最適化を行う必要がありました。

背景画像を最初に読み込む必要がありましたが、優先度のヒントがなかったため、ウォーターフォールの下部に押し出されていました。修正方法は、この画像が重要であることをブラウザに伝えることでした。

if (bgPicture) {
  const bgImg = bgPicture.querySelector('img');
  if (bgImg) {
    bgImg.setAttribute('fetchpriority', 'high');
    bgImg.setAttribute('loading', 'eager');
  }
  backgroundContainer.appendChild(bgPicture);
}

fetchpriority="high" ブラウザにこの画像を他の画像よりも優先するように指示し、 loading="eager" 、画像がビューポートに入るまで待たずにすぐに読み込まれるようにします。

カルーセルの場合は、その逆を行いました。最初のスライドのみを積極的に読み込み、残りはすぐには表示されないため遅延読み込みします。

レイアウト

コンテナーはフレックスを使用し、子要素を垂直方向に中央に配置する必要があったため、 align-items: centerを使用して垂直方向の配置を修正しました。

.featured-carousel .featured-carousel-slides {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  align-items: center;
}

これらは、「機能する」と「実際に優れている」を区別する詳細です。

最終結果

すごくきれいですね。

AIは80%を獲得しました。調整により 100% になりました。

自分で試してみませんか?

小さく始めましょう。カードグリッドや推薦スライダーなどのシンプルなブロックを選択します。Claude (または選択したモデル) に次の構造を入力します。

AIにコードベースから類似ブロックの例を2～4つ見るように指示します。
作業中の生のHTMLを貼り付けます
レイアウト変換を分かりやすい英語で説明する
バニラJSとCSS（フレームワークなし）を求める

次にブラウザコンソールを開いて実際にテストします。探す：

タイミングの問題（タイムアウトの積み重ねをチェック）
レイアウトシフト/パフォーマンスの問題（Lighthouse はこれらを検出します）
色と間隔の不一致（目に留まります）

壊れたものを直してください。発送します。繰り返す。

補足

私は Javascript に関してはそれほど詳しいわけではありませんが、誰が詳しいかご存じですか?インターネット、そしてそれが AI のトレーニングに使われてきたのです。そのため、行き詰まったり、何が起こっているのかわからない場合は、AI に頼って教えてもらうことができます。ただし、実際に人々が過去にその問題を解決したかどうか、またどのように解決したかを必ず再確認してください。シャベルを過剰設計しているだけかもしれません。AI ソリューションが奇妙に複雑に感じられる場合は、おそらくその通りです。

最後に

AI コード生成は今後も継続され、新しいモデルはより高速かつ優れたものになります。日常的な配送作業に最適です。システムがどのように機能するかを深く理解することは、これまで以上に重要です。

AIはツールです。魔法じゃない。それを一つのように使ってください。

トラクターの仕組みを学びます。ロボットに修理用の部品を作らせましょう。

Edge Delivery Services についてさらに詳しく知りたいですか?
Edge Delivery のドキュメント作成に関するブログをご覧いただくか、 YouTube のポッドキャストディスカッションをお聞きいただくことで、コンテンツ配信がどのように変革されるかをご確認ください。

著者について

フランク・タウンゼント

Arbory Digital のフロントエンド開発者兼 A/V 忍者

フランクは、Web サイトの開発とデザインに関する豊富な経験を持っています。Arbory に入社する前は、InstantOrder で設計と開発の経験を積み、その後フリーランスとして活動していました。新たなチャンスを熱望していたフランクは、協力的でダイナミックな雰囲気が気に入っている Arbory Digital に移りました。仕事以外では、フランクの趣味には、大工仕事、写真撮影、ビデオ撮影、農業、Always Loretta Show のツアー管理、その他のサイドプロジェクトなどがあります。

LinkedInでフランクに連絡する