当サイトではこれまで、AI副業診断・プロンプトビルダー・文章チェッカー・ブログ収益シミュレーターと、単一HTMLファイルのツールを記事に埋め込む形で公開してきた。今回はその方式で、AIとは関係のない日常系ツールを4つ同時に作って公開した。
- 家電の電気代シミュレーター — 家電を追加していくと月額・年額を自動計算
- サブスク合計チェッカー — 月額合計とムダを見える化、ブラウザ保存対応
- 睡眠サイクル計算機 — 90分サイクルで就寝・起床時刻を逆算
- 割り勘計算機 — 傾斜配分と端数処理に対応
4つ同時に作れたのは、過去のツール制作で「型」が固まっていたからだ。この記事ではその型と、各ツールで工夫した点を1つずつ解説する。
共通テンプレートという考え方
4ツールはすべて同じ構造でできている。スタイル、マークアップ、スクリプトを1つのカスタムHTMLブロックに収め、クラス名はツールごとの3文字プレフィックス（dks-、sbc-、slc-、wkn-）で統一。レイアウトは「左に入力パネル、右に結果パネル」の2カラムグリッドで、スマホでは1カラムに落ちる。色だけツールごとにグラデーションを変えている。
この型があると、新しいツールの制作は「計算ロジック」と「入力項目の設計」だけを考えればよくなる。1ツールあたりの実装時間は体感で半分以下になった。
各ツールの設計ポイント
電気代：プリセットが本体
電気代の計算式自体は「W ÷ 1000 × 時間 × 日数 × 単価」と単純で、難しさは「自分の家電のワット数が分からない」ことにある。そこでエアコン・冷蔵庫・ドライヤーなど15種類の典型値をプリセットにした。冷蔵庫のように定格と平均消費が大きく違う家電は、年間消費電力量から逆算した平均値を採用している。ツールの価値は計算式ではなく、入力の手間をなくすデータ側にあるという好例だ。
サブスク：localStorageで「次も使える」ツールに
サブスクの見直しは一度きりではなく、数か月ごとに繰り返す作業だ。そこで登録データをlocalStorageに保存し、再訪問時に復元するようにした。サーバー送信なしでデータが残るので、プライバシーの説明もシンプルになる。JSON.parseは壊れたデータで例外を投げるため、try-catchと配列チェックで防御している。
var items = [];
try {
var saved = localStorage.getItem(KEY);
if (saved) { items = JSON.parse(saved); }
if (!(items instanceof Array)) { items = []; }
} catch(e) { items = []; }睡眠：時刻計算は「分」に正規化してから
「7:00の9時間15分前」のような時刻計算は、時と分のまま扱うと繰り下がりでバグりやすい。一度すべて「0時からの分数」に変換して計算し、最後に剰余で24時間に丸めてから hh:mm に戻すのが定石だ。負の値にも対応するため、剰余を2回かけている。
function toStr(m) {
m = ((Math.round(m) % 1440) + 1440) % 1440;
return pad(Math.floor(m / 60)) + ':' + pad(m % 60);
}割り勘：切り上げの「余り」を仕様にする
傾斜配分の計算結果は3,750円のような半端な額になる。これを1円単位で集金するのは現実的ではないので、100円単位などで切り上げ、必ず「余り」が出る設計にした。余りを誤差として隠すのではなく「幹事調整分」として明示するのがポイントで、実際の飲み会の運用と一致する。端数処理は仕様の一部であって、バグではない。
WordPress埋め込みの落とし穴（再掲・重要）
前回のシミュレーター制作で判明したことだが、WordPressはカスタムHTMLブロック内のscriptでも「アンパサンド2つ」の論理積演算子をHTMLエンティティに変換してしまい、JavaScriptが構文エラーで動かなくなる。今回の4ツールは最初からアンパサンドを一切使わずに書いた。論理積はネストしたifで代用できる。
// NG: if (a 論理積 b) { ... } ← アンパサンド2つはWPに壊される
// OK:
var ok = false;
if (a) { if (b) { ok = true; } }
if (ok) { ... }同様に、バッククォート（テンプレートリテラル）も避けて文字列連結で書いている。地味な制約だが、これを守るだけで「ローカルでは動くのにWordPressに貼ると動かない」を完全に防げる。
Claude Codeへの依頼プロンプト例
4ツールをまとめて依頼したときのプロンプトの骨子はこうだ。
日常系の計算ツールを4つ、単一HTMLファイルで作って。
1. 電気代シミュレーター（家電プリセット15種、W×時間×単価）
2. サブスク合計チェッカー（localStorage保存、解約候補の警告）
3. 睡眠サイクル計算機（90分サイクル、入眠15分込み）
4. 割り勘計算機（グループごとの負担率、端数切り上げ）
共通制約:
- 外部ライブラリ禁止、ES5相当の文法で
- クラス名はツールごとに3文字プレフィックス
- アンパサンドとバッククォートをコード内で使わない
（WordPressのカスタムHTMLブロックに貼るため）
- ダークテーマ、入力→結果の2カラム、スマホ1カラム前回も書いたが、機能より先に「制約」を渡すのが重要だ。特にWordPress由来の文字変換の制約は後から直すと全箇所の書き換えになる。
まとめ
型を固めてしまえば、ツールは1つ作るのも4つ作るのもそれほど変わらない。計算ロジックは単純でいい。価値はプリセットのデータ、保存への配慮、結果の見せ方といった「使い勝手」の側にある。次は読者の反応を見ながら、使われたツールの機能を深掘りしていく予定だ。
過去のツール制作記：ブログ収益シミュレーターをHTML/CSS/JSだけで作った方法／AIプロンプトビルダーをHTML/CSS/JSだけで作った方法
