LoginSignup
0
1
@kottaro123456

震度分布図を作ろう③ ～地震情報をいじろう～

Last updated at Posted at 2023-12-17

はじめ

みなさんこんにちは。こんばんは。
さて、本日もやってまいりました、震度分布図を作ろうのシリーズでございます。
すでにはじめの挨拶はネタ切れでございます。

前回したこと

前回②では、Leafletの地図を、OpenStreetMapなどの地図タイル形式から、自分でカスタマイズできるgeoJSON形式の地図に変更しました。
s-20231208230444.jpg

今回は…

今回は一旦地図から離れて、地震情報の方にポイントを向けていこうと思います。
今回するのは、地震情報の取得→解析→情報の表示ですね。

開発スタート

前回までのコードは

前回②までのコードは

の一番下に乗っていますので、コピーして使用ください。

今回の開発は

今回は特に訳の分からない三択クイズなどはありません。

では今回することを見ていきましょう。
今回は
①地震情報の取得
②地震情報の解説
③地震情報を整理して表示
をしようと思っています。

では①の地震情報の取得からやっていきましょう。

①地震情報の取得

まずは、百聞は一見にしかずと言う通り、地震情報がうんたらかんたら言っていても仕方ないので、実際に地震情報を取得してみましょう。

地震情報を取得するのの御三家的な、御一家は「P2P地震情報」です。

このサービスは、JSONをAPIとして提供してくれている＆配信が早い＆サービスが安定的、といういい事ずくめなサービスです。
たぶん、ほとんどの地震アプリが地震情報をここから取っているのではないでしょうか。

おっと、喋りすぎてしまいましたね。
さっそく取得しましょう。

を開いてください。
開いたら「/history」を開いてください。
s-スクリーンショット 2023-12-09 231538.png

開いたら、右側の「Try it out」を押してください。
s-スクリーンショット 2023-12-09 231745.png

押せたらcodesのところに枠が出てきますので、551(地震情報)を入力
s-スクリーンショット 2023-12-09 231851.png

そして下へ行き、Excuteを押すと取得できます。
s-スクリーンショット 2023-12-09 231922.png

取得できましたね。
s-スクリーンショット 2023-12-09 232002.png

ではその中黒い中に入っている、地震情報を次の章で見ていきましょう。

②地震情報の解説

地震情報は、すでにResponse bodyとして、取得できました。
では次は詳しく見ていきましょう。

[
  {
    "code": 551, //情報の種類を表す。今回は指定済み
    "earthquake": {
      "domesticTsunami": "None", //国内の津波情報があるか
      "foreignTsunami": "Unknown", //海外の津波情報があるか
      "hypocenter": { //震源に関する情報
        "depth": 60, //震源の深さ
        "latitude": 34.5, //緯度
        "longitude": 140.3, //経度
        "magnitude": 4.7, //マグニチュード
        "name": "房総半島南方沖" //震源名
      },
      "maxScale": 20, //最大震度。だいたいは÷10するとおｋ
      "time": "2023/12/09 16:03:00" //発生時刻
    },
    "id": "65741238a0651c206c9669e3", //固有のID
    "issue": { //発信元
      "correct": "None",
      "source": "気象庁",
      "time": "2023/12/09 16:07:36",
      "type": "DetailScale"
    },
    "points": //各観測点ごとの震度
      {
        "addr": "館山市長須賀", //観測点名
        "isArea": false, //観測点ではなく地域か
        "pref": "千葉県", //都道府県名
        "scale": 20 //震度
      },
      {
        "addr": "鴨川市内浦",
        "isArea": false,
        "pref": "千葉県",
        "scale": 10
      }
    ],
    "time": "2023/12/09 16:07:36.871", //情報発信の日時
    "timestamp": {
      "convert": "2023/12/09 16:07:36.865",
      "register": "2023/12/09 16:07:36.871"
    },
    "user_agent": "jmaxml-seis-parser-go, relay, register-api",
    "ver": "20231023"
  }
]

こんな感じで取得できたと思います。
ただ、詳しくは先程のページの下の、Schemas→JMAQuakeを参照ください。

③地震情報を整理して表示

コンソールを使ってみる

さて、ここからはJavaScriptを使って情報を取得＆表示させていきましょう。
ではいきなりですが、JavaScriptを使うにあたって必須？のコンソールについてみていきましょう。

では、作成中の震度分布図のページを開き、F12を押して開発者ツールを開いてください。
F12で開けなかった場合は、メニュー＞その他のツール＞開発者ツールでも開けます。
s-スクリーンショット 2023-12-09 233759.jpg
出てきたでしょうか。(別ウィンドウとして出てくることもあります。)
出てきたら、上のタブを「コンソール」または「Console」にします。

すると、入力する欄が出てきたと思います。
ではここに、お試しとして
console.log("震度分布図の作成中です。")
をペーストして、Enterで実行してみましょう。
そうすると、震度分布図の作成中です。というのが帰ってきたと思います。
s-スクリーンショット 2023-12-09 234211.jpg

つまり、ここは「JavaScriptを実行できる場所」でもあるし、「console.log()の中身はここに表示される」というということも分かります。」
では地震情報をconsole.log()でここに出力させてみましょう。

ちなみにコンソールには、エラーも出てきますので何かあったらコンソールを見とけばたいていのことは直ります。

$.getJSONで取得する

さて、ではやっと本題の地震情報を取得していきましょう。

JSONなどの情報を取得するJavaScriptのコードは前出てきましたね。
そう、$.getJSON(url, function (data) {})です。
今回の場合、urlは https://api.p2pquake.net/v2/history?codes=551 となります。
では書いていきましょう。
地図を描画した後に地震情報を取得します。

ソースコード
index.js
var map = L.map('map').setView([36.575, 137.984], 6);
L.control.scale({ maxWidth: 150, position: 'bottomright', imperial: false }).addTo(map);
map.zoomControl.setPosition('topright');

var PolygonLayer_Style_nerv = {
    "color": "#ffffff",
    "weight": 1.5,
    "opacity": 1,
    "fillColor": "#3a3a3a",
    "fillOpacity": 1
}

$.getJSON("prefectures.geojson", function (data) {
    L.geoJson(data, {
        style: PolygonLayer_Style_nerv
    }).addTo(map);
});

+ $.getJSON("https://api.p2pquake.net/v2/history?codes=551", function (data) {
+     
+ });

こうすることによって、取得先のURLから取得した情報が、dataの中に格納されます。

JSONをいじる

まずはJSONを見てみましょう。
JSONってなんぞやと言いますと、JavaScript Object Notationの略らしいのですが、そんなこと私も知りません。
とりあえず、JSONにしておけば、どの言語でも使えるデータ源の種類という感じですね。
たしかに、JSONにしておけば、JavaScriptやPHPなどでもJSONをいじる専用のコードがあるので、やはりJSONが使いやすいイメージはあります。

では地震情報のJSONを見ていきましょう。と言いましたが、さっき見ましたね。

ではここからどうやってJavaScriptでJSONをいじっていくか、体験していきましょう。

まずは、先程のコードに

index.js
$.getJSON("https://api.p2pquake.net/v2/history?codes=551", function (data) {
+    console.log(data);
});

として、取得できた生データをコンソールに出力してみましょう。
s-スクリーンショット 2023-12-17 202431.jpg
コンソールの▶ボタンを押して展開していってみると、さきほどと同じデータが得られたかと思います（当たり前体操）。

ではこれをどうやってJavaScriptでいじっていくかというと、▶ボタンの右側、0:とか、earthquake:とか書いてあるところありますよね。
そこの名前を呼び出していくことで情報を取得します。

その0:とかの部分を「キー」と言います。
またキーの中身の"根室半島南東沖"などの部分を「値」といいます。
イメージとしては、出席確認で「nameさーん」と呼ぶと、「"根室半島南東沖"」と返ってくる感じです。
その他の「depthさーん」や「magnitudeさーん」も同じです。読んだらその人が持っている値が返ってきます。
これで情報を呼び出します。

ではJavaScriptで名前を読んでみましょう。
まずデータを見ると、0: 1: 2: 3:と並んでいるので、0:さんを呼んでみます。
このときは、

index.js
$.getJSON("https://api.p2pquake.net/v2/history?codes=551", function (data) {
+    console.log(data["0"]);
});

とします。data["0"]とすることで、dataの中の0を呼んでいます。
これだけです。
あとは、0のなかのearthquake、earthquakeのなかのhypocenter 、hypocenterのなかのnameというように、続けて書くだけです。
では上の例のようにnameを呼んでみましょう。

index.js
$.getJSON("https://api.p2pquake.net/v2/history?codes=551", function (data) {
+    console.log(data["0"]["earthquake"]["hypocenter"]["name"]);
});

とかくと、
スクリーンショット 2023-12-17 204515.png
などと、震源の名前が返ってきたと思います。
あとは、必要な情報をこうやって取り出すだけです。

地震情報をコンソールに表示してみましょう。

ソースコード
index.js
var map = L.map('map').setView([36.575, 137.984], 6);
L.control.scale({ maxWidth: 150, position: 'bottomright', imperial: false }).addTo(map);
map.zoomControl.setPosition('topright');

var PolygonLayer_Style_nerv = {
    "color": "#ffffff",
    "weight": 1.5,
    "opacity": 1,
    "fillColor": "#3a3a3a",
    "fillOpacity": 1
}

$.getJSON("prefectures.geojson", function (data) {
    L.geoJson(data, {
        style: PolygonLayer_Style_nerv
    }).addTo(map);
});

$.getJSON("https://api.p2pquake.net/v2/history?codes=551", function (data) {
-    console.log(data["0"]["earthquake"]["hypocenter"]["name"]);
+    var [time, name, shindo, magnitude, depth] = [
+        data["0"]["earthquake"]["time"],
+        data["0"]["earthquake"]["hypocenter"]["name"],
+        data["0"]["earthquake"]["maxScale"],
+        data["0"]["earthquake"]["hypocenter"]["magnitude"],
+        data["0"]["earthquake"]["hypocenter"]["depth"]
+    ]
+    console.log(time+"ごろ、"+name+"で最大震度"+shindo/10+"の地震が発生しました。マグニチュードは"+magnitude+"、深さ"+depth+"kmと推定されています。");
});

とすると、
スクリーンショット 2023-12-17 205614.png
となり、しっかりと地震情報が表示できたことが分かります。

終わりに

さて、今回は地震情報を取得し、JavaScriptでいじり、地震情報をコンソールに表示する所まで終わりました。
次回にはさっそく地震情報を元に地図に表示させていきましょう。

今回までのソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>震度分布図</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <div id="map"></div>
    <script src="index.js"></script>
</body>
</html>
index.js
var map = L.map('map').setView([36.575, 137.984], 6);
L.control.scale({ maxWidth: 150, position: 'bottomright', imperial: false }).addTo(map);
map.zoomControl.setPosition('topright');

var PolygonLayer_Style_nerv = {
    "color": "#ffffff",
    "weight": 1.5,
    "opacity": 1,
    "fillColor": "#3a3a3a",
    "fillOpacity": 1
}

$.getJSON("prefectures.geojson", function (data) {
    L.geoJson(data, {
        style: PolygonLayer_Style_nerv
    }).addTo(map);
});

$.getJSON("https://api.p2pquake.net/v2/history?codes=551", function (data) {
    var [time, name, shindo, magnitude, depth] = [
        data["0"]["earthquake"]["time"],
        data["0"]["earthquake"]["hypocenter"]["name"],
        data["0"]["earthquake"]["maxScale"],
        data["0"]["earthquake"]["hypocenter"]["magnitude"],
        data["0"]["earthquake"]["hypocenter"]["depth"]
    ]
    console.log(time+"ごろ、"+name+"で最大震度"+shindo/10+"の地震が発生しました。マグニチュードは"+magnitude+"、深さ"+depth+"kmと推定されています。");
});
index.css
html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
}
#map {
    background: #1d1d1d;
}

次回予告

震度分布図を作ろう④ ～震源を表示させよう～

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1