Blogger:JavaScript:新着情報を表示するガジェットを作成(1)-準備編

2015年3月20日金曜日

Blogger:JavaScript:新着情報を表示するガジェットを作成(1)-準備編

イントロダクション

Google のブログサービス「Blogger」にて、標準機能を用いてブログの新着記事の一覧を表示しようとした場合には、「フィード」ガジェットを使用します。

「フィード」ガジェットでは、フィードのURLを登録することで、そのフィードの新着情報をブログ上へ表示できるようになります。

この「フィード」ガジェットは、自分のブログのフィードのURLだけではなく、他者のブログ・Webサイト等のどんなフィードのURLでも登録し、新着情報を表示することができます。

その反面、非常にシンプルな作りとなっており、
・新着情報の最大表示件数は、5 件
・文字情報（記事タイトル、投稿日時）しか表示できない
という仕様になっています。

せっかくならば、サムネイル付きの新着情報の一覧を 10 件くらい表示したいものです。
そこで、そのような機能を持った新着情報ガジェットを自作する道へと進むことにしました。

Blogger にて、JavaScript を使ってサムネイル付き新着情報一覧表示ガジェットを作成するための基礎

基礎技術

Blogger ブログにて、新着情報を取得する手段として、Feed があります。

BloggerのフィードURL(RSS/Atom)についての貴重な情報が書かれているページまとめ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/11/blogger-feed-document-summary.html

そして、Blogger ブログの Feed の場合、JavaScript ですぐにデータを扱うことが出来る、json-in-script によるデータ取得を行うことができます。

Blogger:フィード情報をjson-in-script形式で取得して、JavaScriptでデータ処理する - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-feed-javascript-json-in-script.html

その技術を用いて、以前ブログ内の投稿の一覧を作成する JavaScript コードを作成してみました。

Blogger:JavaScript:大量の投稿があるブログでも、ページ表示時の負荷を抑えて投稿一覧(目次)を作成 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-posts-list-9.html

今回はそのコードを基に、新着情報を表示するガジェットを作成を作成していきます。

その他の選択肢

なお、Blogger ブログへ新着情報を表示するための手段はいろいろとあります。

Blogger:新着情報を表示する選択肢
http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-other-items.html

自身の目的に合った手段を用いてください。