【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

Instagram APIを使って写真機能の連携してみた検証と考察

Instagram APIを使って写真機能の連携してみた検証と考察

こんにちは!行楽シーズンは早速野外で食べた鶏肉にあたって胃腸炎になりました開発部ヤマダです。

さてさて、この時期になると行き先々で何かと写真を撮りたくなりますよね?私も普段はあまり撮らないのですが、旅先なんかに行って少し良い風景を見たりすると、とりあえずiPhoneで撮って保存しておきたくなるものです。

今日はそんな秋の過ごし方をしている人を思って、Instagramをシステムに組み込めないか検証してみます!

(何回かに分けてお届けしたいと思います!まずは環境設定編をどうぞ★)

Instagram APIを使うために

ちょっとその前にInstagramをシステムに組み込むにはどうしたら良いのでしょうか?

少し調べてみると色んなサイトで既に紹介されていますが、「Instagram API」を利用するのが良さそうですね。(SnapWightを利用するとiframeで実装できそうなのですが、ここは敢えてPHPで実装する方法を検証します!!)

全体的な流れとしては、

  1. Instagramのアカウントを作成
  2. 開発者登録する
  3. アプリケーションの登録をする
  4. 連携に必要なIDやキー等を取得する

といった流れになります。4番まで完了したら後はデータを”どの様に見せるか”ということになるので、今回は4番までを一気にいってみましょう!

1 Instagramのアカウントを作成

これはiPhoneやAndroidからアプリをダウンロードし、アカウントを作成してください。

WEB版(PC版)にはアカウントの登録機能がありませんので、スマートフォンからの作成のみになります。

2 開発者登録する

アカウントを用意したら、開発者やアプリケーションの情報を登録していきます。開発者向けページのURLは下記のとおりです。

Instagram 開発者向けページ

insta01

開発者向けページの右上にあるログインボタンからログインします。初回のみ、開発者プロフィールの登録画面に進みます。Instagramを連携させるWEBサイトと電話番号、APIを利用する目的を入力して、API利用規約に同意の上「登録」をクリックします。

3 アプリケーションの登録をする

開発者プロフィールの登録が完了しましたら、こんどはアプリケーション(この場合Webサイト)の情報を登録していきましょう!

開発者向けページの中央付近にある「Register Your Application」をクリックし、アプリケーションの情報を入力していきます。

入力する項目は参考画像のとおりです。

クリックで大きい画像
クリックで大きい画像

[注]この後実際のサイトにPHPのコード記述し、コードが記述されたページにアクセスすることでInstagramアカウントとの連携が可能になります。Valid redirect URIsは認証用のPHPコードを記述するファイルのパスを記述します。
(今回はTOPページに認証用プログラムを記述したので、サイトURL/index.phpにしています。)

4 連携に必要なIDやキー等を取得する

アプリケーションの登録が完了すると、連携するために必要な値である「CLIENT ID」と「CLIENT SECRET」が付与されます。

本日は最後にこのID/キーを使用して、Instagramのアカウントの認証と、プロフィール情報を取得するところまで実装してみます!

insta03-1

PHPを記述する

サイトの認証や、実際に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 ;
}

実行結果は以下のとおりになります。
ちゃんとプロフィール情報が取得できている様ですね★

insta06-1

終わりに

今回はInstagramのAPIを使って、WEBサイトにInstagramのデータを組み込む方法を検証しました。

アパレル関係のWEBサイトなどを見ていると、商品自体の写真ももちろん大事ですが、実際に商品を着ている人の姿が見えた方が、やっぱり購入するときの決めてになったりするのかなぁ〜と思ったりします。

次回は実際にInstagramから写真データを抽出してウェブサイトに表示させるところとか、上手く行けばハッシュタグで絞って特定の写真を表示させるとか、色々と検証してみたいと思います。

今秋がみなさんにとって素敵な時間になりますように。
ヤマダでした!

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+