先日、はてなブログのHTMLサイトマップ(はてなブログ記事一覧)を生成するスクリプト(JScript)を作成した。
これは、Googleクローラーに読み込んでもらうのが目的だったが、今回は人間が利用するための「はてなブログ記事一覧」HTMLの生成スクリプト(JScript)を作成した。
一覧に、記事のカテゴリを追加し、記事の検索機能を付けた。
はてなブログ自体に検索機能はあるが、本文内のリンクテキスト等も検索対象になってしまうため、余分な記事もたくさん抽出されてしまう。このスクリプトでは、シンプルに、記事タイトルと記事カテゴリのみを検索対象として検索する。
検索機能実現のため、以下の記事でも利用しているjQueryプラグイン「DataTables」を使用した。「DataTables」については、以下の記事を参照。
サイトマップ作成の元データは、はてなブログのエクスポートデータ「xxxxx.hatenablog.com.export.txt」を使う。その件については、以下の記事を参照。
上記記事との相違点は、必要なHTMLファイルと、スクリプト(JScript)の違いだけ。
必要なHTMLは、「i-header-table.html」と「i-footer-table.html」。スクリプトは「htmlmap-table.jse」。生成される「はてなブログ記事一覧」のファイル名は「hatena-sitemap-table.html」。
1.HTMLヘッダーファイル
【i-header-table.html】
<html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <title>はてなブログ ××××× 記事一覧</title> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <style> body { margin: 10px; } h1 { font-size: 20px; } table { font-size: 12px; } .category { width: 100px; } /* 検索文字列ハイライト(mark.js)用*/ mark { background: gold; color: black; } </style> </head> <body> <h1>はてなブログ「×××××」記事一覧</h1> <div id="box" style="max-width:800px;"> <table id="dataTable" style="width:100%;"> <thead> <tr> <td class="category">カテゴリー</td> <td>記事</td> </tr> </thead>
2.HTMLフッターファイル
【i-footer-table.html】
</div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js),datatables.mark.js"></script> <script type="text/javascript"> $(function() { var table = $('#dataTable').DataTable({ language: { // 日本語化 url: "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" }, paging: false, // ページングしない。 ordering: false, // ソートしない。 mark: true // 検索文字列ハイライト (by mark.js) }); }); </script> </body> </html>
3.スクリプト(JScript)
【htmlmap-table.jse】
var adTypeText = 2; var adSaveCreateOverWrite = 2; // 上書き var adReadAll = -1; // 全行 var sr1 = new ActiveXObject("ADODB.Stream"); sr1.Type = adTypeText; sr1.charset = "utf-8"; sr1.Open(); sr1.LoadFromFile("i-header-table.html"); var html = sr1.ReadText(adReadAll); sr1.Close(); var sr2 = new ActiveXObject("ADODB.Stream"); sr2.Type = adTypeText; sr2.charset = "utf-8"; sr2.Open(); sr2.LoadFromFile("2ndart.hatenablog.com.export.txt"); // はてなブログ エクスポート・ファイル // ↑↑↑ 名前を変えて使う。 var str = sr2.ReadText( adReadAll ); sr2.Close(); var stw = new ActiveXObject("ADODB.Stream"); stw.type = adTypeText; stw.charset = "utf-8"; stw.Open(); stw.WriteText(html); // i-header-table.html → hatena-sitemap-table.html stw.WriteText('<tbody>'); str = str.replace(/\r/g, ''); var line_ary = str.split(/\n/); var sw_category = false; var sw_publish = false; var title; var url; var category = ''; var ymd; for (var i=0; i<line_ary.length; i++) { if (line_ary[i].substring(0,6) == 'TITLE:') { if (sw_category && sw_publish) { html_write(category, title, url, ymd); } sw_category = false; sw_publish = false; category = ''; // 「STATUS: Draft」もクリア title = line_ary[i].slice(7).replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); } if (line_ary[i].substring(0,9) == 'BASENAME:') { url = line_ary[i].slice(10); ymd = url.substring(0,10); } if (line_ary[i].substring(0,9) == 'CATEGORY:') { sw_category = true; if (category != '') { category += ' '; } category += line_ary[i].slice(10); } if (line_ary[i].substring(0,15) == 'STATUS: Publish') { sw_publish = true; } } html_write(category, title, url, ymd); // 最後の1件 stw.WriteText('\n</tbody>\n</table>\n'); var sr3 = new ActiveXObject("ADODB.Stream"); sr3.Type = adTypeText; sr3.charset = "utf-8"; sr3.Open(); sr3.LoadFromFile("i-footer-table.html"); var footer = sr3.ReadText(adReadAll); // ← i-footer-table.html sr3.Close(); stw.WriteText(footer); stw.SaveToFile("hatena-sitemap-table.html", adSaveCreateOverWrite); stw.Close(); function html_write (category, title, url, ymd) { stw.WriteText('\n<tr>'); stw.WriteText('\n<td class="category">' + category + '</td>\n'); stw.WriteText('<td><a target="_blank" href="https://2ndart.hatenablog.com/entry/' + url + '">' + title + '</a> <span style="color:Orangered;">' + ymd + '</span></td>'); stw.WriteText('\n</tr>'); }
4.スクリプト(JScript)を実行
「xxxxx.hatenablog.com.export.txt」、「i-header-table.html」と「i-footer-table.html、「htmlmap-table.jse」を同じフォルダーに入れる。
「htmlmap-table.jse」をダブルクリックで実行すると、「hatena-sitemap-table.html」という名前でHTMLサイトマップ・ファイルが作成される。
作成されたHTMLサイトマップを、とりあえず、GitHubに置いた。
https://ok2nd.github.io/sitemap/hatena-sitemap-table.html
必要なHTMLファイルとスクリプトサンプルを、以下のGitHubに置いたので、ここからダウンロードして、必要な箇所を変更して利用することもできる。
https://github.com/ok2nd/sitemap
「はてなブログ記事一覧」Webページ表示イメージは以下。
検索文字列はハイライトされる。
検索キーワードは複数入れることも可能。
【後日追記】
イメージ画像付き(+ページング機能付き)バージョン作成。スクリプトソース「htmlmap-table-img.jse」他一式は以下に。
https://github.com/ok2nd/sitemap
※ ページ読み込みに時間がかかる。
https://ok2nd.github.io/sitemap/hatena-sitemap-table-img.html