こんにちは！行楽シーズンは早速野外で食べた鶏肉にあたって胃腸炎になりました開発部ヤマダです。
さてさて、この時期になると行き先々で何かと写真を撮りたくなりますよね？私も普段はあまり撮らないのですが、旅先なんかに行って少し良い風景を見たりすると、とりあえずiPhoneで撮って保存しておきたくなるものです。
今日はそんな秋の過ごし方をしている人を思って、Instagramをシステムに組み込めないか検証してみます！
（何回かに分けてお届けしたいと思います！まずは環境設定編をどうぞ★）
Instagram APIを使うために
ちょっとその前にInstagramをシステムに組み込むにはどうしたら良いのでしょうか？
少し調べてみると色んなサイトで既に紹介されていますが、「Instagram API」を利用するのが良さそうですね。（SnapWightを利用するとiframeで実装できそうなのですが、ここは敢えてPHPで実装する方法を検証します！！）
全体的な流れとしては、
- Instagramのアカウントを作成
- 開発者登録する
- アプリケーションの登録をする
- 連携に必要なIDやキー等を取得する
といった流れになります。４番まで完了したら後はデータを”どの様に見せるか”ということになるので、今回は４番までを一気にいってみましょう！
１ Instagramのアカウントを作成
これはiPhoneやAndroidからアプリをダウンロードし、アカウントを作成してください。
WEB版(PC版)にはアカウントの登録機能がありませんので、スマートフォンからの作成のみになります。
２ 開発者登録する
アカウントを用意したら、開発者やアプリケーションの情報を登録していきます。開発者向けページのURLは下記のとおりです。
開発者向けページの右上にあるログインボタンからログインします。初回のみ、開発者プロフィールの登録画面に進みます。Instagramを連携させるWEBサイトと電話番号、APIを利用する目的を入力して、API利用規約に同意の上「登録」をクリックします。
３ アプリケーションの登録をする
開発者プロフィールの登録が完了しましたら、こんどはアプリケーション(この場合Webサイト)の情報を登録していきましょう！
開発者向けページの中央付近にある「Register Your Application」をクリックし、アプリケーションの情報を入力していきます。
入力する項目は参考画像のとおりです。
[注]この後実際のサイトにPHPのコード記述し、コードが記述されたページにアクセスすることでInstagramアカウントとの連携が可能になります。Valid redirect URIsは認証用のPHPコードを記述するファイルのパスを記述します。
（今回はTOPページに認証用プログラムを記述したので、サイトURL/index.phpにしています。）
アプリケーションの登録が完了すると、連携するために必要な値である「CLIENT ID」と「CLIENT SECRET」が付与されます。
本日は最後にこのID/キーを使用して、Instagramのアカウントの認証と、プロフィール情報を取得するところまで実装してみます！
サイトの認証や、実際にInstagramの画像を表示させたいページにPHPのコードを記述していきます。今回はTOPページである index.php に下記のコードを記述しました。
（クライアントID, クライアントシークレットは秘密なので伏せておきます★）
// 設定
$client_id = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' ; // クライアントID
$client_secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' ; // クライアントシークレット
$redirect_uri = explode(
'?' , ( !isset($_SERVER['HTTPS']) || empty($_SERVER['HTTPS']) ? 'http://' : 'https://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']
)[0] ; // このプログラムを設置するURL
$scope = 'basic+comments+relationships+likes' ; // スコープ
// セッションスタート
session_start() ;
// HTML用
$html = '' ;
// [手順2] リクエストトークン($_GET["code"])とアクセストークンの交換
if( isset($_GET['code']) && !empty($_GET['code']) && isset($_SESSION['state'])
&& !empty($_SESSION['state']) && isset($_GET['state']) && !empty($_GET['state']) && $_SESSION['state'] == $_GET['state'] )
{
// リクエスト用のコンテキストを作成
$context = array(
'http' => array(
'method' => 'POST' ,
'content' => http_build_query(
array(
'client_id' => $client_id ,
'client_secret' => $client_secret ,
'grant_type' => 'authorization_code' ,
'redirect_uri' => $redirect_uri ,
'code' => $_GET['code'] ,
)
) ,
) ,
) ;
// CURLを使ってリクエスト
$curl = curl_init() ;
// オプションのセット
curl_setopt( $curl , CURLOPT_URL , 'https://api.instagram.com/oauth/access_token' ) ;
curl_setopt( $curl , CURLOPT_HEADER, 1 ) ;
curl_setopt( $curl , CURLOPT_CUSTOMREQUEST , $context['http']['method'] ) ; // メソッド
curl_setopt( $curl , CURLOPT_SSL_VERIFYPEER , false ) ; // 証明書の検証を行わない
curl_setopt( $curl , CURLOPT_RETURNTRANSFER , true ) ; // curl_execの結果を文字列で返す
curl_setopt( $curl , CURLOPT_POSTFIELDS , $context['http']['content'] ) ; // リクエストボディ
curl_setopt( $curl , CURLOPT_TIMEOUT , 5 ) ; // タイムアウトの秒数
// 実行
$res1 = curl_exec( $curl ) ;
$res2 = curl_getinfo( $curl ) ;
// 終了
curl_close( $curl ) ;
// 取得したデータ
$json = substr( $res1, $res2['header_size'] ) ; // 取得したデータ(JSONなど)
$header = substr( $res1, 0, $res2['header_size'] ) ; // レスポンスヘッダー (検証に利用したい場合にどうぞ)
// 取得したJSONをオブジェクトに変換
$obj = json_decode( $json ) ;
// エラー判定
if( !$obj || !isset($obj->user->id) || !isset($obj->user->username) || !isset($obj->user->profile_picture) || !isset($obj->access_token) )
{
$error = 'データを上手く取得できませんでした…。' ;
}
else
{
// 各データを整理
$user_id = $obj->user->id ; // ユーザーID
$user_name = $obj->user->username ; // ユーザーネーム
$user_picture = $obj->user->profile_picture ; // ユーザーアイコン
$access_token = $obj->access_token ; // アクセストークン
// セッション終了
$_SESSION = array() ;
session_destroy() ;
// 出力する
$html .= '<h2>実行結果</h2>' ;
$html .= '<dl>' ;
$html .= '<dt>ユーザーID</dt>' ;
$html .= '<dd>' . $user_id . '</dd>' ;
$html .= '<dt>ユーザー名</dt>' ;
$html .= '<dd>' . $user_name . '</dd>' ;
$html .= '<dt>アイコン画像</dt>' ;
$html .= '<dd><img class="_img" src="' . $user_picture . '"></dd>' ;
$html .= '<dt>アクセストークン</dt>' ;
$html .= '<dd>' . $access_token . '</dd>' ;
$html .= '</dl>' ;
}
// 取得したデータ
$html .= '<h2>取得したデータ</h2>' ;
$html .= '<p>下記のデータを取得できました。</p>' ;
$html .= '<h3>JSON</h3>' ;
$html .= '<p><textarea rows="8">' . $json . '</textarea></p>' ;
$html .= '<h3>レスポンスヘッダー</h3>' ;
$html .= '<p><textarea rows="8">' . $header . '</textarea></p>' ;
}//if
// [手順1] 初回アクセスの場合、ユーザーをアプリ認証画面へアクセスさせる
else
{
// CSRF対策
session_regenerate_id( true ) ;
$state = sha1( uniqid( mt_rand() , true ) ) ;
$_SESSION['state'] = $state ;
// リダイレクトさせる
header( 'Location: https://api.instagram.com/oauth/authorize/?client_id=' . $client_id . '&redirect_uri=' . rawurlencode( $redirect_uri ) . '&scope=' . $scope . '&response_type=code&state=' . $state ) ;
exit ;
}
// エラー時の処理
if( isset($error) || !empty($error) )
{
$html = '<p><mark>' . $error . '</mark>もう一度、認証をするには、
<a href="' . explode( '?' , $_SERVER['REQUEST_URI'] )[0] . '">こちら</a>をクリックして下さい。</p>' ;
}
// ブラウザに[$html]を出力 (HTMLのヘッダーとフッターを付けましょう)
echo $html ;
}
実行結果は以下のとおりになります。
ちゃんとプロフィール情報が取得できている様ですね★
今回はInstagramのAPIを使って、WEBサイトにInstagramのデータを組み込む方法を検証しました。
アパレル関係のWEBサイトなどを見ていると、商品自体の写真ももちろん大事ですが、実際に商品を着ている人の姿が見えた方が、やっぱり購入するときの決めてになったりするのかなぁ〜と思ったりします。
次回は実際にInstagramから写真データを抽出してウェブサイトに表示させるところとか、上手く行けばハッシュタグで絞って特定の写真を表示させるとか、色々と検証してみたいと思います。
今秋がみなさんにとって素敵な時間になりますように。
ヤマダでした！
