はてなブログの記事一覧を取得してHTMLサイトマップを自動作成する方法

WordPressには訪問者向けのサイトマップ(HTMLサイトマップ）をPS Auto Sitemapプラグインなどで自動で作成してくれるプラグインがあるので、簡単にサイトマップが簡単につくれるのですが、はてなブログにはありません。

記事数が少ないうちは手動で作成しても良いかもしれませんが、記事数が100を超えると手動で作るにはちょっと大変です・・・。

ということで「はてなブログ版HTMLサイトマップ作成処理」をつくりました。

はてなブログ版HTMLサイトマップ作成

はてなブログには標準でHTMLサイトマップを作る機能がないので、自分でなんとかします。

処理方針

実はこのスクリプトを作ったきっかけは、原因はわかりませんが、Google先生がsitemap.xmlをきちんと読んでくれないので、サイトの記事一覧作って、そのページをGoogle Search Consoleで読ませれば、全リンクみてくれるかなぁ・・・と。

本来はsitemap.xmlから拾うのが正しいような気もします。
しかしsitemap.xmlには記事タイトルがありません。
そこで、今回はarchive（アーカイブページ）を取得して、そこからURLと記事タイトルを抜き出すことにしました。

処理のおおまかな手順は

1. サイト名/archive?page=nをAjaxで取得
2. 取得したデータからaタグ抜き出して保存
3. 次のarchiveページがあればんを+1して1.に戻る
4. 次のarchiveページがなくなるまで繰り返し

のような感じです。

はてなブログでは「サイト名/archive?page=n」（nはアーカイブページの番号）でサイトのアーカイブページ（記事一覧）が取得できます。

そこからURL名と記事タイトル（aタグ）と記事のカテゴリー名を抜き出します。

各記事には「entry-title」というクラスが設定されているのでそれを探し、同一レベルにある「categories」クラスから該当する記事のカテゴリーを抜き出しました。

次のアーカイブページがあるかどうかは、取得したHTMLソースに「pager-next」というクラスが設定されたspanタグがあるかどうかで判断します。

ソース

実際のソースはJavascriptで以下のようなものにしました。

  <script>
    $(document).ready(function(){
      if( $('#auto-site-map').length == 0 ){
        console.log( "no tag end--->" + $('#auto-site-map').length ) ;
        return ;
      }
      var page = 1 ;
      var myUrl = '自分のはてなブログのURL'
      var  url = "" ;
      var category = "" ;
      var  sitemap = new Array() ;
      while( 1 ){
        var data = getArchive( myUrl + '/archive?page=' + page);
        var html = jQuery(jQuery.parseHTML(data));
        html.find('.archive-entry .entry-title a').each( function( i, val )
        {
          url = $( val ).prop( "outerHTML" ) ;
          var category_names = jQuery(html.find( '.archive-entry' ).eq( i ).find( '.categories' )) ; 
          var   cate_len = category_names.children('a').length ;
          for( var cate_cnt = 0 ; cate_cnt < cate_len ; cate_cnt++ ){
            category = category_names.children('a').eq( cate_cnt ).html() ;
            if( sitemap[ category ] == undefined ){
              sitemap[ category ] = new Object() ;
              sitemap[ category ].url = new Array() ;
            }
            sitemap[ category ].url.push( url ) ;
          }
        });
        if( html.find('.pager-next').length == 0 ){
          break ;
        }
        page++ ;
      }
      var  htmlstr = "" ;
      for( var i in sitemap ){
        htmlstr += "<h2>" + i + "</h2>" ;
        htmlstr += '<ul class="auto-map">' ;
        for( var j = 0 ; j < sitemap[ i ].url.length ; j++ ){
          htmlstr += '<li class="auto-map-url">' + sitemap[ i ].url[ j ] + "</li>" ;
        }
        htmlstr += "</ul>" ;
      }
      $("#auto-site-map").html( htmlstr ) ;
    });
    function getArchive(urlInfo){
      var data= $.ajax({
        type: 'GET',
        url: urlInfo,
        async: false,
        dataType: 'html',
        success: function( data ){
        },
        error:function() {
          //取得失敗時に実行する処理
          console.log("何らかの理由で失敗しました");
        }
      }).responseText;
      return data;
    }
  </script>

このソースをサイトマップを表示したい記事の最初にでも貼り付けて、あとはサイトマップを表示したい箇所に

  <div id="auto-site-map"></div>

とタグを1行入れておきます。（ここに取得した結果を編集後、流し込みます。）

あと、javascriptの

var myUrl = 'https://www.fair-skinned-monster.com'

は自分のサイトのURLに変更してくださいね。
しないとこのサイトのサイトマップができます。
我慢強く待てば、サイトマップが自動で表示されます。
動作にはjQueryが必要です。

まとめ

今後の対応としては、処理速度がなんとか速くならないかというのと、かっこいいCSSですかね。
現在はURLをULタグで囲ってますが、この辺りをかっこよくしてくれるCSS募集中です。
ご自由に改変なり、改造なりして使ってください。
（かっこよくなったら連絡ください。もらいます。）
動作上でなんらかの不具合が出ても責任はとれませんのでご注意を。

「読まれるブログ」は、はてなブログPro

はてなブログは簡単に使えて、面倒な管理の手間なく、記事を書くことに集中できるブログサービスです。はてなブログProは、広告の非表示など、無料プランにはない機能を追加で利用できるようになります。

「読まれるブログ」は、はてなブログPro