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

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

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

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

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

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

1 更新日付表記の不具合の原因
- 1.1 はてなブログのサイトマップ更新によるもの
2 不具合を修正するコード
- 2.1 記事下のJavaScriptを修正
  - 2.1.1 現状のコード
  - 2.1.2 修正コード

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

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

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

参考サイト　つばさのーと様

リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ

更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください

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

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

不具合を修正するコード

記事下のJavaScriptを修正

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

現状のコード

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

function appendLastmod(lastmod) {

var $container = $('<div></div>', {'class': 'lastmod'});

$container.append($('', {'class': 'date-year'}).text(lastmod.split('-')[0]));

$container.append($('', {'class': 'hyphen'}).text('-'));

$container.append($('', {'class': 'date-month'}).text(lastmod.split('-')[1]));

$container.append($('', {'class': 'hyphen'}).text('-'));

$container.append($('', {'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の正規表現を用いて除外しています。
また、文字列を分割しないシンプルなコードです。

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

修正コード

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

function appendLastmod(lastmod) {

$('.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属性にしています。

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