「この記事は◯分で読めます」を表示する方法

「この記事は◯分で読めます」
を自動的に表示するスクリプトを書きました。

<script>
function extract_text(e){var a="";var b=e.childNodes;for(var c=0;c<b.length;c++){if(b[c].nodeName=="#text"){var d=b[c].data.trim();if(d){a+=d;}}else{if(b[c].nodeName=="SCRIPT"){}else{if(b[c].nodeName=="PRE"){}else{if(b[c].nodeName=="CODE"){}else{var d=extract_text(b[c]);a+=d;}}}}}a=a.replace(/[\n\r]/g,"");return a;}addEventListener("DOMContentLoaded",function(){var a=document.getElementsByClassName("entry-content")[0];text=extract_text(a);var b=Math.floor(text.length/600);if(b==0){b=1;}if(b<=5){var c=document.createElement("p");c.setAttribute("style","font-size: 80%; color: #999; text-align: right;");c.textContent="この記事は"+b+"分で読めます。";a.insertBefore(c,a.firstChild);}},false);
</script>

はてなブログユーザーは、このコードをブログに貼り付けるだけで
「この記事は◯分で読めます」
が表示されるようになりますよ。

はてなブロガー以外の人も少しコードを直せば動かせます。

詳しくは続きをどうぞ。

Follow @toeicmantenblog

「◯分で読めます」のメリット
一般的な読書スピード
大まかな仕組み
- ノイズ対策
設定方法
カスタマイズ
- ◯分以下の場合だけ表示
はてなブロガー以外の人
お知らせ
おすすめのシリーズ記事

「◯分で読めます」のメリット

「1分で読めます」のように表示することで、
読者に「1分だけならちょっと読んでみようかな」と思わせることができます。

ゴールが分からない状態でマラソンすると死ぬほどつらいけど、公園を1周するみたいな具体的な目安があると楽しく走れたりします。
目安を作ってあげることで最初の1歩を踏み出しやすくする仕掛けですね。

一般的な読書スピード

日本人の一般的な読書スピードは1分間に400～600文字といわれています。
原稿用紙1～2枚ですね。

大まかな仕組み

こんな感じでスクリプトが動いています。

本文のところだけ文字数をカウントする
1分間に600文字換算で所要時間を計算
5分以下なら画面に表示

たとえば100分などの長尺の場合は表示すると読む気が失せるかと思ったので
5分以内で読める場合だけ表示するようにしました。

ノイズ対策

文字数をカウントするときにはURLなども区別せずに数えています。

たとえば、以下のURLは30文字。
https://toeicmanten.hateblo.jp

しかし、URLを一字一句読む人なんていないでしょう。
そのため、ノイズ（読む必要が無い文字）も混ざっているという前提で、
1分間に600文字という速めの読書スピードで計算することでバランスを取っています。

設定方法

はてなブログ管理画面　＞　デザインの
カスタマイズ（スパナアイコン）　＞　記事　＞　記事下
に以下のコードを貼りつけましょう。

<script>
function extract_text(e){var a="";var b=e.childNodes;for(var c=0;c<b.length;c++){if(b[c].nodeName=="#text"){var d=b[c].data.trim();if(d){a+=d;}}else{if(b[c].nodeName=="SCRIPT"){}else{if(b[c].nodeName=="PRE"){}else{if(b[c].nodeName=="CODE"){}else{var d=extract_text(b[c]);a+=d;}}}}}a=a.replace(/[\n\r]/g,"");return a;}addEventListener("DOMContentLoaded",function(){var a=document.getElementsByClassName("entry-content")[0];text=extract_text(a);var b=Math.floor(text.length/600);if(b==0){b=1;}if(b<=5){var c=document.createElement("p");c.setAttribute("style","font-size: 80%; color: #999; text-align: right;");c.textContent="この記事は"+b+"分で読めます。";a.insertBefore(c,a.firstChild);}},false);
</script>