見出し画像

コピペするだけ!簡単「ドリンク爆速冷却タイマー」

暑い中、帰宅後の飲み物は欠かせません。

アルコールなのかソフトドリンクなのかは人それぞれですが、帰宅後の一杯はキンキンに冷えたものを飲みたいところ。

残念ながら私は完全なやらかしをした結果、お酒はほとんど飲めなくなったのでソフトドリンク派です。

けれども、ちょくちょく飲み物を冷やし忘れて冷凍庫で緊急冷却する羽目に陥ります。

これがまた、結構な頻度で冷凍庫に入れたまま忘れます!

どうも、目の前に見えていないものを覚えておくことが苦手すぎて😅
「あとで飲もう」と思って入れたものが、2〜3日後に凍結状態で発見されることもあります😂

なので、そんなことにならないようにしっかりと対策を打つ必要があります!


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

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


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

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

Geminiで簡単!ツール作成!

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


外出先から帰宅したときに飲み物が冷えていないときの絶望感を減らしたい。
キッチンペーパーを濡らして冷凍庫で冷やしたときに、ドリンクが丁度よく冷えるまでのタイマーを作ったらどうだろうか。
別タブで描画するものを作ると、Geminiさんはいつも苦戦します。


濡らしたキッチンペーパーでドリンクをくるむ!

そのまま冷凍庫へ投入!

ブックマークをぽちっとな!

ドリンクのサイズ、缶かペットボトルか選ぶと!

冷却完了時間までのカウントダウンを表示する!


🛠️ 使い方(スマホ版)

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

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

2. 「編集」を開く

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

3. 内容を書き換える

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

  • 名前: (自分が分かりやすい名前)

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

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


📋これを貼ります!

javascript:(function(){  const w = window.open('about:blank', '_blank');  if (!w) return;  const d = w.document;  d.title = '🧊 ドリンク爆速冷却タイマー';  /* CSS Styles */  const style = d.createElement('style');  style.textContent = `    * { box-sizing: border-box; margin: 0; padding: 0; }    body {      background-color: #0d1117;      color: #c9d1d9;      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;      display: flex;      justify-content: center;      align-items: center;      min-height: 100vh;      padding: 16px;    }    .card {      background-color: #161b22;      border: 1px solid #30363d;      border-radius: 16px;      padding: 24px;      width: 100%;      max-width: 420px;      text-align: center;      box-shadow: 0 8px 24px rgba(0,0,0,0.5);    }    h1 {      color: #58a6ff;      font-size: 1.4rem;      font-weight: bold;      margin-bottom: 20px;    }    .preset-group {      display: flex;      gap: 8px;      justify-content: center;      margin-bottom: 24px;    }    .btn {      flex: 1;      background-color: #21262d;      color: #c9d1d9;      border: 1px solid #30363d;      padding: 10px 8px;      border-radius: 8px;      font-weight: bold;      cursor: pointer;      transition: all 0.2s;    }    .btn:hover { background-color: #30363d; }    .btn.active {      background-color: #1f6beb;      border-color: #388bfd;      color: #ffffff;    }    .timer-display {      font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;      font-size: 3.5rem;      font-weight: bold;      color: #79c0ff;      margin: 16px 0;      line-height: 1;    }    .instruction-card {      background-color: rgba(255, 123, 114, 0.1);      border: 1px solid #ff7b72;      border-radius: 8px;      padding: 12px;      color: #ff7b72;      font-size: 1.1rem;      font-weight: bold;      margin-top: 20px;      display: none;    }  %60;  d.head.appendChild(style);  /* DOM Construction */  const card = d.createElement('div');  card.className = 'card';  const title = d.createElement('h1');  title.textContent = '🧊 ドリンク爆速冷却タイマー';  card.appendChild(title);  const presetGroup = d.createElement('div');  presetGroup.className = 'preset-group';  const presets = [    { label: '缶350ml', min: 10 },    { label: '缶500ml', min: 12 },    { label: 'PET500', min: 15 }  ];  const buttons = [];  let timerId = null;  let endTime = null;  let wakeLock = null;  const timerDisplay = d.createElement('div');  timerDisplay.className = 'timer-display';  timerDisplay.textContent = '00 : 00';  const instructionCard = d.createElement('div');  instructionCard.className = 'instruction-card';  /* Functions */  const requestWakeLock = async () => {    try {      if ('wakeLock' in w.navigator) {        wakeLock = await w.navigator.wakeLock.request('screen');      }    } catch (e) {}  };  const playAlarm = () => {    try {      const AudioCtx = w.AudioContext || w.webkitAudioContext;      if (!AudioCtx) return;      const ctx = new AudioCtx();            const playBeep = (startTime) => {        const osc = ctx.createOscillator();        const gain = ctx.createGain();        osc.type = 'sine';        osc.frequency.setValueAtTime(880, startTime);        gain.gain.setValueAtTime(0.1, startTime);        gain.gain.exponentialRampToValueAtTime(0.0001, startTime + 0.15);        osc.connect(gain);        gain.connect(ctx.destination);        osc.start(startTime);        osc.stop(startTime + 0.15);      };      const now = ctx.currentTime;      playBeep(now);      playBeep(now + 0.2);      playBeep(now + 0.4);      playBeep(now + 0.6);    } catch (e) {}  };  const startTimer = (minutes) => {    if (timerId) clearInterval(timerId);        requestWakeLock();    const durationMs = minutes * 60 * 1000;    endTime = Date.now() + durationMs;    const targetDate = new Date(endTime);    const hours = String(targetDate.getHours()).padStart(2, '0');    const mins = String(targetDate.getMinutes()).padStart(2, '0');    instructionCard.textContent = %60👉 ${hours}:${mins} に冷凍庫から出せ!%60;    instructionCard.style.display = 'block';    const updateTimer = () => {      const remaining = Math.max(0, endTime - Date.now());      const totalSec = Math.ceil(remaining / 1000);      const m = String(Math.floor(totalSec / 60)).padStart(2, '0');      const s = String(totalSec % 60).padStart(2, '0');            timerDisplay.textContent = %60${m} : ${s}%60;      d.title = %60(${m}:${s}) 🧊 ドリンク爆速冷却タイマー%60;      if (remaining <= 0) {        clearInterval(timerId);        timerId = null;        if (wakeLock) {          wakeLock.release().catch(() => {});          wakeLock = null;        }        playAlarm();        setTimeout(() => {          w.alert('⏰ 爆速冷却完了!キンキンに冷えたドリンクを冷凍庫から取り出してください!');        }, 100);      }    };    updateTimer();    timerId = setInterval(updateTimer, 250);  };  presets.forEach((p) => {    const btn = d.createElement('button');    btn.className = 'btn';    btn.textContent = p.label;    btn.addEventListener('click', () => {      buttons.forEach(b => b.classList.remove('active'));      btn.classList.add('active');      startTimer(p.min);    });    buttons.push(btn);    presetGroup.appendChild(btn);  });  card.appendChild(presetGroup);  card.appendChild(timerDisplay);  card.appendChild(instructionCard);  d.body.appendChild(card);})();void(0);

一発作成プロンプト!

ぬるい缶ドリンクやペットボトルを「濡らしたキッチンペーパーで巻いて冷凍庫に入れた時」の爆速冷却時間をタイマーセットし、実行元ページのDOMを一切汚さずに「新規タブ(別タブ)」を起動して画面スリープ防止(Wake Lock)と音響通知を行う「ドリンク爆速冷却タイマー」ブックマークレットを作成してください。

一時保存や外部通信、実行元ページへのDOM追加は完全に禁止とし、完全なES5/ES6互換構文で構成してください。

【画面真っ白(ブランク)の絶対防止ルール(最厳守)】
- `document.open()` および `document.write()`、`document.writeln()` はセキュリティ(TrustedTypes)により画面が真っ白で凍結するため【完全禁止】とします。
- 動作実績のあるストップウォッチと同様、`const w = window.open(); const d = w.document;` を取得したら、`d.write` を一切呼ばずに直接 `d.title` の指定や `d.createElement` によるDOM生成、`d.body.appendChild` のみでUIを構築してください。
- 親画面での prompt() 呼び出しはタブ描画スレッドをフリーズさせるため禁止とし、別タブ内のUI上に選択ボタン(缶350ml: 10分 / 缶500ml: 12分 / PET500: 15分)を配置してタイマーを起動させてください。

【バックグラウンド乖離防止&スリープ防止】
- 1秒ずつの減算ではなく、`const remaining = Math.max(0, endTime - Date.now());` の【絶対時刻差分計算】で残り時間をリアルタイム算出し、スマホがバックグラウンドに行っても時間がズレないようにしてください。
- 新タブ側で `w.navigator.wakeLock.request('screen')` を実行して画面消灯を防止してください。
- タイマー終了時、Web Audio API(AudioContext)でピピピピッと電子音アラームを再生し、`w.alert()` を表示してください。

【新タブ内のUIレイアウトイメージ】
・ 全体背景: #0d1117
・ カード背景: #161b22 (枠線 #30363d, 角丸16px)
・ タイトル: 🧊 ドリンク爆速冷却タイマー (#58a6ff / bold)
・ プリセットボタン: [缶350ml] [缶500ml] [PET500] (選択中は青背景 #1f6beb)
・ メイン表示: 残り 10 : 00 (monospace / 3.5rem / #79c0ff)
・ 行動指示: 👉 21:15 に冷凍庫から出せ! (#ff7b72 / 枠線付きカード)

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

この記事について!

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


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


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

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


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

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


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


有料ツールに挑戦中!

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


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


☕ お時間あればこちらも是非!

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

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