Google Feed APIでニュースサイト構築
開発者用サイト
特徴
- Googleが提供しているJavascriptを読み込み、数行のJavascriptを書くだけで、RSSやAtomを検索・表示できる
今回の目的
作業(6時間)
1. ドットインストールにて、概要をつかむ(0.5時間)
2. 開発者用サイトのDeveloper's Guideを見ながら、Feedの検索を実装する(0.5時間)
3. Google Feed APIで特定サイトからフィードが得られるようにする(0.5時間)
4. ニュースサイトまとめから、{ サイト名: サイトurl ] のjsonを得る(1時間)
5. サイトが持っているrssのurlを得て、{ サイト名: サイトのrssのurl ] のjsonを得る (0.5時間)
6. 5で得たjsonを用いて、自分が選択したニュースサイトからフィードが得られるようにする(1時間)
1. Google Feed APIで特定サイトからフィードが得られるようにする
参考url: https://developers.google.com/feed/?hl=ja
・参考urlの中のgoogle.feeds.Feedを用いて、特定サイトからフィードを得られるようにする
2. ニュースサイトまとめから、{ サイト名: サイトurl ] のjsonを得る
・ 適当なまとめサイトから、javascriptを使って、aタグ要素をのhrefとinnerTextを得る
・ google chromeの開発者ツールを用いると楽ちん
var sites = {}
$("ul>li>a").each(function(i, link){sites[link.text()] = link.href})
// sites = { サイト名: サイトurl, .....]
3. { サイト名: サイトのrssのurl ] のjsonを得る
・ 2で得たjsonのurlをgoogle.feeds.lookupFeedのフィルターにかける
rss = {}
sites.each(function(key, value){
google.feeds.lookupFeed(value, function(result){
if (!result.error){
rss[key] = result.url;
}
})
})
// rss = { サイト名: サイトのrssのurl ]
4. 自分が選択したニュースサイトからフィードが得られるようにする
1. rssのサイト名をvalueに設定したチェックボックスを生成する
var $ul = $("
");
var i = 1;
$.each(rss, function(name, url){
var $input = $("").attr({type: "checkbox", name: "rss"+i, id: "rss"+i}).val(name);
$ul.append($input);
i++;
});
注意) 連想配列をeachで回すと、第一引数がkey, 第二引数がvalueになる。
2. ボタンをクリックしたときに、選択されたチェックボックスのvalueをすべて取得して、localStorageに保存する
var selected_items = ;
$("input[type=checkbox]:checked").each(function(i, input){
selected_items.push(input.value);
});
localStorage.setItem("selected", selected)
3. localStorageから読み取った値を「Google Feed APIで特定サイトからフィードが得られるようにする」と同じ要領で表示する
var selected_sites =
if (localStorage["selected"] ){
selected_sites = localStorage["selected"].split(",");
}
$.each(selected_sites, function(i, site){
.........// 「Google Feed APIで特定サイトからフィードが得られるようにする」と同じ要領で。。。
});
注意) localStorageはremoveItemメソッドでしか消えない
localStorage["selected"] = null //=> "null"が保存される
localStorage["selected"] = undefined //=> "undefined"が保存される
localStorage.removeItem("selected") //=> 消える
成果物
News Feed
結果・感想
- feedを文字列で検索することができるようになった
- 文字列検索ができても、適切な文字列が思い浮かばないので、使い道に困る
- 「Techcrunch」とかいれても、ほしい情報にはたどり着けなかった
- 検索が役に立たないということは、ある固定のurlから引っ張った方がよさそう
- 固定のurlをいくつかピックアップする必要がある
- 固定のurlならばNewsがよいかな（既存だけど）
- あと、固有名称（店名や）をいれると検索も面白い。（昔のバイト先を入れたら、ブログ記事とぐるナビページが出てきた。食べログは？。。。）
- また、それを設定、変更できる画面を作成する必要がある
- 選択したNews Feedを表示することができた
- NewsRSSサイトの種類分けをした方がわかりやすい
- もっと種類を増やすと面白い
- 「英語のニュースサイト」「学術論文」「癒し画像」「アダルト関連」「イベント」とかニーズがないだろうか
- 種類を増やしたら、何が人気なのか知りたいからAnalyticsもいれよう
