Blogger:投稿一覧を作成する-最もシンプル

イントロダクション

Blogger で記事一覧を表示するには、ブログアーカイブを使うくらいしか方法が無いのですが、一覧を見やすいように表示するには少し力不足なところがあります。

そこで、投稿記事一覧を作る方法について検討してみました。


投稿記事一覧を作る方法については、先駆者の方々がいろいろなコードを作成されているので、それを一部（feed取得部）参考にさせていただきました。

先駆者の方々

galife: Blogger 記事 を 一覧 表示 する ページ の 作成方法
http://garafu.blogspot.jp/2013/07/blogger.html

Blogger ブログにサイトマップ - ラベル分類された投稿一覧を「ページ」に表示する方法 | クリボウの Blogger Tips
http://www.kuribo.info/2012/04/blogger.html

Blogger でサイトマップを表示するツールを、投稿が 500 件以上あるブログにも対応させてみた | クリボウのプログラミングひとりごと
http://programming.kuribo.info/2012/04/blogger-500.html

xawa雑記帳: [Blogger] カテゴリ別記事一覧をつけてみた
http://xawa99.blogspot.jp/2012/08/blogger.html

今回作成する投稿一覧

今回作成する投稿一覧は最もシンプルなものを作成します。
投稿のタイトルへ、その投稿へのリンクを設定したものを列挙します。

コード

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

一番最後の行の、

<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) {

    for (i = 0; i < data.feed.entry.length; i++) {
        
        // リンク先の探索
        var href = "javascript:void(0);";
        for (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;
            }
        }

        document.writeln("<a href=\"" + href + "\">" + 
            escapeHTML(data.feed.entry[i].title.$t) + "</a><br />");

    }

    // テキストをエスケープ処理する
    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;
    }
}
//-->
</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>

このコードの肝の部分は、

<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>

の部分です。
この部分で、各自の Blogger の Feed のサマリーを取得しています。

Feed のサマリーには、投稿一覧（記事タイトル、URLなど）が含まれます。

そのデータは callback として指定した loadtoc メソッドに渡されるので、loadtoc メソッド内で記事の一覧表示をする処理を書いてあげれば、記事一覧を作成できます。


投稿タイトルを escapeHTML でエスケープ処理しているのは、投稿タイトルに <> が含まれた場合に、HTML タグとして処理させないためです。


なお、Feed のデータの解析部は実際のデータ構造を参考に解析して作成したので、もっと簡潔な書き方があるのかもしれません。

結果

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

JavaScript:特定の要素を配下の要素も含めて有効・無効(disabled)を制御する
Closure Compiler:コンパイルしたらJavaScriptの実行時にエラーが出るようになった。コードの順番を変えたら正常に動作した
2台のパソコンを同じ机で使う場合、USB切替機を使うと圧倒的に便利!!

～省略～

Windows 8発売！早速ダウンロード購入(1)
Dr.ウーパのコンピュータ備忘録開始！


途中は省略していますが、投稿記事一覧を作成することが出来ました。

まとめ

上記コードにて、Blogger に投稿した記事一覧を作成できました。

次回は上記コードに少し手を加えて、リンクの上にマウスを乗せた時に投稿のサマリーが表示されるようにしてみます。