無料ブログでも使える「Cocoon風 商品紹介カード」を
生成するGASツールを作成しました。
noteで無料配布しています。
この記事では、そのツールが
・どういう仕組みで動いているのか
・どこを触ればカスタマイズできるのか
を中心に、コードを追いながら解説します。
すべてを理解する必要はありません。
「こういう作りなら、自分でも触れそう」
と思ってもらえたら十分です。
このツールの全体構成
このツールは、かなりシンプルな構成です。
・INPUTシート：商品情報を入力
・OUTPUTシート：生成されたHTMLを表示
・GAS（Apps Script）：入力をHTMLに変換する処理
入力 → 生成 → コピペ
という流れだけに絞っています。
コード解説
メニューを作っている部分
スプレッドシートを開いたときに、
上部メニューに「商品紹介カード」という独自メニューを追加しています。
function onOpen() {
SpreadsheetApp.getUi()
.createMenu("商品紹介カード")
.addItem("初期シート作成", "setupSheets_")
.addSeparator()
.addItem("HTML生成（全行）", "generateAll_")
.addItem("HTML生成（選択行のみ）", "generateSelectedRows_")
.addToUi();
}これによって、
・初期シートの作成
・HTML生成
を、ボタン感覚で実行できるようにしています。
INPUT / OUTPUT シートを作る処理
初回実行時に、必要なシートを自動で用意します。
function setupSheets_() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
let input = ss.getSheetByName("INPUT");
if (!input) input = ss.insertSheet("INPUT");
let output = ss.getSheetByName("OUTPUT");
if (!output) output = ss.insertSheet("OUTPUT");
input.getRange(1, 1, 1, 5).setValues([[
"商品名", "画像URL", "商品リンクURL", "AmazonリンクURL", "楽天リンクURL"
]]);
output.getRange(1, 1, 1, 2).setValues([[
"行番号", "生成HTML"
]]);
}ここでは、
・必要なシートがなければ自動で作成
・1行目に見出しを入れて、入力ミスを減らす
といった「初回だけ必要な設定」をまとめています。
HTML生成の中心処理
INPUTシートの1行分の値を受け取り、
HTMLを組み立てるための準備をしています。
function buildCardHtml_(vals) {
const title = String(vals[0] || "").trim();
const imgUrl = String(vals[1] || "").trim();
const productUrl = String(vals[2] || "").trim();
const amazonUrl = String(vals[3] || "").trim();
const rakutenUrl = String(vals[4] || "").trim();
if (!title || !imgUrl || !productUrl) return "";・trim() で余計な空白を除去
・最低限必要な項目がなければHTMLを作らない
壊れたHTMLを出さないための安全装置です。
Amazon / 楽天ボタンの出し分け
リンクが入力されているものだけ、ボタンを表示します。
const btns = [];
if (amazonUrl) {
btns.push('<a class="aff-btn aff-btn--amazon" href="' + amazonUrl + '">Amazon</a>');
}
if (rakutenUrl) {
btns.push('<a class="aff-btn aff-btn--rakuten" href="' + rakutenUrl + '">楽天</a>');
}・Amazonだけ → Amazonボタンのみ
・楽天だけ → 楽天ボタンのみ
・両方 → 2つ表示
条件分岐でHTMLを組み立てています。
HTMLテンプレート部分
最後に、HTMLテンプレートを返します。
return '<div class="aff-card"> ... </div>';HTMLは「完成形」を1つだけ用意し、
中身を差し替える形にしています。
デザインはCSSにまとめているため、
GAS側は「構造を作るだけ」です。
カスタマイズしやすいポイント
このツールは、以下の部分を簡単に変更できます。
・ボタンの文字（Amazon → 購入する など）
・画像サイズ
・ボタンが1つのときのレイアウト
・カード全体のデザイン（CSS側）
HTML構造を変えずに、
CSSだけ調整するのがおすすめです。
なぜこの作りにしたのか
このツールは、
・無料ブログでも使える
・コピペで完結する
・壊れにくい
・改造しやすい
という点を重視しています。
あえて凝りすぎないことで、
長く使える形にしています。
まとめ
このツールは、
・GASで入力を処理
・HTMLは最小構造
・デザインはCSSに集約
という、シンプルな作りです。
GASの練習や、
自分用ツールを作る参考としても使ってもらえたら嬉しいです。
ツールを使ってみたい方へ
この記事で解説した
「商品紹介カード生成ツール」は、
無料で配布しています。
・Amazon / 楽天リンクを入力するだけ
・HTMLを自動生成
・無料ブログでも使える「Cocoon風」デザイン
というシンプルなツールです。
👉 ツール配布ページはこちら
※ 使い方も配布ページにまとめています。
コメント