Go to Qiita Advent Calendar 2024 Top
LoginSignup
13
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kobotyann

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

Last updated at Posted at 2018-11-06

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

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


<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を叩く

        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を取得します。
取得されるのはこんな感じのものです。

[{"_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行目にある以下のコードについて解説します。

var Rjson=JSON.parse(apiHttp.responseText);

ここで、JSONテキストに変換します。

で、その次のif(apiHttp.responseText != log)は、直前のデータと比較しています。
これで、直前のデータと食い違うとなんらかの新しい情報が発表されたと判定します。
###GUI
やっとですが、クライアントに通知する処理を書きます。
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){
            //津波情報
        };

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のプラグ印を使えよって言う話ですよね。
適宜書き換えてご利用ください。

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

13
17
1

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
13
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?