(株)アイジュピタ情報ライブラリ

Bloggerトップページを新着記事リストにする(4):javascriptのコード解説

前項で紹介したjavascriptのコードを、順を追って解説します。

記事の雛形をコピーする



まず、記事を挿入する親要素(newest-div-books)と、前項で定義した記事の雛形要素(newest-post-books)をドキュメントから取得します。

その後、表示する新着記事件数だけループで記事整形処理を行うのですが、



まず、記事ひとつ分のデータを取得しましょう。

objはJSONオブジェクトですので、新着記事を取得する場合はオブジェクト内のfeed.entry項目を参照します。
(JSON内の構造がよく分からない場合は、本項(1)でご紹介した方法で取得対象のJSONデータを表示してみることをおすすめします。)



まず、各記事の情報を作成するために必要なポストIDを取得します。ただしこのままですと

tag:blogger.com,1999:blog-3445968678302165518.post-5676097209704931009

と、長い長いIDになってしまいますので、"-"で区切った一番最後の文字列のみを使用します。(これより左はブログIDだったりするので必要ありません)



自作メソッドであるMakeCloneNodeメソッドを用いて、雛形ノードのクローンを生成します。

生成したクローンノードは、ユニーク性を保持するため、それぞれidの末尾にポストIDを付記します。
また、オリジナルのノードが子ノードを持っている場合は、再帰処理で子ノード、孫ノード…と階層を潜り、それらに対してもクローン処理を行います。



クローンしたpost要素を、雛形の前に配置します。htmlの形で表現すると、最終的には以下のような形になります。



記事の入れ物はこれでできましたので、あとはここに表示内容を埋め込んでゆきます。

表示する記事の生成



まず、タイトル表示部分です。
「post-link-****」と名前のついた要素のテキストとして、記事のタイトルを設定します。

また、この要素はaタグであるため、href属性で記事のアドレスを設定します。
(JSONの各エントリにはそれに紐付く様々なリンクの要素が定義されています。上記のループはそのリンク集から記事本文のページアドレス(rel要素が'alternative'になっているもの)を取得しています)
これにより、新着記事のページから記事本文ページへの誘導が可能になります。



タイトルの直下には、記事の情報としてラベルの一覧と投稿日を表示します。



本文については、「記事の一覧表示時にサムネイルと概要を表示する」の記事で使用した整形メソッドを使用します。



記事整形のループが完了したあとは、必ず雛形となった要素の表示を隠します。
これを実装しないと、内容のない要素がぽっかりとできてしまいますので、注意しましょう。

最後に

以上、4回にわたって当ブログのトップページの実装方法をご紹介しました。

JSON-in-scriptは簡単に実装できますので、テンプレートの表現の幅を広げるため、ぜひご活用ください。

参考サイト

Using JSON in the Google Data Protocol | Google Developers

Blogger beta が JSON に対応 | クリボウのBlogger Tips

018.Bloggerのブログ情報(feed)をJSONPで取得する | West in the Far East

0 コメント: