github の日付を見やすくするブックマークレットを紹介！

github での日付って例えば「26 days ago」とかの形式で表示されますが、これ自分苦手なんですよね。

ぱっと見で「今日から26日前はええと、先月末？それとも今月頭？」とかがすぐ分からないわけです。

カレンダーを見て「ああ、今日は11/27だから26日前は 11/1か」ってなるわけですが、じゃあ最初から「11/1」で表示して欲しいというか。

なので、無理やり表示を変更するブックマークレットを作りました。

github の日付の表示形式の確認
github の日時を見やすくするブックマークレット！
まとめ

github の日付の表示形式の確認

github の日付の表示形式は以下のような感じになっています。

これを Chrome の DevTools で確認すると、以下のようになっています（2022年11月現在。将来的に変わる可能性があります）。

要するに、

time-ago 要素直下 #shadow-root に「26 days ago」が入っている
time-ago 要素の datetime 属性に「2022-10-31T18:13:46Z」のような時刻も含んだ日時が入っている

ということですね。

datetime 属性の書式は ISO 8601 というやつですね。これは以下のようにしてロケール文字列に変換できます。

var date = new Date("2022-10-31T18:13:46Z");
var datetimeStr = date.toLocaleString('ja-JP', {timeZone:'JST'});
// → datetimeStr は "2022/11/1 3:13:46"

#shadow-root が何なのかとかは以下など参考にしました。

シャドウ DOM の使用 - Web API | MDN

カスタム要素の重要な側面の一つがカプセル化です。なぜなら、カスタム要素は定義上、再利用可能な機能の一部であり、任意のウェブページにドロップして動作させることが期待されるからです。そのため、ページで実行されるコードが、内部実装を変更することでカスタム要素を誤って壊すことがないようにすることが重要です。シャドウ DOM を...

通常は node.innerHTML でいじるのを node.shadowRoot.innerHTML にすればOKです。

これでブックマークレットを作る準備はできました。

github の日時を見やすくするブックマークレット！

結果を先に書くと、以下のような感じになります。

　　　　↓

プルリクエスト内のコミット日時以外に、リリース/タグ、コミット履歴など各所で表示を変換できます。

作ったブックマークレットは以下の通りです。コード全部載せておきます。

javascript: (function () {
    var nodes = []
        .concat(Array.from(document.getElementsByTagName('relative-time')))
        .concat(Array.from(document.getElementsByTagName('time-ago')));

    for (var i = 0; i < nodes.length; ++i) {
        var node = nodes[i];
        var date = new Date(node.datetime);
        var datetimeStr = date.toLocaleString('ja-JP', {timeZone:'JST'});
        node.innerHTML = datetimeStr;
        node.shadowRoot.innerHTML = datetimeStr;
    }
})();

これをコピーして、Chrome でブックマークバーを右クリックして「ページを追加…」を選択し、以下を設定すればOKです。