tide-PDF

chiga-log の潮汐データ運用を参考に、1か月分の潮汐情報を A4縦・モノクロ印刷用 に整形して表示するReactアプリです。

ブラウザの印刷機能から、紙への印刷またはPDF保存ができます。

🔗 https://surf90.github.io/tide-PDF/

目的

• 潮汐情報を1か月単位で紙にまとめる
• A4一枚で見やすく、バインダー保管しやすい表にする
• 海辺での記録・確認用に、備考欄へ手書きメモできる余白を残す
• chiga-log と同じように、静的JSONを読み込んでGitHub Pagesで配信する

特徴

• A4縦 210mm × 297mm
• 左25mmの綴じ代
• 上下20mm、右15mmの余白
• 白黒印刷向けデザイン
• 日付、曜日、潮回り、干潮、満潮、潮位変化、備考欄を一覧表示
• SVGによる簡易潮位変化グラフ
• @media print による印刷最適化
• lucide-react の Printer, MapPin, Info を使用
• data/tidedata.json と data/tide_data.json の読み込みに対応
• URL の ?year=2026&month=10 で年月を指定可能

データの扱い

• 表示する潮汐はリポジトリに同梱した静的 JSON（public/data/）だけです。閲覧中に外部 API へは接続しません。
• 利用者が入力した情報を送信・保存することはありません。
• データを読み込めなかったとき、または選んだ月のデータがないときは、表を空欄にして画面上部に警告を出します。 架空の値で表を埋めることはしません（2026-09 以前は仮のサンプル値を表示していました）。

参照するデータ形式

年間潮汐データ: public/data/tidedata.json

chiga-log の data/tidedata.json と同じ、日付キーごとの配列を想定しています。

{
  "2026-05-01": [
    {
      "time": "2026-05-01T04:50:00+09:00",
      "type": "high",
      "height": 1.37
    },
    {
      "time": "2026-05-01T10:12:00+09:00",
      "type": "low",
      "height": 0.62
    }
  ]
}

height はメートルで保持し、画面ではcmに変換して表示します。

直近潮汐データ: public/data/tide_data.json

Stormglass等のAPI由来データを想定した形式です。

{
  "data": [
    {
      "time": "2026-05-04T09:53:00+00:00",
      "type": "high",
      "height": 0.36
    }
  ],
  "meta": {
    "datum": "MSL"
  }
}

年間データ tidedata.json が存在する場合は、そちらを優先します。

セットアップ

npm install
npm run dev

ブラウザで表示されたURLを開いてください。

テスト

npm run typecheck   # TypeScript の型チェック
npm test            # 潮回り（潮歴）の境界テスト
npm run build

deploy.yml はビルドの前に型チェックと npm test を実行し、失敗したら公開しません。 変更履歴は CHANGELOG.md を参照してください。

印刷・PDF保存

1. 画面上部の「印刷 / PDF保存」をクリック
2. 用紙サイズを A4 に設定
3. 倍率を 100% に設定
4. 余白は なし を推奨
5. 送信先をプリンタまたはPDF保存に設定

GitHub Pagesでの公開

公開済みです（https://surf90.github.io/tide-PDF/ ）。 Pages の Source は GitHub Actions に設定してあり、.github/workflows/deploy.yml が main ブランチへのpush時に自動でビルド・公開します。

vite.config.ts の base は以下の想定です。

base: process.env.NODE_ENV === "production" ? "/tide-PDF/" : "/"

リポジトリ名を変える場合は、この値も変更してください。

注意

本ツールは印刷用レイアウトを生成するためのものです。
実際の海上活動・入水判断・安全判断には、必ず海上保安庁、気象庁、自治体、現地ライフセーバー等の最新情報を確認してください。

潮汐データは、海上保安庁・気象庁等の公的データを使用・確認することを推奨します。

関連

• ちがログ（chiga-log） — 潮汐データの運用元

License

MIT License © 2026 ISHIKAWA, Natsuki（LICENSE）