読者です 読者をやめる 読者になる 読者になる

おはよう君需要なし

求不得苦な日々

同一カテゴリの記事リストを表示するようプログラミング

はじめに

はてなブログ、普通に書いている分にはマークダウンで書けたり楽しく書けるし画像のアップロードも楽チンなんですけど、 同一カテゴリーの記事を表示してくれなかったり、ちょっとしんどい部分があります。

ないなら作る

ということで、Javascriptでカテゴリのフィードから記事の内容を取ってきて、記事の下にくっつけるスクリプトを書いてみました。

ちゃんと動作していればこんな感じ↓で記事の下に関連記事が挿入されます。

f:id:yoh_mar28:20161206154901p:plain

まぁはてなブログを無料プランで使用していると記事下のAdsenseが勝手にくっついてしまうため終わりと勘違いされてあんまり参照されないかもしれませんが・・・

要素技術

カテゴリーのフィード

はてなブログはカテゴリーごとのフィードを発行しているので今回はこちらを使用します。記事のタイトルとURLがわかれば最悪リンクは貼れるので

http://nodemand.hatenablog.com/feed/category/PORTABOOK

embedなページ

はてなブログの記事は他のページに組み込まれることを想定して「embed用」のURLが存在します。これをiframeで貼り付ければはてなブログ標準のページ組み込みができるわけです。

http://nodemand.hatenablog.com/embed/2016/12/04/140348

jQuery

まぁおなじみのjQueryを使って特定のdivの中に要素を追加したりしてます。

コード

とりあえず自分用に使えればいいか~~~ってノリで作っているので動作しないかもしれません。何かあればコメントいただけると。

ブログのフッターに入れる内容

記事全体が読み込まれた後に実行される必要があるので、フッターに入れておきます。はてなブログへのJavaScriptの組み込み方はいろんな方がやられている内容だと思いますので、そちらを参照していただけると。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    function gen_emb(emb_url, str_title){
        var result = '<p><iframe src="'+emb_url
        +'" title="'+str_title
        +'" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px;  margin: 10px 0px;"></iframe><cite class="hatena-citation"></cite></p>'
        return result;
    }
    function get_category_url(){
        var src_url = $("div.entry-categories a:first-child").attr("href");
        console.log(src_url);
        if(!src_url){
            return null;
        }else{
            return src_url.replace("archive", "feed");
        }
    }
    $(function(){
        var category = get_category_url();
        console.log(category);
        if (category){
        $.ajax({
            url: category,
            type: "GET",
            dataType: "xml",
            timeout: 1000,
            error: function(){
                console.log("failed to fetch category feeds");
            },
            success:function(xml){
                var cnt = 0 ;
                $(xml).find("entry").each(function(){
                    if(cnt < 3){
                    var str_title = $(this).find("title").text();
                    var emb_url = $(this).find("link").attr("href").replace("entry","embed");
                    console.log(str_title);
                    console.log(emb_url);
                    var emb_html = gen_emb(emb_url, str_title);
                    $("div#related-articles").append(emb_html);
                    }
                    cnt+=1;
                });
                if(cnt > 0){
                $("div#related-articles").show();
                }
            }
        });
        }
    })
    </script>

関連記事を挟みたいところに入れる内容

こんな感じです。要はidがrelated-articlesdivがあればそこに突っ込まれます。「関連記事」となっている部分については「同一カテゴリーの記事」などお好みに変えてどうぞ。

        <div id="related-articles" style="display:none;">
            <h1 class="related-title">関連記事</h1>
        </div>

display:noneの部分については、同一カテゴリーの記事がゼロだったり、フィードの取得に失敗してしまったときにタイトルだけ出ているのが気持ち悪いので設定していますが、なくてもOKです。

おわりに

ま、関連記事を表示するようにしたところで、実際に読んでくれる人が参照してくれるかどうかは微妙ですけどねw

JavaScriptの練習をしてみました。