カテゴリー: 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 を使ってみます
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 なので
エラーがないなら結果を表示するようになる