Daijiro Taira

学習・受験ブラウザで動く

エネルギー動向2025 入試ネタ帳

資源エネルギー庁「エネルギー動向（2025年6月版）」の約196枚のグラフを、入試問題づくり・グラフ読解の学習に使える“ネタ帳”サイトにまとめたものです。

ツールを開く

全2章×各4節を、各図ごとに「何が読み取れるか（特徴）／なぜそうなるか（背景）／だから何が言えるか（意味）」＋「出題アイデアと解答例」のセットで解説。図はクリックで拡大、解答例はクリックで開閉できます。Webで一般公開中。

使い方

  1. 画面の見方（総合INDEX）

    画面の見方（総合INDEX）

    トップの総合INDEXは、第1章（国内エネルギー動向）・第2章（国際エネルギー動向）の2章構成で、各章に4つの節がカード形式で並びます。各カードには図の枚数が出ており、図の多い節（例：第2節＝3ページ・図25）はテーマ別のサブページに分かれていて、カードから直接開けます。全22ページ・約196図。

  2. 節の入口：3行サマリーと図の目次で“森”を先に掴む

    節の入口：3行サマリーと図の目次で“森”を先に掴む

    節を開くと、まず『この節で何が言えるか（3行サマリー）』で全体の要点を先に押さえられます（この節なら ①経済成長と消費のデカップリング、②自給率は約15%、③産業→民生・運輸／直接燃焼→電化で、今後は電源の脱炭素が鍵）。続く『図の一覧（クリックでジャンプ）』から、その節の各図（ここでは9図）へ一覧で飛べます。

  3. 各図の読み取り3点セット（特徴／背景／意味）

    各図の読み取り3点セット（特徴／背景／意味）

    各図は左に元グラフ（資源エネルギー庁の公式図）、右に『📈特徴（読み取り）／🔍背景・原因／💡意味・示唆』の3点セット。たとえば図11-1-1では『最終エネルギー消費は2005年度がピーク』→『2度のオイルショックで省エネ・産業構造が転換』→『デカップリングの証拠（削減余地は家庭・業務・運輸へ移行）』と、読み取り→背景→意味の順に整理しています。

  4. 出題アイデアと解答例（クリックで開閉）

    出題アイデアと解答例（クリックで開閉）

    各図の下に『📝出題アイデア』を用意（読取・記述・組合せなどのタグ付き）。『解答例』はクリックで開閉でき、画像は開いた状態です。問題を考える人は解答例を閉じたまま使い、答え合わせのときだけ開く、という使い方ができます。

  5. 図を拡大して原典グラフを確認する

    図を拡大して原典グラフを確認する

    図をクリックすると拡大表示（ライトボックス）になります。ホイール／ピンチや ＋ − ボタンでズーム、ドラッグで移動可能。解説文ではなく原典グラフの数値や凡例そのものを直接確認したいときに使います。

  6. 図の多い節はサブページで切り替え

    図の多い節はサブページで切り替え

    図数の多い節（例：第1章第2節）は、テーマ別のサブページに分割されています。節の上部ナビ（① 企業・製造業・業務他／② 家庭部門／③ 運輸部門）でワンクリック切替でき、1ページが長くなりすぎず、テーマ単位で読み進められます。

仕組みと使った技術

全体の流れ

  1. 公式サイト（enecho.meti.go.jp）への直接アクセスはWAFで0バイト/タイムアウトになるため、リーダープロキシ「https://r.jina.ai/<対象URL>」経由で各節のテキスト・図番号・画像src（.gif）を取得する
  2. 取得したテキストと図番号をもとに、Sonnetサブエージェントを節ごとに並列起動し、図ごとに「特徴・背景・意味・出題アイデア・解答例」を執筆してHTMLに整形する
  3. 図画像はバイナリ取得が不可なため、共通JS（deck.js）が公式URL（enecho.meti.go.jp/…/img/<図番号>.gif）をホットリンクで表示し、失敗時はプレースホルダーにフォールバックする
  4. 共通CSS（style.css）と共通JS（deck.js）をassetsフォルダに外出しし、全22ページのHTMLがこれを参照するゴールデンテンプレ構成にすることで、後からの一括スタイル変更・機能追加を可能にする
  5. 図の多い節（25〜57図）は1ファイルに収めると出力トークン上限に当たるためテーマ別サブページに分割し、総合INDEXページ（index.html）から章→節→サブページへ入れ子でリンクする
  6. サブエージェント8体で本文中の数値（約260個）を公式テキストと1件ずつ照合するQAを実施し、修正2件・要確認3件を特定して精度を担保する
  7. 静的サイトとして Cloudflare Workers で公開（https://energy-trends.daijirotaira.com）

使った技術

HTML / CSS / Vanilla JS
サイト本体の全ページ（index.html・22個のsection HTML・assets/style.css・assets/deck.js）を構成する唯一のフロントエンド技術
r.jina.ai（Jinaリーダープロキシ）
WAFに遮断される政府系サイトのテキストと図番号をHTTPリクエスト1本で取得するプロキシ
Pointer Events API
ライトボックス内でのホイールズーム・ピンチズーム・ドラッグパンをマウス/タッチ統一で実装
Cloudflare Workers
静的サイトを独自ドメインで https 公開

実装の工夫

  • 共通CSS/JS（assets/style.css・assets/deck.js）をゴールデンテンプレとして外出しし、全22ページのHTMLは構造だけを持つ。後から全ページに機能追加する際はdeckJSのみ変更すれば済む設計
  • 図画像はローカル保存を経由せず、公式URL（.gif）をそのままimg src属性に指定するホットリンク方式。deck.jsのonerrorハンドラで「ローカルimg/→公式URL→プレースホルダー」の3段フォールバックを実装
  • サブページ分割により1ファイルあたりの図数を抑制（サブエージェントの32kトークン出力上限超過を回避）。s-1-3（55図）は6ファイル、s-2-2（57図）は5ファイルに分割
  • ライトボックスのツールボタン（＋/−/100%）とヒントテキストはdeck.jsが動的にDOMへ追加するため、各節HTMLのソースは触らずに全ページへ機能追加できる
  • グラフ画像内のみに存在する数値は公式テキストに記述がなくQA検証不能のため、図クリック拡大で原典画像を即確認できる導線を設け「画像が正、文章は二次情報」と位置づける

用語

エネルギー動向（2025年6月版）
資源エネルギー庁が公表する、日本と世界のエネルギー需給・供給・コストの統計と分析資料。本サイトの素材はすべてこの2025年6月版が出典。
デカップリング
経済成長（GDP）とエネルギー消費の連動を切り離すこと。日本は省エネでGDPが伸びても消費を抑えられている、という文脈で使われる。
エネルギー自給率
国内で消費するエネルギーのうち、自国で確保できる割合。日本は約15%と主要国でも最低水準で、エネルギー安全保障の最重要指標。
一次エネルギー／二次エネルギー
一次＝石油・石炭・天然ガス・原子力・再エネなど採取したままの形。二次＝電力・都市ガス・石油製品など一次を変換して使う形。
電力化率
最終エネルギー消費に占める電気の割合。上がるほど『電源（発電）の脱炭素』が社会全体の脱炭素を左右するようになる。
3行サマリー
各節の冒頭に置いた3行の要点。個々の図（木）を読む前に、節全体の主張（森）を先に掴むための導入。
ライトボックス
図をクリックすると画面いっぱいに拡大表示する仕組み。ホイール／ピンチでのズーム、ドラッグでの移動に対応。
ホットリンク
図画像を自分のサーバーに保存せず、公式サイトのURLを直接指して閲覧者のブラウザに読み込ませる方式。出典元の更新がそのまま反映される反面、表示は閲覧者の回線に依存する。
WAF（Web Application Firewall）
サイトを自動アクセスから守る防壁。政府系サイトはこれで自動取得（curl等）を弾くため、本文取得にはリーダープロキシ r.jina.ai を経由した。