2014年6月19日木曜日

BloggerでJavascriptを使って、簡単に記事を取得し表示する

2014年6月19日木曜日 , , , , ,

初めに

この記事では拙作のsaskwave.jsを使用しています。
利用する方で、まだsaskwave.jsを組み込んでない方は下記の記事をご覧ください。
テンプレートに組み込み終わったら次の項目をどうぞ。

Javascriptで記事を簡単に取得してみよう

ただ単にフィードから記事を取得するだけなら、Saskwave.FeedEntryCollectionクラスを使うと簡単に取得できます。このクラスは以下のクラスメソッドを持ちます。
Saskwave.FeedEntryCollection クラス
クラスメソッド説明
setNumEntries(num)numに取得したい記事数を1～500の間の数字で指定する。記事が100しかない場合、500を指定しても最大記事数の100記事を返します。デフォルト(省略した場合)は、25です。
setOrderType(str)strに文字列を指定する。記事の並びが日付降順なら'published'を、更新日順なら'updated'を指定します。デフォルト(省略した場合)は'published'です。
collect(callback)callbackに引数を一つ持つコールバック関数を指定する。コールバック関数の引数は記事の配列となります。

下に簡単なサンプルを示します。
日付降順で最新記事を10件取得して、日付とタイトルを書き出すスクリプトです。
必ず一番最後に、collectメソッドを実行して記事を取得するようにします。
var feColl = new Saskwave.FeedEntryCollection();

feColl.setOrderType('published');
feColl.setNumEntries(10);

feColl.collect(function(entries){
  for(var i=0; i<entries.length; i++){
    document.write(entries[i].publishedDate + ' - ' + entries[i].title);
  }
});
実行するとこんな感じになります。 
2014/06/19 13:47:00 - Bloggerにsaskwave.jsを組み込んでみよう
2014/06/16 00:00:00 - Bloggerでアクセスアップするコツ その2 ～記事個別の検索向け説明を書こう
2014/06/15 19:00:00 - Bloggerでアクセスアップするコツ その1 ～ブログを投稿する前にパーマリンクを設定しよう
2014/06/14 15:12:00 - 今日はブルーベリー畑の除草と鳥よけを設置してきました
2014/06/04 21:53:00 - Blogger単独で関連記事を表示する方法 (Related Posts)
2014/06/02 23:00:00 - Blogger単独で関連記事を表示する方法の模索をする (Related Posts)
2014/06/02 09:00:00 - Blogger単独で最近の投稿を表示する方法 (Recent Posts)
2014/06/01 01:43:00 - つくばでもクワガタが出る季節です
2014/05/25 01:05:00 - 田植え終了！
2014/05/22 00:00:00 - お勧めしたいタイヤ、その名もContinental Grand Prix 4000 S(S2)
このように短く簡潔なスクリプトで記事を取得することができます。

ところで気になるのは、collectメソッドに指定するコールバック関数だと思います。
このコールバック関数は一つの引数を持っています。その引数はSaskwave.FeedEntryオブジェクトの配列となっています。そして、一つのSaskwave.FeedEntryオブジェクトには一件分の記事データが格納されています。

Saskwave.FeedEntryクラスについては以下の通りです。 
Saskwave.FeedEntry = function(dateId, publishedDate, updatedDate, title, author, link, thumbnail, contentSnippet, contentHtml, categories){
  // 投稿日から作られたID (ユニークなIDではない)
  this.dateId         = dateId;

  // 投稿日
  this.publishedDate  = publishedDate;

  // 更新日 (投稿日と同じ日付の場合もあります)
  this.updatedDate    = updatedDate;

  // 投稿タイトル
  this.title          = title;

  // 投稿者
  this.author         = author;

  // 記事のURL
  this.link           = link;

  // サムネイル画像のURL (サムネイル画像がなければnullか空文字列になるので、参照する前にhasThumbnailメソッドで判定してください)
  this.thumbnail      = thumbnail; // URL string or null object, or empty string.

  // 投稿内容のスニペット (HTMLタグなどは除去されています)
  this.contentSnippet = contentSnippet;

  // 投稿内容 (HTMLタグなどを含んだ完全な記事内容です)
  this.contentHtml    = contentHtml;

  // ラベルを格納した配列です
  this.categories     = categories.clone(); // Array object.
  
  // サムネイル画像があるかどうか判定する関数です
  this.hasThumbnail = function(){
    return ((this.thumbnail != null) && (this.thumbnail != ""));
  };
};
このクラスのオブジェクトの配列がコールバック関数の引数になっているので、記事の扱いが簡単にできます。

ちなみにですが、saskwave.jsで記事をオブジェクトとして扱う場合、すべてこのクラスのオブジェクトとなっています。

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)