LINE絵文字40個、タグ設定360件を「完全自動化しない」で楽にした
LINE絵文字を40個作成しました。
画像も揃った。タイトルと説明文も登録した。
あとは申請するだけ。
と思っていたらタグ設定が残っていました。
1個の絵文字に設定するタグは9個。
今回は40個なので合計360件。
360件くらい手作業でもできなくはない。
できなくはないけれど、私がそこまでする必要あるのかしら。
別に楽をしたいわけではありません。間違えたくないだけです。
そこでブラウザのConsoleからJavaScriptを実行し、タグをまとめて選択することにしました。
JavaScriptなら、9個くらい黙って選んでくれるはず。
選択済みの判定まで任せれば、私は最後に保存するだけです。
そのくらいは働いてもらわないと困ります。
ところが9個押したはずなのに8個しか選択されていない。
checkboxのcheckedを見ても、なぜか全部false。
信用できないJavaScript（実装ミスではない
最終的にはタグを押すところだけJavaScriptへ任せた上で
確認と保存は自分で行うことにしました。
完全自動化には失敗したけれど、360件を手で探す作業からは解放された話です。
実績比較
以前LINEスタンプ30個へタグを設定したときは、だいたい 2～3時間ほどかかりました。
正確に計測していたわけではありませんが
とにかく同じ画面で「文字を探してクリック」を繰り返した記憶があります（正直面倒。
今回は40個のLINE絵文字。
前回より10個多いのに、タグデータの準備から画面への設定まで約30分で終わりました。
単純比較はできませんが、体感では鬼短縮。
一番時間のかかっていた「9個の文字を探してクリック」をしなくてよくなったのが大きいです。
別にJavaScriptを褒めたいわけではありません。
でも今回ばかりはかなり助かりましたのでご紹介。
作成したもの
LINE Creators Marketのタグ編集画面へ、設定パネルを追加しました。
画像番号を選び「半自動選択」を押すと、事前に登録した9個のタグを順番に探してクリックしてくれます。
保存はしません。
申請もしません。
そこまで自動化するのは怖かったので、最後は私が確認します。
保存ボタンまで渡してあげるほど、まだ信用していません。
本記事では自動化するときに困った箇所が分かるようにコードの主要部分だけ抜粋しています。
実際のコードには設定パネルの生成、画像番号の切り替え、未検出タグの表示、クリップボードへのコピーなども含まれています。
そもそもタグは何に使われるのか
LINE Creators Marketのサジェスト表示タグは、LINEのトークで入力したテキストの変換候補として、スタンプや絵文字を表示するための情報です。
今回作った「驚いた顔」には、次のタグを選びました。
びっくり
驚く
え？
まじで？
そうなの？
なんと
まさか
おお
衝撃
適当に9枠埋めたわけではありません。
この顔を使いたくなるとき、直前に何を入力するか。
そこから逆算して決めました。
タグを考えるところには時間を使いたい。
でも。考え終わった360件を画面から探す作業には、あまり時間を使いたくない。
似ているようで違う作業なので分けることにしました。
まずタグをTSVで固定
いきなり画面を自動操作するのではなく、先に画像番号、用途、9タグをTSV形式で固定しました。
const RAW = `
001\t社長：驚き\tびっくり\t驚く\tえ？\tまじで？\tそうなの？\tなんと\tまさか\tおお\t衝撃
002\t社長：厳しい指摘\t却下\tNG\t真面目\t不満\t怒る\tだめ\t違う\tしっかり\t本気
`;
const data = RAW.trim().split('\n').map(line => {
const [no, description, ...tags] = line.split('\t');
return { no, description, tags };
});
このデータは画面操作を始める前に確認しています。
- 画像が40個あること
- 各画像にタグが9個あること
- 同じ画像内に重複がないこと
- 当時の画面で選択できるタグ一覧にすべて存在すること
ここが間違っていたら、誤ったタグを高速で登録するツールが完成します。
速いけれど役に立たない、笑
LINE画面からタグを探す
2026年8月29日時点で確認したタグ編集画面では、タグ名の周辺はおおむね次の構造でした。
<label class="cm-product-image-tag cm-product-image-tag-selectable">
<input type="checkbox" class="cm-product-image-tag-checkbox">
<span data-test="tag-name">お願いします</span>
</label>
data-test="tag-name"の文字列を探し、親のlabelをクリックします。
const normalize = value =>
(value || '').replace(/\s+/g, ' ').trim();
function findTagLabel(tag) {
return [...document.querySelectorAll('[data-test="tag-name"]')]
.filter(el => normalize(el.textContent) === tag)
.map(el => el.closest('label.cm-product-image-tag'))
.find(Boolean);
}
部分一致ではなく完全一致にしました。
安心を探したつもりが安心したも選択されるような、親切なのか余計なお世話なのか分からない動きは不要です。
なお、このDOM構造はLINEが公開しているAPI仕様ではありません。
実際の画面を確認して作ったものなので、画面が変更されたら動かなくなる可能性があります。
動かなかったら保存せず、手動に戻ります。
9個押したのに、9個ついていない
最初の実装は単純でした。
画面から9個の要素を探して、続けてclick()するだけ。
実行すると一瞬で終わりました。
これは楽だと思って画面を見ると、なぜか一部のタグが選択されていません。
押したはずなのに、ついていない。
9個お願いしたのに8個。
勝手に仕事を減らさないでいただけますか。
原因は特定できていません。
クリック後の画面更新中に、次のクリックが更新前のDOM要素へ送られた可能性があります。
これは画面上の挙動からの推測であり、LINE内部の実装を確認したものではありません。
仕方がないので、1個クリックするたびに少し待ち、次のタグは新しいDOMから探し直すように変更しました。
const wait = ms =>
new Promise(resolve => setTimeout(resolve, ms));
async function clickTags(tags) {
const missing = [];
for (const tag of tags) {
const label = findTagLabel(tag);
if (!label) {
missing.push(tag);
continue;
}
label.click();
await wait(300);
}
return missing;
}
300msに厳密な根拠はありません。
今回の環境で連続クリックを失いにくく、40画像を待っていられる範囲として決めました。
環境によっては300msでも短いかもしれません。
別にJavaScriptを気遣ったわけではありません。
取りこぼしたタグを、あとで私が探すことになるからです。
checkboxなのにcheckedが信用できない
次は選択済み判定です。
HTMLにはinput type="checkbox"があります。
それならinput.checkedを見れば選択済みか分かるはず。
そう思いますよね。
const input = label.querySelector(
'input.cm-product-image-tag-checkbox'
);
console.log(input.checked);
実際に確認するとLINE画面で選択されているタグも、選択されていないタグも
falseになる事例がありました。
補助パネルは「選択済み9」と表示。
LINE画面では「お願いします」だけ未選択。
ツールだけ自信満々。
できていないのに、できた顔をしないでほしい。
checked以外の属性やclass、画面内部の状態をさらに追いかけることも考えました。
でも目的はLINEの画面を解析し尽くすことではありません。
今日申請したいのです。
LINEの内部構造と朝まで語り合いたいわけではありません。
そこでinput.checkedによる自動完了判定は諦めました。
補助パネルも「選択済み」ではなく、ツールが本当に確認できた内容だけ表示します。
クリック実行：9件
未検出：0件
9件クリックした。
画面上で見つからないタグはなかった。
ツールが保証するのは、ここまで。
正しく選択されたかは私が画面を見ます。
仕方がないので、最後は人間
待ち時間を入れた後も、選択されないタグが残ることはありました。
その場合は補助パネルから9タグをコピーし、不足分だけ手で選びます。
await navigator.clipboard.writeText(
current.tags.join('\n')
);
取りこぼした数個くらいなら、最後は私が拾ってあげます。
もともとは360件すべてを目で探す予定でした。
今は画像ごとに一括操作して、こぼれた分だけ拾えば終わります。
完全自動化はできなかったけれど、十分働いてくれました。
まあ、少しくらいは認めてあげてもよいかもしれません。
画面変更へ延々と追従しなくてもよくなりました。
自動化を直す時間が手作業で終わる時間を超えたら、何をしているのか分かりません。
実際の登録手順
現在は次の順番で登録しています。
- LINE側でタグ未設定の画像を開く
- 補助パネルの画像番号を合わせる
- 9タグの半自動選択を1回だけ実行する
- LINE画面で選択結果を見る
- 不足分だけ手動で選ぶ
- 9個揃ったことを確認して保存する
同じ画像へ2回実行するのは禁止です。
選択済みのタグをもう一度クリックすると解除される可能性があります。
でもツール側では、現在の選択状態を信用できる方法で判定できませんでした。
押したか分からなくなったら、画面を確認して手で直します。
Consoleへ貼る前に確認
このツールは自分で作成したローカルファイルとして保管し、ブラウザの開発者Consoleへ貼って使っています。
やらないことも決めました。
- 認証情報を読まない
- 外部サーバーへ通信しない
- 保存ボタンを押さない
- 申請ボタンを押さない
- 画面上に表示されたタグ以外を操作しない
localStorageへ保存するのは、補助パネルで現在表示している画像番号だけです。
ブラウザのConsoleへコードを貼る行為にはリスクがあります。
インターネットで見つけたコードを、内容も読まずに貼り付けてはいけません。
少なくとも、次の処理が含まれていないか確認が必要です。
- 外部サイトへの通信
- CookieやWeb Storageへのアクセス
- 画面に入力した情報の取得
- 保存・申請ボタンの操作
本記事のコードも、LINE側の画面変更により動かなくなる可能性があります。
非公式な画面操作なので、実行前にDOMと処理内容を確認してください。
誰も保証してくれません。
80点だけど今日使える
作り始めたときは、9個すべて自動で選択し、選択済みも判定できたら完成だと思っていました。
実際は一部のクリックが反映されず、checkboxの値も画面表示と一致しませんでした。
さらに解析すれば、100点へ近づけるかもしれません。
でも今回やりたいのは、LINEのフロントエンド研究ではなく絵文字の申請ですw
一括選択で大半の手間を減らす。
こぼれたタグは手で拾う。
画像番号と9タグを見て、自分で保存する。
これで十分でした。
完全自動化はできなかったけれど、申請作業で最後まで使える道具にはなりました。
完璧ではないけれど、今回はこれで許してあげます。
保存前チェックリスト
- LINE側と補助パネルの画像番号が一致している
- 同じ画像へ2回実行していない
- 「クリック実行」と「未検出」の表示を確認した
- 未検出・未反映タグを手動で補完した
- LINE画面上で9タグが選択されている
- 目視確認してから保存した
最後は自分の目で確認。
結局そこに戻るのかという気もしますが、360件を全部探すところには戻りません。
別に自動化を信用していないわけではありません。
保存ボタンだけは、まだ渡してあげないだけです。