【第319回】 AMPscript を使った「繰り返し」リスト表示（1 列表示）の作り方
Marketing Cloud Next（Marketing Cloud Growth & Advanced Edition）では Summer '25 の新機能リリースである「繰り返し」コンポーネントの登場により、パーソナライズを目的とした「繰り返し」コンテンツが格段に簡単に実現できるようになりました。詳細は以下の記事をご確認ください。
一方で、従来の Marketing Cloud Engagement においては AMPscript を駆使して、同様の「繰り返し」コンテンツを実現する必要があります。
今回の記事では、AMPscript のループの技術を活用して、1 列形式の「繰り返し」リスト表示を実現する方法を紹介します。この方法はあくまで私自身のアプローチのため、効率が良くさらにシンプルな方法については議論の余地がありますが、同様の課題に直面している方の参考になれば幸いです。もし、すでに他の方法をお持ちの方は、比較しながらより良い方法でご活用ください。
AMPscript を使ったランキングリストの作成手順
今回の最終的な成果物としては、以下のような製品ランキングリストを含むメールの作成を目指します。
ステップ 1：データの準備
まず、ランキング情報が格納された CSV ファイルをデータエクステンションにインポートします。本来であれば、Marketing Cloud Engagement の中で自動生成したり、外部システムから直接連携しますが、今回は手動でインポートします。
今回、このランキング情報が格納されているデータエクステンション名を 「RankingDE」 と命名します。後ほど AMPscript 内で参照します。
以下の通り、データエクステンションにインポートすることができました。
インポートされたデータエクステンションには、以下の項目が含まれており、それぞれの役割は以下の通りです。
Id：プライマリーキー
Rank：ランキングの順序を決定
Genre：ジャンルの指定
Artist, Title, Price：製品詳細
ImageURL：製品画像
LinkURL：製品リンク
Genre に関しては、送信用データエクステンション内の「FavoriteGenre」フィールドの値（例：Rock や Jazz）を基に、該当するジャンルのランキングをパーソナライズして表示することを目的としています。
練習用データ
練習用データとして、今回の CSV ファイルをアップロードしました。自由に編集して、お好みのデータを使って試してみてください。この CSV ファイルをそのまま使用して練習する場合は、以下の設定を行ってください。
Rank と Price は数字型
各 URL の項目はテキスト型（2000 文字）
ステップ 2：メールレイアウトの作成
1. メールキャンバスで「画像＋テキスト」のレイアウトを作成します。以下のように左側に画像、右側にテキストを配置します。
Pro Tips：レイアウトを活用することがポイントです。レイアウトは複数のコンポーネントを一つの参照コンテンツブロックとしてまとめて管理できるため、個別の参照コンテンツブロックを複数用意するよりも、効率的で簡単に管理できます。
2. 作成したレイアウトを元に、以下で示す AMPscript を使用して動的に情報を差し替えます。
1. 画像 URL：
%%=Field(@row,'ImageURL')=%% に差し替えます。（ImageURL などは皆さんの項目名に置き換えてください。Width は 100% に設定しています。）
2. リンク URL：
こちらは少し特殊な書き方で %%=RedirectTo(Field(@row,'LinkURL'))=%% と記入します。遷移用のリンクとして活用するために「RedirectTo」が使用されていることに注目してください。
3. テキストフィールド：
%%=Field(@row,'[フィールド名]')=%% を使用します。（今回の例：Rank, Artist, Title 等。）事前に作成したスタイルなどを維持するためには、HTML Code Editor で作業することをおすすめします。但し、URL リンクの貼り付けは WYSIWYG Editor から行いましょう。
4. 金額表示：
今回の金額表示は 3 桁ごとにカンマを追加したいので、以下を使用します。
%%=FormatNumber(Field(@row,'Price'),"N0")=%%
3. ここまで作業を終えた段階で、プレビュー画面が崩れてしまうことがありますが、これは正常です。最後に、完成したレイアウトをテンプレートとして保存します。画面左下に保存ボタンがあります。
4. テンプレートを保存すると、コンテンツブロック ID が取得できるようになります。
5. コンテンツブロック ID 取得後、以下のようにその ID を参照コンテンツである %%=ContentBlockById()=%% に反映します。
%%=ContentBlockById(43772515)=%%ループの AMPscript サンプル
さて今回の場合は、以下のコードを使用して、データエクステンションの内容を取得しながらループで表示します。
%%[
VAR @lookup, @count, @row
SET @lookup = lookuporderedrows(
'RankingDE',
5,
'Rank asc',
'Genre', FavoriteGenre
)
FOR @count = 1 TO rowcount(@lookup) DO
SET @row = row(@lookup, @count)
]%%
<!--- ここに参照コンテンツを挿入 --->
%%=ContentBlockById(43772515)=%%
%%[ NEXT @count ]%%ここで %%=ContentBlockById(43772515)=%% をループで繰り返し表示することで、ランキングリストが動的に構築されるわけですね。
ここで皆さんが作業する時に、編集が必要な箇所の説明をします。
'RankingDE'：参照する先のデータエクステンション名
5：メールに表示する行数
'Rank asc'：並び順を決定し、「昇順 asc」や「降順 desc」を指定
'Genre', FavoriteGenre：マッチングのための条件（例：Rock = Rock）
%%=ContentBlockById(43772515)=%%：表示したいテンプレート
他のコードは特に触らなくて大丈夫です。
注意：FavoriteGenre に対して「' '」を使用しないように注意してください。「' '」 を使用すると、「FavoriteGenre」という 固定値 になります。
実装例
AMPscript を メールの編集画面で HTML ブロックに配置します。
次に、配信用データエクステンションに「FavoriteGenre」フィールドを追加します。このフィールドを利用して、RankingDE の「Genre」とマッチングさせる形になります。（例：Rock = Rock、Jazz = Jazz のようなイメージ）
最後にその配信用データエクステンションを使って、プレビューを確認すると、以下のように動的なランキングリストが表示されます。
FavoriteGenre が Rock の場合
FavoriteGenre が Jazz の場合
成功です。今回は試しませんが、リンク URL が正しく遷移することも確認してください。正しく遷移するには「RedirectTo」が必要ですので、遷移しない場合は、「RedirectTo」が含まれているか確認してください。
いかがでしたでしょうか。
ちなみに、ContentBlockById で参照されるコンテンツは、一度ジャーニーをアクティブ化してメールが送信されると、キャッシュが作成されるため、参照しているコンテンツの中身を変更したとしても、既にジャーニー上で稼働しているコンテンツの中身は自動的に変更されません。以下の記事で、その中身を変更する技術を公開していますので、併せてご確認ください。
さて、今回の手順を通じて、Marketing Cloud Next の「繰り返し」コンポーネントと同様の仕組みを、Marketing Cloud Engagement で AMPscript を使用して実現できることをご理解いただけたかと思います。
今回、画像やテキストを少しだけ複雑なレイアウトで組み上げましたが、単純にバナー画像を 1 列で並べたり、ニュース記事のテキストを 1 列に並べたりと、シンプルな使い方をするケースの方が多いと思います。
さて、次回の記事では、AMPscript を用いた「カード表示」の実現に焦点を当て、さらに高度な実装方法を紹介する予定です。お楽しみに。
今回は以上です。
