今朝がた地震があって…

今朝ちょっとした大きさの地震があり、ちょうど昨夜こちらの記事 Pythonで地震情報を取得するを拝見して試しにAPIをたたいてみていたので、さっそく実験してみたところレスポンスの良さに感動したので地震があったときスマホとかからでも気軽に呼び出せたらいいなと思い、コードを書いてみました。API叩いて戻ってきたJSON表示してるだけなんですが…

コード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>地震情報</title>

<style>
/* リセットCSS */
* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.eq {
  background-color: #c0f7f0;
//  width: 100%;
//  max-width: 600px;
//  margin: 0 auto;
}

/* アコーディオンメニュー全体のサイズ・位置 */
.ac {
//  width: 100%;
//  max-width: 600px;
//  margin: 0 auto;
}

/* クリック領域 */
.ac-parent {
//  height: 50px;
  border-bottom: 1px solid #fff;
  background-color: #a0e0b0;
  color: #000;
//  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

/* クリックしたら表示される領域 */
.ac-child {
  display: none;
  padding: 2em 1em;
  background-color: #90d0a0;
//  text-align: center;
}
</style>

</head>
<body>
<ul id="result" class="ajax"></ul>
<HR/>
<dt class="ac-parent">Earthquake Peer-to-peer Sharing Protocol</dt>
<dd class="ac-child">
https://www.p2pquake.net/json_api_v2/<BR/>
<BR/>
MIT License<BR/>
<BR/>
Copyright (c) 2018 takuya (P2PQuake)<BR/>
<BR/>
Permission is hereby granted, free of<BR/>
charge, to any person obtaining a copy<BR/>
of this software and associated<BR/>
documentation files (the "Software"), to deal<BR/>
in the Software without restriction,<BR/>
including without limitation the rights<BR/>
to use, copy, modify, merge, publish,<BR/>
distribute, sublicense, and/or sell<BR/>
copies of the Software, and to permit<BR/>
persons to whom the Software is<BR/>
furnished to do so, subject to<BR/>
the following conditions:<BR/>
<BR/>
The above copyright notice and this<BR/>
permission notice shall be included in all<BR/>
copies or substantial portions of the Software.<BR/>
<BR/>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT<BR/>
WARRANTY OF ANY KIND, EXPRESS OR<BR/>
IMPLIED, INCLUDING BUT NOT LIMITED TO<BR/>
THE WARRANTIES OF MERCHANTABILITY,<BR/>
FITNESS FOR A PARTICULAR PURPOSE AND<BR/>
NONINFRINGEMENT. IN NO EVENT SHALL THE<BR/>
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE<BR/>
FOR ANY CLAIM, DAMAGES OR OTHER<BR/>
LIABILITY, WHETHER IN AN ACTION OF<BR/>
CONTRACT, TORT OR OTHERWISE, ARISING FROM,<BR/>
OUT OF OR IN CONNECTION WITH THE SOFTWARE<BR/>
OR THE USE OR OTHER DEALINGS IN THE<BR/>
SOFTWARE.<BR/>
</dd>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

function sindo( scale ){
   switch( scale ){
     case 10: return "1";
     case 20: return "2";
     case 30: return "3";
     case 40: return "4";
     case 45: return "5弱";
     case 50: return "5強";
     case 55: return "6弱";
     case 60: return "6強";
     case 70: return "7";
   }
   return "不明("+scale+")";
}


$(function() {
  $(document).on('click','.ac-parent', function () {
    $(this).next().slideToggle();
  });

    $.ajax('https://api.p2pquake.net/v2/history',
      {
        type: 'get',
        data: {
           codes: "551",
           limit: "10",
           cache: false
        },
        dataType: 'json'
      }
    )
    .done(function(data) {
      // 結果リストをクリア
      $('#result').empty();
      for( i=0;i<data.length;i++ ){
           d = data[i]
           e = d['earthquake']
           h = e['hypocenter']
           p = d['points']
           s = '<div class="eq">';
           s += "時刻 "+e[ 'time' ]+"<BR/>";
           s += "震源 "+h.name+"<BR/>";
           s += "マグニチュード "+h[ 'magnitude' ]+"<BR/>";
           s += "最大震度 "+sindo( e[ 'maxScale' ] )+"<BR/>";
           s += "深度 "+h[ 'depth' ]+ "km"+"<BR/>";
           s += '</eq>';


           s += '<dl class="ac">';
           s += '<dt class="ac-parent">各地の震度↓</dt>';
           s += '<dd class="ac-child">';
           for( j=0;j<p.length;j++ ){
              pi = p[ j ];
              s += '　'+ pi[ 'pref' ]+ " "+pi['addr']+" 震度"+sindo( pi['scale'] )+"</BR>";

           }
           s += '</dd>';
           s += '</dl>';
           $('#result').append( s );

           $('#result').append( "<HR/>" );
      }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      window.alert('ERROR: '+jqXHR.status+' '+textStatus+' '+errorThrown.message);
    });
});
</script>
</body>
</html>

UTF-8でなんとか.htmlで保存するとページをアクセスするだけで動くはずです。最新のものから10件を表示します。各地の震度についてはとても多いこともあってスマホでスワイプスクロールするのがきついこともあったのでアコーディオン式にしました。
アコーディオン表示についてはこちらのjQueryでアコーディオンメニューをサクッと作ろう【コピペOK】をほぼそのままお借りしました。

スタイルシートやajaxについてはちょっとつまんだ程度の知識しかありませんので見様見真似の実装になっててお見苦しいところもあるとも思いますが見逃してやってください。

ライセンス表示はGitにMITライセンスとありましたので末尾に表示を入れてあります。スマホで表示するとよくあるMITライセンス表示だと横幅がきついので1行半分程度に改行を入れてあります。

表示

こんな感じに表示されます。

実際に情報を取得してみると

実際に情報を取得してみると、震源-1kmとかマグニチュード-1とか震源が空白とかも結構来るのですが、これは未確認情報的なものだろうなと思っています。