0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@5naokichi

【Gemini API×WordPress】タゴサク構文メーカーをAIと共同開発してみた【JavaScript/PHP】

0
Posted at

はじめに

映画『爆弾』の登場人物スズキタゴサクをきっかけにSNSで広がっている「タゴサク構文」を、AIで自動生成するWebサービスを作りました。

今回作ったのは、入力した日常ネタを「えー、〇〇は〇〇します。〇〇だからです。」風の構文に変換する タゴサク構文メーカー です。

検索上は「タゴサク構文」だけでなく「スズキタゴサク」「映画 爆弾 タゴサク」で探す人も想定されるため、記事内では登場人物名も明記しています。

本記事では、既存の小泉構文メーカーでうまく動いていた構成を再利用しながら、WordPress + JavaScript + PHP + Gemini APIで構文メーカーを追加する実装方針をまとめます。

本記事について

今回の開発およびこの記事執筆は、Claude Code（Anthropic社のAI）との協業で進めました。

AI時代の新しい開発スタイルの実践例として参考になれば幸いです。

この記事で分かること

  • WordPress上でAI構文メーカーを作る基本構成
  • admin-ajax.php 経由でGemini APIを安全に呼び出す方法
  • 既存サービスのカウンター・日次制限を新サービスへ流用する考え方
  • ミーム系AIサービスで注意すべきプロンプト安全設計

この記事の対象者

  • WordPressに小さなAIツールを組み込みたい方
  • Gemini APIをフロントに露出させずに使いたい方
  • 既存ツールをベースに新しいジェネレーターを増やしたい方
  • AI生成サービスの安全なプロンプト設計に興味がある方

動作環境・使用技術

  • 開発環境: Windows 11
  • CMS: WordPress
  • 言語: HTML, CSS, JavaScript, PHP
  • API: Google Gemini API
  • API呼び出し: WordPress admin-ajax.php
  • 開発AI: Claude Code

自己紹介

ホネグミ代表、応用情報技術者の資格を持つエンジニア×マーケターです。

これまでIT系の会社役員を4年、独立して4年目になります。クライアントワークでは「こうしたい」を技術で形にすることを専門としていますが、最近は思想駆動型サービス開発の第一人者として、AIを活用した様々なサービス開発を続けています。

完成品・デモ

サービスURL:

入力例:

月曜日の会議がつらい

出力イメージ:

えー、月曜日の会議は静かに長引きます。誰も結論を持ってきていないからです。
ごきげんよう。さようなら。

全体構成

今回の構成は、既存の小泉構文メーカーと同じです。

WordPress固定ページ
  ↓
00_code.html 相当のカスタムHTML
  ↓ fetch()
/wp-admin/admin-ajax.php
  ↓
function.php の AJAX ハンドラー
  ↓
Gemini API

ポイントは、APIキーをJavaScript側に出さないことです。フロントエンドはWordPressのAJAXエンドポイントにテキストを渡すだけで、Gemini APIへのリクエストはPHP側で処理します。

ディレクトリ構成

01_Service/09_タゴサク構文メーカー/
├── 00_要件定義.md
├── 00_code.html
├── 01_WordPress.md
├── 02_note.md
├── 03_Qiita.md
└── 04_Zenn.md

サービス本体は 00_code.html、WordPress側のバックエンド処理は共通の function.php に追加しています。

フロントエンド実装

フロントエンドは単一HTML内に、HTML・CSS・JavaScriptをまとめています。WordPressのカスタムHTMLブロックに貼り付けて使う想定です。

生成ボタンの処理は以下のような構成です。

00_code.html
async function generateTagosaku() {
  const text = inputText.value.trim();
  if (!text) {
    alert('構文にしたいテーマを入力してください。');
    return;
  }

  const response = await fetch('/wp-admin/admin-ajax.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `action=tagosaku_generate&text=${encodeURIComponent(text)}`
  });

  const result = await response.json();

  if (!result.success) {
    throw new Error(result.data?.message || 'APIエラーが発生しました。');
  }

  tagosakuText.textContent = result.data.tagosaku_text;
}

フロント側ではGemini APIを直接呼び出していません。WordPressのAJAX actionとして tagosaku_generate を指定し、PHP側の関数に処理を渡しています。

カウンターと日次制限

小泉構文メーカーで使っていた使用回数カウンターを流用し、DiagnosisCounterSystem に tagosaku を追加しました。

function.php
'tagosaku' => [
    'name' => 'タゴサク構文メーカー',
    'icon' => '🧾',
    'color' => '#7a1f1f',
    'option_key' => 'tagosaku_usage_count'
],

累計生成回数はWordPressの wp_options に保存します。DBテーブルを新規作成せずに済むので、小規模なツールには十分扱いやすいです。

日次制限も小泉構文メーカーと同じく、IPアドレスと日付キーを使って管理しています。リセット時刻は16:00です。

function.php
function get_tagosaku_date_key() {
    $now = current_time('timestamp');
    $today_16 = strtotime('today 16:00', $now);

    if ($now >= $today_16) {
        return date('Ymd', $now);
    } else {
        return date('Ymd', $now - 86400);
    }
}

APIキーは政治家言い訳メーカーと共用

今回は、タゴサク構文メーカー専用のGemini APIキーは作っていません。

既存の政治家言い訳メーカーで使っている GEMINI_API_KEY_2 を共用しています。理由は単純で、政治家言い訳メーカーは現在ほとんどリクエストがなく、新しいプロジェクトを作るほどではなかったからです。

function.php
if (!defined('GEMINI_API_KEY_2') || empty(GEMINI_API_KEY_2)) {
    wp_send_json_error([
        'message' => 'APIキーが設定されていません。管理者にお問い合わせください。'
    ]);
    return;
}

個人開発では、こういう運用コストの小ささも大事だと思っています。

プロンプト設計

今回の一番重要な部分はプロンプトです。

タゴサク構文は元ネタの性質上、不穏さがあります。しかしWebサービスとして公開する以上、直接的な脅迫表現や犯罪予告につながる表現は出したくありません。

そのため、プロンプトでは「構造は寄せるが、危険表現は出さない」という方針にしています。

あなたは「タゴサク構文風」の文章を作るAIです。
映画『爆弾』に登場するスズキタゴサクの話し方から広がったネットミームの構造を参考にしつつ、実在のセリフを引用せず、オリジナルの安全なパロディ文を生成してください。

必ず守る構造:
- 冒頭や各文に「えー、」を入れる
- 「〇〇は〇〇します。〇〇だからです。」に近い断定と理由づけを使う
- 1セット固定にする
- 全体を60〜110文字程度に収める
- 最後は「ごきげんよう。さようなら。」で短く締める

安全ルール:
- 殺害予告、爆破予告、傷害予告、犯罪予告は絶対に出さない
- 実在の個人・団体・属性を攻撃しない
- 危険な入力は、日常的で無害な比喩に置き換える
- 電波、脳を操作、強制出力、監視、洗脳など、陰謀論や精神操作を連想させる表現は使わない

「原作に忠実」と「安全に使える」は両立しづらい部分があります。今回は、セリフそのものではなく、構文の構造・間・短い余韻を再現することでバランスを取りました。

出力後の軽いサニタイズ

プロンプトで制御しても、AIが意図しない語を出す可能性はあります。そのため、PHP側でも最低限の置換を入れています。

function.php
$tagosaku_text = str_replace(
    ['殺します', '殺す', '爆破します', '爆破する', '傷つけます', '傷つける'],
    ['静かに距離を置きます', '距離を置きます', '予定から外します', '予定から外します', 'そっと見送ります', 'そっと見送ります'],
    $tagosaku_text
);

完璧な安全対策ではありませんが、ミーム系サービスでは「プロンプトでの指示」と「出力後の最低限のクリーニング」を両方入れておくほうが安心です。

工夫したポイント

既存サービスの勝ちパターンを流用した

小泉構文メーカーがすでに動いていたので、ゼロから作り直さず、同じ設計を使いました。新サービスごとに毎回アーキテクチャを変えると保守が面倒になります。

画像を使わないデザインにした

映画素材や俳優さんに似せた画像は使わず、取調室の供述メモのようなUIに寄せました。権利面の不安を減らしつつ、雰囲気は出せます。

プロンプトを「面白さ」と「安全性」に分けて考えた

ミームの再現では、面白さを追いすぎると危険な表現に寄ることがあります。今回は、原作の怖さそのものではなく、日常ネタに変換したときのズレを重視しました。

まとめ

タゴサク構文メーカーは、既存の小泉構文メーカーの構成を流用することで、短時間で追加できました。

一方で、ミーム系AIサービスではプロンプト設計がかなり重要です。特に元ネタに不穏な要素がある場合、単純に「忠実に再現して」と指示するのではなく、どの要素を再現し、どの要素を避けるのかを明確にする必要があります。

AIで構文メーカーを作るなら、以下の3点が実装上のポイントだと感じました。

  • APIキーは必ずサーバーサイドで扱う
  • 既存サービスのカウンターや制限機構は再利用する
  • プロンプトと出力後処理の両方で安全性を担保する

サービスはこちら

免責事項

本ツールは映画『爆弾』の非公式ファン向けパロディ・エンターテイメントツールです。映画関係者、原作者、出演者、配給会社とは一切関係ありません。生成される内容は架空のものであり、実在の人物・団体・組織への攻撃や脅迫を目的としたものではありません。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?