(cache) JavaScriptで記事本文の読了予測時間を自動で表示するjQueryプラグインを自作した

ブログの記事本文を読むのにかかる目安時間を表示すると読者に親切かも。JavaScriptで作ったので、PHPを使えないサーバーを利用しているウェブサイトやブログに組み込めるよ。このjQueryプラグインを「読了予測時間」と命名。

読了予測時間のデモ画像

読了予測時間が表示されるページ

各記事ページで読了予測時間が表示される。下図で黄色の枠で囲った部分が読了予測時間。PCなら下図をクリックで拡大表示可能。

読了予測時間を表示した記事ページ

記事ページとは、はてなブログでいえばURLに/entry/が入っているページ。たとえば次のURL。

http://hapilaki.hateblo.jp/entry/jquery-plugin-honbun-counter

読了予測時間が表示されないページ

記事ページ以外の記事一覧ページやカテゴリページでは読了予測時間が表示されない。需要があるならアップデートして表示されるようにするかも（ただし、ページの構成によっては無理）。

読了予測時間が表示されないページ例

jQueryプラグイン「読了予測時間」

機能

一度導入すれば過去記事や今後作成する記事で読了予測時間の目安が自動で表示される。
あくまでも目安であり、ブラウザなどの環境が異なると時間に誤差が生じる場合がある。

コード

次のコードははてなブログですぐに使えるようにしたもの。

<script>
/*
 * jQuery plugin dokuryo yosoku jikan v1.0.0
 * Date: 2014-09-13
 * Copyright (c) 2014 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;$(function(){
  var entryContent=$('.entry-content');//カウントしたい部分
  var showSecond=1;//秒を表示するなら1、切り捨てなら0
  var numCharsPerMinute=600;//一分で読める文字数
  var numCharsPerSecond=numCharsPerMinute/60;
  function calcReadTime(text){
    var countChars=text.length;
    var countSeconds=Math.ceil(countChars/numCharsPerSecond);
    var result='1分未満';
    if(numCharsPerMinute<=countChars){
      var calcMinute=Math.floor(countSeconds/60);
      var calcSecond=countSeconds%60;
      var withSecond='';
      if(showSecond==1){withSecond=('0'+calcSecond).slice(-2)+'秒'}
      var result=calcMinute+'分'+withSecond;
    }
    return result;
  }
  var readTime=calcReadTime(entryContent.text());
  entryContent.prepend('<p style="text-align:right;" class="reading-time">読了予測：'+readTime+'</p>');
});
</script>

カスタムについて

MIT licenseなので改変OK

MIT licenseで公開する。著作権表示を削除しない限りは好きなように改変していただいてOK。

はてなブログ以外のブログサービスやウェブサイトで使うには、コード内で「カウントしたい部分」とコメントアウトがある行で場所を指定しなおせる。

コメントアウト参照

読了予測時間に秒を表示するか切り捨てるかを選択できる。

初期設定では一分で読める文字数を600にしている。ここを500に減らせば読了予測時間は長くなり、700に増やせば読了予測時間は短くなる。300～800の間が妥当じゃないかな。

構造とデザインの分離

コードの下から三行目にあるstyle="text-align:right;"を削除し、別途CSSでクラス.reading-timeにスタイルを適用すれば構造とデザインを分離できるよ。

1分あたりの文字数を表示

下から三行目のコードを次のコードに差し替えればOK。

  entryContent.prepend('<p style="text-align:right;" class="reading-time">読了予測：'+readTime+'（1分'+numCharsPerMinute+'文字として）</p>');

はてなブログで使うには

まずはチョマテヨを導入

はてなブログはjQuery本体がページ下部で読み込まれる。そのためjQuery本体よりも上に書かれたjQuery記法は有効にならない。それを有効にするために次のプラグインを使う。

チョマテヨ「ちょ待てよ！jQueryの2回読み込み、プラグインあるからさ」 - はぴらき合理化幻想

ページ下部に追加

jQueryプラグイン「読了予測時間」のコードを追加する場所は次のとおり。

はてなブログ管理画面→デザイン→カスタマイズ（スパナマーク）→記事→記事上下のカスタマイズ→記事下

留意点

筆者の環境では作動しているが、ブログの構成次第で正しく作動しない可能性がある。

当ブログと同じような次の構成なら作動するはず。

記事一覧ページでは記事本文が「続きを読む」で省略されている。
記事全文を読む場合は各記事ページを開く必要がある。

上記構成以外でも作動したら教えてもらえるとありがたい(^^)

スペシャルサンクス

Amazon.co.jp: jQuery入門道場 : Kindleストア

Amazon.co.jp： Web制作の現場で使うjQueryデザイン入門[改訂新版]

Amazon.co.jp： JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

まとめ

読了予測時間を表示すると記事の長さがあらかじめ分かって便利。手動による読了予測時間を記述する手間を省ける。