---
title: Instagram基本表示APIをkurocoから呼び出してInstagramのフィードを表示する
description: Kurocoは自由にAPIを作成でき、さらに外部のAPIにリクエストを送るプラグインを持っているため、外部システム連携に表示されていないサービスについても、カスタム処理やバッチ処理に動作を記述することで利用が可能です。本チュートリアルはその例として、Instagram基本表示APIを利用してみます。
---

:::caution
Instagram基本表示APIは廃止されました。  
任意のサービスと連携する場合の参考としてご利用ください。
:::

## 概要
Kurocoは自由にAPIを作成でき、さらに外部のAPIにリクエストを送るプラグインを持っているため、外部システム連携に表示されていないサービスについても、カスタム処理やバッチ処理に動作を記述することで利用が可能です。  
本チュートリアルはその例として、Instagram基本表示APIを利用してみます。

kurocoの外部システム連携にInstagramの項目はありませんが、`{api}`のプラグインでInstagram基本表示APIにリクエストを送ることで、Instagramのフィードを表示します。  

### 学べること
以下の手順でInstagramのフィードを表示します。 
- [Instagramの設定](#instagramの設定)
- [Kurocoの設定(事前準備)](#kurocoの設定事前準備)
- [KurocoとNuxt.jsで認証の動作を実装する](#kurocoとnuxtjsで認証の動作を実装する)
- [Kurocoで定期的にInstagramのフィードを取得する](#kurocoで定期的にinstagramのフィードを取得する)
- [Kurocoで定期的に長期アクセストークンを更新する](#kurocoで定期的に長期アクセストークンを更新する)
- [KurocoとNuxt.jsでInstagramのフィードを表示する](#kurocoとnuxtjsでinstagramのフィードを表示する)

### 前提条件
以下のアカウントが必要になりますので、持っていない場合はアカウントを作成してください。  
- Facebook開発者アカウント。
- Instagramアカウント。

また、このページはKurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。
まだ構築していない場合は、下記のチュートリアルを参照してください。
- [Kurocoビギナーズガイド](/ja/docs/tutorials/beginners-guide/)

:::caution
Instagram基本表示APIは[公式ドキュメント](https://developers.facebook.com/docs/instagram-basic-display-api)を参考に実装しています。  
差分があった場合は公式ドキュメントの記載を優先させて下さい。
:::

## Instagramの設定
### Facebookアプリを作成する
[developers.facebook.com/apps](https://developers.facebook.com/apps/)にアクセスし、[アプリを作成]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/1e7787b7275b15e5e1b5061cd001a3b2.png)

[その他]を選択して[次へ]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/64d800687eab7d1179073a30c6d39c6c.png)

アプリタイプは[なし]を選択します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9a1bca189a6f250f1bac06c6e8034ec6.png)

アプリ名を入力して[アプリを作成]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9a697e2452fde1ec32e2db311d4b3afe.png)

アプリが作成されてアプリダッシュボードが表示されたら、[設定] -> [バーシック]に移動し、ページの下までスクロールして[プラットフォームを追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/c85d08e97f256e64df1d310028bb8274.png)

Websiteを選択して[次へ]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a4c80879989084d07122e30ac651bf61.png)

サイトURLの入力欄が表示されるので、KurocoのフロントエンドURLを入力して[変更を保存]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a92593f8cca7428526048589496349b6.png)

### Instagramアプリを作成する
ダッシュボードに戻り、製品を追加の項目からInstagram Basic Displayを探して[設定]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/202c3ac63f5ac06582189782f74dfed3.png)

ページの下部にスクロールして[Create New App]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3936da409d4a13a4fc43f209dd678274.png)

Facebookアプリのアプリ名が表示されているので、そのまま[アプリを作成]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/527612dd2b571e3640aa19aff9594712.png)

Instagramアプリが作成されたら、「有効なOAuthリダイレクトURI」「コールバックURLの許可の取り消し」「データの削除リクエストURL」に`https://フロントエンドURL/auth/`のURLを入力し、[変更を保存]をクリックします。  
「コールバックURLの許可の取り消し」「データの削除リクエストURL」は、最終的にはその処理をできるURLに変更しますが、ここではOAuthリダイレクトURIと同じにして構いません。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0f5dcf192b723c19ea67e816b8be2ae3.png)

### Instagramテストユーザーを追加する
[アプリの役割]->[役割]に遷移し、下にある[Instagramテスター]セクションまでスクロールして、[Instagramテスターを追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ef14b34ef4bf156d76a5afde3263815e.png)

Instagramアカウントのユーザーネームを入力し、送信をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/8726032780be7b73b71331c18b18e26b.png)

[www.instagram.com](https://www.instagram.com/)にアクセスして、先ほど招待したInstagramアカウントにサインインします。(プロフィールアイコン) -> [プロフィールを編集] -> [アプリとウェブサイト] -> [テスターの招待]に移動し、招待を受け入れます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0948189110495bf78410047cb6d2f5b6.png)

これで、Instagramアカウントは、開発モードになっていても、Facebookアプリからアクセスできるようになりました。

### 処理の流れの確認 
ユーザーの認証から、長期Instagramユーザーアクセストークンの取得までの流れを確認します。  

ユーザーの認証は、以下のURLから始まります。  

`https://api.instagram.com/oauth/authorize?client_id={app-id}&redirect_uri={redirect-uri}&scope=user_profile,user_media&response_type=code`

`{app-id}`と、`{redirect-uri}`は[INstagram Basic Display]->[Basic Display]の「InstagramアプリID」と「有効なOAuthリダイレクトURI」に置き換えます。  
InstagramアプリIDはフェイスブックアプリIDと異なることに注意してください。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1ed80d6c2f6a4c731c5691d9c949edb3.png)

例えば以下のようなURLになります。  
`https://api.instagram.com/oauth/authorize?client_id=684477648739411&redirect_uri=https://socialsizzle.herokuapp.com/auth/&scope=user_profile,user_media&response_type=code`

ご自身のInstagramアプリに対応したURLへアクセスすると以下の画面が表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/24fc4f67c929a3cf76129a15c2a96d4a.png)

[許可する]をクリックすると、
指定したリダイレクトURIにリダイレクトされ、URLに認証コードが付加されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ae5239e588bc7a39564d9444d637b96d.png)

こちらの認証コードをInstagramアプリIDやInstagram App Secretと共にInstagramのAPIにリクエストすることで、アクセストークンと交換してます。  
さらに取得したアクセストークンとユーザーIDをInstagramのAPIにリクエストすることで、Instagramのフィードを取得します。  

## Kurocoの設定(事前準備)
ここからはKurocoで設定をしていきます。  

### コンテンツ定義の作成
まずはInstagram長期アクセストークンと、Instagramフィードを保存するコンテンツ定義を作成します。  

[コンテンツ定義一覧](/ja/docs/management/content-structure-topics-group/)の画面から[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/22303613bafe005dc86e92cf56be990c.png)

以下の内容で設定をします。  

|項目|設定|
|:--|:--|
|名前|Instagram|
|ID=1|項目設定：テキスト<br/>項目名：アクセストークン<br/>識別子：token<br/>繰り返し回数：1|
|ID=2|項目設定：テキスト<br/>項目名：メディアURL<br/>識別子：media_url<br/>繰り返し回数：6|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8f5b5fc23f11335b8df424886e81030e.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f88fc9772a47083eea8cee5e1444edf8.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/bfc5a99f6572970275b8de5d2c2e5f2e.png)

設定ができたら[追加する]をクリックしてコンテンツ定義を追加します。  

### コンテンツの作成
後で作成するカスタム処理でコンテンツを更新していくように実装するため、空のコンテンツを作成しておきます。  

[コンテンツ一覧](/ja/docs/management/content-structure-topics/)の画面から[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/e032238938e700a0081661d8d60c8b1b.png)

以下を入力し、[追加する]をクリックします。 

|項目|値|
|:--|:--|
|Slug:|instagram|
|タイトル|任意のタイトル|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bd4de7dd81599d9c1b256b4efe88a280.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/72ca2599a82ca4044cd6a191d850967f.png)

### 定数とシークレットの作成
InstagramアプリIDと、Instagram App SecretはKurocoのカスタム処理で何度か利用する為、定数とシークレットに登録しておきます。  
特に機密性の高いものはシークレットに登録することをお勧めします。

InstagramアプリのBasic DisplayからInstagramアプリIDと、Instagram App Secretを確認します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/90e9d62e3477d11d9b0351cbd89d7b96.png)

Kurocoの管理画面に戻り、[環境設定]->[定数]から[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/c1ab648086738b9cd9974c7e33b7f5fc.png)

以下を入力して、[追加する]をクリックします。

|項目|設定|
|:--|:--|
|名前|INSTAGRAM_APP_ID|
|値|InstagramアプリID|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/dfdf9bb1a3653f61b66025ba296c9dc6.png)

追加が完了すると、Smartyで呼び出すための変数が表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/39ff4a3ded090dffa9244d8aa763220b.png)

次に、[環境設定]->[シークレット]から[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/e62506859a178befda4c615a002a3a2d.png)

以下を入力して、[追加する]をクリックします。

|項目|設定|
|:--|:--|
|名前|INSTAGRAM_APP_ID|
|値|Instagram App Secret|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/06a0e91c7d775ea4697e9bc7a694ee2b.png)

追加が完了すると、Smartyで呼び出すための変数が表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/530c7810802be72cf51b3369785dc71d.png)

### APIの作成
#### 内部処理用のAPI作成
Kuroco内部でのみ利用するエンドポイントはAPIを分けておくことをお勧めします。  
そこで、まずは内部利用のためのAPIを新規で作成します。  
既に追加済みの場合は次のステップに進んで構いません。  

#### APIの作成
Kuroco管理画面のAPIより「追加」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/22c37e75a8244f384deb5b706d4979da.png)

API作成画面が表示されるので、下記入力し「追加する」をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/44c341acced8d685e67ec1da1e85abac.png)

|項目|設定内容|
| :--- | :--- |
|タイトル|Internal|
|版|1.0|
|ディスクリプション|内部処理用のAPI|

APIが作成されました。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3c04c600fc74102913e9e668ae5cca0e.png)

#### セキュリティの設定
次にセキュリティの設定をします。[セキュリティ] をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6bc5cb1beb28c74ede6aeca89715a647.png)

セキュリティを[動的アクセストークン]に設定して、[保存する]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/62aaa225db5d12ee84ccc6d5a52411fe.png)

セキュリティを[動的アクセストークン]に設定後、`Login::token`のエンドポイントが無い場合、利用をお勧めされますが、内部利用のみの場合は無視して構いません。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0bb1efe099bdae8f1c0481037416a5d9.png)

#### CORSの設定
次にCORSの設定をします。[CORSを設定する] をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/74cd7a36fd926dbc20b04812553072c7.png)

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。

- 管理画面URL

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。

- GET  
- POST
- OPTIONS

CORS_ALLOW_CREDENTIALSの[Allow Credentials]にチェックが入っていることを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f2bc3744fe6a2ab042456fa8c635195c.png)

問題なければ [保存する] をクリックします。  

## KurocoとNuxt.jsで認証の動作を実装する
### エンドポイントの作成
エンドポイントはフロントエンドから認証コードを受け取るためのinstagram_authエンドポイントと、取得した長期アクセストークンをKurocoに保存するためのinstagram/updateエンドポイントの2つを作成します。  

#### instagram_authエンドポイント
instagram_authエンドポイントはフロントエンドからリクエストを送るため、DefaultのAPIから[新しいエンドポイントの追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/21831b02823d8ec43ef328ba8c998ad7.png)

以下のエンドポイントを作成します。

|項目|設定内容|
| :--- | :--- |
|パス|instagram_auth|
|カテゴリー|API|
|モデル|Api|
|オペレーション|request_api_post|
|name|instagram_auth<br/>(後で設定するカスタム処理の識別子と一致させます。)|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/09a45cbdf8dd43d51248ff14bce5cd9d.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/fd6179223c2fc761831024ecae0b8898.png)

設定ができたら[追加する]をクリックしてエンドポイントを追加します。

#### instagram/updateエンドポイント
instagram/updateエンドポイントはカスタム処理から呼び出す内部向けのエンドポイントになるため、InternalのAPIから[新しいエンドポイントの追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6bfc5c05d2cc1c6daf4740f6787a467f.png)

以下のエンドポイントを作成します。

|項目|設定内容|
| :--- | :--- |
|パス|instagram/update|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|update|
|topics_group_id|先ほど作成したコンテンツ定義のID(8)|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/41e930de0be762a3115bf25befa360ff.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/e68fb00f1569ff02a20e398a7ba35967.png)

設定ができたら[追加する]をクリックしてエンドポイントを追加します。

### カスタム処理の作成
[オペレーション] -> [カスタム処理]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/629aadd18b2e71dc1d5dca3784fe6252.png)

[追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3cf05595e31dd0f905466ec2a09bb835.png)

以下のように入力します。

|項目|設定|
|:--|:--|
|タイトル|instagram_auth|
|識別子|instagram_auth<br/>(Api::request_apiエンドポイントのnameと一致させてください。)|
|処理|以下のコード|

```smarty
{* 短期トークンの取得 *}
{append var=headers value="Content-Type': 'application/x-www-form-urlencoded"}
{assign_array var='body'            values=''}
{assign       var='body.client_id'    value=$smarty.const.INSTAGRAM_APP_ID}
{secret       var='body.client_secret' key='INSTAGRAM_APP_SECRET'}
{assign       var='body.grant_type' value='authorization_code'}
{assign       var='body.redirect_uri' value="`$smarty.const.ROOT_URL`/auth/"}
{assign       var='body.code' value=$smarty.request.code}

{api
    endpoint='https://api.instagram.com/oauth/access_token'
    method='POST'
    headers=$headers
    body=$body
    var=response1
    status_var=status1
}

{* apiプラグインのレスポンスをjson形式に変換*}
{assign var=response1 value=$response1|@json_decode}
{logger msg1="短期アクセストークンの取得" msg2=$body msg3=$response1 msg4=$status1}

{* 長期トークンの取得 *}
{assign_array var='body2'            values=''}
{secret       var='body2.client_secret' key='INSTAGRAM_APP_SECRET'}
{assign       var='body2.grant_type' value='ig_exchange_token'}
{assign       var='body2.access_token' value=$response1.access_token}

{api
    endpoint='https://graph.instagram.com/access_token'
    method='GET'
    queries=$body2
    var=response2
    status_var=status2
}

{* apiプラグインのレスポンスをjson形式に変換*}
{assign var=response2 value=$response2|@json_decode}
{logger msg1="長期アクセストークンの取得" msg2=$body2 msg3=$response2 msg4=$status2}

{* 長期トークンをコンテンツに追加 *}
{assign_array var='body3'            values=''}
{assign       var='body3.token'    value=$response2.access_token}

{if $response2.access_token != null}
    {api_internal
        var='response'
        status_var='status'
        endpoint='/rcms-api/4/instagram/update/instagram'
        method='POST'
        queries=$body3
        member_id='1'}
{/if}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d6255ac0db713e056ba378a3f92dcb23.png)

入力ができたら[追加する]をクリックしてカスタム処理を追加します。  

### フロントエンドの実装
次にリダイレクトURIにアクセスがあった場合に、Kurocoのエンドポイントに認証コードを送信し、カスタム処理を動作させる処理をフロントエンドで実装します。  

`/pages/auth/`のディレクトリに以下の`index.vue`ファイルを作成します。  

```markup [/auth/index.vue]
<template>
  <div>
    <p>認証が完了しました</p>
  </div>
</template>

<script>
export default {
  validate({ query }) {
        return query.code != null
    },
  methods: {
    async makeAccessToen() {
      const payload = {
        code: this.$route.query.code
      }
      await this.$axios.post('/rcms-api/1/instagram_auth', payload);
    }
  },
  mounted($route) {
    this.makeAccessToen();
  }
}
</script>
```

### 動作確認

以下のURLにアクセスして、[許可する]をクリックします。  

`https://api.instagram.com/oauth/authorize?client_id={app-id}&redirect_uri={redirect-uri}&scope=user_profile,user_media&response_type=code`

`{app-id}`と、`{redirect-uri}`は[INstagram Basic Display]->[Basic Display]の「InstagramアプリID」と「有効なOAuthリダイレクトURI」に置き換えます。  

リダイレクトURIに遷移し、コンテンツにアクセストークンが保存されていることを確認します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/7dfa739958ea2c345ede6762f290becc.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c83a2d9433f4c278d9d98b855f3bd2ff.png)

## Kurocoで定期的にInstagramのフィードを取得する
Instagramの情報はKurocoのバッチ処理で定期的に取得しに行き、コンテンツを更新するように実装します。  

### バッチ処理の作成
[オペレーション] -> [バッチ処理]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bbbe745e3943541e470fb5c0dc66969f.png)

[追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/82e14b4bc626dd8d97c97d7ac082842f.png)

以下のように設定します。  

|項目|設定内容|
| :--- | :--- |
|タイトル|instagram_get_media|
|識別子|instagram_get_media|
|バッチ|毎日 00:00|
|処理|以下のコード|

```smarty
{*現在の長期アクセストークンの取得*}
{assign_array var='method_params'           values=''}
{assign       var='method_params.topics_id' value="instagram"}
{api_method
    var='response'
    model='Topics'
    method='details'
    version='1'
    method_params=$method_params}

{*最新のメディアデータ取得*}
{assign_array var='body'            values=''}
{assign       var='body.fields'    value='media_url'}
{assign       var='body.access_token' value=$response.details.token}
{assign       var='body.limit' value=6}

{api
    endpoint='https://graph.instagram.com/me/media'
    method='GET'
    queries=$body
    var='media'
    status_var=status
}

{* apiプラグインのレスポンスをjson形式に変換 *}
{assign var=media value=$media|@json_decode}

{* apiプラグインのレスポンスをアップデート用の配列に変換 *}
{assign_array var='data.media_url' values=''}
{foreach from=$media.data item=foo}
    {append var='data.media_url' value=$foo.media_url}
{/foreach}

{* コンテンツを更新 *}
{api_internal
        var='response2'
        status_var='status'
        endpoint='/rcms-api/4/instagram/update/instagram'
        method='POST'
        queries=$data
        member_id='1'}

{logger msg1="Instagramメディアの取得" msg2=$response2}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5c24f78dc8a084cd87f8ad717a71ec56.png)

入力ができたら[追加する]をクリックしてバッチ処理を追加します。 

### 動作確認
最後に、[すぐに実行する]をクリックして動作の確認をします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1bd17db74cbaeb644650a3bb0b85a451.png)

正しく設定ができていれば以下のようにInstagramメディアURLがコンテンツに保存されます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b8cbfc90942f867254ff7e090fa1e026.png)

## Kurocoで定期的に長期アクセストークンを更新する
Instagram基本表示APIの長期アクセストークンは有効期限が60日となっています。  
Instagram側で長期アクセストークンを更新するエンドポイントが準備されているので、定期的にリクエストを送るバッチ処理を作成します。  

### バッチ処理の作成
[オペレーション] -> [バッチ処理]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bbbe745e3943541e470fb5c0dc66969f.png)

[追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/82e14b4bc626dd8d97c97d7ac082842f.png)

以下のように設定します。  

|項目|設定内容|
| :--- | :--- |
|タイトル|update_token|
|識別子|update_token|
|バッチ|毎日 01:00|
|処理|以下のコード|

```smarty
{*現在の長期アクセストークンの取得*}
{assign_array var='method_params'           values=''}
{assign       var='method_params.topics_id' value="instagram"}
{api_method
    var='topics'
    model='Topics'
    method='details'
    version='1'
    method_params=$method_params}

{* 長期トークンの更新 *}
{assign_array var='body'            values=''}
{assign       var='body.grant_type' value='ig_refresh_token'}
{assign       var='body.access_token' value=$topics.details.token}

{api
    endpoint='https://graph.instagram.com/refresh_access_token'
    method='GET'
    queries=$body
    var=response
    status_var=status
}

{* apiプラグインのレスポンスをjson形式に変換*}
{assign var=response value=$response|@json_decode}
{logger msg1="長期アクセストークンの更新" msg2=$body msg3=$response msg4=$status}

{* 長期トークンをコンテンツに追加 *}
{assign_array var='body2'            values=''}
{assign       var='body2.token'    value=$response.access_token}

{if $response.access_token != null}
    {api_internal
        var='response'
        status_var='status'
        endpoint='/rcms-api/4/instagram/update/instagram'
        method='POST'
        queries=$body2
        member_id='1'}
{/if}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c96d8bfd2fac7437f9ef1b0e7b2d2257.png)

入力ができたら[追加する]をクリックしてバッチ処理を追加します。 

### 動作確認
最後に、[すぐに実行する]をクリックして動作の確認をします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c57daa60b28a655dd546adb71b449bb7.png)

正しく設定ができていればコンテンツのアクセストークンが更新されます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0ad4872d7804ae4a4684b7d71544f273.png)

## KurocoとNuxt.jsでInstagramのフィードを表示する
ここまで準備ができたら後はKurocoのコンテンツに追加したInstagramのメディアURLをフロントに表示するだけです。  

### エンドポイントの作成
DefaultのAPIから[新しいエンドポイントの追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/21831b02823d8ec43ef328ba8c998ad7.png)

以下のエンドポイントを作成します。

|項目|設定内容|
| :--- | :--- |
|パス|instagram|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|details|
|topics_group_id|コンテンツ定義のID(8)|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3c3e840d05b5f4bf49a17bf4fab86f3e.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ea1113a47e6e577b57d9daf272b6da56.png)

設定ができたら[追加する]をクリックしてエンドポイントを追加します。

### フロントエンドの実装
フロントエンドは`/pages/instagram/`のディレクトリに以下の`index.vue`ファイルを作成しました。  

```markup [/pages/instagram/index.vue]
<template>
  <div>
    <h2>Instagram</h2>
    <div class="square_contents">
      <a v-for="(n,i) in response.details.media_url" :key=i href="https://www.instagram.com/" target="_blank">
        <img :src=n>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    return {
      response: await $axios.$get('/rcms-api/1/instagram/instagram'),
    };
  },
};
</script>

<style>
.square_contents {
  display: flex;
  flex-wrap: wrap;
  width:720px;
}
.square_contents a {
  display: block;
  position: relative;
  width: 31%;
  margin: 1%;
}
.square_contents a::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.square_contents img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  object-fit: cover;
}
</style>
```

### 表示の確認
フロントエンドの表示を確認すると、Instagramのフィードが表示できていることが確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ae470166ecc592ca12dbdb67b29e7b9d.jpg)


以上で、Instagramのフィードが表示され、更新があった場合も自動でKucoroのコンテンツが更新されるようになりました。  

今回はInstagramのフィードを表示させるのみのため、Instagram基本表示APIを利用しましたが、@メンションやハッシュタグが付いたメディアの特定、他のInstagramユーザーに関するデータの取得、ストーリーズの利用等をする場合は同様の手順でInstagramグラフAPIを利用ください。

## うまく動かなかった時は？
うまく動作しない時は、以下のような点をご確認ください。  
- フロントエンドは正しくデプロイされていますか？（`/auth/?code=1234`のページは表示できますか？）  
- Kuroco管理画面の`INSTAGRAM_APP_ID`に、`InstagramアプリID`ではなく、`アプリID`を設定していませんか？<br/>  
  **正（`InstagramアプリID`）:**  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/00b526d869976716b817c5a321d50316.png)  
  **誤（`アプリID`）:**  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/9683b73ca808fc0dbcad18ec38cedd2d.png)  
- Kuroco管理画面の`INSTAGRAM_APP_SECRET`に、`Instagram App Secret`ではなく`App Secret`を設定していませんか？<br/>  
  **正(`Instagram App Secret`):**  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/c9c4b96a0abaea904137c1b33975683c.png)  
  **誤(`App Secret`):**  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/6f2b13ff1c06052877386c9bf5ea5acf.png)  

## 関連ドキュメント
- [カスタム処理からKurocoのAPIを呼び出せますか？](/ja/docs/faq/how-to-request-kuroco-api-from-smarty-function/)
- [Smartyプラグイン](/ja/docs/reference/smarty-plugin/)