JSONなどのAPIの接続が出来ると、プログラミングの世界が広がります！
一言でいうと、様々な情報・データを活用した開発が出来るようになります。
ただ"API"ってこの３文字の英語イヤですね。
正式名称なんて、もっとイヤ……
アプリケーションプログラミングインタフェース
（小さくすると余計に。）
そんなAPIですが、分かってくると楽しくなってきます。
出来る限り、分かりやすくまとめてみたので、参考にしていただけたら幸いです！
この記事の対象：HTML／CSS・PHPの基礎をご存知の方
※PHPの基本的な知識があること前提で進めていきます！
とりあえず、API接続を体験してみる
使用API:https://dog.ceo/dog-api/
クリックすると犬の画像が出てくることが分かります。
クリックの後、APIに接続し、返ってきた犬の画像を表示しています。
APIとは？？
APIとは、分かりやすく言うと、「決まった方法でアクセスをすれば決まった結果を返してくれるもの」です。
よく、ログイン時に、「Googleでログイン／Facebookでログイン」とかありませんか？？
まさにこれがAPIを活用したものです。
決まった方法でGoogleやFacebookにアクセスすることで、必要なユーザー情報を返してもらい、新規の会員登録をすることなく、ユーザー情報を取得することが出来るのです。
今回の犬のAPIの場合は、
自分側プログラム(決まった方法でアクセス)
API側プログラム(決まった結果を返す)
という流れを行っています。
次のように、画像の内容を指定することも可能です。
自分側プログラム(決まった方法でアクセス)
API側プログラム(決まった結果を返す)
この○○が、「パラメーター」と呼ばれるものです。
DogAPIには、パラメーターにより犬種を指定することが出来ます。
最初の事例のような動作だけでは物足りないので、今回は指定した犬種の画像を出すようにしてみましょう！
早速、APIで"犬画像"データを取得してみる
まずは、パラメーター無しで作ってみます。
①API接続用のPHPファイルを作成する
下記をコピーしてAPI接続用のPHPファイルを作成しましょう。
名前はなんでもOKです。ここでは、dog.phpとしました。
<?php
#file_get_contentsでURLを指定してWebページの内容を取得したり、ファイルの内容を一括で取得。
$json = file_get_contents('https://dog.ceo/api/breeds/image/random');
#取得したjsonエンコード文字列をJSONをデコードして変数に格納します。
#2つめの引数をtrueにして連想配列形式のオブジェクトを返します。(何も指定しないとfalse)
$json = json_decode($json,true);
#オブジェクト（配列）の中身を出力
print var_dump($json);
?>APIのリンクは、APIの仕様サイトからコピーします。→ https://dog.ceo/dog-api/
一度、PHPを実行してみましょう。
こんな風に表示されれば成功です。
array(2) { ["message"]=> string(67) "https://images.dog.ceo/breeds/elkhound-norwegian/n02091467_4436.jpg" ["status"]=> string(7) "success" }
string(67)やstring(7)などという文字が入っていますが、これは無視して大丈夫です！
string型67文字(リンクの文字数)、string型7文字(success)の文字数を表しています。
※画像はランダムなので、リンクや文字数は多少異なります。
これらを省くと、こんな感じになります。
{ ["message"]=> "https://images.dog.ceo/breeds/elkhound-norwegian/n02091467_4436.jpg" ["status"]=>"success" }
[message] = 画像のリンク、[status] = 成功かどうか
という意味ですね！
ということは…
HTML<img>タグのsrcにこの画像のリンクを入れ込めば、取得した画像が表示されそうです！！
まずは、先ほどの配列の中から、[message]に含まれる画像リンクだけを抽出します。
<?php
#file_get_contentsでURLを指定してWebページの内容を取得したり、ファイルの内容を一括で取得。
$json = file_get_contents('https://dog.ceo/api/breeds/image/random');
#取得したjsonエンコード文字列をJSONをデコードして変数に格納します。
#2つめの引数をtrueにして連想配列形式のオブジェクトを返します。(何も指定しないとfalse)
$json = json_decode($json,true);
#オブジェクト（配列）の中身を出力
#print var_dump($json); #←コメントアウトする
$result = $json["message"];#追加 APIから返ってきた変数から、messageを抜き出す。
print $result;#追加
?>
実行してみます！
こんな感じになりますか？？
https://images.dog.ceo/breeds/hound-english/n02089973_3159.jpg
このデータは$resultという変数に格納されています。
②HTMLで取得した画像リンクを表示する
HTMLまわりを書いていきましょう。
HTMLのformタグを使用して、こんな流れになります。
「クリックで画像取得」ボタンを押す→phpに、押したよ！の合図が行く
5行目で、合図を受け取ったことが確認されたら、API接続を開始し、取得した画像を表示させます。
<?php
print '<h3 style="text-align:center">犬の画像をAPIで取得</h3>';
#HTMLのボタンがクリックされたら、実行。
if (isset($_POST['add'])) {
#file_get_contentsでURLを指定してWebページの内容を取得したり、ファイルの内容を一括で取得。
$json = file_get_contents('https://dog.ceo/api/breeds/image/random');
#取得したjsonエンコード文字列をJSONをデコードして変数に格納します。
#2つめの引数をtrueにして連想配列形式のオブジェクトを返します。(何も指定しないとfalse)
$json = json_decode($json,true);
#オブジェクト（配列）の中身を出力
#print var_dump($json); #←コメントアウトする
$result = $json["message"];
#print $result;#←コメントアウトする
print '<div style="text-align:center;">';
print '<img src="'.$result.'" alt="犬の画像" style="width:200px;height:auto;">';
print '</div>';
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>犬の画像API</title>
</head>
<body>
<!--buttonクリックしたら、phpにpostする-->
<form action="dog.php" method="post" style="text-align: center;">
<button type="submit" name="add">クリックで画像取得</button>
</form>
</body>
</html>
表示されました！
APIにパラメーターを渡して、犬種を指定する
次に、APIのURLにパラメーターを渡して、指定した犬種の画像だけ返してもらうようにしてみましょう！
DogAPIでは次のようにパラメーターを指定します。
https://dog.ceo/api/breed/"パラメーター"/images/random
URLの中に、犬種のパラメーターを仕込んで、渡していきます。
使用出来るパラメーターは決まっており、次のサイトに記述があります。
使える犬種パラメーター：https://dog.ceo/dog-api/breeds-list
今回は、この膨大な犬種の中から、次の４種を指定出来るようにしてみましょう！（犬に詳しくないので、私の好みですw）
・柴犬(パラメーター：shiba)
・ボクサー(パラメーター：boxer)
・チャウチャウ(パラメーター：chow)
まずは、実装結果をお見せします。
流れは次の通りです。
①犬種を選択して、ボタンを押す
②選択された犬種のパラメーターをAPIに渡し、指定した犬種の画像をもらう
③画像を表示する
この太字の部分をプログラムに追加していく必要がありますね！
まず、HTML部分に下記を追加してください。
<!--省略-->
<form action="dog.php" method="post" style="text-align: center;">
<!--以下selectタグ部分を追加-->
<select name='select'>
<option value='shiba'>柴犬</option>
<option value='boxer'>ボクサー</option>
<option value='chow'>チャウチャウ</option>
</select>
<button type="submit" name="add">クリックで画像取得</button>
</form>このselectタグで、プルダウン式の選択肢を作ります。
value には、パラメーターを正確に入力してください。（これがAPIに渡るものになります）
クリックボタンを押すと、valueが一旦phpに渡されます。
次にPHP部分を追記します。
※URL部分は先ほどのパラメーター無しのものと若干異なる仕様なので注意。
#省略
if (isset($_POST['add'])) {
$select = $_POST["select"]; #ここで選択されたパラメーターを受け取る。
#URLに受け取ったパラメータ変数を入れ込む。似ているが、URLはパラメーター無しVerと異なるので注意！！
$json = file_get_contents('https://dog.ceo/api/breed/' . $select . '/images/random');全体像はこんな感じになります。
<?php
print '<h3 style="text-align:center">犬の画像をAPIで取得</h3>';
if (isset($_POST['add'])) {
$select = $_POST["select"];
#file_get_contentsでURLを指定してWebページの内容を取得したり、ファイルの内容を一括で取得。
$json = file_get_contents('https://dog.ceo/api/breed/' . $select . '/images/random');
#取得したjsonエンコード文字列をJSONをデコードして変数に格納します。
#2つめの引数をtrueにして連想配列形式のオブジェクトを返します。(何も指定しないとfalse)
$json = json_decode($json,true);
#オブジェクト（配列）の中身を出力
#print var_dump($json); #←コメントアウトする
$result = $json["message"];
#print $result;#←コメントアウトする
print '<div style="text-align:center;">';
print '<img src="'.$result.'" alt="犬の画像" style="width:200px;height:auto;">';
print '</div>';
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>犬の画像API</title>
</head>
<body>
<form action="dog.php" method="post" style="text-align: center;">
<select name='select'>
<option value='shiba'>柴犬</option>
<option value='boxer'>ボクサー</option>
<option value='chow'>チャウチャウ</option>
</select>
<button type="submit" name="add">クリックで画像取得</button>
</form>
</body>
</html>
以上で、完成です！！
出来ましたでしょうか？？
これでPHP⇔JsonAPIの基本的な使用が出来ました。
今後、「APIを自作してみる」や「画像データをAPIに送る」など面白いやり方も記録しておこうと思います。ぜひ、チェックしてみてください。
おつかれ様でした♪