攻めは飛車角銀桂守りは金銀三枚

人生、なすがママ、きゅうりがパパ

はてなブログでHTMLサイトマップを自動作成する方法

WordPressにはユーザー向けのサイトマップ(サイトの記事一覧)を自動で作成してくれるプラグインがあるので、簡単にサイトマップが簡単につくれるのですが、はてなブログにはありません。

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

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

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

作成したHTMLサイトマップページはこちらです。
攻めは飛車角銀桂守りは金銀三枚のサイトマップ
(記事数だけは多いので、むっちゃ遅いです。)

処理方針

実はこのスクリプトを作ったきっかけは
www.fair-skinned-monster.com
で、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 = 'https://www.fair-skinned-monster.com'
      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募集中です。
ご自由に改変なり、改造なりして使ってください。
(かっこよくなったら連絡ください。もらいます。)
動作上でなんらかの不具合が出ても責任はとれませんのでご注意を。
はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

以上、「はてなブログでHTMLサイトマップを自動作成する方法」でした。