茅ヶ崎ヘッドランド(Tバー)、サザンビーチ茅ヶ崎など、茅ヶ崎海岸周辺のコンディション(潮汐・波・水温・天気)を確認できるWebツールです。 スマートフォン(iPhone/Android)およびPCのブラウザから直接利用できます。
- ホーム画面アプリ化: iOS/Androidのブラウザから「ホーム画面に追加」するとスタンドアロンアプリとして起動。バックグラウンド復帰時に自動でデータを最新化します。
- レスポンシブ対応: スマートフォンでの閲覧に最適化された、屋外でも見やすいレイアウトを採用しています。
- 視覚的な潮汐グラフ: Chart.jsを用いた滑らかな曲線により、満潮・干潮のタイミングを直感的に把握できます。
- 自動データ更新: GitHub Actionsを利用して定期的にデータを取得・生成することで、APIの制限を回避しつつ、最新の天気予報(forecast_data.json)や潮汐情報(tide_data.json)を安定して配信しています。
以下のURLにアクセスするだけで、いつでも最新の情報を確認できます。
https://surf90.github.io/chiga-log/
- 月齢: NASA SVS(Scientific Visualization Studio)の全地球(グローバル)データを使用。
- 潮回り: 気象庁の江の島潮位観測所のデータ(
tidedata.json)を優先的に使用。 - バックアップ: エラー発生時のみ、Stormglass APIによる推計データ(約25km四方グリッド)を使用。
- 最大波高・周期: 気象庁の関東地方南部(相模湾から外房まで)の有義波高のデータを使用。
- 波の高さ・海水温: 茅ヶ崎ヘッドランド(北緯:
35.318/ 東経:139.410)を基準点としたOpen-Meteo海洋モデル(25km〜50km四方のグリッドデータ)を使用。- 範囲: 指定座標周辺の「沖合」の推計値です。 地形や風の影響を強く受ける波打ち際(サーフゾーン)の実際のコンディションとは異なる場合があります。
- 注意報・警報: 気象庁が発表する「茅ヶ崎市(コード:
1420700)」の個別データを参照。
- 天気予報: 気象庁が発表する「神奈川県東部(コード:
140010)」の予報区データを使用。
- 風速・風向・最大瞬間風速(翌日まで1時間ごと、昼間帯): 茅ヶ崎ヘッドランド(北緯:
35.318/ 東経:139.410)を基準点としたOpen-Meteo気象モデルを使用。参照時刻の1時間以内から20:00までを表示。
- 気温・湿度・風速・風向・降水量(現在値): 気象庁アメダス辻堂観測所(コード:
46091)のデータを使用。
(クリックで展開)
フォークして使う場合は以下のリポジトリシークレットを「Settings → Secrets and variables → Actions → New repository secret」で設定してください。
| 名前 | 用途 | 必須 |
|---|---|---|
STORMGLASS_API_KEY |
気象庁潮汐データ欠損時のフォールバック(scripts/fetch_tide.py, scripts/extract_daily_data.py) |
任意 |
未設定の場合、Stormglassフォールバックはスキップされ、気象庁データが取得できなければ「取得失敗」が表示されます(誤読防止のためダミー潮汐は表示しません)。
python -m http.server 8000 起動後、ブラウザで http://localhost:8000 を開いて以下を確認:
- ヒーローカード3枚(SEA / AIR / WIND)に
--ではなく実数値が表示される - 潮汐セクションに「大潮/中潮/...」と月齢が出る(「NASA」または「計算値」のラベル)
- 潮汐グラフと波グラフが2つとも描画され、スクロールが同期する
- 警報セクションが「✅ 現在、注意報・警報はありません」または該当バッジ
- 天気予報「天気/降水確率/最高最低」が
--でない - 風予報トグルを開くと時刻別の風速一覧が出る
- DevTools Console にエラーが出ていない
本アプリは静的なHTML/JavaScriptで構築されていますが、潮汐データ(tide_data.json)の読み込みに fetch APIを使用しています。 そのため、HTMLファイルを直接ブラウザで開いた場合(file:// プロトコル)、セキュリティ制限により実際のデータが読み込めず、プレビュー用のダミー波形が表示されます。
実際のデータを含めてローカルで動作確認をしたい場合: 簡易的なローカルサーバーを立ち上げて確認してください。ターミナルで本ディレクトリに移動し、以下のコマンドを実行します。
# Pythonがインストールされている場合
python -m http.server 8000
起動後、ブラウザで http://localhost:8000 にアクセスしてください。
NASA SVS(Scientific Visualization Studio)が毎年公開している公式月齢データを手動で取得し、配置する手順です。
推奨実行時期: 毎年12月下旬〜1月上旬(翌年版のページとJSONファイルへのリンクが公開されたタイミング)
1. NASA SVSのページにアクセス
ブラウザで以下のURLを開き、対象年の "Moon Phase and Libration YYYY" のページへ進みます:
https://svs.gsfc.nasa.gov/gallery/moonphase/
2. JSONファイルのダウンロード
各年のページ内に "the data in the table for all of YYYY can be downloaded as a JSON file" というリンクがあります。そこから mooninfo_YYYY.json をダウンロードします。
参考URLパターン(毎年パス内の数字が変わるため、必ず公式ページから取得してください):
https://svs.gsfc.nasa.gov/vis/a000000/a005500/a005587/mooninfo_2026.json
3. ファイルの配置
ダウンロードしたファイルを data/ ディレクトリに配置します。ファイル名は変更不要です:
data/
├── mooninfo_2026.json ← 配置するファイル
├── tidedata.json
└── tide_data.json
4. コミット・プッシュ
git add data/mooninfo_YYYY.json
git commit -m "Update: mooninfo_YYYY.json を追加"
git push補足
- データはUTC(協定世界時)基準で1時間ごとに記録されています(1年分 = 8,760〜8,784エントリ)
- 日本時間(JST = UTC+9)の1月1日 0〜8時は、前年のJSONが参照されます。前年ファイルが存在しない場合は数式による概算値で自動補完されます
- 月齢の表示に "NASA" と出ていれば正常にNASAデータを参照中、"計算値" と出ていればフォールバック中です
気象庁のサイトから1年分の潮汐テキストデータを取得し、アプリ用のJSONファイルに変換する手順です。
推奨実行時期: 毎年12月下旬〜1月上旬(翌年分のデータが公開されたタイミング)
本リポジトリの実行系スクリプト(scripts/*.py)は Python 3.10+ の標準ライブラリのみで動作するため、追加のインストールは不要です。
scripts/requirements.txt には開発時に任意で使うツール(テスト実行用の pytest)を記載しています。テストを走らせる場合のみ:
pip install -r scripts/requirements.txt
pytest tests1. スクリプトの実行
ターミナルを開き、スクリプトが保存されているディレクトリで以下のコマンドを実行します。 (※ファイル名は実際のPythonファイル名に読み替えてください)
python generate_tide.py2. 対象年の入力
ターミナルに以下のプロンプトが表示されます。取得したい年を半角数字で入力し、Enterキーを押してください。
取得する年を西暦で入力してください(例: 2027):
3. 生成されたファイルの確認と配置
処理が完了すると、同じディレクトリ内に tidedata.json が上書き(または新規作成)されます。
このファイルを、Webアプリの data/ ディレクトリ内に配置して更新完了です。。
補足
データの取得元: 気象庁 潮汐観測資料(江の島・観測所コード D8)
https://www.data.jma.go.jp/kaiyou/data/db/tide/suisan/txt/<year>/D8.txt
scripts/generate_tide.py の JMA_TIDE_URL 定数で参照しています。気象庁側でパス構造が変更された場合は当該定数を更新してください。
サードパーティCDN通信を排除するため、Chart.js は assets/vendor/chart.umd.min.js に自ホストしています。アップデート時は以下を実行:
curl -sL "https://cdn.jsdelivr.net/npm/chart.js@<VERSION>/dist/chart.umd.min.js" \
-o assets/vendor/chart.umd.min.js<VERSION> は更新したいバージョン(例: 4.4.7)。配置後、ローカルサーバーで潮汐・波グラフが正常に描画されることを確認してからコミット。
assets/js/app.min.js と assets/css/style.min.css は app.js / style.css を編集後に再生成が必要です:
npx --yes terser assets/js/app.js -c -m -o assets/js/app.min.js
npx --yes clean-css-cli -o assets/css/style.min.css assets/css/style.css- フロントエンド: HTML5 / CSS3 / JavaScript (ES6+)
- グラフ描画: Chart.js(自ホスト版
assets/vendor/chart.umd.min.js。CDN通信を排除し、サードパーティ依存を最小化) - 自動化・ホスティング: GitHub Actions / GitHub Pages
- 気象庁データ (天気予報・注意報・潮汐): 気象庁公式データ (GitHub ActionsによるJSON定期取得、および年次更新データを利用)
- 月齢データ: NASA SVS (年次更新のJSONデータを利用)
- 海面・現在の気象データ: Open-Meteo API (登録不要・無料で利用可能)
- 潮汐データ (サブ): Stormglass API (GitHub ActionsによりJSONとして定期更新)