【はてなブログ】カテゴリー別記事一覧のサイトマップページを作る |【カスタマイズ】

www.it-the-best.com

当処理の改良版を以下の記事で作成しました。

www.it-the-best.com

カテゴリー別の記事一覧ページを固定ページで作りました。

html,css,javascriptそしてphpを利用して表示させています。

※固定ページは、はてなブログPROのみ作成できます。

※訂正：2019/11/01

Ajax通信による記事情報の取得はJavaScriptから上手くできないと思っていましたが、"POST"ではなく"GET"であれば通信することができました。
当記事ではPHP経由で通信を行う処理を記述していますが、その必要はなくJavaScriptから直接記事の情報を取得することが可能です。

カテゴリーを取得 

var category_list = []
var category = $(".hatena-module-category .hatena-module-body>ul>li")
category.each(function (i, e) {
    if (e.style.display != "none") {
        /*カテゴリーの記事数を消す*/
        var c_name = $(e).find(">a").text()
        c_name = c_name.replace(/[\s]/g, "")
        c_name = c_name.replace(/(\(.*\)$)/, "")
        /*カテゴリーの記事数を消す*/
        category_list.push(c_name)
    }
})

※階層カテゴリーの場合は、最上位カテゴリーのみを取得しています

カテゴリー別に記事を取得

for (var i of category_list) {
    var url = phpapi + "https://www.it-the-best.com/archive/category/" + i
    var url = location.origin+"/archive/category/" + i
    $.ajax({
        type: 'POST',
        type: 'GET',
        url: url,
        dataType: "html",
    }).always((data) => {
        var data_element = $($.parseHTML(data));//parse
        var main = data_element.find("#main-inner")

        $("#main-inner")[0].append(main[0])
    });
}

 ajaxを使用して、カテゴリーの記事一覧ページ(/archive/category/...)から記事の一覧を取得します。

※JavaScriptから直接取得しようとするとうまくいかないので、PHP経由で一覧の取得をしています。変数phpapiにはそのphpファイルが置いてあるURLが入ります。

<?php 
    $entry_url = $_GET["entry_url"] ;
    $page = @file_get_contents($entry_url);

    echo ($page);
?>

変数entry_urlは、取得したいカテゴリー別ページのURLが入ります。

取得したページをそのまま表示させて、前述のJavaScriptのajaxで記事を取得しています。

表示

はてなモジュールのカテゴリー一覧からカテゴリーを取得しているため、ページ読み込み後に処理を行っています。

$(function () {
var category_list = []
var category = $(".hatena-module-category .hatena-module-body>ul>li")
category.each(function (i, e) {
    if (e.style.display != "none") {
        /*カテゴリーの記事数を消す*/
        var c_name = $(e).find(">a").text()
        c_name = c_name.replace(/[\s]/g, "")
        c_name = c_name.replace(/(\(.*\)$)/, "")
        /*カテゴリーの記事数を消す*/
        category_list.push(c_name)
    }
})

for (var i of category_list) {
    var url = phpapi + "https://www.it-the-best.com/archive/category/" + i
    var url = location.origin+"/archive/category/" + i
    $.ajax({
        type: 'POST',
        type: 'GET',
        url: url,
        dataType: "html",
    }).always((data) => {
        var data_element = $($.parseHTML(data));//parse
        var main = data_element.find("#main-inner")

        $("#main-inner")[0].append(main[0])
    });
}
})

固定ページにこのようなスクリプトを埋め込んで表示させています。

 //作成したカテゴリー別記事一覧ページ

www.it-the-best.com

記事を取得するためのアクセス(jsのajax通信)は、制約によってはじかれる可能性があるので、今回のはてなブログカスタマイズはすべての環境でできるものではありません。