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