Daijiro Taira

暮らし・料理ブラウザで動く

電気圧力鍋レシピ帳（KPC-MA3/MB3 3L）

アイリスオーヤマ公式の電気圧力鍋3L向けレシピ108品を1ページに集約したレシピ帳サイトです。

ツールを開く

カテゴリタブ（肉・鶏肉・魚・野菜・カレー・スープ・鍋・スイーツ・その他）とレシピ名・材料のフリーワード検索、ヘルシーmenu／予約調理可／調理時間での絞り込みができます。「今日の1品」ボタンで主菜をランダム提案し、気に入ったらワンタップで材料を買い物リストへ。リストはチェック状態ごとブラウザに保存されるので、スーパーでスマホを見ながら消し込みできます。写真は公式サイトの画像を直接表示しており、レシピ本文は原文どおり（要約・改変なし）。検索エンジンには載せない限定公開です。

使い方

  1. 一覧から探す：カテゴリタブ＋検索＋絞り込み

    一覧から探す：カテゴリタブ＋検索＋絞り込み

    トップには108品がカードで並びます。カテゴリタブ（件数付き）で大分類を切り替え、検索窓ではレシピ名だけでなく材料名（例:「豚バラ」「トマト缶」）でも探せます。チップで「ヘルシーmenu」「予約調理可」「30分以内」「1時間以内」の絞り込みも可能。

  2. レシピ詳細：本体に入力する自動メニュー番号を大きく表示

    レシピ詳細：本体に入力する自動メニュー番号を大きく表示

    カードを開くと写真・調理時間・カロリー・人数の下に、電気圧力鍋本体で選ぶ「自動メニュー No.」をオレンジの帯で大きく表示します（モード・密封/排気も併記）。その下に材料表（調味液Aなどのグループ枠付き）と手順、公式ページへのリンクが続きます。

  3. 今日の1品ガチャ：献立をランダムに決める

    今日の1品ガチャ：献立をランダムに決める

    ヘッダーの「🎲 今日の1品」を押すと、既定では主菜系（肉・鶏肉・魚・カレー・スープ・鍋）から1品をランダム提案。「別のにする」で引き直し、「これに決めた→買い物リストへ」でその材料が丸ごと買い物リストに入ります。カテゴリを変えればスイーツガチャなども可能。

  4. 買い物リスト：チェック状態を保存、テキストコピーも

    買い物リスト：チェック状態を保存、テキストコピーも

    追加したレシピごとに材料がチェックボックス付きで並び、買ったものにチェックすると取り消し線が付きます。チェック状態はブラウザ（localStorage）に保存されるので、ページを閉じても消えません。「テキストコピー」でメモアプリやLINEに貼れる形式でも書き出せます。

仕組みと使った技術

全体の流れ

  1. 公式レシピ一覧・個別ページ108件を取得し、レシピ名・材料（分量・調味液グループ）・手順・自動メニュー番号・調理時間・カロリー・写真URLを構造化してJSON化する（scrape.py）。公式サイトはWAFで直接取得できないため、ページをMarkdown化して返す中継サービス（r.jina.ai）経由で取得した。
  2. 材料欄は「・」区切りの1行に平坦化されており、調味液グループの表記が4形式（［A］／【1合分】／（3合分）／裸のA）混在するうえ、「オリーブ（黒・緑）」のように括弧内に区切り文字が入るため、括弧の深さを追跡するトークナイザで分解している。全108件を機械監査して壊れ行ゼロを確認。
  3. build.py がJSONを template.html に埋め込んで、サーバー不要の単一 index.html を生成する。検索・絞り込み・ガチャ・買い物リストはすべてブラウザ内のJavaScriptで動き、データの外部送信はない。
  4. 写真は公式サーバーの画像URLをそのまま参照（複製せず）。読み込めない環境ではカテゴリ別の絵文字プレースホルダに自動で切り替わる。

使った技術

Python (scrape.py / build.py)
公式レシピの取得・構造化とHTML生成
HTML / CSS / JavaScript
単一ファイルのUI。検索・絞り込み・ガチャ・買い物リスト（localStorage保存）
Cloudflare Workers
限定公開ホスティング（noindex＋X-Robots-Tag）

実装の工夫

  • レシピ本文はアイリスオーヤマ公式のコンテンツのため、検索エンジンに載せない限定公開（noindexメタタグ＋X-Robots-Tagヘッダー）とし、写真も手元に複製せず公式サーバーへの直接リンクで表示している。
  • URLハッシュ（#detail=recipe01 / #gacha / #list）で特定の画面状態を直接開ける。スクリーンショット取得や共有に使える。
  • 買い物リストはlocalStorageキー pcRecipes054 に保存。サーバーを持たないため、端末をまたいだ同期はしない設計。

用語

自動メニュー番号
電気圧力鍋本体の「自動メニュー」→「レシピ番号で選ぶ」で入力する番号。公式レシピ1品ごとに固有の番号が割り当てられている。
密封／排気
ふたのおもりレバーの位置。圧力調理は「密封」、蒸し調理・なべモードなどは「排気」または「ふたなし」を使う。
ヘルシーmenu
公式レシピのうち低カロリー・減塩などをうたうシリーズ。サイトでは緑のバッジとチップで絞り込める。