概念
gatsbyのブログなどで自分のインスタの写真を表示したくて、Instagram Graph APIはややこしすぎて、結局諦めてしまうことが多いと思います。
この記事でgatsby-source-instagramというプラグインを使って、表示したいプロフィールをユーザーネームで指定して写真を表示する簡単な方法を紹介します。
インスタグラムの写真を導入する段階で立ち上げているgatsby.jsが必要になりますので、それを準備してください。
(EDIT 29.09.2020): 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
…
必要なプラグインと依存をインストール
まず以下のプラグインをインストールしていきます。
プラグインの一覧
-
gatsby-source-filesystem※ gatsbyにデータをコーピするため -
gatsby-transformer-sharp※ 画像のリサイズ -
gatsby-plugin-sharp※ max-width, max-heightを使えるため -
gatsby-image※ 画像ローディング -
gatsby-source-instagram※ インスタグラム連携
ターミナルでnpmを使ってプラグインを一気にインストールします。
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を入力します。
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に入力します。例えば、このページのユーザーIDを探したら、「profilePage_25573873494」が出るので、IDは25573873494になります。
use-instagram.jsを書く
次はインスタグラムのhooks（hooks/use-instagram.js）を作成して、写真をqueryで取得します。
limit:12のところに写真の数を設定できます。（上限は最近の12写真まで）
fluid(maxWidth: 120 maxHeight: 120)のところに写真のサイズを設定できます。pxになります。
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も使用しますので、インポートを忘れずに。
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;
お好みのページにインスタのコンポーネントを載せる
最後に写真を表示したいページのファイル（例えば、トップページ）に先書いたインスタグラムコンポーネントをインポートして 適当のところにコンポーネントを入れます。
import React from 'react';
import Insta from '../components/instagram';
export default () => {
return (
<>
<Layout>
<Insta />
</Layout>
</>
)
}
おわりに
後はcss等を少し工夫したらこのようになりました。
