GitHubの相対時間をリアル時間に変換するブックマークレット

github-relative-time-expand-bookmarklet

javascript:((function(){var b={year:"numeric",month:"long",day:"numeric"};document.querySelectorAll("relative-time").forEach(function(a){var c=(new Date(a.datetime)).toLocaleDateString("ja-JP",b);a.replaceWith(c)})})())();

github_relative_time_expander.js

javascript:(function f() {
    const nodes = document.querySelectorAll('relative-time');
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    nodes.forEach(function(node){
    	const date = new Date(node.datetime);

    	// ref. https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
    	const formatted = date.toLocaleDateString('ja-JP', options);
        node.replaceWith(formatted);
    });
})()

Displaying Real Commit Times in Github が機能しなくなってしまったので、原因探るより自分で作ったほうが早いと思い実行。

基本的にGitHubの時間表記はrelative-timeタグで敢えて相対時間表示にしているが、証跡格納などの用途では相対時間では困るケースがあるので、そのためブックマークレット。

GitHubのrelative-time-element
https://github.com/github/relative-time-element

先人たちの参考リンク:

• Displaying Real Commit Times in Github
• GitHub の「... days ago」みたいな所を日時表示に展開するブックマークレット - Qiita
• Bookmarkletを作ろう(準備編） - Qiita

Google Closure Compilerでブックマークレットで実行できるように整形する
https://closure-compiler.appspot.com/home

Before	After

ブックマークレットの追加・実行手順

1. Google Chromeのブックマークから「ブックマークレットを追加」へ
2. URL欄に github-relative-time-expand-bookmarklet の中身をコピペ
3. 表示形式を切り替えたい画面を開いた状態でブックマークレットを実行

※今回は単純に相対時間を変換しているだけですが、JavaScriptが勝手に実行されてしまうのでソースが公開されていないブックマークレットは無闇矢鱈に実行しないほうが良いです。