電脳TIMES

ゲーム、プログラミング好きのブログです。関連する情報を発信していきます。

【はてなブログ】更新日付の不具合を修正するコードを作成しました【コピペ可】

【はてなブログ】更新日付表示の不具合を修正する方法【コピペ可】
こんにちは、リバです。

はてなブログの更新日付を取得した際に、表示の不具合が発生していました。
こんな感じです↓

f:id:fpra1320:20190607010236p:plain:w500

AMPを利用する方法を使うことで一応この問題は解決できますが、AMP対応化は、はてなブログPROでしか導入できません。また、AMP化自体、必ずしも推奨されるものでもありません。

そのため、従来のサイトマップから取得する際のコードを修正する方向で、解決することと致しました。

この記事では、更新日付をサイトマップから取得した際に正しい表示がされるようにする修正コードを紹介します。




更新日付表記の不具合の原因

はてなブログのサイトマップ更新によるもの

はてなブログで更新日時を表示する方法として、サイトマップを取得する方法が主流となっています。

最近、はてなブログのサイトマップに変更があり、日付に加え時間まで記載されるようになりました。
サイトURLに/sitemap.xmlを加え、ブラウザで確認していただくと「TXX:XX:XX+09:00」の表記があることがわかるかと思います。

そのため、従来の取得方法では、その追記された時間まで取ってくるので余計な記載が出るようになりました。




不具合を修正するコード

記事下のJavaScriptを修正

現在記事下に貼ってある↓の部分を修正します。

現状のコード

function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'});
$container.append($('<span></span>', {'class': 'date-year'}).text(lastmod.split('-')[0]));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-month'}).text(lastmod.split('-')[1]));
$container.append($('<span></span>', {'class': 'hyphen'}).text('-'));
$container.append($('<span></span>', {'class': 'date-day'}).text(lastmod.split('-')[2]));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}

今までのコードでは、lastmod(更新日付)を年月日で分けて取得し、ハイフンと合わせて文字列結合していました。変数$containerにsplitで分割した年月日をappendしているわけです。

修正コードでは、lastmodの持っている日時部分をreplaceの正規表現を用いて除外しています。
また、文字列を分割しないシンプルなコードです。

現状のコードを削除し、修正コードをコピペしてください。

修正コード

function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}

正規表現の指定は「T始まりの任意文字列で、0で終わる文字列」です。これで「TXX:XX:XX+09:00」部分を指定しreplaceで空文字列に変換するという仕組みです。
これで表記が元に戻るはずです。

f:id:fpra1320:20190607013657p:plain:w500

プログラマー1年半にして、初めてjQueryをいじりましたがなんとかなりました笑

なお、このコードの欠点は、lastmodを分割していないので年月日毎に分けてCSSで加工できないところです。

ちなみに、修正コードのdiv属性部分のところを、私はspan属性にしています。

var $container = $('<span></span>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));

もし、うまく表記されない方がいましたら、span属性にしてみてください。

なお、このブログのテーマはZENO-TEALですので、他テーマにつきましては若干の相違があるかもしれませんので、ご承知ください。

こちらも合わせて参考にしてみてください

www.denno-times.com

皆様の助けになれば幸いです。


最後まで読んでいただき、ありがとうございました。