earthquakeTop

「日本の地震情報」というサービスをリリースしました🎊



サービスへのリンクは、このブログのメニューにも登録してあります。

PC画面
スマホ画面

このサービスにないもの

ありがちな以下の3つは、すべてありません
  1. 使用料 → なし🈚
  2. 広告 → なし🙆
  3. ユーザー登録・ログインの必要 → なし🎉

このサービスにあるもの

提供するのは、サービス名称が示すとおり「地震情報」です。以下の機能があります。


直近の地震情報100件を一覧表示

地震データの各情報を表示します。

  • 発生日時
  • 経過日時
  • 最大震度
  • 震源
  • マグニチュード
  • 深さ
  • データ取得期間と件数(PC画面のみ)
PC 地震一覧
PC画面 地震一覧
スマホ地震一覧
スマホ画面 地震一覧

sortOrderButton ボタンでデータのソート順を変更できます。

⬆ 機能一覧に戻る

地図上に地震情報を表示

PC画面では、デフォルトで地震一覧の震央を表示します。

マップPC1
PC画面 地図 全体表示

地震一覧のデータをクリックあるいはタップすることで観測点の震度が地図に表示されます。

PC 地図 観測点表示
PC画面 地図 観測点表示
スマホ地図 観測点表示
スマホ画面 地図 観測点表示

左下のボタンで、地図の拡大・縮小、加えてPC画面では全画面表示が可能です。

右上のボタンで、次のデータ・全体表示(PC画面のみ)・前のデータへの遷移が可能です。

⬆ 機能一覧に戻る

観測点の震度別・都道府県別一覧を表示

PC 観測点一覧
PC画面 観測点一覧

地震一覧と観測点一覧の境界は、マウスドラッグで移動することができます。

スマホでは、地図画面下部の「▲観測点一覧」ボタンをタップすることで表示されます。

スマホ観測点一覧
スマホ画面 観測点一覧

⬆ 機能一覧に戻る

フィルター機能

地震一覧、右上の「フィルタースイッチ」をオンにすることで、「最大震度」と「震源」の選択式メニューが表示されます。メニューを選択することで一覧データを絞り込むことができます。

フィルター機能
フィルター機能

⬆ 機能一覧に戻る

現在地の地震を表示機能

この機能を使用するには、ブラウザで位置情報へのアクセスを許可する必要があります。

地図一覧、右上の「現在地の地震を表示スイッチ」をオンにすることで、現在いる場所で揺れた地震だけを表示します。

  • 【地震一覧】現在地に最も近い観測点が記録した震度と、その地震を表示します。
  • 【マップ】現在地にマーカーが表示されます。
  • 【観測点一覧】最も近い観測点がハイライトされます。

⬆ 機能一覧に戻る

過去に発生した地震の検索機能

PC ではヘッダーの「地震検索」をクリックすることで検索条件を設定するページに移動します。

PC画面 検索設定

スマホでは右上のメニューアイコンを開いて「地震検索」をタップすることで検索条件を設定するページに移動します。

スマホ画面 検索設定
設定項目設定範囲検索結果ソート順
開始日2015年1月10日から発生日時の昇順
終了日今日まで発生日時の降順(デフォルト)
震度震度1以上(すべて)〜 震度7発生日時の降順(デフォルト)

開始日と終了日のどちらかは必須です。開始日を設定すると、検索結果は昇順(開始日から)になります。

開始日は2015年1月10日から設定可能です。これは地震データを取得しているAPI の仕様によります。

⬆ 機能一覧に戻る

「地震」関連のニュースリンクを表示

PC ではトップページで、ヘッダーの「ニュースリンク」をクリックすることでニュースリンクの一覧が表示されます。

スマホでは右上のメニューアイコンを開いて「ニュースリンク」をタップすることでニュースリンクの一覧が表示されます。

表示されるのは「地震」というキーワードで Googleニュースの RSS feed から取得した外部リンクの一覧になります。

PC の場合は、地震を選択状態であれば、その地震の発生日時以降に配信された情報のリンクを表示します。

⬆ 機能一覧に戻る

レスポンシブル対応

スマホからPCまで画面解像度に応じて、数種類のレイアウトパターンを切り替えて対応しています。

⬆ 機能一覧に戻る

ダークモード搭載

ヘッダーのアイコン darkLightModeIcon をクリックあるいはタップすることで、ダークモードとライトモードを切り替えることができます。

PC画面 ダークモード
スマホ画面 ダークモード

⬆ 機能一覧に戻る


地震情報の取得に関して

P2P地震情報 JSON API v2「気象庁 地震情報・津波予報 JSON API」を利用しています。こちらは気象庁の情報を利用しています。素晴らしいAPI を提供していただき、ありがとうございます。

⬆ 追加情報に戻る

利用している地図に関して

デフォルト(ライトモード)では、国土地理院の地理院タイルを利用しています。

⬆ 追加情報に戻る

使用している主な技術スタックに関して

  • TypeScript
  • React
  • Next.js 12
  • Chakra UI
  • React Leaflet
  • zustand

デプロイ先は Vercel です。独自ドメンとして、このブログのサブドメインを割り当てています。

私はエンジニアでもないただの素人ですが、それでもこのようなweb サービスをつくることができたのは、React Next.js を取り巻く素晴らしいエコシステムの恩恵に他なりません。

⬆ 追加情報に戻る

問い合わせなど

質問、感想、不具合などがありましたら、お気軽にコメントください👇🙂

⬆ 追加情報に戻る

免責事項

このサービスの情報の正確性について

必ずしも情報の正確性を保証するものではありません。

このサービスのコンテンツや情報においては可能な限り正確な情報を掲載するよう努めています。 しかし、情報が欠落したり、誤情報が入り込んだり、情報が古くなったりすることもあります。

損害等の責任について

このサービスを利用する場合は、すべてを自己責任で行う必要があります。

このサービスが提供する情報によって生じた損害等の一切の責任を負いかねますので、ご了承ください。 また、サービスが停止したことに起因して利用者に生じた損害についても、何ら責任を負うものではありません。

⬆ 追加情報に戻る

Summary
software image
Author Rating
1star1star1star1star1star
Aggregate Rating
5 based on 2 votes
Software Name
日本の地震情報
Software Category
WebApplication
Price
Free
Landing Page

最近の投稿です

Thumbnail of new posts 200

: 雑記

赤ふんどしの思い出

これを読んでいる方の中で「ふんどし」を着用した経験のある方はほとんどいないと思い ...
Thumbnail of new posts 108

:

鶏レバーの野菜炒め

鶏レバーの炒めものをつくります。 私は特有のレバー臭についてはまったく気になりま ...
Thumbnail of new posts 179

: パスタ

ガーリック香る濃厚トマトソース・アラビアータ

セブンイレブンでレトルトのパスタソースを買ってきました。 この日はロードバイクで ...
Thumbnail of new posts 035

: ご飯・丼

鶏胸肉とめんつゆの簡単親子丼

鶏胸肉とめんつゆで簡単な親子丼をつくりました。 材料 鶏胸肉1/2枚・140g卵 ...
Thumbnail of new posts 141

: 野菜

春の野草を添えたチキンソテー

先日味見をしたハマダイコンのつぼみが普通にイケたので、今度はもう少し多めに摘んで ...

このブログへのアクセスについて

  • 29今日の閲覧数:
  • 24今日の訪問者数:
  • 328昨日の閲覧数:
  • 237昨日の訪問者数:
  • 12891今月の閲覧数:
  • 1現在オンライン中の人数:

510ビュー

Tec系Tec

Posted by movinow