はてなブログで記事の最終更新日時を表示する

Qiitaなどで古い記事に表示されているアレを作る事ができます。

ここでは単純に、最終更新日時とはてなブログで使われている「○日前」という表示を出します。

はてなブログで古い記事にメッセージを表示するスクリプト - Sprint Life

最終更新日時はサイトマップ( http://sprint-life.hatenablog.com/sitemap_index.xml )経由で確認できますが、色々面倒なので考慮しない方向で良いと思います。
2015/09/17 07:08

最終更新日時はサイトマップ( http://sprint-life.hatenablog.com/sitemap_index.xml )経由で確認できますが、色々面倒なので考慮しない方向で良いと思います。 - psne のコメント / はてなブックマーク

色々なやり方があります。
今回は、はてなブログではAMP配信が対応したので、そちらの情報を取りに行きます。

コードを貼り付ける

JavaScriptが貼り付けられる場所の何処にあっても動きます。

<!-- すなばいじり はてなブログPro用の最終更新日時表示 -->
<script>
(function () {
	var blogData = document.getElementsByTagName("html")[0].dataset;
	if (blogData.page === "entry") {
		if (document.readyState == "uninitialized" || document.readyState == "loading") {
			window.addEventListener("DOMContentLoaded", function () {
				$.ajax({
					dataType: 'html',
					url: location.origin + location.pathname + "?amp=1"
				}).done(function (data, status, xhr) {
					data = data.match(/<script type="application\/ld\+json">(.*?)<\/script>/);
					if (data != null) {
						data = data[1];
						var ldData = JSON.parse(data);
						var datetimeHTML = new Date(ldData.dateModified);
						var deltaDatetime = Hatena.Locale.deltaDatetime(new Date(ldData.dateModified));
						console.log("data " + deltaDatetime);
						var ButtonElm = document.createElement('div');
						ButtonElm.innerHTML = '最終更新' + datetimeHTML.toLocaleDateString() + ' (' + deltaDatetime + ')';
						document.querySelector("header.entry-header").appendChild(ButtonElm);
					} else {
						console.log('AMPを利用できる設定ではない');
					}
				}).fail(function (xhr, status, error) {
					// 通信失敗
					console.log('通信失敗');
				});
			}, false);
		}
	}
})()
</script>
<!-- すなばいじり はてなブログPro用の最終更新日時表示 ここまで -->