どうも、まさとらん（@0310lan）です！
みなさんは、普段からどのような方法で情報収集をされているでしょうか？
お気に入りのニュースサイトをいくつか訪問してみたり、ニュースフィードを読んでみたり、スマホアプリを利用するなど…、さまざまな方法があるかと思います。でも、もっと効率よく欲しい情報を収集してみたいと思ったことはないでしょうか。
さらに言えば、日本国内だけでなく世界中から情報を好きなように集められたら素敵だと思いませんか？
そこで、今回はあらゆるニュースを収集して好みの情報を横断検索できる便利なAPIを活用し、自分だけの情報収集装置を作ってみましょう！
■どうやってニュース記事を収集するか？
いざ、世界中のニュースを集めようと思っても、主要なニュースサイトを訪問するだけで日が暮れてしまいますよね。
理想としては、以下のようなAPIが提供されていると便利だと思います。
- 世界中のニュースソースを網羅している
- SDKやライブラリなどが提供されている
- 細かい条件設定が可能なもの
- APIの構造がシンプルなもの
- 無料で使えるもの（非商用）
そこで、いつもどおりRakuten RapidAPIを利用して最適なAPIが存在するかどうかを調べていきましょう！
【 Rakuten RapidAPI 】https://api.rakuten.net
検索ボックスに【ニュース】【news】などのキーワードを入力すると、該当するAPIの一覧が表示されます。
その中からいくつか調べていくと、以下のAPIがもっとも条件に近いと思いました。
【 News API 】https://api.rakuten.net/raygorodskij/api/NewsAPI
このAPIは次のような特徴を持っています。
- 世界中のニュースメディア・ブログ記事などを提供
- およそ30,000を超えるリソースから検索可能
- 言語・ソース・期間・キーワードなど多数のオプションあり
- シンプルなREST APIで提供されている
- 無料プランがある
今回のテーマにぴったりのAPIではないでしょうか。
Rakuten RapidAPIの画面から試しにどのような情報が返ってくるか実行してみましょう！
画面下のエンドポイントの項目を【POST getSources】に選択後、画面中央にある【テスト】ボタンをクリックしてみてください。
画面右側の【レスポンスボディ】に、News APIから取得したデータを確認できます。
上記の場合、実行したエンドポイントが【getSources】だったので、News APIで提供されているニュースソースの名称やURLなどの情報が返されているのが分かります。
今回はこのAPIを利用して、自分だけの情報収集装置を作っていくことにしましょう！
■News APIの使い方！
ここからはNews APIをどうやって使えば良いのか、その導入方法について詳しく見ていきましょう。
まず最初にNews APIのトップページにアクセスして、【Get API key】ボタンをクリックすることで自分専用のキーを取得します。
【 News API 】https://newsapi.org
初めてアクセスした場合は、ユーザー登録画面が表示されるので必要事項を入力しておきましょう。
入力内容としては、ユーザー名・メールアドレス・パスワードの基本的な事項のみなので簡単です。
最後の選択肢ですが、個人的に利用するなら【 I am an individual 】を選んでおけば問題ないでしょう。
登録が済んだら、自分のマイページが表示されるので【API Key】の項目に表示されている英数字をコピーしておいてください。
あとは、このAPIを利用して簡単なプログラムを組み立てていくだけです！
今回はNode.js向けに便利なライブラリが提供されているので、次のようにインストールして使ってみましょう。
$ npm install newsapi
他にも、Ruby・Python・C#向けのライブラリが提供されています。（PHP・Javaは近日提供…）
インストールができたら、Node.jsから利用できるようにrequire()を記述しておけば準備完了です！
const NewsAPI = require('newsapi');
このライブラリを使うとNews APIを簡単に扱えるようになるのですが、覚えておくべきメソッドは以下の2種類だけなので簡単です。
- newsapi.v2.topHeadlines()
- newsapi.v2.everything()
【topHeadlines()】は最新のトップニュースだけを素早く取得できます。
【everything()】は過去記事も含めてすべてのニュースソースを検索・取得できます。
例えば、【テクノロジー】に関連した世界中のトップニュースを取得するには次のように記述します。
newsapi.v2.topHeadlines({
category: 'technology',
}).then( news => console.log(news) );
実行すると、以下のような構造を持ったJSONデータを取得できるようになります。
{
status: 'ok',
totalResults: 3381,
articles:
[{
source: 【ソース元情報】,
author: 【著者】
}],
title: 【タイトル】,
description: 【詳細】,
url: 【URL】,
urlToImage: 【イメージ画像URL】,
publishedAt: 【公開日】,
content: 【コンテンツ】
},
{ …… },
{ …… },
{ …… },
・
・
・
さまざまなプロパティを持っていますが、トップニュースの記事タイトルだけを取得するなら【title】プロパティを指定すれば良いですね。
そこで、次のように書き換えてみましょう！
newsapi.v2.topHeadlines({
category: 'technology',
}).then(news => {
news['articles'].forEach(item => console.log(item.title));
})
ニュースの記事タイトルは各ソースの【title】プロパティに格納されているので、forEach()ですべてのソースからタイトルだけを抽出しています。
実行すると世界中のトップニュースがコンソールログに出力されます！
WhatsApp new feature: Get call waiting facility on Android phones - Livemint Hacker Hacks Hacking Platform HackerOne - CISO MAG Indosat Berikan Pendampingan Bagi Peserta IDCamp Berkebutuhan Khusus - Tabloid Pulsa Galaxy S11 could match the Huawei P30 Pro's best feature - Express Google Chrome is getting a new feature that's meant to be shared - Express Snapchat Cameo will let you face-swap with your cat - EsquireMe Apple va îmbunătăți funcțiile de control parental de pe iPhone - Profit.ro Elektroauto: Gratis-Internet in Teslas läuft aus - Golem.de - Golem.de Elektroauto: Gratis-Internet in Teslas läuft aus - Golem.de - Golem.de Google Glass Explorer Edition Is Getting Its Final Software Update - Mashable India ・ ・ ・
ちなみに、日本国内だけのトップニュースにしたければオプションで【country】を日本（jp）に設定しましょう。
newsapi.v2.topHeadlines({
category: 'technology',
country: 'jp' //対象の国名
}).then(news => {
news['articles'].forEach(item => console.log(item.title));
})
たったこれだけで、トップニュースの一覧が国内の情報に変わります！
時価総額が1日1500億円超も急落したUberの「安全性レポート」とは？ - GIGAZINE CHUWI製小型PCがサイバーマンデーセールで17,520円 - PC Watch 中国が香港の運動を阻止するために「グレートキャノン」を起動 - GIGAZINE iOS 13.3、今週中に配信開始？ベトナム通信キャリアの文書が示唆 - Engadget 日本版 アップルのCEOが「表参道」に突如現れたワケ（東洋経済オンライン） - Yahoo!ニュース 全削除予定のYahoo Groupsのデータ保存を試みる活動が妨害を受ける - GIGAZINE Amazonサイバーマンデー情報｜ 最新第7世代iPadを14%OFFで販売中 - Engadget 日本版 護衛艦の設計にAI導入、活動海域の拡大につながるか（ニュースイッチ） - Yahoo!ニュース iPhoneでも使える？ 楽天MNO回線のSIMを、いろいろなスマホに挿してみた - ITmedia 2021年、iPhoneからLightningコネクタが消えて完全ワイヤレスになる？ - ギズモード・ジャパン ・ ・ ・
このようにNews APIを利用すると、さまざまなニュース情報をプログラムから簡単に扱えるようになるわけです。
■News APIのオプションについて！
ここからはNews APIで提供されている機能を詳しく紹介するために、一緒に設定できるオプションについて見ていきましょう。
まず最初に世界のトップニュースを取得できる【topHeadlines()】で設定できるオプションは以下の通りです！
newsapi.v2.topHeadlines({
country: 【国名】,
category: 【カテゴリ】,
sources: 【ソース元】,
q: 【キーワード】,
pageSize: 【出力結果の数】,
page: 【ページ数】
})
注意点として、【sources】と【country, category】は混在させることができません。つまり、「country」「category」のどちらかをオプションとして設定する場合は【sources】オプションは設定できないので覚えておきましょう。
デフォルトでは該当するニュースを20件まで取得できるのですが、この件数を変えられるのが【pageSize】オプションです。さらに【pageSize】を超える件数が該当する場合は【page】オプションでページ数を指定できるようになっています。
また、2019年12月時点で【category】オプションを使って設定できるカテゴリは以下の通りです。
- business
- entertainment
- general
- health
- science
- sports
- technology
上記を踏まえて、例えば国内の「iPhone」に関連するトップニュースを取得したい場合は以下のように記述します。
newsapi.v2.topHeadlines({
country: 'jp',
category: 'technology',
q: 'iphone',
}).then(news => {
news['articles'].forEach(item => console.log(item.title));
})
これを実行すると次のような出力結果が表示されます。
Appleが退職後に新企業を設立して58億円を調達したiPhoneやiPadプロセッサの元開発者を訴える - GIGAZINE ｢深緑のiPhone｣を実現したある日本企業の正体 - 東洋経済オンライン 「iPhone 11」の低価格路線は、アップル神話崩壊の序章か（Forbes JAPAN） - Yahoo!ニュース iOS13.3が公開「AirDrop攻撃」に関する重大な欠陥を修正 - livedoor 知らない相手からの電話をミュート iPhoneの便利技を紹介 - livedoor Apple、iOS13.3をリリース - iPhone Mania iPhoneのワイヤレス充電は有線より時間がかかる 振動で位置ずれも注意 - livedoor ・ ・ ・
次に過去記事も含めてすべてのニュースが取得できる【everything()】で設定できるオプションを見ていきましょう！
newsapi.v2.everything({
sources: 【ソース元】,
domains: 【ドメイン】,
excludeDomains:【除外ドメイン】,
q: 【キーワード】,
qInTitle: 【タイトル内キーワード】,
from: 【期間指定】,
to: 【期間指定】,
language: 【言語】,
sortBy: 【並び替え】,
pageSize: 【出力結果の数】,
page: 【ページ数】
})
【sources】【domains】でニュースソースを指定すればそのソースだけから検索を行います。逆に、【excludeDomains】に設定したソースは検索対象から除外されます。
【q】はキーワード検索に使う文字列を指定し、【qInTitle】は記事タイトルにキーワードが該当するかどうかだけを検索します。
過去記事を検索する場合は【from】から【to】に設定した日付の範囲が適用されます。（無料プランの場合は過去1ヶ月の検索が可能）
また、取得した結果を自動的に並べ替える機能も用意されています。
- relevancy：キーワードがより密接な関係にある順番
- popularity：人気の情報源からの順番
- publishedAt：記事が公開された順番
例えば、2019年11月15日〜12月1日の範囲で「スマホ」というキーワードが密接に関連するニュースの記事タイトルを取得したい場合は次のように記述します。
newsapi.v2.everything({
q: 'スマホ',
from: '2019-11-15',
to: '2019-12-01',
sortBy: 'relevancy',
}).then(news => {
news['articles'].forEach(item => console.log(item.title));
})
実行結果は以下の通りです！
これならスマホの着信を逃さない！Pixelの新機能がすごい 書いたものを撮るだけ。スマホ内に暗記シートの問題集・単語帳が作れて暗記学習がはかどる ギズモード・ジャパン読者がもっとも購入したスマホ関連グッズランキング：2019年10月 1億画素スマホや5Gスマホは日本に来る？ シャオミに日本市場参入の意図を聞く ファーウェイ発表会をまとめ読み。Google搭載スマホ投入、5Gスマホ日本投入へ意欲 スーツケースの荷物固定ベルトに小物入れが合体。スマホや財布をさっと取り出せる 2画面化スマホ「LG G8X ThinQ」は5万円台、スナドラ855搭載で Stadiaコントローラー用のPixelスマホ固定アクセサリ「Claw」近日発売へ ファーウェイCEO「Googlなしでもスマホ世界一になれる」 誰でも料理をおいしそうに撮影できる！ プロ直伝のスマホカメラ撮影術 ・ ・ ・
このように、News APIは細かいオプションを自由に指定することで、自分が欲しい情報だけを素早く取得できるようになるわけです。
News APIのエンドポイントやオプションの詳細については、以下の公式ドキュメントも参考になるので合わせて確認してみてください。
＜参考リンク＞
■ニュースアプリを作ってみよう！
それでは、News APIを利用して世界中のニュース情報を閲覧できる簡単なミニWebアプリを作ってみましょう。
これまで利用してきたNode.jsによるプログラムと、フロントエンド部分を担当するJavaScriptを以下のような構成で組み立てていきます。
そこで、Node.jsのバックエンド部分を簡単に記述できる定番のフレームワークとして【Express】をインストールしておきましょう。
$ npm install express
Node.jsから利用できるようにrequire()を記述しておけば準備完了です。
const express = require("express");
const app = express();
ひとまずHTMLファイルをブラウザから閲覧できるサーバーを次のように構築しておけば良いでしょう。
app.get("/", (req, res) => res.sendFile(__dirname + "/index.html"));
app.listen(3000);
上記の場合だと、ブラウザからアクセスがあれば【index.html】ファイルを閲覧できるようになります。（index.htmlファイルの作成は後述します）
次に、これまで解説してきた内容と同じようにNews APIから情報を取得するための初期設定をしておきます。
const NewsAPI = require('newsapi');
const newsapi = new NewsAPI('***************************');
【NewsAPI()】の引数には自分のマイページから確認できるキーを設定するようにしておきましょう。
最後に、get()メソッドを利用してNews APIから取得したデータをフロントエンドへ送信するようにしておけばバックエンドの処理は完成です！
app.get("/data", (req, res) => {
newsapi.v2.topHeadlines({
country: 'jp',
category: 'technology',
pageSize: 40
}).then(news => res.send(news));
});
冒頭の「get(“/data”, )」を記述することでフロントエンドから「https://*****/data」にアクセスした時の処理を記述できます。その中身は、上記の場合だと国内のテクノロジー関連のニュースを最大40件取得することになります。（オプションは自分の好みで変えてみてください）
そして【res.send()】で取得したニュースデータをフロントエンドに返しているわけです。
次に、フロントエンド部分を構築していきましょう！
まずはindex.htmlファイルを作成していきます。body要素内にニュースを表示する領域を以下のように作成します。
<div id="newsList"></div>
あとはJavaScriptから制御できるようにdiv要素を取得しておけば良いですね。
const newslist = document.getElementById('newsList');
Node.jsで取得したニュースデータをJavaScriptから扱えるようにするため、fetch()を利用してサーバーにアクセスします。
fetch('/data')
.then(data => data.json())
.then(json => {
json['articles'].forEach(item => createContents(item));
});
先ほどNode.js側で「get(“/data”, )」という記述をしましたので、「fetch(‘/data’)」と書いて「https://*****/data」にアクセスできるようにします。
すると、Node.js側で取得したニュースデータを得られるので、1つずつの記事に対してcreateContents()関数を実行していきます。
このcreateContents()はニュースのタイトル・画像・URLを1つにまとめてブラウザの画面に表示する処理を行います。その中身は次のとおりです。
function createContents(item) {
const div = document.createElement('div');
div.innerHTML = `<a href="${item.url}">
<img src="${item.urlToImage}">
<p>${item.title}</p>
</a>`;
newslist.appendChild(div);
}
最初にdivタグを作成して、その中に取得したニュースのタイトル・画像・URLを格納してappendChild()で画面に表示しています。
あとはCSSでレイアウトを整えれば以下のように表示されます！
最新のトップニュースがサムネイル画像付きで一覧表示されているのが分かりますね。
注意点として、それぞれのニュースに必ず画像URLが存在するわけではないので、画像が無い場合を考慮して以下のように用意したサンプル画像に置き換える処理を追記しておいた方がベストでしょう。
const image = item.urlToImage || 'sample.jpg';
このように自分好みのオプションを設定するだけで、自分が欲しい情報を世界中から集めてきてくれる情報収集装置になるわけです。以前の記事でご紹介したようにSlackアプリにすることで、チャット上からニュースを取得できるようにもなるので大変便利でしょう。
また、今回は無料プランを利用しているのでWebアプリとして公開する場合は、画面下などにNews APIの帰属表示をしておくようにしましょう。これらの内容も含めて、今回作成したサンプルデモのソースコードは以下のリンクからすべて閲覧できますので、ぜひ参考にしてみてください！
＜参考リンク＞
■まとめ
今回は、誰でも手軽に世界中のニュースを検索・取得できるAPIを使ったサンプル例をご紹介しました。
News APIは本当にシンプルな構成であるにも関わらず、細かいオプションを追記するだけで自分好みに調整できるのが大きな魅力と言えるでしょう。基本的に海外のニュースに強い印象ですが、国内のニュースソースも豊富に揃っているので必要十分です。
ぜひ、みなさんも自分専用の情報収集ページを作成して、さまざまなニュースを閲覧してみてください！
＜参考リンク＞
・「News API」Rakuten RapidAPIページ
コメントを残す