GiphyAPIを使ってブログ記事のヘッダー画像にする

2020-06-11

(LastUpdated: 2020-06-11)

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

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

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

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

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

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

Gatsbyプラグインもあります

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

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

プラン

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

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

デメリット

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

実装の準備

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

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

giphy コンポーネント

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

axios

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

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

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

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

useState

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

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

分かってないこと

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

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

まとめ：

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