すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

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

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用の最終更新日時表示 ここまで -->

AMPページの情報を読み取る必要がある為、はてなブログProにある「Accelerated Mobile Pages (AMP) を配信する」設定がONになっている必要があります。

 

上手い事改造すれば1年後に表示を開始したり、色々できるやつです。

 

 

そのうちブログの変数か何かで更新日時が取得できたら良いと思った熊。

NEW リズムでともだち こぐまのトンピー ぬいぐるみ