WebページにAPIを利用

HTMLとCSSと少ーしPHPがわかる状態で初めてのAPIだったので、同じような境遇に再びなったときの自分の忘備録として残します。

※ちなみにWordPressを使っているサイトなのでPHPが使える環境です！

あくまでも自分用なので、色々わかりづらいところもあると思います。
読むのめんどくせ〜って人は下をコピペして使ってください。

sample

<?php　
$base_url = 'https://bitflyer.jp';
$responce = file_get_contents($base_url.'/api/echo/price');
$array = json_decode($responce,true);

 echo("<h3>販売価格</h3><p class='p-ask'>".$array["ask"]."</p>");
 echo("<h3>買取価格</h3><p class='p-bid'>".$array["bid"]."</p>");
 echo("<h3>中間値</3h><p class='p-mid'>".$array["mid"]."</p>")
?>

そもそもAPIが何かわからなかった

ハッカソンとかに出たり、エンジニアの人と一緒にいたりすると「API叩けば良くね？」みたいなワードが出て来ました。
初めての時は「叩くって何！？」ってなるんですけど、私的解釈でいうと
情報や機能をリンクで呼び起こして、自分のサイトやプロダクトで表示・利用するということでした。

また、初めてのときに立ちはだかった壁は、WebデザイナーでHTMLとCSSがわかりますよ〜ってレベルだと、呼び出しても次の処理がわからない。といった点でした。

こっから手順の話

さて本題。とりあえず思いつく順で説明して行きましょう。
まずは、BitflyerさんのAPI一覧のページにアクセスして、どういったことができるのかというのを確認しましょう。▶︎こちらからどぞ

今回は「レート取得」を'叩き'ます。

サイトを見て、認証・リクエスト・レスポンス…何これ？となりましたが、今ならなんとなくわかる。まずはそれぞれの役割を見て行きますか。

認証

なし

おそらく、アクセスするための許可証のようなものでしょう。今回はないですね。

リクエスト

GET /api/echo/price

呼び出す情報を特定するカテゴリー指定の呪文。

箇所

$responce = file_get_contents($base_url.'/api/echo/price');

上記のようにfile_get_contentsで「お前の()内のところからこのデータを引っ張ってきますね」という記述になります。

レスポンス

{
    "mid" : 41022,
    "ask" : 41812,
    "bid" : 40233
}

呼び出す情報（召喚獣）の表示場所のターゲットとなる、魔法陣。
なお、魔法陣と召喚獣の対応表は以下とのこと。

mid： int型必須仲値
ask： int型必須 bitFlyerの1BTC販売価格
bid： int型必須 bitFlyerの1BTC買取価格

前後しますが、次は「API共通事項」という箇所を確認して見ましょう。

エンドポイントURL

エンドポイントURL https://bitflyer.jp/

エンドポイントってのはAPIを呼び出すときにどのサイトから呼び出しますよ〜ってな感じのものでした。

箇所

$base_url = 'https://bitflyer.jp';

コードって何書いたか忘れることが多いので、エンドポイントは名前つけて別枠にしました。

文字列の形式指定

APIのレスポンスデータは、特に断りのない場合を除き、 JSON（※1）形式の文字列とします。

JSON…どうしようわからん…
となりましたが、PHPに変換して利用しました。
変換方法はリファレンスにて調べるとわかりますが、それも見つけるまで大変だったよ。

JSONのままではWebページにはレート表示されません！表示できる形に変換する必要があった

なんかこれをデコードやらエンコードやらいうらしいですが、んなもん知らないよ〜ってなったのでここも苦労しました。Google先生ありがたや。

json_decodeというのを利用して、取得した内容をPHPの形式に変換しました。

箇所

$array = json_decode($responce,true);

んで、変換した後はecho（）にて$array[]で、[]内にレスポンスで表示したい値の名前を入れれば表示されます。

箇所

echo("<h3>販売価格</h3><p class='p-ask'>".$array["ask"]."</p>");
echo("<h3>買取価格</h3><p class='p-bid'>".$array["bid"]."</p>"）;
echo("<h3>中間値</3h><p class='p-mid'>".$array["mid"]."</p>")

まとめ

いや〜思いつくままに書いたんで、わかりづらさMAXですネ。
とりあえず、APIを叩く、という作業工程を残せたんで、これで良しとします。

ポイントとしては

どこから取得するかを確認
なんの文字列形式で返ってくるか確認

ですね。以上。

Webページに仮想通貨（BTC）の現在価格をBitflyerのAPIを利用して表示する