WordPress(Gutenberg)にChart.jsでbitcoinのグラフ表示(php,sqlite3,python3)

WordPress

前回の記事でWordPress(Gutenberg)にChart.jsでcsvファイルから読み出したデータでグラフを表示するやり方はわかりました。
今回はbitcoinの価格データをDB(sqlite3)に入れて、DBから読み出したデータでグラフを表示しようと思います。

bitcoin の価格を取得して sqlite3 に入れる


bitcoin の取引所などから API で bitcoin の価格が取得できるようです。
今後、bitcoin 以外も取得したいので、さまざまな仮想通貨の情報を取得できる CoinGecko のAPIを使ってみようと思います。

まずはいつものように CoinGecko の API を使って情報を取得してるブログを探してみて、以下を参考にさせて頂きました。

【Python】CoinGeckoのAPIでビットコイン・アルトコインの価格データを取得する
こんにちは、ミナピピン(@python_mllover)です。最近仮想通貨BOTの作成にハマっておりまして、今回はそれに必要なAPI経由でのビットコイン・アルトコインの価格取得の方法について解説していきます。仮想通貨の価格データをスクレイピ

上記のページでは「/coins/{id}/market_chart」のAPIを使ってますが、試してみると1日分を指定しても凄い大量に応答が返ってきます。
APIの説明ページを見てみると、1日は分毎のデータで、2日から90日までは時間毎のデータ、90日より前は日毎のデータみたいで変更できなさそう。。
---
Get historical market data include price, market cap, and 24h volume (granularity auto)
Minutely data will be used for duration within 1 day, Hourly data will be used for duration between 1 day and 90 days, Daily data will be used for duration above 90 days.
---

Cryptocurrency API - Most Trusted, Powerful, and Free | CoinGecko
Get free cryptocurrency API such as real-time market price, historical trading, tickers, and exchange data for cryptocurrencies.

他にいいAPI無いかな?と見てたら「/coins/{id}/ohlc Get coin's OHLC (Beta)」が使えそう。
1~2日は30分毎、3~30日は4時間毎、31日以前は4日毎だそうです。
OHLCって何かな?と思ったら open、high、low、close の頭文字で、いわゆるローソク足のグラフ向けのデータみたい。
検索するとローソク足を表示できるものもありそうですが、とりあえずこのデータを使って1日分の30分毎のグラフを作ってみようと思います!

長くなりそうなので端折って行きます。笑

まず、python で上記の API でデータを取得するために、requests のライブラリが必要だったので、追加しました。
ちなみに以下の記事の後半でやってるように、pip の upgrade はしておきましょう。

先ほどのページを参考に、CoinGecko から API で情報収集して、とりあえず画面にテキストで出力する python プログラムを作ってみました。

実行結果はこんな感じでちゃんと取れてそうです。

さて、次は python からどうやって、sqlite3 に入れるか。
今度はこのページを参考にさせてもらいました。
python を1行づつ入力して動かすモードは使ったことが無かったですが、試すと簡単なので、先に動きを確認するのに便利ですね。

あと、びっくりしたのが、sqlite3 で先に DBのファイルは作成しないといけないのですが、python で pandas というモジュールを使うと、DBにテーブルが無くてもインサートできてしまうようです。
ただ、sqlite3 で テーブルを作らないとDBファイルができなかったので、以下ではまず sample.db というファイルを作って test というテーブルを作って保存してます。

以下は、python3 の対話モードで sqlite3 の sample.db に接続して testテーブルにデータをインサート。その後、読み出して確認してます。

念のために sqlite3 で接続してデータが入ったことを確認してみます。

それでは、CoinGecko から取ってきたデータを sqlite3 の sample.db の testテーブルに入れてみましょう。

上記の python を起動してみた後で sqlite3 に繋いでデータがどうなったか見てみましょう。
出力は省略しましたが、ちゃんとテーブルにデータが設定されてました。

sqlite3 からデータを読み出して Chart.js で表示


最初は javascript で sqlite3 から読み出して、Chart.js に設定して表示することを考えてましたが、javascript で sqlite3 からデータを読み出すやり方は無いのか、検索してもほとんど出て来ないし、出てきた記事見ても良くわかりませんでした。笑

どうしょうかと思ったら、php で最初に sqlite3 から情報を取得し変数に成形しておいて、HTMLの<script> の中で取得した情報を張り付けると良いようでした。

php は詳しく無いのでいろいろ上手くいかず紆余曲折しましたが、いろんなページのサンプルなどを参考になんとか出ました。
いろんなページを参考にしながら作ったのでコピー元の記事は特に無しです。

試しに上記を単体のページで確認する場合は以下のURLにアクセスしてみてください。

https://teqnobreaker.com/work/graph7.php

アクセスした画面は以下。

だいたい同じ時間を coincheck で見た画面は以下。

coincheck はローソク足なので雰囲気は違いますが、日時や値はあってそうです。

CoinGecko から情報収集してDBに入れるプログラムを cron で定期的に行えば最新のグラフが見れるようになりますね。

最後に前回のようにグラフ表示の php を iframe で記事に「カスタムHTML」で埋め込んでみます。

実際に埋め込んだのが以下です。
うーん、PCだと綺麗に出ますがスマホだとグラフが小さくて見づらい、、笑
とりあえず今回はここまで。

スマホで綺麗に見たい場合は、とりあえず以下の単独画面で見てみてください。。

https://teqnobreaker.com/work/graph7.php

コメント

タイトルとURLをコピーしました