ブログのヘッダー画像を毎回設定するのも、面倒になってきました。
特に、技術系のブログでは、オリジナルの画像はスクショくらいしか、重要なものはありません。

ただ、ヒーローイメージ的なものがあった方が、見た目に華やかです。

「自動化して楽をしつつ、良い感じの画像を設定したい。」

そんな思いを実現するなら、やはり、web APIを活用するしかないと思いました。

素敵な画像といえば、UNSPLASHが有名ですが、もっと面白味があっても良い・・・

そんな考えから、Giphy APIを利用してみることにしました。

実装してから気付いたのですが、gatsby.jsのオフィシャルにもgiphyプラグインがいくつかラインナップされていました。

GraphQLに取り込んでくれるので、非常に便利です。
というか、こちらに移行しようかな・・・😅

記事のアイキャッチやヒーローイメージとなる画像を、giphyで取得した画像に設定する。
検索キーワードは、タグに設定されたものを利用するか、特定のワードを設定する。

これで、いちいち、自分で画像を探しに行かなくて済みます。

Gatsby-imageを利用できなくなるため、爆速の画像表示ができなくなります。

まずは、APIを使う下準備です。
APIキーの取得のため、Giphyのサイトへアクセスして、developer登録をします。
https://developers.giphy.com/

次に、Axiosをインストールしておきます
yarn add axios

Imgタグのsrcをgiphyの画像URLに設置します。
検索ワードはコンポーネントの呼び出し元が、引数として与えます。

import React, { useState, useEffect } from "react"import axios from "axios"const Giphy = (query="cat") => {
  const [uri, setUri] = useState(0);  const [title, setTitle] = useState(0);  useEffect(() => {
    const fetchData = async () => {
      axios({
        "method":"GET",        "url":"https://giphy.p.rapidapi.com/v1/gifs/search",        "headers":{
          "content-type":"application/octet-stream",          "x-rapidapi-host":"giphy.p.rapidapi.com",          "x-rapidapi-key":"/*rapidapiのAPIキー*/“        },"params":{
          "limit":"1",          "q": query,          "api_key”:”/*giphyのAPIキーです*/”        }
      })
      .then((response)=>{
        console.log(response.data)
        const data = response.data.data        const img = data.map(o => o.images.downsized.url)
        setUri(img)
        const title = data.map(o => o.title)
        setTitle(title)
      })
      .catch((error)=>{
        console.log(error)
      })
    }
    fetchData()
  }, []);  return(
    <img src={uri} alt={title} />  )
}
export default Giphy

APIの実装方法に関しては、このサービスが便利でした。
https://api.rakuten.net/giphy/api/giphy

コードスニペットの横にあるプルダウンから、好みの実装方法を選択することができます。

僕は(node.js)AXIOSを選択してみました。

出力されたスニペットはコピペで利用できちゃいます。

useStateを使った処理については、こちらを参考にしました。
https://qiita.com/ossan-engineer/items/c3853315f59dc20bc9dc

読み進めていただければ分かると思いますが、コードはほぼそのまま使えてしまいます。

Axiosを利用する場合はステートの利用が必須となること。
今回は、imgタグのsrcに画像のURLさえ書いてあればそれで良いのですが、ステートを利用しなければいけない理由があやふやです。

もうちょい、知識のレベルアップを図ります。

このブログに実装してみたのですが、かなりうるさいですね（笑）
ちょっとジャンクな雰囲気も嫌いなじゃないので、しばらくはこんな感じで置いておきたいと思います。