Google Feed APIで使える、特定の語句を含むフィードの検索機能

http://dotinstall.com/lessons/basic_google_feed_api/9105
を参考に、google feed api の実践

今回はフィード検索機能を使う

いままでは、URLを指定していた
でも、これだとURLがわからないと使えない

なので、改良
var query ="ドットインストール";

構文は
google.feeds.findFeeds(
検索キーワード,
コールバック関数
);

今回は
google.feeds.findFeeds(
query,
function(result){}
);
となる

コールバック関数には、結果が result になって
返ってくるので
if でエラーチェックする
if(!result.error){
console.log(result);
}

これで、chrome develoer tools で開くと
コンソールの中でURLの確認ができる

この中の
entries->0->url のところにURLが格納されている
ドットインストールの場合は
http://dotinstall.com/lessons.rss
となっている

取得するフィードの設定

取得するフィードの設定

http://dotinstall.com/lessons/basic_google_feed_api/9104
を参考に実践

フィードの中身を取得できたので、
今度はリンクをつけてみる

なので、
<div id="feed"></div>
から
<ul id="feed"></ul>
というようにリスト要素にする


こうなると div 関連の処理はいらないので
コメントアウト、もしくは削除
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));


代わりに
var link = document.createElement("a"):
で
aタグ作成

さらに、
link.href= entry.link;
とする

また、リンクのところをつくるので
var li = document.createElement("li");
li.appendChild(link);


container.appendChild(li);

ここまで記述すると
リンクできるようになる

次にデフォルトで表示件数が４件なので
これを設定する

var feed = new google.feeds.Feed('http://www.ideaxidea.com/feed');
で
feed と取ってきたあと

fedd.setNumEntries(8);
というようにすると８件ずつになる

また、１０件なのに、もっとたくさん表示したいというときには
feed.includeHistoricalEntries();
とすれば、過去のデータも取ってこれるようになる



~
~

外部フィールドの内容を表示

外部フィールドの内容を表示

http://dotinstall.com/lessons/basic_google_feed_api/9103
を参考に
Google Feed API の実践

https://developers.google.com/feed/v1/devguide?hl=ja#resultJson
で
Google Feed APIで取得されるJSONデータにどのようなものが含まれるか確認できる

まずは、前回作成したものを実行
java script console を使うので
chrome で実行する

実行したときには何も表示されないけど
気にせずに
Ctrl + Shit + i で
java script console を起動して
一番右の
Console タブをひらく

k.(anonymous function).o
と表示されているので

左側の▼をおすといろいろと出てくる

この中の feed->entries
ここに、実際に Feed に対する
タイトル
URLなど、様々な情報が格納されている

このデータを使って
feed のタイトルを表示する

まずは表示領域の設定
var container = docment.getElementById("feed");

これで 要素を取得

また、表示する領域は
HTMLで div で作成する
今回なら
<div id="feed"></feed>
となる

そしてfor で処理
for(va i=0; i<result.feed.entrues.length;i++){
}

こうすれば、中身のぶんだけ繰り返す

あと、内部処理のところで
var entry = result.feed.entries[i];
としているのは
長いから entry という変数に格納している

var div = docment.createElement("div");
これでプログラム側で div タグをつくれる

さらに、div.appendChild(document.createTextNode(entry, title));
今回はテキストを表示するだけなので
entry, title にしている

そして、
container に追加するので
container.appendChild(div);
とする

Google Feed API

Google Feed API

ドットインストールを参考に
Google Feed API を使ってみます
http://dotinstall.com/lessons/basic_google_feed_api/9102
を参考に開始

公式サイトは
https://developers.google.com/feed/?hl=ja

feed API はサイトの更新情報を取得できる
JSON XMLなどで取得できる

サンプルは、公式サイトの
Google Feed API Developer's Guide
https://developers.google.com/feed/v1/devguide?hl=ja
を参照

そしてやることは
１、feed api のためのライブラリ読み込み
２、次に設定
３、ページが読み込まれたときに行う処理を記述

まずはライブラリの読み込み
<script src="https://www.google.com/jsapi"></script>

google.load("feeds", "1");
でロード
1 はバージョンになる

google.setOnLoadCallback()
で読み込まれたら実行する関数を指定

今回は
google.setOnLoadCallback(initialize);

この initialize は

function initialize(){
}
として作成する

この中の処理が実際に行う処理になる

まずは、何のフィールドを読み込むかURLで指定する
var feed = new google.feeds.Feed();
で設定

今回は
http://www.ideaxidea.com/feed
なので

var feed = new google.feeds.Feed('http://www.ideaxidea.com/feed');
となる

読み込みは
feed.load();
でOK

このときに、読み込んだあとに実行することを関数で指定
今回は
feed.load(function(result){
});

となる

この function(result){}
の中でやるのが、まずはエラーチェック
if(!result.error){
console.log(result);
}

これで !result.error なので
エラーがないなら結果を表示するようになる