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

こんにちは、つばさ（@tsubasa123）です。

私が公開したカスタマイズ入れると表示が崩れる、といった報告をいただきましたのでコードを修正しました。お手数をお掛け致しますが、気になる方は本記事で掲載する修正コードで上書きしていただけますようお願い致します。

レスポンシブだと崩れちゃう
原因はスマホの判定方法
タグベースで判定するしかないのかな
修正しますた
1. サイトマップ利用バージョン
2. AMP利用バージョン
さいごに

レスポンシブだと崩れちゃう

対象となるカスタマイズがこれ。私的には結構自信作でそこそこ入念にチェックしたつもりだったんですが、レスポンシブデザインの時に崩れちゃってました(・ω<)

ちょっとわかりにくいかもですがこんな感じ。本来は横並びが期待されるデザインなんですが、縦に並んで表示されてしまっているようです。デザインによってはタイトルと被ってしまっているようでして。てへぺろしてる場合じゃないですね、申し訳ございませんでした。

原因はスマホの判定方法

今までUA（ユーザーエージェント）という情報をもとにスマホなのかPCなのかを判定していたのですが、これで判断すると「UAはスマホだけど、レスポンシブデザインだからPCと同じHTMLで表示」という状態になってしまっていたんですね。

スマホサイトとPCサイトで更新時間の挿入方法を切り替えていたので、レスポンシブデザインのサイトをスマホで見た場合に、私の予期せぬ動作となっていました。さて、どうしたものか。

タグベースで判定するしかないのかな

UAで判定できないので、ブログのHTMLから判定するしかなさそうです。PC表示とスマホ表示を見比べてみると、日付のエリアに使われている.dateクラスを付与するタグが異なっているようでしたので、それを目安に判定することにしました。

こーゆー判定方法は好きじゃないんですが、まぁ仕方ないのかな。html要素のメタ情報にdata-deviceって属性があるから本当はそっちを使いたいところなんですが、JavaScriptからだとアクセスできないし。誰か良いやり方をご存知の方がいましたら教えてください。

修正しますた

サイトマップから取得するやり方と、AMPから取得するやり方、どちらも修正しました。以前よりもコードが短くなってリニューアルです。

サイトマップ利用バージョン

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog v1.0.1
 * Date: 2016-12-20
 * Copyright (c) 2016 https://www.tsubasa-note.blog/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
//url = 'https://www.tsubasa-note.blog/sitemap.xml'; // URLの入力例
url = ''; // ここにサイトマップへのURLを入力してください。
function parseSitemapXML(url) {
var d = new $.Deferred;
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
$(xml).find('sitemap').each(function() {
urls.push($(this).find('loc').text());
});
d.resolve();
}).fail(function() {
d.reject();
});
return d.promise();
}
function findURL(url) {
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
var isMatched = false;
$(xml).find('url').each(function() {
var $this = $(this);
if ($this.find('loc').text() === location.href) {
isMatched = true;
appendLastmod($this.find('lastmod').text());
return false;
}
});
if (!isMatched) nextURL();
}).fail(function() {});
}
function nextURL() {
urls.shift();
if (urls.length) findURL(urls[0]);
}
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);
}
}
p = parseSitemapXML(url);
p.done(function() {findURL(urls[0])});
p.fail(function(error) {});
})(jQuery);
</script>

AMP利用バージョン

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog2 v1.0.1
 * Date: 2016-12-20
 * Copyright (c) 2016 https://www.tsubasa-note.blog/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;(function($) {
'use strict';
var html = '', p;
function getAmpHtml() {
var d = new $.Deferred;
$.ajax({
dataType: 'html',
cache: false,
url: location.origin + location.pathname + "?amp=1"
}).done(function (data) {
html = data;
d.resolve();
}).fail(function () {
d.reject('Error');
});
return d.promise();
}
function parseAmpHtml() {
var m = html.match(/<script type="application\/ld\+json">(.*?)<\/script>/);
if (m === null) return;
appendLastmod(JSON.parse(m[1]).dateModified.split('T')[0]);
}
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);
}
}
p = getAmpHtml();
p.done(parseAmpHtml);
p.fail(function(error) {});
})(jQuery);
</script>