「日本の地震情報」というサービスをリリースしました🎊
https://earthquake.movinow-sober.com/サービスへのリンクは、このブログのメニューにも登録してあります。
このサービスにないもの
- 使用料 → なし🈚
- 広告 → なし🙆
- ユーザー登録・ログインの必要 → なし🎉
このサービスにあるもの
提供するのは、サービス名称が示すとおり「地震情報」です。以下の機能があります。
直近の地震情報100件を一覧表示
地震データの各情報を表示します。
- 発生日時
- 経過日時
- 最大震度
- 震源
- マグニチュード
- 深さ
- データ取得期間と件数（PC画面のみ）
ボタンでデータのソート順を変更できます。
地図上に地震情報を表示
PC画面では、デフォルトで地震一覧の震央を表示します。
地震一覧のデータをクリックあるいはタップすることで観測点の震度が地図に表示されます。
左下のボタンで、地図の拡大・縮小、加えてPC画面では全画面表示が可能です。
右上のボタンで、次のデータ・全体表示（PC画面のみ）・前のデータへの遷移が可能です。
観測点の震度別・都道府県別一覧を表示
地震一覧と観測点一覧の境界は、マウスドラッグで移動することができます。
スマホでは、地図画面下部の「▲観測点一覧」ボタンをタップすることで表示されます。
フィルター機能
地震一覧、右上の「フィルタースイッチ」をオンにすることで、「最大震度」と「震源」の選択式メニューが表示されます。メニューを選択することで一覧データを絞り込むことができます。
現在地の地震を表示機能
この機能を使用するには、ブラウザで位置情報へのアクセスを許可する必要があります。
地図一覧、右上の「現在地の地震を表示スイッチ」をオンにすることで、現在いる場所で揺れた地震だけを表示します。
- 【地震一覧】現在地に最も近い観測点が記録した震度と、その地震を表示します。
- 【マップ】現在地にマーカーが表示されます。
- 【観測点一覧】最も近い観測点がハイライトされます。
過去に発生した地震の検索機能
PC ではヘッダーの「地震検索」をクリックすることで検索条件を設定するページに移動します。
スマホでは右上のメニューアイコンを開いて「地震検索」をタップすることで検索条件を設定するページに移動します。
| 設定項目 | 設定範囲 | 検索結果ソート順 |
|---|---|---|
| 開始日 | 2015年1月10日から | 発生日時の昇順 |
| 終了日 | 今日まで | 発生日時の降順（デフォルト） |
| 震度 | 震度１以上（すべて）〜 震度７ | 発生日時の降順（デフォルト） |
開始日と終了日のどちらかは必須です。開始日を設定すると、検索結果は昇順（開始日から）になります。
開始日は2015年1月10日から設定可能です。これは地震データを取得しているAPI の仕様によります。
「地震」関連のニュースリンクを表示
PC ではトップページで、ヘッダーの「ニュースリンク」をクリックすることでニュースリンクの一覧が表示されます。
スマホでは右上のメニューアイコンを開いて「ニュースリンク」をタップすることでニュースリンクの一覧が表示されます。
表示されるのは「地震」というキーワードで Googleニュースの RSS feed から取得した外部リンクの一覧になります。
PC の場合は、地震を選択状態であれば、その地震の発生日時以降に配信された情報のリンクを表示します。
レスポンシブル対応
スマホからPCまで画面解像度に応じて、数種類のレイアウトパターンを切り替えて対応しています。
ダークモード搭載
ヘッダーのアイコン 
をクリックあるいはタップすることで、ダークモードとライトモードを切り替えることができます。
地震情報の取得に関して
P2P地震情報 JSON API v2「気象庁 地震情報・津波予報 JSON API」を利用しています。こちらは気象庁の情報を利用しています。素晴らしいAPI を提供していただき、ありがとうございます。
利用している地図に関して
デフォルト（ライトモード）では、国土地理院の地理院タイルを利用しています。
使用している主な技術スタックに関して
- TypeScript
- React
- Next.js 12
- Chakra UI
- React Leaflet
- zustand
デプロイ先は Vercel です。独自ドメンとして、このブログのサブドメインを割り当てています。
私はエンジニアでもないただの素人ですが、それでもこのようなweb サービスをつくることができたのは、React や Next.js を取り巻く素晴らしいエコシステムの恩恵に他なりません。
問い合わせなど
質問、感想、不具合などがありましたら、お気軽にコメントください👇🙂
免責事項
このサービスの情報の正確性について
必ずしも情報の正確性を保証するものではありません。
このサービスのコンテンツや情報においては可能な限り正確な情報を掲載するよう努めています。 しかし、情報が欠落したり、誤情報が入り込んだり、情報が古くなったりすることもあります。
損害等の責任について
このサービスを利用する場合は、すべてを自己責任で行う必要があります。
このサービスが提供する情報によって生じた損害等の一切の責任を負いかねますので、ご了承ください。 また、サービスが停止したことに起因して利用者に生じた損害についても、何ら責任を負うものではありません。
最近の投稿です
過去7日間でアクセスの多い投稿です
