Giphy APIを使ってみる

Twitterでもお馴染みの色々なgif画像が検索できる[Giphy](https://giphy.com/)。
そのAPIを使ってみた話です。コードは[ここ](https://github.com/onetk/Giphy-searchAPI)。

RubyとSinatraを使って以下のような簡単な検索画面を作りました。楽しい。


<div align="center">
<img src="https://media.giphy.com/media/fURhoJ4i6n9o8oGhSo/giphy.gif" width="500">
</div>

## 試し方
ここからは大まかな流れを書きます。見た目とか詳細気になる！な方は[こちら](https://github.com/onetk/Giphy-searchAPI)へ

#### フォームの準備
とりあえず下地として検索フォームと受け皿を作ります。

```html:index.erb
  <form action="/search" method="POST">
    <input type="text" name="keyword" placeholder="Search">
  </form>
```

```ruby:app.rb
post '/search' do
  puts "Search keyword >> #{params[:keyword]}"
  erb :index
end
```

これで検索する文字列がコントローラー内に渡されたので、apiをたたく準備をしましょう。

#### Giphy アカウント

[Giphy Developers](https://developers.giphy.com/)へ行きます。
初めての場合はアカウント作成を、そうでない場合はログインしてください。


<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232173/ff97442c-e819-944c-1bf6-811b60a94abd.png" width="500">
</div>

#### アプリ作成

「Create an App」を押してこの画面に来てください。

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232173/c74905b5-98dd-c724-1fdf-214253c64162.png" width="500">
</div>

アプリ名、何をするかについては各自しっかり書いて「Create New App」をしてください。

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232173/1798cb48-800e-e146-c0fc-cdb4fdf403a7.png" width="500">
</div>

#### APIキー取得

ここまで来たら、先ほどの画面にアプリが登録されてAPIキーが赤字で表示されています。控えておきましょう。

<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232173/3a6d5193-ab6e-e77d-546b-b63022799a6c.png" width="500">
</div>

#### APIをたたく

今回は検証のために、DBに保存して取り出すということをしていないので注意です。また、[公式のドキュメント](https://developers.giphy.com/docs/)が物凄く優しいので読みましょう。

以下のコントローラーではビューからキーワードを受け取った後に
- そのキーワードでGiphyの検索APIを叩く
- 返り値の各画像に割り当てられているURLを取り出す
- 配列としてビュー部分に返す
という動作をしています。

```ruby:app.rb
require 'net/http'
require 'json'

post '/search' do
  puts "Search keyword >> #{params[:keyword]}"
  @keyword = params[:keyword]

  # テキスト情報をGiphyAPI検索 (上限20個の指定) >> https://developers.giphy.com/docs/
  def Giphy(text,limit=20)
    option = 'api_key='+ENV['GIPHY_API']+'&q='+URI.encode(text)+'&limit='+limit.to_s
    url = 'http://api.giphy.com/v1/gifs/search?'+option

    # 以下は公式のdocument通り
    resp = Net::HTTP.get_response(URI.parse(url))
    buffer = resp.body
    return JSON.parse(buffer)
  end
  
  # 以下でAPIをたたく関数を呼び出して返り値のURL部位のみ取り出している
  @gif_urls = []
  Giphy(params[:keyword])["data"].each do |item|
  @gif_urls.concat([item["images"]["fixed_height"]["url"]])
  end

  erb :index
end
```

かなり強引ですが、現在のパスが/searchの時＝コントローラーから値が来た時に共有されているURLの配列を参考に画像を読み込む動作をしています。

```html:index.erb
  <form action="/search" method="POST">
    <input type="text" name="keyword" placeholder="Search">
  </form>

  <% if request.path_info == '/search' %>
    <h2><%= @keyword %></h2>
    <div>
      <% @gif_urls.each do |url| %>
        <img src="<%= url %>">
      <% end %>
    </div>
  <%end%>
```

以上が実装部分です。あとはcssに少し手を加えれば完了です。

## 最後に
試しにsearchAPIを使いましたが、他にもGiphyにはいくつかのAPIが整備されているので、気になれば[公式ドキュメント](https://developers.giphy.com/docs/)から覗いてみましょう。
また、今回は複数キーワード処理をしていなかったり、APIの詳しいパラメータについて言及していないので、もっと知りたい場合は[☦️公式ドキュメント☦️](https://developers.giphy.com/docs/)を見てください。全てがそこにあります。


至らぬ点が随所にある今回の記事でしたが、温かい目で見守っていただければ幸いです。