検索機能付き「はてなブログ記事一覧」HTML生成スクリプト(JScript)を作成。

先日、はてなブログの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」。

１．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>

２．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>

３．スクリプト(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>');
}