X投稿文ジェネレーター開発秘話｜ワードから自然な投稿文を生成する仕組み
「X（旧Twitter）に投稿したいけど、文章が思いつかない」「バズりたいけど、どう書けばいいかわからない」。そんな悩みを解決するために開発したのが「X投稿文ジェネレーター」です。2〜3個のワードを入力するだけで、最後に必ず関連ワードでボケる自然な投稿文を自動生成します。この記事では、テンプレートエンジンの実装、ボケ要素の追加ロジック、そして開発で苦労したポイントを詳しく解説します。
X投稿文ジェネレーターとは
機能概要
- 入力：2〜3個のワード（例: 「プログラミング」「独学」「挫折」）
- 出力：自然な投稿文（例: 「プログラミング独学してるけど、挫折しそう...でも三種の神器があれば大丈夫！」）
- 特徴：最後に必ず関連ワードでボケる
- 用途：X投稿のネタ作り、ライティングの練習
なぜこのツールを作ったのか
私自身、Xでの発信に苦手意識がありました。「何を書けばいいかわからない」「バズる文章が書けない」という悩みを抱えていました。
そんな時、「テンプレート + ランダム要素 + ボケ」という組み合わせで、面白い文章が自動生成できるのでは？と思いつきました。
技術的な仕組み
1. テンプレートエンジンの実装
5つの異なるスタイルのテンプレートを用意し、ランダムに選択します。
const templates = [
{
name: '体験談風',
pattern: '{word1}始めてみたけど、{word2}で詰まった...でも{joke}があれば解決！'
},
{
name: '気づき風',
pattern: '{word1}って、結局{word2}が大事なんだよね。あと{joke}も。'
},
{
name: 'ランキング風',
pattern: '{word1}で重要なのは、1位{word2}、2位{word3}、3位{joke}です！'
},
{
name: '日常風',
pattern: '今日も{word1}頑張ってる。{word2}は順調。でも{joke}が足りない...'
},
{
name: 'トレンド風',
pattern: '最近{word1}が話題だけど、{word2}も大事。そして{joke}は必須。'
}
];
2. ワードの置き換えロジック
ユーザーが入力したワードを、テンプレートの{word1}、{word2}などに置き換えます。
function generatePost(words) {
// ランダムにテンプレートを選択
const template = templates[Math.floor(Math.random() * templates.length)];
let text = template.pattern;
// ワードを置き換え
words.forEach((word, index) => {
const placeholder = `{word${index + 1}}`;
text = text.replace(placeholder, word);
});
// ボケ要素を追加
const joke = getRandomJoke();
text = text.replace('{joke}', joke);
return text;
}
3. ボケ要素のカテゴリ分け
ボケ要素を複数のカテゴリに分類し、バリエーションを増やしました。
const jokes = {
food: ['から揚げ', 'ラーメン', 'カレー', 'コーヒー'],
item: ['三種の神器', 'プレミアム会員', '限定グッズ', '秘伝のタレ'],
action: ['早起き', '筋トレ', '瞑想', 'ストレッチ'],
abstract: ['運', '才能', 'センス', '愛']
};
function getRandomJoke() {
const categories = Object.keys(jokes);
const randomCategory = categories[Math.floor(Math.random() * categories.length)];
const jokeList = jokes[randomCategory];
return jokeList[Math.floor(Math.random() * jokeList.length)];
}
開発で工夫したポイント
1. 自然な文章にするための調整
最初は単純な置き換えだけでしたが、「{word1}と{word2}」のように助詞が不自然になる問題がありました。
解決策：
- テンプレート文を丁寧に設計し、助詞を含めて記述
- 「{word1}で」「{word2}が」のように、助詞を固定
- 複数パターンを用意し、最も自然なものを選択
2. ボケが唐突にならないように
ボケ要素が唐突すぎると、不自然になります。「プログラミング学習には、から揚げが必要」では意味不明です。
解決策：
- 「でも〇〇も」「そして〇〇は必須」のように、ボケであることを明示
- ボケの前に「あと」「ちなみに」などの接続詞を追加
- ユーモアとして受け取られやすい表現を選定
3. コピー機能の実装
生成した文章を簡単にコピーできるように、ボタンを追加しました。
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert('コピーしました！');
}).catch(err => {
console.error('コピー失敗:', err);
});
}
開発中の課題と解決策
課題1: バリエーションが少ない
テンプレートが5種類、ボケが20個だと、すぐに飽きられてしまいます。
解決策：
- テンプレートを10種類に増やす（将来的に20種類へ）
- ボケ要素を100個に拡充（ユーザーからの投稿機能も検討）
- カテゴリ別にボケを選択できる機能を追加
課題2: ワードの数が固定
2〜3個のワード前提で設計したため、1個や4個以上のワードに対応できませんでした。
解決策：
- ワード数に応じて、適切なテンプレートを選択
- 余ったワードは無視、不足分はランダムワードで補完
課題3: モバイル対応
スマホで使う人が多いため、レスポンシブ対応が必須でした。
解決策：
- 入力フォームを大きく（最低44px × 44px）
- 生成された文章を読みやすいフォントサイズに（16px以上）
- コピーボタンをタップしやすい位置に配置
ユーザーからの反応
好評だった点
- 「投稿のネタに困った時に便利」
- 「ボケが面白くて、何度も生成してしまう」
- 「シンプルで使いやすい」
- 「無料で広告がないのが良い」
改善要望
- 「ボケの強度を調整したい（ガチ/ややボケ/激ボケ）」
- 「生成した文章を保存・履歴管理したい」
- 「X（Twitter）に直接投稿できる機能が欲しい」
- 「文章のトーン（丁寧/カジュアル/若者言葉）を選びたい」
今後の展望
機能追加予定
- ボケ強度調整：スライダーで調整可能に
- 文章トーン選択：丁寧語、タメ口、若者言葉など
- 履歴機能：過去に生成した文章を保存
- X連携：OAuth認証で直接投稿
- ハッシュタグ提案：関連するハッシュタグを自動提案
技術的改善
- 自然言語処理（NLP）の導入で、より自然な文章生成
- 機械学習モデルで、バズりやすい文章パターンを学習
- ユーザー投稿のテンプレート・ボケを収集し、データベース化
このプロジェクトで学んだこと
技術面
- テンプレートエンジンの基本：プレースホルダー置き換えの仕組み
- ランダム性の制御：Math.random()の効果的な使い方
- クリップボードAPI：navigator.clipboard.writeText()の実装
- UI/UX設計：シンプルさと機能性のバランス
プロダクト開発
- ユーザーフィードバックの重要性：想定外の使い方を知れる
- 小さく始める：完璧を目指さず、MVPでリリース
- ユーモアの価値：実用性だけでなく、楽しさも大切
まとめ
X投稿文ジェネーターは、シンプルながら実用性とユーモアを兼ね備えたツールです。このプロジェクトのポイントをまとめます：
- 仕組み：テンプレート + ワード置き換え + ランダムなボケ要素
- 技術：Vanilla JavaScript、クリップボードAPI、レスポンシブ対応
- 工夫：自然な文章、適切なボケ、コピー機能
- 課題：バリエーション不足、ワード数固定 → 今後改善予定
- 今後：ボケ強度調整、X連携、機械学習導入
「こんなツールがあったら面白い」というアイデアを、実際に形にすることで、プログラミングスキルも向上しました。皆さんも、ぜひ自分のアイデアを形にしてみてください！
この記事が役に立ったら、ぜひシェアしてください！