コピペするだけ！簡単「今日の５・７・５ガチャ」

俳句、詠んでますか？

ちびまる子ちゃんのおじいちゃん、友蔵さんの「友蔵 心の俳句」のようにユーモア溢れる俳句が読めると、人生きっと楽しい。

noteで今日の俳句、なんてやるのも面白いですね！

感性がお亡くなりになっている私には正攻法では無理な話。

だったら、それができるようなものを作ってしまえばいい。

それだけのことでした。

読ませて頂いた記事をマガジンに追加させて頂いております。

伺った際にはマガジンへの登録をさせて頂いていきますが、それはやめてほしいなどありましたら、DM / コメントで一言頂けましたら幸いです😊

ブックマークに置いとくだけ！

コピペするだけの簡単小道具！

Geminiで簡単！ツール作成！

一発作成プロンプトも紹介！

今日は8月19日。
819で俳句の日らしいよ。
雑談からGeminiさんが教えてくれたけど、それでどうしろって言うのさ！
から始まる、いつものブックマークレット制作なのであった。

⭐️ 今日のツールはこんなものだよ！ (WEBアプリ版)

必要なことばは適当にツールの中に放り込んだ！

あとはランダムボタンを押す！

左右ボタンで微調整！

なんとなく俳句が出来上がる！

風流度として点数化！

ひとことの評価もついてくる！

ハッシュタグ付きでコピーもできる！

🛠️ 使い方（スマホ版）

1. 適当なページをブックマークする

まずは、今見ているこのページなど、何でもいいので一度ブックマークに登録します。

2. 「編集」を開く

ブックマークバーにある今作ったブックマークを長押しして、「編集」を選択します。

3. 内容を書き換える

表示された設定画面で、以下の2箇所を変更して保存します。

• 名前：（自分が分かりやすい名前）

• URL：もともと入っているURLをすべて消して、コードを貼り付ける。

ブックマークを押すだけ簡単！

💡 Androidをご使用の場合、以下の記事をご確認ください！

📋 これを貼ります！

javascript:(function(){var w=window.open('','_blank');if(!w)return;var d=w.document;var head=d.head||d.getElementsByTagName('head')[0]||d.createElement('head');var body=d.body||d.getElementsByTagName('body')[0]||d.createElement('body');if(!d.head)d.documentElement.appendChild(head);if(!d.body)d.documentElement.appendChild(body);d.title='🍵 今日の5・7・5ガチャ';var meta=d.createElement('meta');meta.name='viewport';meta.content='width=device-width,initial-scale=1.0';head.appendChild(meta);d.documentElement.style.cssText='margin:0;padding:0;background-color:#0f172a;color:#f8fafc;font-family:system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none;';body.style.cssText='margin:0;padding:20px 16px;display:flex;justify-content:center;align-items:center;min-height:100vh;box-sizing:border-box;background-color:#0f172a;';var card=d.createElement('div');card.style.cssText='background-color:#1e293b;border:1px solid #334155;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,0.5);width:100%;max-width:680px;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;';body.appendChild(card);var state = { i1: 0, i2: 0, i3: 0 };var list1 = ['暑すぎる', '寝不足だ', '洗濯物', '腹減った', '二度寝して', '財布見る', '夏休み', '冷房が', 'やる気ゼロ', '通知鳴る', '月曜日', '腹下す', '朝が来た', 'アイス買う', '定時前', '猫がいる'];var list2 = ['今日も一日', '何も進まず', 'アイスを食べて', '買うもの忘れ', '画面見つめて', '宿題たまり', '床で寝落ちし', 'ため息ひとつ', '無限に眠く', '現実逃避', 'SNS見て', '予定を忘れ', '時計二度見し', '座ったままの', 'YouTube見て', '意識が飛びて'];var list3 = ['日が暮れる', 'また明日', '金がない', '米を炊く', '知らんけど', '風流よ', 'もう寝よう', '汗だくに', '夢の中', '腹が鳴る', 'まあいいか', '時を待つ', '立ちすくむ', '夜が来る', '空を見る', '生き延びる'];var comments = [ '【日常の真理】ただの現実逃避が、言葉の力で見事な侘び寂びへと昇華されています。', '【圧倒的共感】誰もが胸に秘めた現代人のやるせなさを的確に捉えた秀作です。', '【風流の極み】だらけた日常の中にひらめく、一握の雅を感じさせます。', '【悟りの境地】抗えぬ欲求と現実を受け入れた、潔くも深い一句です。', '【名人の一撃】夏の暑さと気だるさが、見事なリズムで調和しています。', '【無常の響き】飾らぬ本音のリアルが心に染み入る、令和のサマーアンセム。'];var titleBox = d.createElement('div');titleBox.style.cssText = 'text-align:center;display:flex;flex-direction:column;gap:4px;';var title = d.createElement('div');title.textContent = '🍵 今日の5・7・5ガチャ';title.style.cssText = 'color:#38bdf8;font-size:20px;font-weight:bold;text-align:center;';var subtitle = d.createElement('div');subtitle.textContent = '日常のやるせなさを雅（みやび）に変換する俳句メーカー';subtitle.style.cssText = 'color:#94a3b8;font-size:12px;text-align:center;';titleBox.appendChild(title);titleBox.appendChild(subtitle);card.appendChild(titleBox);var tanzaku = d.createElement('div');tanzaku.style.cssText = 'background-color:#0f172a;border:2px solid #f59e0b;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;';card.appendChild(tanzaku);var row1 = d.createElement('div');row1.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;';var btnL1 = d.createElement('button');btnL1.textContent = '◀';btnL1.style.cssText = 'background:#1e293b;border:1px solid #475569;color:#94a3b8;border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;';var txt1 = d.createElement('div');txt1.style.cssText = 'flex:1;text-align:center;font-size:22px;font-weight:bold;color:#fef08a;letter-spacing:2px;cursor:pointer;';var btnR1 = d.createElement('button');btnR1.textContent = '▶';btnR1.style.cssText = 'background:#1e293b;border:1px solid #475569;color:#94a3b8;border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;';row1.appendChild(btnL1);row1.appendChild(txt1);row1.appendChild(btnR1);tanzaku.appendChild(row1);var row2 = d.createElement('div');row2.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;';var btnL2 = d.createElement('button');btnL2.textContent = '◀';btnL2.style.cssText = 'background:#1e293b;border:1px solid #475569;color:#94a3b8;border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;';var txt2 = d.createElement('div');txt2.style.cssText = 'flex:1;text-align:center;font-size:22px;font-weight:bold;color:#fef08a;letter-spacing:2px;cursor:pointer;';var btnR2 = d.createElement('button');btnR2.textContent = '▶';btnR2.style.cssText = 'background:#1e293b;border:1px solid #475569;color:#94a3b8;border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;';row2.appendChild(btnL2);row2.appendChild(txt2);row2.appendChild(btnR2);tanzaku.appendChild(row2);var row3 = d.createElement('div');row3.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;';var btnL3 = d.createElement('button');btnL3.textContent = '◀';btnL3.style.cssText = 'background:#1e293b;border:1px solid #475569;color:#94a3b8;border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;';var txt3 = d.createElement('div');txt3.style.cssText = 'flex:1;text-align:center;font-size:22px;font-weight:bold;color:#fef08a;letter-spacing:2px;cursor:pointer;';var btnR3 = d.createElement('button');btnR3.textContent = '▶';btnR3.style.cssText = 'background:#1e293b;border:1px solid #475569;color:#94a3b8;border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;';row3.appendChild(btnL3);row3.appendChild(txt3);row3.appendChild(btnR3);tanzaku.appendChild(row3);var infoBox = d.createElement('div');infoBox.style.cssText = 'background:#0f172a;border:1px solid #334155;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;';var scoreBadge = d.createElement('div');scoreBadge.style.cssText = 'color:#38bdf8;font-size:13px;font-weight:bold;';var commentBox = d.createElement('div');commentBox.style.cssText = 'color:#cbd5e1;font-size:13px;line-height:1.5;';infoBox.appendChild(scoreBadge);infoBox.appendChild(commentBox);card.appendChild(infoBox);var btnGacha = d.createElement('button');btnGacha.textContent = '🎲 ランダム一句ガチャ';btnGacha.style.cssText = 'background-color:#0284c7;color:#ffffff;border:none;border-radius:8px;font-size:16px;font-weight:bold;width:100%;padding:12px;cursor:pointer;box-shadow:0 4px 6px -1px rgba(0,0,0,0.3);';card.appendChild(btnGacha);var btnCopy = d.createElement('button');btnCopy.textContent = '📋 出来上がった俳句をコピー';btnCopy.style.cssText = 'background-color:#334155;color:#ffffff;border:none;border-radius:8px;font-size:13px;width:100%;padding:10px;cursor:pointer;';card.appendChild(btnCopy);function playSound() { try { var AudioCtx = w.AudioContext || w.webkitAudioContext; if (!AudioCtx) return; var ctx = new AudioCtx(); var osc = ctx.createOscillator(); var gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(523.25, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(1046.5, ctx.currentTime + 0.15); gain.gain.setValueAtTime(0.3, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 0.3); } catch(e) {}}function calc() { state.i1 = (state.i1 % list1.length + list1.length) % list1.length; state.i2 = (state.i2 % list2.length + list2.length) % list2.length; state.i3 = (state.i3 % list3.length + list3.length) % list3.length;  txt1.textContent = list1[state.i1]; txt2.textContent = list2[state.i2]; txt3.textContent = list3[state.i3];  var score = ((state.i1 * 13 + state.i2 * 17 + state.i3 * 19) % 21) + 80; var commentIdx = (state.i1 + state.i2 + state.i3) % comments.length;  scoreBadge.textContent = '【風流度: ' + score + '点】'; commentBox.textContent = comments[commentIdx];}btnL1.onclick = function() { state.i1--; calc(); };btnR1.onclick = function() { state.i1++; calc(); };txt1.onclick = function() { state.i1++; calc(); };btnL2.onclick = function() { state.i2--; calc(); };btnR2.onclick = function() { state.i2++; calc(); };txt2.onclick = function() { state.i2++; calc(); };btnL3.onclick = function() { state.i3--; calc(); };btnR3.onclick = function() { state.i3++; calc(); };txt3.onclick = function() { state.i3++; calc(); };btnGacha.onclick = function() { state.i1 = Math.floor(Math.random() * list1.length); state.i2 = Math.floor(Math.random() * list2.length); state.i3 = Math.floor(Math.random() * list3.length); calc(); playSound();};btnCopy.onclick = function() { var haiku = list1[state.i1] + ' ' + list2[state.i2] + ' ' + list3[state.i3]; var fullText = haiku + '\n' + scoreBadge.textContent + '\n' + commentBox.textContent + '\n#俳句の日 #今日の575ガチャ';  var success = function() { btnCopy.textContent = '✨ クリップボードにコピーしました！'; setTimeout(function() { btnCopy.textContent = '📋 出来上がった俳句をコピー'; }, 2000); };  var copied = false; try { var ta = d.createElement('textarea'); ta.value = fullText; ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0.01;pointer-events:none;'; body.appendChild(ta); ta.focus(); ta.select(); if (d.execCommand('copy')) { copied = true; success(); } body.removeChild(ta); } catch(e) {}  if (!copied && w.navigator && w.navigator.clipboard && w.navigator.clipboard.writeText) { w.navigator.clipboard.writeText(fullText).then(function() { success(); }).catch(function() {}); }};calc();})();void(0);

⚙️ 一発作成プロンプト！

8月19日（俳句の日）を題材に、誰の日常にもある「暑さ・だるさ・家事・仕事・欲望」を5・7・5の風流な一句に仕立てて遊ぶガチャ＆カスタムツール「🍵 今日の5・7・5ガチャ」を、新規タブ（別タブ）で起動するブックマークレットを作成してください。

一時保存や外部通信、実行元ページへのDOM追加は完全に禁止とし、純粋なJavaScriptのインメモリ処理のみで構成してください。

【TrustedHTMLエラー回避 ＆ 新規タブ生成の絶対最厳守ルール（最重要）】
1. `document.write()`、`document.open()`、`innerHTML`、`outerHTML`、`<style>` タグ生成は完全禁止。
2. すべての装飾スタイルは、各要素の `.style.cssText` を用いたインライン直接指定のみで行ってください。
3. 新タブの初期化は、以下のコードブロックを【一切改変せず先頭にそのまま配置】してください：
var w=window.open('','_blank');if(!w)return;var d=w.document;var head=d.head||d.getElementsByTagName('head')[0]||d.createElement('head');var body=d.body||d.getElementsByTagName('body')[0]||d.createElement('body');if(!d.head)d.documentElement.appendChild(head);if(!d.body)d.documentElement.appendChild(body);d.title='🍵 今日の5・7・5ガチャ';var meta=d.createElement('meta');meta.name='viewport';meta.content='width=device-width,initial-scale=1.0';head.appendChild(meta);d.documentElement.style.cssText='margin:0;padding:0;background-color:#0f172a;color:#f8fafc;font-family:system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none;';body.style.cssText='margin:0;padding:20px 16px;display:flex;justify-content:center;align-items:center;min-height:100vh;box-sizing:border-box;background-color:#0f172a;';var card=d.createElement('div');card.style.cssText='background-color:#1e293b;border:1px solid #334155;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,0.5);width:100%;max-width:680px;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;';body.appendChild(card);
4. テンプレートリテラル（バックティック ` ）、const/let、アロー関数は禁止し、【var 宣言】と【シングルクォート（'）文字列結合】のみを使用してください。

【データ構造＆ゲームロジック】
- 変数管理：
  ・ `var state = { i1: 0, i2: 0, i3: 0 };`
  ・ 上五(16種): ['暑すぎる', '寝不足だ', '洗濯物', '腹減った', '二度寝して', '財布見る', '夏休み', '冷房が', 'やる気ゼロ', '通知鳴る', '月曜日', '腹下す', '朝が来た', 'アイス買う', '定時前', '猫がいる']
  ・ 中七(16種): ['今日も一日', '何も進まず', 'アイスを食べて', '買うもの忘れ', '画面見つめて', '宿題たまり', '床で寝落ちし', 'ため息ひとつ', '無限に眠く', '現実逃避', 'SNS見て', '予定を忘れ', '時計二度見し', '座ったままの', 'YouTube見て', '意識が飛びて']
  ・ 下五(16種): ['日が暮れる', 'また明日', '金がない', '米を炊く', '知らんけど', '風流よ', 'もう寝よう', '汗だくに', '夢の中', '腹が鳴る', 'まあいいか', '時を待つ', '立ちすくむ', '夜が来る', '空を見る', '生き延びる']
  ・ 評定コメント(6種):
    ['【日常の真理】ただの現実逃避が、言葉の力で見事な侘び寂びへと昇華されています。',
     '【圧倒的共感】誰もが胸に秘めた現代人のやるせなさを的確に捉えた秀作です。',
     '【風流の極み】だらけた日常の中にひらめく、一握の雅を感じさせます。',
     '【悟りの境地】抗えぬ欲求と現実を受け入れた、潔くも深い一句です。',
     '【名人の一撃】夏の暑さと気だるさが、見事なリズムで調和しています。',
     '【無常の響き】飾らぬ本音のリアルが心に染み入る、令和のサマーアンセム。']

- 機能とDOM構築のルール（実行エラー防止）：
  1. ヘルパー関数を作らず、上五・中七・下五の各行（左ボタン・テキスト表示枠・右ボタン）をフラットに card 内の短冊ボックス（背景 #0f172a, 金枠 #f59e0b）へ appendChild してください。
  2. 表示テキスト要素（3つ）、スコアバッジ、コメント枠の参照を変数に保持し、末尾に定義する `function calc()` の中で `.textContent` を直接書き換えてください。
  3. ボタン操作：
     - 各行の［◀］［▶］および句テキストクリックで各インデックスを `+1` / `-1` して `calc()` を実行。
     - ［🎲 ランダム一句ガチャ］ボタンで3つのインデックスを乱数更新して `calc()` と Web Audio API（和風ビープ音）を実行。
     - ［📋 出来上がった俳句をコピー］ボタンで `navigator.clipboard.writeText` によるコピーを実行（完了時テキスト一時変化）。
  4. スクリプトの最下部で `calc();` を呼び出して初期描画を行ってください。

【UIデザイン】
・ 全体背景: #0f172a, メインカード: #1e293b (角丸16px, 幅最大680px, #334155枠線)
・ タイトル: 🍵 今日の5・7・5ガチャ (#38bdf8 / 20px / 太字 / センター)
・ サブタイトル: 「日常のやるせなさを雅（みやび）に変換する俳句メーカー」(#94a3b8 / 12px / センター)
・ 短冊風エリア: 背景 #0f172a, 枠線 #f59e0b (2px実線), 角丸12px, padding: 20px
・ 句テキスト: 22px / bold / #fef08a (金文字) / letter-spacing: 2px
・ ガチャボタン: #0284c7 (角丸8px, 16px/bold, 白文字, 幅100%, padding: 12px)
・ コピーボタン: #334155 (角丸8px, 13px, 白文字, 幅100%, padding: 10px)

【出力形式（絶対厳守）】
解説テキストや前置き文は一切出力しないでください。
全体を javascript:(function(){ ... })();void(0); のラッパー構造で記述し、単一コードブロックのみを出力してください。

この記事について！

今更ながら、Gemini 3分クッキング記事について注意点など｜へろん

📖 エッセイ

どうやら私は、ひとりだけ別の世界に住んでいるようだ (全4話)

📖 短編小説

💡 PR記事を書かせて頂いています！

❓ 何でもどうぞ！答えられるものは全て答えます！

設置はお済みですか？図らずも人の庭でnote質問箱を試す！｜へろん

メンバーシップ始めました！

まだ手探りですが、ご要望/無茶振り/質問、可能な限りお受けします！

参加させて頂いています！是非チェックしてみてください😆

✏️ 有料ツールに挑戦中！

OBS Studio用リモコン | OBS画面を前面に出さずに操作できます！

🧰 小道具すべて、こちらに置きました！

☕ サイトマップあります！