gatsby.jsでAPIを使わずにインスタグラムの写真を表示する方法

##概念
gatsbyのブログなどで自分のインスタの写真を表示したくて、Instagram Graph APIはややこしすぎて、結局諦めてしまうことが多いと思います。
この記事でgatsby-source-instagramというプラグインを使って、表示したいプロフィールをユーザーネームで指定して写真を表示する簡単な方法を紹介します。
インスタグラムの写真を導入する段階で立ち上げているgatsby.jsが必要になりますので、それを準備してください。

**(EDIT 29.09.2020)**: `gatsby-source-instagram`のプラグインで「ハッシュタグで絞り」と「ユーザーネーム絞り」という機能はなくなりました。詳しくは[プラグインのページ](https://www.gatsbyjs.com/plugins/gatsby-source-instagram/)を見てください。

##プロジェクトフォルダー内容
プロジェクトフォルダーは以下のうようになります。

     - src
        -- components
            --- instagram.js
            --- layout.js
            …
        -- hooks
            --- use-instagram.js
            …
        -- pages
            --- index.js
            --- about.js
            …
    - gatsby-config.js
    - gatsby-node.js
    - package.json
    …

##必要なプラグインと依存をインストール
まず以下のプラグインをインストールしていきます。

プラグインの一覧

1. ```gatsby-source-filesystem```　※ gatsbyにデータをコーピするため
2. ```gatsby-transformer-sharp``` ※ 画像のリサイズ
3. ```gatsby-plugin-sharp``` ※ max-width, max-heightを使えるため
4. ```gatsby-image``` ※ 画像ローディング
5. ```gatsby-source-instagram``` ※ インスタグラム連携

ターミナルでnpmを使ってプラグインを一気にインストールします。

```ruby:terminal
npm install gatsby-source-filesystem gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image gatsby-source-instagram --save
```

##gatsby-config.jsを書く
インストールしたプラグインをgatsby-config.jsで設定します。
gatsby-source-instagramの```username```のところにユーザーIDを入力します。

```ruby:gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: 'images',
      }
    },
    {
      resolve: 'gatsby-source-instagram',
      options: {
        username: '//インスタのユーザーID'
      }
    }
  ],
}
```
ユーザーIDを調べるために、載せたいインスタグラムのプロフィールページで右クリックして、「ページのソースを表示」をクリックします。ソースで「profilePage_」を探して、その右にある番号を`username`に入力します。例えば、[この](https://www.instagram.com/ekekekkekkek/?hl=ja)ページのユーザーIDを探したら、「profilePage_25573873494」が出るので、IDは`25573873494`になります。
##use-instagram.jsを書く
次はインスタグラムのhooks（hooks/use-instagram.js）を作成して、写真をqueryで取得します。
```limit:12```のところに写真の数を設定できます。（上限は最近の12写真まで）
```fluid(maxWidth: 120 maxHeight: 120)```のところに写真のサイズを設定できます。pxになります。

```ruby:use-instagram.js
import { graphql, useStaticQuery } from 'gatsby';

const useInstagram = () => {
    const data = useStaticQuery(graphql`
    query {
        allInstaNode(limit: 12) {
            nodes {
              id
              caption
              username
              localFile {
                childImageSharp {
                  fluid(maxWidth: 120, maxHeight: 120) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
    }
    `)
return data.allInstaNode.nodes.filter(function(node) {
    if (node.localFile === null) {
      return false;
    }
    return true;
}).map(node => ({
    ...node.localFile.childImageSharp,
    id: node.id,
    caption: node.caption,
    username: node.username,
}))
};
export default useInstagram;
```


##インスタグラムコンポーネントを作成する
次はインスタグラムコンポーネントをcomponentsフォルダーの中に作成します。ここは```gatsby-image```が必要になります。
上に書いた　use-instagram.jsも使用しますので、インポートを忘れずに。

```ruby:instagram.js 

import React from 'react';
import Image from 'gatsby-image';
import useInstagram from '../hooks/use-instagram';

const Insta = () => {
    const instaPhotos = useInstagram();
    const { username } = instaPhotos[0];
    return (
        <>
            <h2>Instagram posts from @{username}</h2>
            <div>
                {instaPhotos.map(photo => (
                    <a 
                        key={photo.id}
                        href={`https://instagram.com/p/${photo.id}`}
                    >
                      <Image
                          fluid={photo.fluid}
                          alt={photo.caption}
                      />
                    </a>
                ))}
            </div>
            <a href={`https://instagram.com/${username}`}>See more on Instagram</a>
        </>
    )
}
export default Insta;
```

##お好みのページにインスタのコンポーネントを載せる
最後に写真を表示したいページのファイル（例えば、トップページ）に先書いたインスタグラムコンポーネントをインポートして 適当のところにコンポーネントを入れます。

```ruby:index.js
import React from 'react';
import Insta from '../components/instagram';
export default () => {
    return (
        <>
            <Layout>
                <Insta />
            </Layout>
        </>
    )
}
```

##おわりに
後はcss等を少し工夫したらこのようになりました。
<img width="688" alt="img-screenshot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618120/18264a7e-5056-5d59-02ac-208d60e11627.png">