Blogger:投稿一覧を作成する-10 件ごとにラインを引く

イントロダクション

前回はラベルへリンクを設定して記事一覧を表示しました。

今回は前回のコードを少し修正し、10 件ごとにラインを引いて記事一覧を表示するように修正します。

2014/6/5　追記：

ラベルの URL 生成部にバグがあったため修正しました。

誤：
var labelLink = location.protocol + "//" + location.host + "/" + label;

正：
var labelLink = location.protocol + "//" + location.host + "/search/label/" + encodeURIComponent(label);

今回作成する投稿一覧

10 件ごとにラインを引いて記事一覧を表示するようにします。

コード

以下のコードを記事一覧を表示したい部分に埋め込みます。

一番最後の行の、

<script type="text/javascript" src="http://upa-pc.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=loadtoc&max-results=500&redirect=false"></script>

の src のドメイン部に各自の Blogger のアドレスを入れます。

<script type="text/javascript">
<!--
function loadtoc(data) {

    document.writeln("<ol>");
    for (var i = 0; i < data.feed.entry.length; i++) {
        
        // リンク先の探索
        var href = "javascript:void(0);";
        for (var j = 0; j < data.feed.entry[i].link.length; j++) {
            if (data.feed.entry[i].link[j].title == data.feed.entry[i].title.$t) {
                href = data.feed.entry[i].link[j].href;
            }
        }

        // ラベル一覧作成
        var labels = "";
        if (data.feed.entry[i].category) {
            for (var j = 0; j < data.feed.entry[i].category.length; j++) {
                var label = data.feed.entry[i].category[j].term;
                var labelLink = location.protocol + "//" + location.host + "/search/label/" + encodeURIComponent(label);


                labels += "<span><a href=\"" + labelLink + "\">" + label + "</a><span>";
                if (j < data.feed.entry[i].category.length - 1) {
                    labels += ",";
                }
            }
        }

        document.writeln("<li><a href=\"" + href + "\" title=\"" +
            fixForAttributeTitle(escapeForAttributeText(data.feed.entry[i].summary.$t)) + "\">" +
            escapeHTML(data.feed.entry[i].title.$t) + "</a><br />ラベル：" + labels + "<br /><br /></li>");


        // 記事のまとまりごとにラインを引く
        if ((i % 10) == 9) {
            document.writeln("<hr />");
        }

    }
    document.writeln("</ol>");

    // テキストをエスケープ処理する
    function escapeHTML(html) {

        var div = document.createElement("div");
        if (div.innerText !== void 0) div.innerText = html;          // innerText が定義されていれば innerText へ設定
        else div.textContent = html;                                 // Firefox のように innerText がないブラウザ向け

        return div.innerHTML;
    }

    // 属性用にテキストをエスケープ処理する
    function escapeForAttributeText(html) {

        // " をエスケープ
        html = html.replace(/\&/g, "&amp;");

        html = html.replace(/\</g, "&lt;");
        html = html.replace(/\>/g, "&gt;");
        html = html.replace(/\"/g, "&quot;");
        html = html.replace(/\'/g, "&apos;");
        return html;
    }

    // 属性の title 用にテキストを整理する
    function fixForAttributeTitle(text) {

        text = text.replace(/(\r\n){2,}/g, "$1$1");
        text = text.replace(/(\r){2,}/g, "$1$1");
        text = text.replace(/(\n){2,}/g, "$1$1");

        return text;
    }
}

//-->
</script>
<script type="text/javascript" src="http://upa-pc.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=loadtoc&max-results=500&redirect=false"></script>

10 件ごとにラインを引いているのは上記コードのうち、次の部分です。

        // 記事のまとまりごとにラインを引く

        if ((i % 10) == 9) {

            document.writeln("<hr />");

        }

結果

上記のコードを埋め込み、実行すると次のような結果が得られます。

1. JavaScript:特定の要素を配下の要素も含めて有効・無効(disabled)を制御する
   ラベル：JavaScript
2. Closure Compiler:コンパイルしたらJavaScriptの実行時にエラーが出るようになった。コードの順番を変えたら正常に動作した
   ラベル：Closure Compiler,JavaScript
3. 2台のパソコンを同じ机で使う場合、USB切替機を使うと圧倒的に便利!!
   ラベル：USB切替機,パソコン周辺機器
4. リモートデスクトップのクライアントの画面がマルチディスプレイだと作業が捗る!
   ラベル：マルチディスプレイ,リモートデスクトップ
5. 私の作業環境(2)
   ラベル：作業環境
6. 今までに私が出会ったことのあるスマートフォンの不具合(1)-電話がつながらない
   ラベル：スマートフォン,不具合
7. Blogger:「前の投稿」「次の投稿」に記事のタイトルを付与する! - JavaScript: ブログ アーカイブから取得編（前・次の投稿が月を跨ぐ場合にも対応）-バグフィックス
   ラベル：Blogger,JavaScript
8. JavaScript:URLのハッシュ(#)以降を削除する
   ラベル：JavaScript
9. Blogger:「前の投稿」「次の投稿」に記事のタイトルを付与する! - JavaScript: ブログ アーカイブから取得編（前・次の投稿が月を跨ぐ場合にも対応）
   ラベル：Blogger,JavaScript
10. Blogger:「次の投稿」のURLをJavaScriptで取得する
    ラベル：Blogger,JavaScript

---

11. Blogger:「前の投稿」のURLをJavaScriptで取得する
    ラベル：Blogger,JavaScript

～省略～

まとめ

上記コードにて、10 件ごとにラインを引いた記事一覧を作成できました。