「はてなブログ」で記事下などにランダムに【自力】で人気記事を表示する方法（2016.09.05修正）

「はてなブログ」にはランダムに自分が選んだ記事を記事下などに表示する機能がありません。
（たぶんないと思ってます。）

そこで今回は自力で選んだ記事のリンクをランダムに表示するJavascriptを作成しました。

選んだ記事をランダに表示するJavascript

今回はjQueryを極力使わずにベタなJavascriptで書きました。

この前バージョンはjQueryでゴリゴリと書いていたのですがどうしても「はてなブログ」で動作しなかったので断念しました。

表示リストの作成

まずはランダムに表示したり記事へのリンクリストを作成します。

<script>
//人気記事リスト
var popularList=[
     "<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
    ,"<li><a href='表示したい記事のURL'>表示したい記事のタイトル</a></li>"
];
</script>

こんな感じで設定します。（件数は何件でもかまいませんが、表示したい件数よりは多く設定して下さい。）

これをヘッダーに設定します。

ランダム表示処理

次にランダム表示処理のソースです。

<script>
function makeTextLink( listName, dispCnt )
{
    var str = "" ;
    var lineNo = 0;
    var chk_num = new Array();
    for( var i = 0 ; i < dispCnt ; i++){
        lineNo = Math.floor(Math.random() * listName.length);
        console.log("no=[" + lineNo + "]");
        if( !checkDuplicate(chk_num, lineNo)  ){
            chk_num.push(lineNo);
            str += listName[lineNo];
        }else{
            i-- ;    //数が足りなくなるのでもう一回
        }
    }
    return str ;
}
//同じ記事を選択しないようにするためのチェック処理
function checkDuplicate(array, str){
    for(var i =0; i < array.length; i++){
        if(str == array[i]){
            return true;
        }
    }
    return false;
}
</script>

これを同じくヘッダーにコピーします。

ランダムに人気記事を出力

最後にランダムに人気記事を表示させます。

<script>
$(function()
{
    var str = "" ;
    //表示するのは記事ページだけにする
    if( document.querySelector("html").getAttribute("data-page") == "entry"){
        //人気記事リスト編集
        str += "<h3>攻めは飛車角銀桂守りは金銀三枚の人気記事</h3><ul>" ;
        str += makeTextLink( popularList, 5 ) ;
        str += "</ul>" ;

        $('div.entry-content').append( str );   //記事の最後にくっつける
    }
});
</script>

こんな感じです。
（2016.09.03 20:50に「$('div.entry-content').after( str );」を「$('div.entry-content').append( str );」に変更しました。）

「makeTextLink( popularList, 5 ) ;」の「popularList」は上で設定した「人気記事のリスト名」、「５」は表示する件数です。

「＜ｈ３＞攻めは飛車角銀桂守りは金銀三枚の人気記事＜ｈ３＞」などはご自由に設定して下さい。
なくてもいいし、もっとカッコよくして下さい。

これをヘッダーに貼りつけると記事の最後に「人気記事」のリストが表示されます。

CSSなどを上手く設定すれば画像や広告バナーでも使えると思います。

サンプル表示はこの記事の最後にも出てるはずです。たぶん。

出ない？そんな人におすすめ。