AMPscriptのfor文(ループ処理)で2カラム表示するコツ
今回、AMPscriptのループ処理で、画像やテキストなどを2カラム表示するということを覚えたので備忘録として残します。
そもそもAMPscriptとは？
”AMPscript は Marketing Cloud 独自のスクリプト言語で、メール、ランディングページ、SMS、プッシュメッセージなどの高度な動的コンテンツに使用します。
AMPscriptはプログラミングの基本的な概念を使用しますが、プログラマでなくても AMPscriptの関数を理解してメールで使用することができます。
あなたの内なる開発能力を呼び起こし、このAMPscript というものを一緒に見ていきましょう。”
引用「AMPscript の概要 単元 | Salesforce Trailhead」
つまり、salesforthのマーケティングクラウド内で使用する言語です。
主にメルマガやプッシュにおけるコンテンツの自動化・パーソナライズなどに使用します。
htmlの中に組み込んで使うイメージです。
その中でも、今回の内容はfor文。
繰り返しの処理をして何かコンテンツを表示したいときによく使用します。
具体例としては、「メルマガの中に、あなたにおすすめの商品(複数個)などを自動的に表示したいとき」や、「季節に合わせた記事のバナーを複数個、自動的に表示したいとき」などです。
for文の基本形
for @i = 1 to n(ループ処理したい回数) ループさせたい内容 Next i
javascriptなどと基本は同じですが変化数の考え方が無く、1(もしくは0)～n回まで順に処理を行います。
これが今回やりたかった2カラム表示というのを複雑にさせたんです。
やりたかったこと「2カラム×5段で画像10枚を順番に並べたかった」
簡略化する為、以下の例では<img>がcssによって横並びになっているものとします。
画像1と画像2のURLは、/image/gazou1.jpgのように連番で命名してデータエクステンション(DE)に格納しました。
考え方① 何回繰り返す必要があるか？を求めループ回数を指示する
2カラム5段で10個の画像を表示させたいので、繰り返したい数は5回。
なので、@i(ループ回数) = 1 to nのn回の部分は「取得してきた画像の枚数÷2(カラム数)」と書くことにより指示できます。
SET @R_gazou_rows = ROWCOUNT(画像の入っているDEの名前) FOR @i = 1 to Divide(ROWCOUNT(@R_gazou_rows),2) DO <img scr＝”image/gazou1.jpg”> <img scr＝”image/gazou2.jpg”> Next @i
画像枚数が変動しない場合は、1 to 5 など数値で指定してあげることで簡潔に書けます。
考え方② 繰り返された回数に応じて画像名を変えるには？
画像名ですが、image/gazou1.jpgとimage/gazou2.jpgのままでは画像1と画像2が5回繰り返されるだけになってしまいます。
なので、 image/gazou1.jpgにループ回数である@iを代入します。
for @i = 1 to Divide(ROWCOUNT(@R_gazou_rows),2) DO <img scr＝”image/gazou @i .jpg”> <img scr＝”image/gazou @i .jpg”> Next @i
ただ、この状態だと1回目のループ(1段目)の時には画像1が2枚、2回目のループ(2段目)の時には画像2が2枚並ぶだけになってしまいます。
考え方③ 変化数の考え方はないので、iに数値を足して変化数のようにする
1回目のループでは画像1と2
2回目のループでは画像3と4
3回目のループでは画像5と6を表示させたいので、これを数式にしてiに変化数として足してあげます。
for @i = 1 to Divide(ROWCOUNT(@R_gazou_rows),2) DO <img scr＝”image/gazou @i*2-1 .jpg”> <img scr＝”image/gazou @i*2 .jpg”> Next @i
こうすることで、画像名の数字を2カラムに合わせて増加させることができます。
i(1回目)*2-1＝1
i(1回目)*2＝2
i(2回目)*2-1＝3
i(2回目)*2＝4
i(3回目)*2-1＝5
i(3回目)*2＝6
考え方④ AMPscriptの形式に落とし込む
Subtractは引き算の関数、Multiplyは掛け算の関数です。
掛けた後に引きたいので、ネスト(入れ子)してます。
for @i = 1 to Divide(ROWCOUNT(@R_gazou_rows),2) DO
SET @gazou1 = Concat("image/gazou",Subtract(Multiply(@i,2),1),".jpg")
SET @gazou2 = Concat("image/gazou",Multiply(@i,2),".jpg")
<img scr＝”%%=v(@gazou1)=%%”>
<img scr＝”%%=v(@gazou2)=%%”>
Next @i
Concatという文字列同士や変数を繋ぎ合わせる関数を使用し、image/～.jpgまでをすべて変数にしてしまいました。
別にこのやり方じゃなくてもできるのですが、html内での作業や管理がしやすいので私はこのやり方にしてます。
関数メモ
足し算 Add(5,1)
= 6
引き算 Subtract(5,1) = 4
掛け算 Multiply(5,2) = 10
割り算 Divide(50,2)
= 25
Concat(”テキスト”,@変数) ※テキストの時に”引用符”を使うのがポイント
応用 3カラムやnカラムをやりたいとき
カラム数を増やしたいとき、増加数も変わるのでそれに対応させれば可能です。
3カラムの場合
画像1枚目 @i*3-2
画像2枚目 @i*3-1
画像3枚目 @i*3
このように、ループした回数に変化数を掛けて(＆引いて)あげることで、2カラム・3カラムなどで折り返すデザインのコンテンツを、自動表示できるようになりました！
javascriptなどに慣れている人には、おなじみの考え方だったかもしれません。
ですが、変化数の概念がない言語で同じことをしたいと考えるとなかなか難しかったです。
使っている人が少なく解説サイトや動画も海外の物が多かったので、自分の備忘録として。
コメント
コメントを投稿