Instagram APIを使ってWebページに表示する


# みんな大好きInstagram
Instagramに投稿したデータを取得してみたかったので、まとめました。(今更感)
今回は、SandBoxの機能を使って実装。

## Instagram API

Instagram APIは2016年6月に仕様が変更され、Instagram APIを使うにはInstagramの承認が必要になる。(ただ、審査がとても厳しいらしい。。)

## SandBox

* 未承認の場合に制限付きでAPIが使える
* 読み込めるデータは最新20件
* 最新20件まで取得


## アカウント作成

アプリをダウンロードし、アカウントを作成する
※今回、作成方法は省略します

[https://www.instagram.com/](https://www.instagram.com/)


## アプリケーション登録

![1.png](https://qiita-image-store.s3.amazonaws.com/0/55848/590b0d35-4f94-eccc-7b01-0e0af86a3aff.png "1.png")

[https://www.instagram.com/developer/](https://www.instagram.com/developer/) へアクセス

* Register Your Application をクリック



![2.png](https://qiita-image-store.s3.amazonaws.com/0/55848/9f591583-bcae-3e91-5e04-1976ef6b4402.png "2.png")

* Register a New Client をクリック

![6.png](https://qiita-image-store.s3.amazonaws.com/0/55848/f0d4e25e-58a7-589d-a23d-342f3eefa24c.png "6.png")


* Security タブをクリック
* Disable implicit OAuth: チェックを外す


![3.png](https://qiita-image-store.s3.amazonaws.com/0/55848/33408612-975d-f767-a524-da8d3fc7be16.png "3.png")

* 必要な項目を入力後、Register をクリック

```
* Application Name : アプリケーション名
* Description : アプリケーション説明
* Company Name : 会社名(任意ですので、空欄で大丈夫)
* Website URL : WebサイトURL
* Valid redirect URIs : 認証リダイレクトURL(Website URLと同じ)
* Privacy Policy URL : 個人情報保護方針のURL(任意ですので、空欄で大丈夫)
* Contact email : 連絡先メールアドレス
```

※ 後から、内容の編集可能。


![4.png](https://qiita-image-store.s3.amazonaws.com/0/55848/2ee063b6-eb23-bcff-71f0-ab2e6cb0fb07.png "4.png")


* こちらで登録完了



## アクセストークン取得

```
https://instagram.com/oauth/authorize/?client_id=「取得したCLIENT ID」&redirect_uri=「設定したValid redirect URIs」&response_type=token
```

* 上記URLに「取得したCLIENT ID」と「設定したValid redirect URIs」を記述し、アクセスする

![7.png](https://qiita-image-store.s3.amazonaws.com/0/55848/c1e23e04-fb5b-bf82-d8f9-a5bae029b38c.png "7.png")

* Authorize」をクリック


![5.png](https://qiita-image-store.s3.amazonaws.com/0/55848/01c2be6f-0852-1224-43f3-4dc2ccd9759c.png "5.png")

```
http://リダイレクトURL.com/#access_token=XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```
* リダイレクトURLで指定したページに遷移、アクセストークンが表示される


```
https://api.instagram.com/v1/users/self/media/recent?access_token=取得したアクセストークン
```

* 上記のURLで自分のアカウントのJSONデータを取得できる

## Webページに表示する

JavaScriptのみでも表示できますがセキュリティを考えてPHPを使います。(javascriptアクセストークンがみえてしまうので。。)
※html,CSSは良しなに調整してください。


### HTML

```ruby:index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Instagtam API 0084</title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="common/instagram.css">
</head>
<body>
  <h1><i class="fa fa-instagram fa-fw"></i>Instagtam API 0084</h1>
  <ul class="instagram"></ul>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="common/instagram.js"></script>
</body>
</html>
```

### PHP

```ruby:instagram.php
<?php
//POSTリクエストの場合のみ受付
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //アクセストークン
    $access_token = "XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; //取得したアクセストークンを設置
    //JSONデータを取得して出力
    echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}");
    //終了
    exit;
}
?>
```

### JavaScript

```ruby:instagram.js
$(function(){
    var $container = $(".instagram");
    var html = "";
 
    $.ajax({
        url: "common/instagram.php",//PHPファイルURL
        type:"POST",
        dataType: "json"
    }).done(function(data){
        //通信成功時の処理
        $.each(data.data,function(i,item){
            var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得
            var link = item.link; //リンクを取得
            html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>";
        });
    }).fail(function(){
        //通信失敗時の処理
        html = "<li>画像を取得できまへん。</li>";
    }).always(function(){
        //通信完了時の処理
        $container.html(html);
    });
});
```

* `"XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"` の箇所に取得したアクセストークンを設置する


### CSS

```ruby:instagram.css
body {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

.instagram {
  width: 90%;
  margin: 0 auto 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}

.instagram li {
  padding: 20px;
}

.instagram li img {
  width: 320px;
  height: auto;
}

@media screen and (max-width: 47.9375em) {
  .instagram li {
    width: 40%;
    padding: 10px;
  }

  .instagram li img {
    width: 100%;
  }
}
```

## 参考文献
[Instagram公式](https://www.instagram.com/)
[Instagramドキュメント](https://www.instagram.com/developer/)
[InstagramAPIでの画像取得](http://wald-grun.biz/api/5898/)