PROGRAMMING

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

今回は以前のGraphqlについてやって内容の続きです。

もし読んでいない方は一度覗いてみてください。

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

今回はGraphqlで取得した値を表示させていきます。

この記事でわかること
・Gatsbyでの画像の操作方法
・画像の表示の仕方
・CSS Grid Layoutについて

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

参考文献

今回もこちらを参考にさせて頂いております。

Gatsbyでの画像の操作

Gatsbyをクエリする

まずGraphqlで取得した値を確認してみます。

query {
    allFile(
      filter: 
      {extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
      edges {
        node {
          base
          childImageSharp {
            fluid(maxHeight: 600, maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

これをGatsbyで操作する場合、このままGatsbyに貼り付ければいいというものではないらしいです。

画像の操作の仕方は下記のページに書いてあります。

Gatsby
 
Working with Images in Gatsby
https://www.gatsbyjs.com/docs/working-with-images/
Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and…

それではGatsbyで画像の値を取得してみましょう。

image.jsファイルにGraphqlのコードを下記のように追加します。

import {graphql, useStaticQuery } from "gatsby"
import React from 'react'
import Img from "gatsby-image" 
import "./image.css"


const Image = () => {
  const data = useStaticQuery(graphql`
  query {
    allFile(
      filter: 
      {extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
      edges {
        node {
          base
          childImageSharp {
            fluid(maxHeight: 600, maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`)
return ()

export default Image

Imageのコンポーネントを定義して、その中にdataという値を定義します。

その中にGraphqlのコードをuseStaticQueryとgraphqlを使って追加していきます。

こうすることでGatsbyで画像のデータを使用することができます。

この状態ではただ値を取得しただけなので、次は表示するようにしましょう。

画像の値を表示させる

mapメソッドを使う

今回も画像を表示させるのにJSXの部分でmapメソッドを使います。

コードは下記のように出力します。

import {graphql, useStaticQuery } from "gatsby"
import React from 'react'
import Img from "gatsby-image" 



const Image = () => {
  const data = useStaticQuery(graphql`
  query {
    allFile(
      filter: 
      {extension: {regex: "/(jpg)|(png)|(jpeg) /"}, name: {nin: ["background", "background2"]}}) {
      edges {
        node {
          base
          childImageSharp {
            fluid(maxHeight: 600, maxWidth: 600) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`)
return (
  <div className="image-container">
    <h1>View our Destination</h1>
    <div className="image-grid">
      {data.allFile.edges.map((image, key) => (
        <Img key={key}
        className="image-item"
        fluid={image.node.childImageSharp.fluid}
        alt={image.node.base.split('.')[0]}
        />
      ))}
    </div>
  </div>
)
}

export default Image

今回も前回と同じないよのmapメソッドですね。

上記のコードがみてわからない方は前回のページを読むといいかもしれません。

Listとkeyについて【React.js】

mapメソッドを使ってallFileの下のedgesまでを第一引数でimageと変換します。第二引数にはkeyをいれます。

今回ここがindexではないのは、画像自体にkeyの値が入っているからですね。

Imgタグの中にkey・className・fluid・altの値をいれていきます。

keyでは画像のkeyの値を{ key }として入れていきます。

fluidでは、

fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}

この値を入れたいので、allFile > edges > node > childImageSharp > fluid　という風に記述します。

allFile > edges = imageとなりますので、{image.node.childImageSharp.fluid}こうすれば呼び出せますね。

alt={image.node.base.split('.')[0]}この部分も同じように呼び出しています。

画像名はbaseで下記のように呼び出せます。

今回も前回と同じないよのmapメソッドですね。

上記のコードがみてわからない方は前回のページを読むといいかもしれません。

Listとkeyについて【React.js】

mapメソッドを使ってallFileの下のedgesまでを第一引数でimageと変換します。第二引数にはkeyをいれます。

今回ここがindexではないのは、画像自体にkeyの値が入っているからですね。

Imgタグの中にkey・className・fluid・altの値をいれていきます。

keyでは画像のkeyの値を{ key }として入れていきます。

fluidでは、

fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}

この値を入れたいので、allFile > edges > node > childImageSharp > fluid　という風に記述します。

allFile > edges = imageとなりますので、{image.node.childImageSharp.fluid}こうすれば呼び出せますね。

alt={image.node.base.split('.')[0]}この部分も同じように呼び出しています。

画像名はbaseで下記のように呼び出せます。

今回も前回と同じないよのmapメソッドですね。

上記のコードがみてわからない方は前回のページを読むといいかもしれません。

Listとkeyについて【React.js】

mapメソッドを使ってallFileの下のedgesまでを第一引数でimageと変換します。第二引数にはkeyをいれます。

今回ここがindexではないのは、画像自体にkeyの値が入っているからですね。

Imgタグの中にkey・className・fluid・altの値をいれていきます。

keyでは画像のkeyの値を{ key }として入れていきます。

fluidでは、

fluid(maxHeight: 600, maxWidth: 600) {
...GatsbyImageSharpFluid
}

この値を入れたいので、allFile > edges > node > childImageSharp > fluid　という風に記述します。

allFile > edges = imageとなりますので、{image.node.childImageSharp.fluid}こうすれば呼び出せますね。

alt={image.node.base.split('.')[0]}この部分も同じように呼び出しています。

画像名はbaseで下記のように呼び出せます。

無事に表示されましたね。

これでは全然カッコよくないので、CSSで変更していきます。

CSS Grid Layout

画像の一覧のときに画像の大きさを変更するにはGrid Layoutを使用します。

詳しくは下記のページに記載してあります。

MDN Web Docs
 
CSS Grid Layout
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

コードは下記のようにします。

.image-container{
  text-align: center;
  margin: 150px 0;
}

.image-container h1 {
  margin-bottom: 64px;
}

.image-grid{
  display: grid;
  grid-gap: 10px;
  /* 収まる限り多くの列で埋める*/
  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%;
}

/* ５番目の要素だけを取り出す */
.image-item:nth-child(5){
  /* 右から２グリッド分広げる　*/
  grid-column-end: span 2;
}

.image-item:nth-child(9){
  /* 上から４つ目のグリッドからスタート */
  grid-row-start: 4;
  /* 下から２グリッド分広げる */
  grid-column-end: span 2;
}

.image-grid img:hover {
  /*  画像の大きさが変化する　*/
  transform: scale(1.1);
  transition: 0.6s all ease !important;
  cursor: pointer;
}

完成図

完成したものがこちらです。

まとめ

今回はGraphqlについてやっていきました。

もうそろそろ本格的にウェブサイトの作成に移っていきたいと思います！

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

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.