コピペするだけ！簡単「非常食ストック必要量計算機」

へろん

2026年8月5日 17:03

日本は本当に災害の多い地域。

そして、直近では熊本で大きな地震も発生しました。

すぐに行動に移ることのできた方もいれば、私のように金銭的な支援にすら動けなかった方もいるのではないかと思います。

支援できなかったことを悔やむ前に、せめて災害への備えを意識しなおすことが大切ではないかと思います。

今回は曲の貼り付けや文章表現の一部を控えさせていただきます。

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

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

家族の人数から、最低限必要となる備蓄ラインを計算します。

子ども（小学生以下）は、1人を大人0.7人分として計算しています。

年齢や食事量には個人差がありますので、必要に応じて人数を調整してご利用ください。

※ このツールは最低限の備蓄量の目安です。
乳幼児・高齢者・持病のある方・ペットなどは、それぞれ必要な物資を別途ご準備ください。

🛠️ 使い方（スマホ版）

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

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

2. 「編集」を開く

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

3. 内容を書き換える

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

名前： （自分が分かりやすい名前）
URL： もともと入っているURLをすべて消して、コードを貼り付ける。

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

📋これを貼ります！

javascript:(function(){try{var w=window.open("about:blank","_blank");if(!w){alert("ポップアップがブロックされました。");return;}var d=w.document;d.title="🥫 非常食ストック必要量計算機";var head=d.head||d.body||d.documentElement;var meta=d.createElement("meta");meta.setAttribute("name","viewport");meta.setAttribute("content","width=device-width,initial-scale=1.0");head.appendChild(meta);var style=d.createElement("style");style.textContent="*{box-sizing:border-box;margin:0;padding:0;}body{background-color:#0f172a;color:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;}.card{background-color:#1e293b;border:1px solid #334155;border-radius:16px;padding:28px;width:100%;max-width:680px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.5);}h1{color:#38bdf8;font-size:22px;font-weight:bold;margin-bottom:6px;display:flex;align-items:center;gap:8px;}.sub{color:#94a3b8;font-size:14px;margin-bottom:24px;}.input-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px;background:#0f172a;padding:16px;border-radius:12px;border:1px solid #334155;}.input-group{display:flex;flex-direction:column;gap:8px;}.input-group label{font-size:13px;color:#cbd5e1;font-weight:bold;}.ctrl-box{display:flex;align-items:center;background:#1e293b;border:1px solid #475569;border-radius:8px;overflow:hidden;}button.btn-ctrl{background:#334155;color:#f8fafc;border:none;width:38px;height:38px;font-size:18px;font-weight:bold;cursor:pointer;transition:background 0.2s;}button.btn-ctrl:hover{background:#475569;}button.btn-ctrl:active{background:#64748b;}input.num-inp{background:transparent;border:none;color:#f8fafc;width:100%;text-align:center;font-size:16px;font-weight:bold;-moz-appearance:textfield;}input.num-inp::-webkit-inner-spin-button,input.num-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}.res-card{background:#0f172a;border:1px solid #334155;border-left:4px solid #38bdf8;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;}.res-title{font-size:14px;color:#94a3b8;display:flex;align-items:center;gap:6px;}.res-val{font-size:20px;font-weight:bold;color:#f8fafc;}.res-sub{font-size:12px;color:#38bdf8;}";head.appendChild(style);var body=d.body||d.documentElement;var card=d.createElement("div");card.className="card";var h1=d.createElement("h1");h1.textContent="🥫 非常食ストック必要量計算機";card.appendChild(h1);var sub=d.createElement("div");sub.className="sub";sub.textContent="家族構成と日数から、災害時に必要な備蓄ラインを即計算";card.appendChild(sub);var inSec=d.createElement("div");inSec.className="input-section";var state={adult:2,child:1,days:7};var inputs=[{key:"adult",label:"大人（中学生以上）",min:0},{key:"child",label:"子ども（小学生以下）",min:0},{key:"days",label:"備蓄日数（日）",min:1}];var playBeep=function(){try{var AudioCtx=w.AudioContext||w.webkitAudioContext;if(!AudioCtx)return;var ctx=new AudioCtx();var playTone=function(freq,start,dur){var osc=ctx.createOscillator();var gain=ctx.createGain();osc.type="sine";osc.frequency.setValueAtTime(freq,ctx.currentTime+start);gain.gain.setValueAtTime(0.05,ctx.currentTime+start);gain.gain.exponentialRampToValueAtTime(0.0001,ctx.currentTime+start+dur);osc.connect(gain);gain.connect(ctx.destination);osc.start(ctx.currentTime+start);osc.stop(ctx.currentTime+start+dur);};playTone(1200,0,0.08);playTone(1600,0.09,0.12);}catch(e){}};inputs.forEach(function(item){var grp=d.createElement("div");grp.className="input-group";var lbl=d.createElement("label");lbl.textContent=item.label;grp.appendChild(lbl);var ctrl=d.createElement("div");ctrl.className="ctrl-box";var btnMinus=d.createElement("button");btnMinus.className="btn-ctrl";btnMinus.textContent="-";var inp=d.createElement("input");inp.type="number";inp.className="num-inp";inp.value=state[item.key];inp.min=item.min;var btnPlus=d.createElement("button");btnPlus.className="btn-ctrl";btnPlus.textContent="+";var update=function(v,sound){var num=parseInt(v,10);if(isNaN(num)||num<item.min)num=item.min;state[item.key]=num;inp.value=num;calc();if(sound)playBeep();};btnMinus.addEventListener("click",function(){update(state[item.key]-1,true);});btnPlus.addEventListener("click",function(){update(state[item.key]+1,true);});inp.addEventListener("change",function(){update(inp.value,true);});ctrl.appendChild(btnMinus);ctrl.appendChild(inp);ctrl.appendChild(btnPlus);grp.appendChild(ctrl);inSec.appendChild(grp);});card.appendChild(inSec);var grid=d.createElement("div");grid.className="grid";var resItems=[{key:"water",title:"🚰 飲料水・調理用水",border:"#38bdf8"},{key:"food",title:"🍚 主食（ご飯・パン・麺）",border:"#f59e0b"},{key:"can",title:"🥫 缶詰・おかず類",border:"#ef4444"},{key:"soup",title:"🥢 乾物・味噌汁・スープ",border:"#10b981"}];var resElements={};resItems.forEach(function(ri){var rc=d.createElement("div");rc.className="res-card";rc.style.borderLeftColor=ri.border;var rt=d.createElement("div");rt.className="res-title";rt.textContent=ri.title;var rv=d.createElement("div");rv.className="res-val";var rs=d.createElement("div");rs.className="res-sub";rc.appendChild(rt);rc.appendChild(rv);rc.appendChild(rs);grid.appendChild(rc);resElements[ri.key]={val:rv,sub:rs};});card.appendChild(grid);body.appendChild(card);function calc(){var p=state.adult+(state.child*0.7);var dVal=state.days;var waterL=Math.ceil(p*dVal*3);var waterBot=Math.ceil(waterL/2);var foodCnt=Math.ceil(p*dVal*3);var canCnt=Math.ceil(p*dVal*2);var soupCnt=Math.ceil(p*dVal*1.5);resElements.water.val.textContent=waterL+" L";resElements.water.sub.textContent="（2Lペットボトル 約 "+waterBot+" 本）";resElements.food.val.textContent="約 "+foodCnt+" 食";resElements.food.sub.textContent="（パックご飯、カップ麺など）";resElements.can.val.textContent="約 "+canCnt+" 缶";resElements.can.sub.textContent="（サバ缶、焼き鳥缶など）";resElements.soup.val.textContent="約 "+soupCnt+" 食";resElements.soup.sub.textContent="（フリーズドライ味噌汁、わかめ等）";}calc();}catch(e){}})();void(0);

一発作成プロンプト！

家族の人数（大人・子ども）と備蓄日数（例：3日〜7日）を入力・調整するだけで、農林水産省等の防災基準に基づいた「必要な水（L/2Lペットボトル本数）」「主食（パックご飯・乾麺等）」「缶詰・おかず類」「乾物・スープ類」の必要備蓄量を一瞬で一括計算するツール「🥫 非常食ストック必要量計算機」を、新規タブ（別タブ）で起動するブックマークレットを作成してください。

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

【TrustedHTMLエラー（This document requires 'TrustedHTML' assignment）の絶対回避ルール（最厳守）】
- `innerHTML`、`outerHTML`、`document.write()`、`insertAdjacentHTML` 等の「文字列によるHTML書き込み」は、Trusted Typesセキュリティにより『This document requires 'TrustedHTML' assignment』エラーが発生してスクリプトが即死するため【完全禁止】とします。
- 新タブ内のすべてのテキスト・UI要素は、必ず `document.createElement()` で要素を生成し、`element.textContent = "..."` や `element.setAttribute()`、`element.appendChild()` の純粋なDOM APIのみを用いて組み立ててください。

【JavaScript即死・ブランク化の絶対防止構造】
- `const w = window.open(); const d = w.document;` を取得後、`d.title` を「🥫 非常食ストック必要量計算機」に設定し、開いた直後の `w.document` の `head` や `body` が null の場合でも絶対にエラー停止を起こさないよう、安全なフォールバック処理（`const target = d.head || d.body || d.documentElement;` 等）を徹底してください。
- 親画面での prompt() 呼び出しは別タブの描画スレッドを一時停止させるため【完全禁止】とします。

【計算ロジック（防災備蓄基準）】
- 入力項目：大人（中学生以上）人数［初期値: 2人］、子ども（小学生以下）人数［初期値: 1人］、備蓄日数［初期値: 7日］（ボタンや数値入力でリアルタイム変更可能にする）。
- 計算用人数 ＝ 大人人数 ＋ (子ども人数 × 0.7)
- 1. 飲料水・調理用水: 計算用人数 × 日数 × 3 L（2Lペットボトル換算＝全L ÷ 2 を切り上げ）
- 2. 主食（ご飯・パン・乾麺等）: 計算用人数 × 日数 × 3 食（端数切り上げ）
- 3. 缶詰・おかず類（肉魚野菜缶）: 計算用人数 × 日数 × 2 缶（端数切り上げ）
- 4. 乾物・味噌汁・スープ類: 計算用人数 × 日数 × 1.5 個（端数切り上げ）

【新タブ内のUIレイアウトおよび機能】
・ 全体背景: #0f172a（ダークモード）
・ 画面中央カード: #1e293b (角丸16px, 枠線 #334155, 幅最大680px)
・ タイトル: 🥫 非常食ストック必要量計算機 (#38bdf8 / 22px / bold)
・ サブタイトル: 「家族構成と日数から、災害時に必要な備蓄ラインを即計算」(#94a3b8 / 14px)
・ 入力エリア: 大人人数、子ども人数、備蓄日数の入力UI（[+] [-] ボタンまたは数値入力）
・ 計算結果グリッド（視覚的にわかりやすいカード型配置）：
  ・ 🚰 飲料水: 〇〇 L（2Lペットボトル 約 〇〇 本）
  ・ 🍚 主食: 約 〇〇 食（パックご飯、カップ麺など）
  ・ 🥫 缶詰・おかず: 約 〇〇 缶（サバ缶、焼き鳥缶など）
  ・ 乾物・スープ: 約 〇〇 食（フリーズドライ味噌汁、わかめ等）
・ 効果音機能: 人数や日数を変更・再計算した際、Web Audio API でピピッ（1200Hz/1600Hz）と高音ビープ音を鳴らす。

【出力コードの最適化ルール（最厳守）】
- コード長節約のため、出力するJavaScriptコード内の「コメント（// や /* */）」および「無駄なインデント・改行」は極力排除して圧縮されたコードを出力してください。

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

この記事について！

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

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

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

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

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

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

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

有料ツールに挑戦中！

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