見出し画像

【AIでLINEスタンプ12日目】AIを使ったLINEスタンプ作成のための全22工程を作ったのも束の間!?

【AIによるこの記事の3行まとめと解説】

自動化を進めた結果、作業手順が「22工程」にも膨れ上がっていることに気づきます。さらにAIに40個一気に作らせると、「おはようと言いながら萎えている」など絵と文字の矛盾が多発することに頭を抱えます。


あらすじ

LINEスタンプ申請時のタグ付け負担を少しだけ軽減したのだった。


驚愕の「全22ステップ」

一気に進めてますスタンプ作成と申請の補助画面。 本日も引き続き、この画面の修正とブラッシュアップを進めました。

一通りスタンプ作成完了までの手続きをサポートできるシステムに仕上がったのですが、改めて手順を数えてみると……

「22ステップ」

もありました。いやぁ、お腹いっぱい。

ただ、スタンプ作成や申請に必要な情報を「調査しながら段階的にAIにまとめてもらう」というフローをステップごとにコピペしていくだけと言う手順に落とし込むことができたので、「ほとんど何も考えなくていい状態」になりました。

※ このステップ数は後日増減します。

一時は完全自動化じゃないとと思ったりもしましたが、プログラムが作ってくれたプロンプトをGeminiの画面にコピペするだけなので、実はそこまで時間はかかっていません。完全自動化にこだわって時間を溶かすより、今はこれで良しとして次に進むことにしました。

「タグ付け自動化」ツール改良版の公開

さて、昨日(11日目)のラストで予告していた「タグ付け自動化ブックマークレット」の改良版。 完成しました!

前回の「1行ずつコピペが必要で結局めんどくさい」という弱点を克服し、40個分のタグリストを最初に一括で渡しておくと、あとは各スタンプ画面でブックマーククリック+OKボタンクリックでタグ付けしてくれるという超便利仕様に進化しています。

使ってみたい方は、以下のコードをブラウザのブックマークに登録して、LINEクリエイターズマーケットのタグ設定画面で実行してみてください。

javascript:%28function%28%29%7Bvar K%3D%27_ltas_all%27%2CI%3D%27_ltas_idx%27%3Bvar stored%3DlocalStorage.getItem%28K%29%3Bvar cur%3DparseInt%28localStorage.getItem%28I%29%7C%7C%270%27%29%3Bif%28%21stored%29%7Bvar text%3Dprompt%28%27全タグを貼り付け(1行%3D1スタンプ、形式%3A "1%3A tag1%2C tag2")%5Cnコピーボタンの内容をそのまま貼り付けてください%3A%27%29%3Bif%28%21text%29return%3BlocalStorage.setItem%28K%2Ctext%29%3Bcur%3D0%3BlocalStorage.setItem%28I%2C%270%27%29%3Bstored%3Dtext%3B%7Dvar lines%3Dstored.split%28%27%5Cn%27%29.filter%28function%28l%29%7Breturn l.trim%28%29%3B%7D%29%3Bvar total%3Dlines.length%3Bvar inp%3Dprompt%28%27%5BLINE Tag Auto-Select%5D%5Cn%27%2B%27処理するスタンプ番号を入力してください %281-%27%2Btotal%2B%27%29%5Cn%27%2B%27  そのままOK %3A スタンプ %27%2B%28cur%2B1%29%2B%27 を処理%5Cn%27%2B%27  番号を変更  %3A そのスタンプへジャンプして処理%5Cn%27%2B%27  0 を入力   %3A タグデータをリセット(再貼り付け)%5Cn%27%2B%27  キャンセル %3A 何もしない%27%2CString%28cur%2B1%29%29%3Bif%28inp%3D%3D%3Dnull%29return%3Bvar n%3DparseInt%28inp%29%3Bif%28n%3D%3D%3D0%29%7BlocalStorage.removeItem%28K%29%3BlocalStorage.removeItem%28I%29%3Balert%28%27リセットしました。次回クリック時に全タグを再貼り付けしてください。%27%29%3Breturn%3B%7Dif%28isNaN%28n%29%7C%7Cn<1%7C%7Cn>total%29%7Balert%28%27無効な番号です %281-%27%2Btotal%2B%27%29%27%29%3Breturn%3B%7Dvar idx%3Dn-1%3Bvar line%3Dlines%5Bidx%5D%3Bvar m%3Dline.match%28%2F%5E%5Cd%2B%5B%3A%5Cuff1a%5D%5Cs%2A%28.%2A%29%2F%29%3Bvar tagStr%3Dm%3Fm%5B1%5D%3Aline%3Bvar tags%3DtagStr.split%28%2F%5B%2C%5Cu3001%5D%2F%29.map%28function%28s%29%7Breturn s.trim%28%29%3B%7D%29.filter%28Boolean%29%3Bvar clicked%3D%5B%5D%2CnotFound%3D%5B%5D%3Btags.forEach%28function%28tag%29%7Bvar found%3Dfalse%3Bdocument.querySelectorAll%28%27button%2Clabel%2Cspan%2Cdiv%2Cli%2Ca%2Cp%27%29.forEach%28function%28el%29%7Bif%28found%29return%3Bvar t%3Del.childNodes.length%3D%3D%3D1%3Fel.textContent.trim%28%29%3A%27%27%3Bif%28t%3D%3D%3Dtag%29%7Bel.click%28%29%3Bfound%3Dtrue%3Bclicked.push%28tag%29%3B%7D%7D%29%3Bif%28%21found%29notFound.push%28tag%29%3B%7D%29%3Bvar next%3Didx%2B1<total%3F%27スタンプ %27%2B%28idx%2B2%29%3A%27完了(全%27%2Btotal%2B%27件)%27%3Bvar msg%3D%27%5Bスタンプ %27%2B%28idx%2B1%29%2B%27%2F%27%2Btotal%2B%27%5D%5Cn%27%3Bmsg%2B%3D%27%5Cu2705 %27%2Bclicked.length%2B%27個を選択%3A %27%2Bclicked.join%28%27%2C %27%29%3Bif%28notFound.length%29msg%2B%3D%27%5Cn%5Cu274c 見つからず%28手動%29%3A %27%2BnotFound.join%28%27%2C %27%29%3Bmsg%2B%3D%27%5Cn%5CnOK %5Cu2192 %27%2Bnext%2B%27へ進む%5Cnキャンセル %5Cu2192 %27%2B%28idx%2B1%29%2B%27をやり直す%27%3Bif%28confirm%28msg%29%29%7BlocalStorage.setItem%28I%2CString%28idx%2B1%29%29%3B%7D%7D%29%28%29%3B

引き続きURLエンコード(%〜〜)が入っていて怪しさ満点ですね!
プログラムの内容は以下のものです。コメントはAIが後から入れたものです。

  (function() {
    var K = '_ltas_all', I = '_ltas_idx';
    var stored = localStorage.getItem(K);
    var cur = parseInt(localStorage.getItem(I) || '0');

    // 未初期化なら全タグ貼り付けを要求
    if (!stored) {
      var text = prompt('全タグを貼り付け(1行=1スタンプ、形式: "1: tag1,
  tag2")\nコピーボタンの内容をそのまま貼り付けてください:');
      if (!text) return;
      localStorage.setItem(K, text);
      cur = 0;
      localStorage.setItem(I, '0');
      stored = text;
    }

    var lines = stored.split('\n').filter(function(l) { return l.trim(); });
    var total = lines.length;

    // 処理するスタンプ番号を確認
    var inp = prompt(
      '[LINE Tag Auto-Select]\n' +
      '処理するスタンプ番号を入力してください (1-' + total + ')\n' +
      '  そのままOK : スタンプ ' + (cur + 1) + ' を処理\n' +
      '  番号を変更  : そのスタンプへジャンプして処理\n' +
      '  0 を入力   : タグデータをリセット(再貼り付け)\n' +
      '  キャンセル : 何もしない',
      String(cur + 1)
    );
    if (inp === null) return;

    var n = parseInt(inp);

    // 0入力でリセット
    if (n === 0) {
      localStorage.removeItem(K);
      localStorage.removeItem(I);
      alert('リセットしました。次回クリック時に全タグを再貼り付けしてください。');
      return;
    }

    if (isNaN(n) || n < 1 || n > total) {
      alert('無効な番号です (1-' + total + ')');
      return;
    }

    var idx = n - 1;
    var line = lines[idx];
    var m = line.match(/^\d+[:\uff1a]\s*(.*)/);
    var tagStr = m ? m[1] : line;
    var tags = tagStr.split(/[,\u3001]/).map(function(s) { return s.trim(); }).filter(Boolean);

    // タグを順にクリック
    var clicked = [], notFound = [];
    tags.forEach(function(tag) {
      var found = false;
      document.querySelectorAll('button, label, span, div, li, a, p').forEach(function(el) {
        if (found) return;
        var t = el.childNodes.length === 1 ? el.textContent.trim() : '';
        if (t === tag) {
          el.click();
          found = true;
          clicked.push(tag);
        }
      });
      if (!found) notFound.push(tag);
    });

    // 結果表示と次番への確認
    var next = idx + 1 < total ? 'スタンプ ' + (idx + 2) : '完了(全' + total + '件)';
    var msg = '[スタンプ ' + (idx + 1) + '/' + total + ']\n';
    msg += '✅ ' + clicked.length + '個を選択: ' + clicked.join(', ');
    if (notFound.length) msg += '\n❌ 見つからず(手動): ' + notFound.join(', ');
    msg += '\n\nOK → ' + next + 'へ進む\nキャンセル → ' + (idx + 1) + 'をやり直す';

    if (confirm(msg)) {
      localStorage.setItem(I, String(idx + 1));
    }
  })();

コピペするリストですが、メモ帳などで以下のような一覧をスタンプの数分作ります。

1: 笑顔, 嬉しい, お祝い
2: 泣く, 悲しい, お願い
3: 怒る, ぷんぷん

新しいスタンプのタグ付けを開始する時に、ブックマークレットをクリックし0を入力してOKすると新たな一覧を登録することができます。
また、スタンプのタグ編集画面を開く都度ブックマークレットをクリックするのですが、登録してある番号(行先頭の番号)を入力してOKを押すと、その番号の行にあるタグを設定します。

私はどのタグを設定するのが良いのか迷って決められないのと、リストを手書きする手間を省きたいという2つの点からAIにタグを決めてもらい、AI作のプログラムを使って整形しています。

AIに決めてもらったタグを、決まったフォーマットで出力してもらうためのプロンプトは以下のようにしています。

# Output Format (STRICT — JSON only, no other text)
Output a single JSON object. Keys are zero-padded sticker IDs ("01"–"40"). Values are arrays of 5–9 tag strings, all taken from the Valid Tag List above.

Example:
{
  "01": ["おはよう", "こんにちは", "楽しい", "元気?", "わくわく", "にっこり"],
  "02": ["了解", "OK", "仕事中", "わかった", "もちろん"]
}

このプロンプトでAIが返してくるリストはそのままでは使えませんので、プログラムによって整形してもらうわけです。
では、なぜこのようなフォーマットをAIに指定しているかと言うと、このようなフォーマットにしておいた方がプログラムが扱いやすいからです。

40個の盲点。ついに気づいた「AIの矛盾」

さて、長年の宿敵「背景透過」については、プログラム側のロジックを正しいと見做してプロンプトを書き換えてもらった効果があり、かなり改善してきました(後から見返すと色が残っていることもありますが、及第点です)。

しかし、ここで新たな、そして根本的な問題に気づいてしまいました。

つい2日前まで「1スタンプ8画像」で作っていたものを、調子に乗って「40画像」に増やした私。1スタンプあたりの作業量が爆増した結果、中身を全然ちゃんと見れていませんでした。(元から見れていなかった疑惑も大いにありますが)

改めて出力された40個のスタンプを見返してみると……内容がおかしなものが結構あるのです。

  • 「わくわく」という文字の横で、げっそり萎えているキャラクター

  • 「おはよう」と言いながら「おやすみ」という看板を持っているキャラクター

「いや、どういう感情!?」とツッコミを入れたくなるような、画像と文字の矛盾。 さらに、スタンプに出力される文字列自体も、見返してみるとかなり画一的で「遊び」が全くありません。

AIにこの辺りの改善を相談してみましたが、どうも期待したような柔軟な回答は得られず。気休め程度の改善策をプロンプトに入れるのが精一杯でした。 この「意味の矛盾・おかしさ」をどう抑え込むかが、次の大きな課題になりそうです。

12日目の成果と、これからの泥沼

そんな12日目の成果物はこちらの2つ。

  • ポジティブ返信太陽

  • スミません!ぴえん超えイカ


ツールやプロンプトをいじりまくっているため、肝心の「スタンプを生成して申請する」というペース自体はなかなか上がっていません。

しかし、22ステップの専用画面やタグ付けツールなど、量産のための「土台」は間違いなく整ってきています。このプログラム・プロンプト修正がひと段落すれば、一気にペースが上がるはず……!

……と、この時の私は信じて疑っていませんでした。

しかし、私はまだ気付いていなかったのです。 3日目から続く思い込みと、うっかりが生み出した『特大の罠』が、すぐ足元まで迫っていることに……。


次回、生成した画像に必ずついてきているGemini(Nano banana 2)のウォーターマークへの挑戦を始める。


公開中の全記事はこちら!

記事作成のお供に!お役立ちツール!

コピペするだけ!簡単「タイトル+URL一撃コピー(note特化型)」|へろん
コピペするだけ!簡単「AI記事から**を消す(note特化型)」|へろん

その他、こんなことやってみてます!


気に入ったらスキ、フォローよろしくお願いします!
note外から見にきてくださったかたも、もしよければハートマーク押して頂けたら励みになります😊

いいなと思ったら応援しよう!

へろん いつも応援ありがとうございます! 快適な制作を進めるためのおやつ活動費に使わせて頂きます!