地震情報を伝えるWebアプリを作ってみた

地震情報を伝えるWebアプリを作ってみました。(ローカルでね)

`https://api.p2pquake.net/v1/human-readable`ここのAPIで地震に関する
そのAPIの仕様は[こちら](https://www.p2pquake.net/dev/json-api/)
#とりあえずソースコード
```html

<script>
var apiHttps;
apiHttps = new XMLHttpRequest();
apiHttps.open("GET", "https://api.p2pquake.net/v1/human-readable", false);
apiHttps.send(null);
var log=apiHttps.responseText;
setInterval(function(){
	try{
		var apiHttp;
		apiHttp = new XMLHttpRequest();
		apiHttp.open("GET", "https://api.p2pquake.net/v1/human-readable", false);
		apiHttp.send(null);
		var jsonData=apiHttp.responseText;
	}catch(e){};
	var Rjson=JSON.parse(apiHttp.responseText);
	if(apiHttp.responseText != log){
		if(Rjson[0].code==551){
			if(Rjson[0].earthquake.maxScale > 20){
				//地震速報(震度3以上。緊急地震速報発表程度。)
			}else{
				//地震速報(震度1または2)
			};
		};
		if(Rjson[0].code==5610){
			//感震情報
		};
		if(Rjson[0].code==552){
			//津波情報
		};
	log=apiHttp.responseText;
	};
},3000);
</script>
```
同じことを2度も書くという大変汚いコードでごめんなさい。
#解説
###APIを叩く


```js
        var apiHttp;
        apiHttp = new XMLHttpRequest();
        apiHttp.open("GET", "https://api.p2pquake.net/v1/human-readable", false);
        apiHttp.send(null);
        var jsonData=apiHttp.responseText;
```
これで、APIを叩きます。
つまり、JSONを取得します。
取得されるのはこんな感じのものです。

```json
[{"_id":{"$oid":"5be12adff837cf2b3a3d7315"},"time":"2018/11/06 14:47:07.137","code":551,"issue":{"type":"DetailScale","source":"気象庁"},"earthquake":{"time":"6日14時41分","maxScale":20,"domesticTsunami":"None","hypocenter":{"name":"奄美大島北東沖","depth":"70km","magnitude":"4.1","latitude":"N29.2","longitude":"E130.6"}},"points":[{"scale":20,"addr":"鹿児島十島村"},{"scale":10,"addr":"奄美市"}]},{"_id":{"$oid":"5be10e81f837cf3f36f2d16a"},"time":"2018/11/06 12:46:06.930","code":551,"issue":{"type":"DetailScale","source":"気象庁"},"earthquake":{"time":"6日12時42分","maxScale":10,"domesticTsunami":"None","hypocenter":{"name":"国後島付近","depth":"20km","magnitude":"3.8","latitude":"N44.5","longitude":"E145.8"}},"points":[{"scale":10,"addr":"斜里町"},{"scale":10,"addr":"羅臼町"}]},{"_id":{"$oid":"5be0e723f837cf77145fdd92"},"time":"2018/11/06 09:58:07.573","code":551,"issue":{"type":"DetailScale","source":"気象庁"},"earthquake":{"time":"6日9時54分","maxScale":10,"domesticTsunami":"None","hypocenter":{"name":"宮城県沖","depth":"50km","magnitude":"3.7","latitude":"N38.2","longitude":"E141.7"}},"points":[{"scale":10,"addr":"一関市"},{"scale":10,"addr":"石巻市"}]},{"_id":{"$oid":"5be0a97ef837cf763e1d0976"},"time":"2018/11/06 05:35:07.156","code":551,"issue":{"type":"DetailScale","source":"気象庁"},"earthquake":{"time":"6日5時30分","maxScale":10,"domesticTsunami":"None","hypocenter":{"name":"静岡県西部","depth":"30km","magnitude":"2.9","latitude":"N34.8","longitude":"E138.1"}},"points":[{"scale":10,"addr":"島田市"},{"scale":10,"addr":"藤枝市"}]},{"_id":{"$oid":"5be08f7af837cf1d21c9fc71"},"time":"2018/11/06 03:44:07.359","code":551,"issue":{"type":"DetailScale","source":"気象庁"},"earthquake":{"time":"6日3時39分","maxScale":10,"domesticTsunami":"None","hypocenter":{"name":"和歌山県南方沖","depth":"50km","magnitude":"3.2","latitude":"N33.6","longitude":"E135.2"}},"points":[{"scale":10,"addr":"みなべ町"}]},{"_id":{"$oid":"5be05992f837cf5a56822367"},"time":"2018/11/05 23:54:07.269","code":551,"issue":{"type":"DetailScale","source":"気象庁"},"earthquake":{"time":"5日23時47分","maxScale":30,"domesticTsunami":"None","hypocenter":{"name":"奄美大島北東沖","depth":"50km","magnitude":"5.0","latitude":"N29.2","longitude":"E130.7"}},"points":[{"scale":30,"addr":"鹿児島十島村"},{"scale":10,"addr":"奄美市"}]},{"_id":{"$oid":"5be0591af837cf56dedaf472"},"time":"2018/11/05 23:52:07.395","code":551,"issue":{"type":"Destination","source":"気象庁"},"earthquake":{"time":"5日23時47分","maxScale":null,"domesticTsunami":"None","hypocenter":{"name":"奄美大島北東沖","depth":"50km","magnitude":"5.0","latitude":"N29.2","longitude":"E130.7"}},"points":[]},{"_id":{"$oid":"5be058ddf837cf5521712a86"},"time":"2018/11/05 23:51:06.772","code":551,"issue":{"type":"ScalePrompt","source":"気象庁"},"earthquake":{"time":"5日23時47分","maxScale":30,"domesticTsunami":"Checking","hypocenter":{"name":"","depth":"","magnitude":"","latitude":"","longitude":""}},"points":[{"scale":30,"addr":"鹿児島県十島村"}]},{"_id":{"$oid":"5be0573bf837cf460a56ba35"},"time":"2018/11/05 23:44:08.125","code":551,"issue":{"type":"DetailScale","source":"気象庁"},"earthquake":{"time":"5日23時39分","maxScale":10,"domesticTsunami":"None","hypocenter":{"name":"奄美大島北東沖","depth":"60km","magnitude":"4.4","latitude":"N29.2","longitude":"E130.6"}},"points":[{"scale":10,"addr":"鹿児島十島村"}]},{"_id":{"$oid":"5be043c6f837cf25b4e114a1"},"time":"2018/11/05 22:21:07.396","code":551,"issue":{"type":"DetailScale","source":"気象庁"},"earthquake":{"time":"5日22時16分","maxScale":10,"domesticTsunami":"None","hypocenter":{"name":"国後島付近","depth":"10km","magnitude":"4.1","latitude":"N44.6","longitude":"E145.7"}},"points":[{"scale":10,"addr":"斜里町"}]}]
```
それで、ソースコードに戻りますが、3行目のコード`apiHttp.open("GET", "https://api.p2pquake.net/v1/human-readable", false);`。ここでサイトのコードを取得します。
取得エラーなどのために、`try`文で囲むといいかもしれません。
最終行の、`apiHttp.responseText`には、サイトのコードが入っています。
###情報を処理する
次に、14行目にある以下のコードについて解説します。

```js
var Rjson=JSON.parse(apiHttp.responseText);
```
ここで、JSONテキストに変換します。

で、その次の`if(apiHttp.responseText != log)`は、直前のデータと比較しています。
これで、直前のデータと食い違うとなんらかの新しい情報が発表されたと判定します。
###GUI
やっとですが、クライアントに通知する処理を書きます。
`if(apiHttp.responseText != log)`これの直下ですね。

```js
        if(Rjson[0].code==551){
            if(Rjson[0].earthquake.maxScale > 20){
                //地震速報(震度3)
            }else{
                //地震速報(震度1または2)
            };
        };
        if(Rjson[0].code==5610){
            //感震情報
        };
        if(Rjson[0].code==552){
            //津波情報
        };
```
`Rjson[0].code`ここで、何の情報か判定します。

| `Rjson[0].code`の値 | なんの情報か |
|:-:|:-:|
| `551`  |  地震情報 |
| `552`  |  津波情報 |
| `5610`  |  集計済み感震情報 |
これを利用して、通知を出してもいいですし、表示してもいいかもしれません。
###その他
そして、最後、`log=apiHttp.responseText;`があります。
ここ、さらっと流れそうですが、結構重要です。
`if(apiHttp.responseText != log)`ここで、直前のデータと比較するといったのですが、その「直前のデータ」を代入しています。
###注意！！
`https://www.p2pquake.net/dev/json-api/`をしっかり呼んでいたら分かると思うのですが、「補足事項」に書いてあるこの二つの事項に注意です。
> ・リクエスト数が過大とならないよう配慮をお願いします。
・IPアドレス単位でおよそ 30リクエスト/分 を超える場合，アクセスを制限する可能性があります。

つまり、2秒に一回または、それより多くリクエストすると、制限を受ける可能性があるということです。
なので、最後に書いてあるように、タイマー処理の間隔は`3000`ミリ秒としてあります。
###ぼやき
`new XMLHttpRequest()`これなんですがね、jQureyのプラグ印を使えよって言う話ですよね。
適宜書き換えてご利用ください。


これで終わりです。すごく雑な文章ですが、最後まで読んでいただきありがとうございました。