はじめに
お疲れさまです。
おおくまです。
今回は、個人的に私が苦手意識を持っている「API」と「パース」と向き合いました。
Railsでミニアプリを作りながら、理解を深めてみました。
環境
Ruby 3.2.2
Rails 7.0.8
注意点
私はプログラミング学習中で、初学者です。
内容に誤りがある場合があります。
コメント等で教えていただけると幸甚です。
APIとは
「API」とは、「Application Programming Interface」の頭文字です。
インターフェースとは、コンピュータ用語でいうと、「何か」と「何か」をつなぐものという意味を持ちます。
つまりAPIとは、アプリケーション、ソフトウェア、プログラムなどをつなぐものという意味になります。
APIを利用し、そのアプリケーションと連携することで、自分で1からプログラムを組む必要がなくなり、アプリケーション開発の効率化がはかれます。
アプリケーション開発側にとって、開発時間を短縮することができるのは大きなメリットです。
今回はAPIの練習として、簡単なアプリを作りたいと思います。
利用するAPIはDog APIというランダムに犬の画像を返してくれるAPIを使っていきます。
https://dog.ceo/api/breeds/image/randomにリクエストを投げるとレスポンスが返ってくるので、Postmanを使って試してみます。
リクエストを投げてみると、JSON形式で
{
"message": "https://images.dog.ceo/breeds/terrier-border/n02093754_2207.jpg",
"status": "success"
}
このように返ってきました。
この形式のままではRailsでは使いづらいので、形式を変換する必要があります。
ここで出てくるのがパースです。
パースとは
パースとは、データを解析し必要なデータを取り出すことです。
今回のケースでは、JSON形式の文字列を、RubyのHash形式に変換するように実装します。
言葉で聞くと簡単そうですが、なかなかこれがイメージできません。
コードを書いて理解してみます。
実装
まずは、ルーティングを定義します。
resources :dogs, only: %i[index]
次に、コントローラーを書いていきます。
class DogsController < ApplicationController
require "net/http"
end
net/httpライブラリをインクルードします。
これは、HTTPリクエストを送信するためのRubyの標準ライブラリです。
class DogsController < ApplicationController
require "net/http"
def index
uri = URI.parse("https://dog.ceo/api/breeds/image/random")
end
end
URIクラスを使用して、外部APIのエンドポイントを表すURIを作成します。
このURIは、ランダムな犬の画像を提供するAPIに接続します。
class DogsController < ApplicationController
require "net/http"
def index
uri = URI.parse("https://dog.ceo/api/breeds/image/random")
response = Net::HTTP.get_response(uri)
end
end
Net::HTTP.get_responseメソッドを使用して、指定したURIにHTTP GETリクエストを送信し、その応答をresponse変数に代入します。
class DogsController < ApplicationController
require "net/http"
def index
uri = URI.parse("https://dog.ceo/api/breeds/image/random")
response = Net::HTTP.get_response(uri)
json_data = JSON.parse(response.body)
end
end
responseの本文をJSON形式として解析し、json_data変数に代入します。
これにより、APIから取得したデータをRubyのハッシュとして使用することができます。
class DogsController < ApplicationController
require "net/http"
def index
uri = URI.parse("https://dog.ceo/api/breeds/image/random")
response = Net::HTTP.get_response(uri)
json_data = JSON.parse(response.body)
@dog_image_url = json_data["message"]
end
end
JSONから取得したデータの中から、ランダムな犬の画像のURLを抽出し、@dog_image_urlインスタンス変数に代入します。
これにより、ビューで表示する画像のURLを渡すことができます。
<div class="dog_image items-center justify-center text-center">
<div class="font-dog text-accent text-4xl pt-32 pb-16">わんわんルーレット</div>
<div class="mx-auto flex flex-wrap justify-center pb-48">
<div class="card w-96 shadow-xl post_image m-3">
<figure class="p-5"><%= image_tag @dog_image_url%></figure>
</div>
</div>
</div>
ビューはこんな感じにしました。
動作確認
無事に表示されました。
最後に
すごく簡単なアプリでしたが、なんとか実装することができました。
APIやパースについての理解が深まったかは疑問が残りますが。笑
また他のAPIを使って練習していきたいと思います。
最後まで読んでいただきありがとうございました。