読了までの所要時間を予測して表示するカスタマイズをアップデートしました

f:id:tsubasa123:20161216104042j:plain

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

basanote.hatenablog.com

以前に作成したカスタマイズのアプデです。と言っても、いただいた言及に対応してみただけです。既に導入いただけている方で、特に機能に不満の無い方は何もしなくても今まで通りご利用いただけますので大丈夫です。

言及をいただいた記事はこちら

www.nuohman.net

色鉛筆っぽいテイストのアイコンが素敵です。

うれしいことにカスタマイズをご利用いただき、感想を書いていただけました。「不必要」と言われなくてホッとしております。感想やメリットは省略、ぬぉーまんさんの記事をご覧ください。

で、ご指摘いただいたデメリットが2つほど。

  1. 数値が二桁超えるならば表示したくない
  2. 表示場所によっては読了時間が変わる

[2]に関してははてなブログの仕組み上、対応が難しそうなので断念。ちょっと解決方法が見つかりませんでした、ごめんなさい。

[1]に関してはカスタマイズ作成時点で私も少し懸念していました。私がそんなに長い記事を書くことがなかったのでスルーして公開しましたが、やはりそれなりに問題だと感じる方もいるようです。じゃあ直すしかないですよね。

ちなみに、

www.toritemi.com

私が知っている範囲になりますが、カスタマイズをご試用いただけているブログの中で、読了時間が一番長かったのがあめよふれさんのこちらの記事。91分て。私のプログラムにミスがなければ3万6千文字以上、卒論かな?

修正したコード

JavaScriptのコードのみ修正しました。HTMLとCSSは前回と同じなので省略します。こちらの記事から当カスタマイズを知った方はお手数ですが冒頭で紹介した前の記事をご確認ください。

<script>
(function() {
$(function() {
var contents = '';
var estimatedTime = 0;
var regSpace = /^\s*$/;
var ignoreNodeType = ['SCRIPT', 'PRE'];
var maxShowEstimatedAreaTime = 100; // 読了時間を非表示にする時間の上限設定
var charCountPerMin = 400; // 1分あたりに読める文字数
$('.entry-content').contents().each(function() {
var s = $(this).text().replace(/\r?\n/g, '');
if (regSpace.test(s)) return;
if (s === '<!-- more -->') return;
if ($.inArray(this.nodeName, ignoreNodeType) !== -1) return;
s = s.replace(/\s/g, '');
contents +=  s;
});
estimatedTime = Math.ceil(contents.length / charCountPerMin);
if (estimatedTime < maxShowEstimatedAreaTime) {
$('#estimated-area').append('この記事は約<span>' + estimatedTime + '<\/span>分で読めます');
} else {
$('#estimated-area').hide();
}
});
})();
</script>

今回の改良点は2つ。「読了時間を非表示にする時間の上限設定」と「1分あたりの文字数の設定」を設けました。どちらも指定しなければ今までどおりに利用できるようになっています。

読了時間を非表示にする時間の上限設定

ぬぉーまんさんの記事で言及いただいた機能ですね。コンテンツの文字数から読了時間を算出後、指定した時間よりも読了に時間がかかる場合は読了時間を表示しないようにします。

var maxShowEstimatedAreaTime = 100; // 読了時間を非表示にする時間の上限設定

ぬぉーまんさんは二桁とおっしゃっていましたが、10分越えの記事がゴロゴロある人もいるだろうと思って、任意に設定できるようにしました。上記の箇所に指定した時間以上の場合は読了時間が非表示になります。指定を省略した場合は100分以上で非表示になります。

本当は非表示機能のON/OFFにする予定だったのですが、それだと「時間の設定」と「ON/OFFの設定」と、2つの設定が必要になってしまい煩雑かなと思い、非表示にする時間の上限のデフォルトを長い時間にする形で対応しました。4万文字超えの記事がある人はこちらを1000とかに変更してください。

1分あたりに読める文字数の設定

デフォルトでは400文字にしていますが、ブログのテイストによってはスラスラ読めるような記事が多く、そんなに読了に時間がかからないこともあると思います。せっかくのアプデなので文字数設定もできるように機能を追加しました。

var charCountPerMin = 400; // 1分あたりに読める文字数

この部分を変更すれば文字数の調整が可能です。指定する文字数が多いほど、読了にかかる時間は短くなります。600を指定すれば今までの2/3の時間になる計算です。

さいごに

というわけで、初めてのカスタマイズのアップデートでした。やはり実際にカスタマイズをご利用いただいた方からご意見をいただけるのはうれしいですね。アップデートする側もテンション上がります。

はてなブログのプラットフォームを利用している以上、対応範囲に限りはありますが、これからもいただけるご意見にはできるだけ対応していきたいと思いますので、お気軽にどうぞ。

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

関連記事

滞在時間は本当に上がるの?読了までの所要時間を予測して表示するカスタマイズ

スマホサイト対応完了!はてなブログ公式目次のデザインカスタマイズ

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