ZaifのAPIからAjaxでNEMの価格を定期的に取得するPHP。

2019年06月07日 正午の月齢:4.1  月名:五日月  潮汐:中潮 月齢:4.1[五日月] 潮汐:中潮 (最終更新日:2019年06月17日)
3か月前に投稿 | 暗号資産(仮想通貨) | コメントはありません

8分ぐらいで読めます。

前回、NEMの価格を取得してみましたが、取得したときの価格が表示されるだけなので更新する場合はページの再読み込みをする必要がありました。

今回はAjaxを使って定期的に価格部分を更新してみます。実はAjax童貞なので今回が初体験ですー。

これを実現するために3つのファイルを用意します。基本となる「test.php」、Ajaxを記述する「ajax.php」、更新内容の「price.php」としました。

まずはtest.php。

<!DOCTYPE html>

<html lang="ja">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<title>NEM+jQuery</title>
</head>

<body>

<h1>jQueryを使ってNEMのJPY価格を定期的に取得</h1>

<div id="nem">
<?php
date_default_timezone_set('Asia/Tokyo');
$date = new DateTime('now');
echo $date->format('<p>Y年m月d日 H時i分s秒時点</p>');
?>

<?php
$url = "https://api.zaif.jp/api/1/ticker/xem_jpy";
$json = mb_convert_encoding(file_get_contents($url), 'UTF-8','ASCII,JIS,UTF8,EUC-JP,SJIS-WIN,SJIS');
$json_arr = json_decode($json,true);

if ($json_arr === NULL) {
echo "データがありません";
return;
}else{
$last = $json_arr["last"];
$high = $json_arr["high"];
$low = $json_arr["low"];
$vwap = $json_arr["vwap"];

echo "<table>";
echo "<tr><td>終値</td><td style=\"text-align: right;\">" . $last ." JPY</td></tr>";
echo "<tr><td>過去24時間の高値</td><td style=\"text-align: right;\">" . $high ." JPY</td></tr>";
echo "<tr><td>過去24時間の安値</td><td style=\"text-align: right;\">" . $low ." JPY</td></tr>";
echo "<tr><td>過去24時間の加重平均</td><td style=\"text-align: right;\">" . $vwap ." JPY</td></tr>";
echo "</table>";
}
?>
</div>

</body>

</html>

ヘッダ部分にjQueryとAjaxに関する記述を入れておきます。書き換えたい内容のブロックをdiv要素でまとめます。id="nem"としました。

次にajax.js。

function nemprice() {

// jQueryのajaxメソッドを使用しajax通信
$.ajax({
type: "GET", // GETメソッドで通信
url: "price.php", // 取得先のURL
cache: false, // キャッシュしないで読み込み

// 通信成功時に呼び出されるコールバック
success: function (data) {
$('#nem').html(data);
},

// 通信エラー時に呼び出されるコールバック
error: function () {
$(this).ajax;
}
});
}

// 更新頻度(m秒)
window.addEventListener('load', function () {
setInterval(nemprice, 30000);
});

price.phpを呼び出して、nemと名づけたブロックを書き換えますが、通信に失敗した場合は再びAjaxを実行するようにしてみました。こんな処理でいいのかわかりませんが…。更新頻度は30秒に設定しました。なかなか30秒ぴったりでは更新されないですけど。

最後にprice.php。

<div id="nem">
<?php
date_default_timezone_set('Asia/Tokyo');
$date = new DateTime('now');
echo $date->format('<p>Y年m月d日 H時i分s秒時点</p>');
?>

<?php
$url = "https://api.zaif.jp/api/1/ticker/xem_jpy";
$json = mb_convert_encoding(file_get_contents($url), 'UTF-8','ASCII,JIS,UTF8,EUC-JP,SJIS-WIN,SJIS');
$json_arr = json_decode($json,true);

if ($json_arr === NULL) {
echo "データがありません";
return;
}else{
$last = $json_arr["last"];
$high = $json_arr["high"];
$low = $json_arr["low"];
$vwap = $json_arr["vwap"];

echo "<table>";
echo "<tr><td>終値</td><td style=\"text-align: right;\">" . $last ." JPY</td></tr>";
echo "<tr><td>過去24時間の高値</td><td style=\"text-align: right;\">" . $high ." JPY</td></tr>";
echo "<tr><td>過去24時間の安値</td><td style=\"text-align: right;\">" . $low ." JPY</td></tr>";
echo "<tr><td>過去24時間の加重平均</td><td style=\"text-align: right;\">" . $vwap ." JPY</td></tr>";
echo "</table>";
}
?>
</div>

div要素をまるまる更新する感じです。これが正解なのかさっぱり自信はないのですが、正しく動作したのでOKということにしておきましょう。

テスト中にどんどん価格が下がっていく…切ないナァ。

NEM投げ銭(1XEM)

NEM投げ銭

古い記事・新しい記事

古い記事
新しい記事

この記事のトラックバックURL

https://susu.cc/2019/06/zaifapi-ajax.html/trackback

コメントはありません »

[RSS on this post] [TrackBack URI]

コメントをどうぞ