晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

検索機能付き「はてなブログ記事一覧」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」。

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 = '';
for (var i=0; i<line_ary.length; i++) {
	if (line_ary[i].substring(0,6) == 'TITLE:') {
		if (sw_category && sw_publish) {
			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></td>');
//              						 ↑↑↑ 名前を変えて使う。
			stw.WriteText('\n</tr>');
			sw_category = false;
			sw_publish = false;
			category = '';
		}
		title = line_ary[i].slice(7);
	}
	if (line_ary[i].substring(0,9) == 'BASENAME:') {
		url = line_ary[i].slice(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;
	}
}
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();
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ページ表示イメージは以下。

f:id:art2nd:20190623234250p:plain

検索文字列はハイライトされる。

f:id:art2nd:20190623234254p:plain

検索キーワードは複数入れることも可能。

f:id:art2nd:20190623234257p:plain

【後日追記】

イメージ画像付き(+ページング機能付き)バージョン作成。スクリプトソース「htmlmap-table-img.jse」他一式は以下に。

https://github.com/ok2nd/sitemap

※ ページ読み込みに時間がかかる。

https://ok2nd.github.io/sitemap/hatena-sitemap-table-img.html

f:id:art2nd:20190629140208p:plain