PROGRAMMING

Instagramの投稿を埋め込む方法【Gastby.js】

ウェブサイトの作成の段階でインスタの投稿を埋め込みをしたいなっと思ったので、やってみました。

今回やるのはGatsbyのプラグインを使ってインスタの画像を一覧する方法です。

インスタのAPIを使わずにやります。

埋め込みの方法はネットに多くありますが、ユーザーの投稿を表示する方法はなかなかなかったので、また海外のブログとgatsbyの公式サイトを参考にしました。

この記事でわかること
・GatsbyでInstagramの投稿内容を埋め込む方法
・Graphqlの使い方

今回もこんな感じでやっていきたいと思います。

参考文献

公式のドキュメントを参考にさせて頂きました。

gatsby-source-instagram

Source plugin for sourcing data from Instagram. There are four ways to get information from instagram: scraping the posts of an Instagram account. It can only get last 50 photos. scraping a hashtag page. scraping a user profile's informations.

インストールしておくプラグイン

下記のプラグインを入れておきます。

プラグインの一覧

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

プラグインのインストール

gatsby-source-instagram

インスタグラムの投稿を表示するのに、まずはプラグインをインストールします。

yarn add gatsby-source-instagram

無事にインストールできたら、gatsby-config.jsを変更していきます。

これ以外にあらかじめインストールしておくべきプラグインがありますので、そちらもインストールしておきます。

gatsby-config.js

全てプラグインがインストールできたら、下記のようにgatsby-config.jsを上書きします。

    {
      resolve: 'gatsby-source-instagram',
      options: {
        username: 'インスタのユーザーIDを記入'
      }
   }

usernameの部分にはインスタのユーザーIDを入力します。

記入してある場所はプロフィールのprofilePage_********の部分に記述してあります。

ユーザーIDを調べるために、載せたいインスタグラムのプロフィールページで右クリックして、「ページのソースを表示」をクリックします。

僕の場合は、profilePage_43515786127になります。

Grapgqlを使う

Graphqlを使って表示する画像を12個に限定し、投稿を最新順に表示できるようにします。

Graphqlの使い方は下記のページに記述してありますので、参考にしてみてください。

Graphqlを使って画像を表示する！【Gatsby.js】

取得するデータはidとcaption、imageです。

Graphqlでは下記のようにします。

query {
        allInstaNode(limit: 12, sort: {order: DESC, fields: timestamp}) {
        nodes {　
          id
          caption
          localFile {
            childImageSharp {
              fluid(maxWidth: 100, maxHeight: 100, sizes: "100") {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }

allInstaNode(limit: 12, sort: {order: DESC, fields: timestamp}では、画像を１２枚までに限定します。

さらにsort: {order: DESC, fields: timestamp}では投稿を新しい順に並べ替えることができます。

fluidで画像のサイズと画像の画質を調整することができます。

このsize: を指定しないと画質がめちゃくちゃ悪くなるので、画質を指定しておきます。

これで必要な画像に関するデータが取得することができました。

それでは、Gatsbyの方でデータを使用していきます。

Gatsbyでデータを取得する

まずはデータを取得するファイルを作ります。

src/data/useInsta.jsというファイルを作ります。

ここでGraphqlのデータ使って取得して、使用していきます。

下記のようにしていきます。

import { graphql, useStaticQuery } from 'gatsby';

const useInsta = () => {
  const data = useStaticQuery(graphql`
    query {
        allInstaNode(limit: 12, sort: {order: DESC, fields: timestamp}) {
        nodes {
          id
          caption
          localFile {
            childImageSharp {
              fluid(maxWidth: 100, maxHeight: 100,sizes: "100") {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);
  return data.allInstaNode.nodes
    .map((item) => ({
      ...item.localFile.childImageSharp,
      id: item.id,
      caption: item.caption,
    }));
};
export default useInsta;

Graphqlのデータを取得して、mapを使ってデータを加工していきます。

下記の部分では、わかりやすくするためにidとcaptionのデータを代入しておきます。

...item.localFile.childImageSharpではuseInsta.fluidですぐにデータを取得できるようにしてあります。

  return data.allInstaNode.nodes
    .map((item) => ({
      ...item.localFile.childImageSharp,
      id: item.id,
      caption: item.caption,
    }));

Gatsbyで画像を表示する

次に画像を表示するファイルを作成します。

src/components/Instagram.jsというファイルを作って、useInstaのコンポーネントを使います。

下記のようにファイルに書きます。

import React from 'react';
import Image from 'gatsby-image';
import useInsta from '../data/useInsta';
import styled from 'styled-components';

const Insta = () => {
  const instaPhotos = useInsta();
  return (
    <>
      <InstaContainer>
        <InstaHeading>Instagram posts from 麺屋五十六</InstaHeading>
        <InstaWrapper>
          {instaPhotos.map((photo) => (
            <InstaImageKey key={photo.id} href={`https://instagram.com/`}>
              <InstaImage fluid={photo.fluid} alt={photo.caption} />
            </InstaImageKey>
          ))}
        </InstaWrapper>
        <InstaFooter href={`https://instagram.com/`}>
          See more on Instagram
        </InstaFooter>
      </InstaContainer>
    </>
  );
};
export default Insta;

const InstaContainer = styled.div`
  text-align: center;
  width: 100%;
  background-color: #fcfcfc;
  color: '000';
  padding: 1rem 0.5rem;
  height: 100%;
`;

const InstaHeading = styled.h2`
  color: #077bf1;
  font-size: 1.5rem;
  padding-left: 2rem;
  margin-bottom: 2rem;

    &:hover{
    color: #eb3434;
  }
`;

const InstaWrapper = styled.div`
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: minmax(50px, auto);
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 32px;
  width: 100%;

  @media screen and (max-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  @media screen and (max-width: 414px) {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  }
`;

const InstaImage = styled(Image)`
  &:hover {
    filter: brightness(80%);
    cursor: pointer;
  }
`;

const InstaImageKey = styled.a``;

const InstaFooter = styled.a`
  color: #077bf1;
  font-size: 1.5rem;
  margin: 5rem;

  &:hover{
    color: #eb3434;
  }
`

styled-componentsを使って、デザインもしました。

このページをInstaコンポーネントを載せます。

import React from 'react';
import Insta from '../components/Instagram';

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <Insta />
  </Layout>
);

export default IndexPage;

これでトップページに表示されているはずです。

みてみましょう。

これできれいに投稿の内容が追加されました。

まとめ

今回はインスタグラム の追加についてやっていきました。

Gatsbyに関しては日本でのサイトが本当に少ないので、早く日本でも使われるようになって欲しいです

最後まで読んでいただきありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.