NewsAPIを使い簡単にニュースサイトを作る

前回の記事で予告したとおり今回はNewsAPIというものを使いニュースを取得して表示までします。

プチ宣伝

誰でも簡単にオリジナルニュースが作れる素人ニュースというものを作りました。今回作るニュース一覧もあります。どんな風に動くか気になる方もみてください。前回の記事で紹介しています。

完成図

APIを取得する

まずNewsAPIのサイトに行って「Get API Key」ボタンを押してください。

初めての方は新規登録画面が表示されるのでちゃちゃっと登録してください。登録が終わったらマイページが表示されるはずです。

API keyのところに書いてあるのがあなたのAPIです。このページは何度でも「Get API Key」ボタンをおせば行けるのでまだコピーする必要はありません。
そしてこれでNewsAPI側の設定は終わりです。あとはrailsです。

rails

コントローラーは普通に作ってください。今回はnews controllerという名前でやります。
モデルは必要ありません。

news_controller.rb

class NewsController < ApplicationController
    def index
    end


    def data
      uri = URI.parse('http://newsapi.org/v2/top-headlines?country=jp&apiKey=さっき取得したAPI')
      json = Net::HTTP.get(uri)
      moments = JSON.parse(json)
      @data = moments['articles'].to_json
    end
end

今回は日本のニュースだけを取得します。本当は経済のニュースだけとか海外の英語のニュースとかも取得できます。URLを変更して色々仕分けるのも面白いと思います。
ここからは表示です。

index.html.erb

<p>ニュース</p>
<hr>
<div id="result">no information...</div>
<script>
var f = function(){
    $.ajax({
        type: 'GET',
        url: '/news/data'
    });
};
f();
</script>

ここでindexページにいったら'/news/data'に飛んで自動的にニュースを表示するようにします。

data.js.erb

var data = <%== @data %>;
var result = '<div class="datas">'
data.forEach(function(e){
    var div = '<div class="data">'
    if (e.urlToImage != null) {
    result += '<img src="' + e.urlToImage +'" class="image_data">';
    }
    result += '<a href="' + e.url +'" class="yahoo_link" target="_blank">' + e.title + '</a><br>';
    result += '<p class="time_data">' + e.publishedAt + '</p><hr class="clear">';
    div += '</div>'
});
result += '</div>'
$('#result').html(result);

dataはdata.html.erbではなくdata.js.erbです。かなり間違えやすいポイントなので注意してください。
簡単に説明すると１行目で@dataをjsで使えるようdataという変数に変えています。
２行目はデザインで３行目で繰り返し処理をしています。railsでいうeachです。
４行目もデザインで５－７行目は画像の処理です。５行目のif文は画像がない場合は画像を表示しないようにしています。６行目で表示してます。
８はタイトル、９行目で作成日時を表示してます。

あとはルーティングだけです！

routes.rb

get "news/data"
get "news/index"

これで完成です。お疲れさまでした！！！

うまく行かなかったときはコメント下さい。
そして途中で言ったとおりNewsAPIはURLを変更して細かくニュースを仕分けることが出来ます。NewsAPIのサイトの上方、Get startedをおせばそのへんの細かいやりかたが書いてあるはずです。
例えばアメリカのニュースは

https://newsapi.org/v2/top-headlines?country=us&apiKey=自分のAPI

このURLをnews controllerのdataアクションのURI.parseのとこにいれればいいわけです。簡単ですね。

まとめ

とにかく一つ言えることは
誰でも簡単にオリジナルニュースが作れる素人ニュースというものを作りました。お願いします。（最後まで宣伝ごめんなさい）