こんにちわ。
手がかじかんで、誤タイピングが多いタイチです。
2014年、本年もよろしくお願い申し上げます。
さて、本年1発目の記事・備忘録ですが、
「外部APIを使用して、地震情報を取得する」
を行ってみます(と言っても、全然難しくありません)。
個人的には、生まれが神奈川の海に近いところで、
東日本大震災の際には、情報が取得しずらかった経験から、
家族用にライフワークとして作っておりました。
まずはソース。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <?php //twippleから地震情報のAPIを読み込む //simplexml_load_file関数を使用してxmlを解析 $eq_data = @simplexml_load_file( $eqxml_url ); ?> <?php //データがあればGoogleMapで表示しつつ、他の情報も表示する(以下はhtml) if ( $eq_data ){ ?> <div> 発生時刻:<?php echo strftime ( '%Y/%m/%d %H:%M:%S' ,(int) $eq_data ->quake->eq_date); ?><br> 震度:<?= $eq_data ->quake->seismic_scale?><br> マグニチュード:<?=( $eq_data ->quake->magnitude)/10?><br> 深さ:<?=( $eq_data ->quake->depth)?>km<br> </div> <script type= "text/javascript" > google.maps.event.addDomListener(window, 'load' , function () { var mapdiv = document.getElementById( 'map_canvas' ); var myOptions = { zoom: 6, center: new google.maps.LatLng(<?php echo $eq_data ->quake->epicenter_lat; ?>, <?php echo $eq_data ->quake->epicenter_lng; ?>), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(<?php echo $eq_data ->quake->epicenter_lat; ?>, <?php echo $eq_data ->quake->epicenter_lng; ?>), map: map, title: '震源地' }); }); </script> <div id= "map_canvas" style= "width : 300px; height : 300px;" ></div> <? } ?> |
こんな感じ。
簡単に説明すると、twippleのAPI(http://quake.twiple.jp/pages/api を参照)からxml情報を取得し、
その後解析を行い、オブジェクトに入れておき、
1件目だけ使用して、適宜、表示したい情報を引っ張り出すという
極めて一般・基本的なことを行っています。
(数ヶ所、js上にphpタグを入れ込んで、GoogleMapに震源地の座標を入れ込んでます)
参考までに表示される情報はこんな感じです。
地震時に大切なことは、
情報を取得しやすいように極力シンプルに軽くすることになると思います。
そのため、今回は簡単にサンプルを記載してみました。
その他、地震に関係するAPIを提供している気象庁などもありますが、
利用条件等もありますので、今回、簡単なtwippleにしてみました。
ご参考までに…