Featured Post ~ 埋もれたオススメ記事

　WordPressのブログで見かける「Featured Post」という文字。ブログのオススメ記事をサイドバーへランダムに表示するPlug-inだそうです。「Featured」とあれば覗いてみたくなるのが人間の心理（たぶん･･･）。埋もれた過去記事にアクセスしてもらうためにも、Bloggerで「（偽）The Featured Post」を考えてみました（サイドバー参照）。

ほしい機能は次のとおり･･･

　1.表示されている記事以外に、埋もれた過去記事からもピックアップできる

　2.駄記事を省いき、オススメ記事のみをピックアップできる

　3.記事の概要も表示してくれる（個人的に結構重要）

　4.更新するたびにランダムに表示する

（実は、似たようなものがHackosphereにすでにありました。でも、過去記事全部のなかからピックアップする感じだし、記事の入れ替わるのが1日1回･･･ｷﾞｬﾌﾝ >_<）


【下ごしらえ】
　まず1.についてですが、BloggerのTemplateタグだけで実現しようとするのは無理（かな）･･･。表示されていない記事をピックアップの対象にできないからです。そこでヒントになったのがクリボウさんの記事。RSSなどで記事を読み込めば、表示されない埋もれた記事も扱うことが可能です。

　では、どのFeedを読み込むかです。Blogger自体、AtomなりRSSなりを吐き出しますが、過去記事全部を読み込んでしまっては2.の駄記事を省く操作が面倒くさそうです。そこで思いついたのが、Tagclickマイブログ検索のRSS（コチラに続いてTagclick様様です^^）。これなら、特定のタグ付けした記事のみを対象にピックアップすることができます（ウチはおススメしたい記事に新たに「featured」というタグをつけました）。

　つづいて、TagclickのFeedをどうやって読み込むかです。ココはBlogspotなんで、RSSやXMLを読み込むCGIを置けません（これを理解するのに苦労しました^^;）。クリボウさんで紹介されているFeed2JSってのもあるのですが、（Feed2JSにたどり着けなかったということもあって･･･^^;）いろいろ探していたらXML2JSONserviceなるおもしろそうなサービスを見つけました^^。通常、外部ドメインのXMLなりRSSはCGIがなければ読み込めない（Javascriptだけでは読み込めない：クロスドメイン制限）そうなんですが、このサービスを使うとXMLをクロスドメイン制限のないJSON（JavaScript Object Notation）ってのに変換し、Javascriptの配列として扱えるようにしてくれます。これを使えば、いろんなFeedを読み込んで面白そうなことができそうです^^。ってことで、使いこなすって意味も含めて今回このサービスを利用させていただきました。

【作り方】
　材料の下ごしらえが整ったところで、3.4.となるようJavascriptで調理します･･･（省略）

【できあがり】

　・Javascript

<h2 class="sidebar-title">Featured Post</h2>
<div id="feature">
    <script type="text/javascript" src="http://app.drk7.jp/xml2json/var=featurepost&url=http://feed.tagclick.net/blog/マイブログ検索で割り当てられた文字列/ピックアップの対象とするタグ名" charset = 'UTF-8'></script>
    <script type="text/javascript"><!--
        var items = featurepost.data['channel']['item'];
        var rnd = Math.floor(Math.random() * items.length);
        var description = items[rnd]["description"];
        description = description.replace("　", "");        //全角スペースを削除する場合
        StrLengthDescript = description.indexOf("\n\n");        //表示する本文の文字数・最初の改行×2までを表示する場合
        /* StrLengthDescript=150;        //表示する本文の文字数・文字数で制限して表示する場合*/
        if(description.length > StrLengthDescript){
            description = description.substr(0,StrLengthDescript)+'<div class="feature-read"><em><a href="' + items[rnd]["link"] + '">read more</a></em></div>'
            };
        var html = '<div class="feature-title"><a href="' + items[rnd]["link"] + '">' + items[rnd]["title"] + '</a></div><div class="feature-description">'+ description + '</div>';
        document.write(html);    //-->
        </script>
</div>

*「マイブログ検索で割り当てられた文字列」は、マイブログ検索のURL：http://search.tagclick.net/~の~にあたる部分の文字列。確認方法は、コチラを参考に。
*コメントしている行は、好みに合わせて変更・追加・削除。
*お好きなところに上のスクリプトを挿入してください。
*貧乏なんで、障害が起きても責任を負えません(>_<)。

　・一応CSSも。お好みに合わせて変更してください。

.sidebar-title {
    font:1.3em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    color:#ccc;
    font-weight:normal;
    letter-spacing:.2em;
    }
#feature {
    margin:0em 0em 4em;
    list-style: none;
    color:#aaa;
    }
.feature-title {
    font-size:1.1em;
    margin:.8em 0em .5em 0em;
    }
.feature-description {
    margin:.5em 0em 0em .5em;
    font-size:.9em;
    }
.feature-read {
    text-align:right;
    }

【あとがき】
Tagclickが検索結果をJSONで配信してくれれば、もっと簡略化できそうです。世知辛いご時世･･･応援の意味も込めて、さらなるサービス充実に期待したいです^^。

と、ここまで書いておいて問題発覚!?
TagclickのRSSは最近15件までの記事しか吐き出さないようです;;。
現在のところ、最近15件より前の記事はFeatureできません;;。

Tag:[blogger]|[customize]|[tool]