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

カスタマイズ

こんにちは、つばさ(@tsubasa123)です。

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

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

www.tsubasa-note.blog

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

f:id:tsubasa123:20170326170152j:plain

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

原因はスマホの判定方法

今まで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>

さいごに

というわけで、私のカスタマイズを使っていただけた方にはご迷惑をお掛け致しました。まだまだはてなブログの特性を掴めていませんでしたね。反省反省。めちゃめちゃ崩れる、ってほどでもないので、気にならない方はそのままでも良いかもですが、できればアプデしてもらえると助かります。

やっぱり真面目系のカスタマイズは作るのが大変です。ついつい作りやすいネタ系に走ってしまいますがこれからもバランスをみつつ、カスタマイズ記事をお届けできるように頑張ります。

コメントにてご連絡をくださいましたシンさん、ありがとうございました。こちらの記事で紹介しましたコードならレスポンシブデザインでも崩れない(横並びになる)と思いますので、お時間がありましたらお試しください。

ではでは、最後までお付き合いいただきありがとうございました。

コメント

  1. shin_508 より:

    素早いご対応感謝します!こちらを使わせていただきます。ありがとうございます。

  2. chihiro_dayori より:

    はじめまして♬ちひちひろです。
    更新日、ずっと入れたかったので、本当にこの記事に感謝です!!

  3. uwanosorajikenbo より:

    はじめまして。
    ありがとうございます!!使わせていただきました。