本アプリケーションは「政府統計の総合窓口(e-stat) API 機能」(以下、e-Stat API)から公開されているデータを取得し、Webブラウザ上で可視化を行います。
データの描画方法は、「棒グラフ」、「折れ線グラフ」、「散布図」、「地図」の4種類から選択できます。 また、ご自身が保有するデータを読み込み、e-Stat APIから取得したデータと組み合わせた分析を行えます。
- ✅ サーバー不要: HTML、CSS、JavaScriptのみで構成されており、サーバーを用意する必要はありません
- ✅ セキュア通信: すべての通信でHTTPSを使用（2024年更新）
- ✅ モジュラー設計: 保守性の高いモジュール構造（2024年リファクタリング）
- ✅ エラー表示: ユーザーフレンドリーなエラーメッセージ表示
- ✅ 4種類のグラフ: 棒グラフ、折れ線グラフ、散布図、地図
- ✅ カスタムデータ対応: 独自のJSONデータを読み込み可能
- インターネット接続: e-Stat APIからデータを取得するため必要です
- AppId: e-Stat APIの利用に必要です（下記参照）
- モダンブラウザ: Chrome、Safari、Firefox、Edge等
e-Stat APIサイトでAppIdを取得してください。 AppIdがないと本アプリケーションは動作しません。
index.htmlをブラウザで開いてください。
# ブラウザで直接開く
open index.html # macOS
xdg-open index.html # Linux
start index.html # Windows
# または、ローカルサーバーを使用（推奨）
python -m http.server 8000
# ブラウザで http://localhost:8000 にアクセス初回起動時にプロンプトでAppIdの入力を求められます。 取得したAppIdを入力すると、localStorage（またはCookie）に保存されます。
- アプリケーション左上の「データの追加等」をクリック
- 統計IDを入力（複数可）
- 「ロード」ボタンをクリック
統計IDはe-Stat APIサイトで確認できます。
URLパラメータで統計IDを指定することもできます：
index.html?statIds=統計ID1,統計ID2
グラフ種類セレクターから描画方法を選択できます：
- 棒グラフ: カテゴリ別の比較
- 折れ線グラフ: 時系列データの傾向
- 散布図: 2つの統計データの相関関係（X軸・Y軸で異なるデータを選択）
- 地図: 都道府県別の地理的分布
e-Stat API形式に準拠したJSONファイルを読み込めます：
{
"METADATA": { /* e-STAT APIから取得できるメタデータと同じ形式 */ },
"STATDATA": { /* e-STAT APIから取得できる統計データと同じ形式 */ }
}- 「データの追加等」をクリック
- ファイル選択ボックスからJSONファイルを選択
- 「ロード」ボタンをクリック
注意: IE11ではローカルでのファイル読み込み機能が制限されます。Webサーバー経由でご利用ください。
- jQuery 2.1.4: DOM操作とAJAX
- jQuery UI 1.11.4: UIコンポーネント
- D3.js v3: データ可視化
- Leaflet.js 0.7.7: 地図表示
- ES6 Promise Polyfill 3.0.2: 非同期処理
js-app/
├── index.html # メインHTML
├── style.css # スタイルシート
├── main.js # メインアプリケーション
├── js/
│ ├── core/
│ │ ├── constants.js # 定数定義
│ │ ├── utils.js # ユーティリティ関数
│ │ └── eventer.js # イベントシステム
│ └── api/
│ └── estatAPI.js # e-Stat API ラッパー
└── README.md # このファイル
- すべてのHTTP URLをHTTPSに変更
- 安全な通信の確保
- モジュール構造への分割（保守性向上）
- マジックナンバーを定数化（可読性向上）
- バグ修正（不適切な例外処理の削除）
- エラーメッセージの視覚的表示
- より詳細なエラー情報の提供
- Cookie処理の改善（複数Cookie対応）
以下のブラウザで動作確認済み：
- ✅ Google Chrome（最新版推奨）
- ✅ Apple Safari（最新版推奨）
- ✅ Mozilla Firefox（最新版推奨）
- ✅ Microsoft Edge（最新版推奨）
⚠️ Microsoft Internet Explorer 11（一部機能制限あり）
- 「データの取得に失敗しました」: インターネット接続とAppIdを確認してください
- 「API エラー」: 統計IDが正しいか確認してください
- 「ローカルストレージが使用できません」: Webサーバー経由での利用を推奨します
IE11をローカルで使用している場合、以下のいずれかの方法をお試しください：
- Webサーバー経由で利用する（推奨）
- 別のブラウザ（Chrome、Firefox等）を使用する
ソースコードを改良することで、他の可視化手法への対応が可能です。
詳細な技術情報は CLAUDE.md を参照してください。
js/core/constants.js で以下の設定を変更できます：
- チャートのマージン設定
- アニメーション速度
- Cookie有効期限
- その他の定数
MIT License
Copyright (c) 2016 National Statistics Center
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
詳細な変更履歴については、GitHubのコミット履歴をご確認ください。
- 2024年12月 - UI/UXモダナイゼーション（レスポンシブデザイン、モダンUI）
- 2024年11月 - コード品質向上（リファクタリング、モジュール化、セキュリティ強化）
- 2016年3月 - 初回リリース（基本機能実装）