Instagram APIをJavaScriptで扱う場合、アクセストークンがコード上に見えてしまう問題点があります。
それを解消するため、データの取得をPHPで行い、そのデータをJavaScriptで処理する記事を少し前に書いたのですが、この時に書いていたコードだと少し問題がありそうだったので補足しておきます。
※2016/06/18
APIの仕様が変更になり、インスタグラムへの申請と承認が必要になっています。詳しくは下記をご確認ください。
Permissions Review • Instagram Developer Documentation
変更前
変更前はこのように記述していました。
<?php $accessToken = 'アクセストークンをここに入れる'; $userid = 5001435; // ユーザーID $count = 10; // 取得件数 $url = 'https://api.instagram.com/v1/users/' . $userid . '/media/recent?access_token=' . $accessToken . '&count=' . $count; $jsonData = file_get_contents($url); echo $jsonData;
jsonデータを取得して、そのまま出力する形です。
この場合、出力されるjsonデータは以下のようになります。
{ "pagination":{ "next_url":"https:\/\/api.instagram.com\/v1\/users\/5001435\/media\/recent?access_token=アクセストークンがここに入っています\u0026count=10\u0026max_id=1064348317545558763_5001435", "next_max_id":"○○○" }, "meta":{ "code":200 }, "data":[ { ~取得するデータ~ } ] }
paginationのnext_urlの中にアクセストークンが含まれてしまっています。
JavaScriptで扱うのは主にdata内だけかと思いますので、data内だけ出力するようにしてみます。
変更後
<?php $accessToken = 'アクセストークンをここに入れる'; $userid = 5001435; // ユーザーID $count = 10; // 取得件数 $url = 'https://api.instagram.com/v1/users/' . $userid . '/media/recent?access_token=' . $accessToken . '&count=' . $count; $jsonData = file_get_contents($url); // jsonデータの整形・出力 $json = json_decode($jsonData, true); echo json_encode($json["data"]);
jsonデータの取得までは同じですが、一旦連想配列に変換して、data内だけ再度jsonに変換して出力しています。
jsonデータ出力のデモページ
【参考サイト】
コメントが承認されるまで時間がかかります。