はじめに
Newsアプリを作成したいと思っていたところ、たまたまNewsAPIという面白いAPIを見つけたので少し遊んでみました。
-環境
・docker-compose
・Ruby 2.6.5
・Rails 6.0.3.4
目次
NewsAPIとは
世界中のニュースが収集できるAPIです。
世界中のニュースをキーワードや国名で絞り込んだりできる面白いAPIです。
こちらNewsAPIリンクになります
導入方法
導入方法は２種類あるようです。
１、JSONでデータを受け取ってパースして使用する
２、ライブラリを取り込んで使用する（未対応の言語あり）
対応しているライブラリは以下になります
現状はPHPやJAVAのライブラリは用意されていないようです。
詳しくはこちらをどうぞ
今回は、１、JSONでデータを受け取ってパースして使用する を採用しました。
理由としては公式ドキュメントに載っているRailsのGemが非公式だからです。
（公式に載せてるのに非公式？汗）
作成は以下の流れで行いました。
①APIキーの取得
②リクエストパラメーターの取得
③HTMLに出力
導入作業
①APIキーの取得
Get API Keyのボタンを押すと登録画面に移ります
名前やメールアドレス、パスワードを聞かれます。個人利用の場合はI am an individualで問題ないです。
登録を済ませてたらAPIキーを取得します。何度でも確認できるので、メモしなくても問題ないと思います。
② リクエストパラメーターの取得
class StaticPeagesController < ApplicationController
require "open-uri"
def home
api = Rails.application.credentials.news_api[:api_key] #APIキーをcredentialsから取り出し
url = "https://newsapi.org/v2/top-headlines?country=jp&apiKey=#{api}" #ニュースAPIのURLを作成
article_serialized = open(url).read #openでURLを開き、readで読み込み。readは文字列を返す
@articles = JSON.parse(article_serialized) #読み込んだJSONデータをパースしてハッシュに変換
end
RailsでControllerを作成したあと、URLを取得します。
リクエストは自分の取得したい記事によって変更する必要があります。
私の場合は日本の人気の記事上から20記事取得しています。
詳しくはこちらをどうぞ
credentials.news_api[:api_key]の箇所は自分で取得したAPIキーを記入します。
今回はcredentials.ymlにAPIキーを保存しましたので変数展開をしています。
③HTMLに出力
ここまで来たら自分の好きな情報を取り出してHTMLに出力するだけになります。
<div class="articles">
<% @articles["articles"].each do |article| %>
<div class="article">
<div class="title">
<%= link_to article["title"], article["url"] %>
</div>
<div class="wrapper">
<div class="date">
<%= article["publishedAt"] %>
</div>
<div class="source">
<%= article["source"]["name"]%>
</div>
<div class="image">
<%if article["urlToImage"].nil?%>
<%=image_tag 'no_image.png'%>
<% else %>
<%= image_tag article["urlToImage"] %>
<% end %>
</div>
<div class="content">
<%= article["description"] %>
</div >
</div>
</div>
<% end %>
</div>
eachで取り出し自分の好きなトピックスを取得して表示しています。
ここに好みのCSSを組み合わせるだけでニュースサイトが出来上がります。
取得したいニュースのトピックスなどをわかりやすくまとめてくれてるサイトがありました。
ニュースの配列の詳しい情報はこちらからどうぞ
#まとめ
NewsAPIは画像なしの記事もあるので、エラーが発生してしまうことがありました。
if文を使用して、自分で画像を用意して対処しました。
今回、苦労した点としてcredentials.yml.encファイルにAPIキーを保存するところでした。
コンテナ内にvimをインストールしてなんとか解決することができました。