「この記事は約〇分で読めます。」をJavaScriptで実装する方法（ついでにWordPressのプラグインで実装する方法も記載します）

menu

Home
ＷＥＢ制作 , ＴＩＰＳ
「この記事は約〇分で読めます。」をJavaScriptで実装する方法（ついでにWordPressのプラグインで実装する方法も記載します）

記事の詳細

「この記事は約〇分で読めます。」をJavaScriptで実装する方法（ついでにWordPressのプラグインで実装する方法も記載します）

今回は他のサイト様でよく見かける「この記事は約〇分で読めます。」を実装する方法を記載します。

今回のブログの見出しはコチラです！

1 JavaScriptを使用して実装する
2 WordPressのプラグインで実装する
3 やっぱりWordPressのプラグインは凄い！

JavaScriptを使用して実装する

まずはJavaScriptで実装する方法を記載します。

本プログラムで実装する際に、必要となる条件は下記となります。
・記事を表示するコンテンツが特定のidを付けたdivタグ等で囲われている事。

具体的には、HTMLコードが下記のようになっていれば機能します。

<div id="read-cnt-area">
  ここに記事を書く
</div>

1

2

3

ここに記事を書く

</div>

上記のような構造になっていれば下記のプログラムは正常に動きます。…動くはずです！

<script>
<!--
  const MINUTE_READ_CHAR = 500; // 1分間に読める文字数(※1)
  
  var getElm       = document.getElementById('read-cnt-area');
  var strNoHtmlTag = '';
  var iReadTime    = '';
  var strSetHtml   = '';
  
  if(getElm != null){
    // htmlタグを排除して文字列だけを抜き出す(※2)
    strNoHtmlTag = getElm.innerHTML.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
    // 1分間に読める秒数に変換
    iReadTime = Math.floor( strNoHtmlTag.length / MINUTE_READ_CHAR );
    if( iReadTime == 0 ){
      // 1分未満の場合は1分に変更
      iReadTime = 1;
    }
    // タグ作成
    strSetHtml = '<span style="color: red;">この記事は約' + iReadTime + '分で読めます！</span>';
    // タグ埋め込み
    getElm.innerHTML= strSetHtml + getElm.innerHTML;
  }
//-->
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!--

const MINUTE_READ_CHAR = 500; // 1分間に読める文字数(※1)

var getElm = document.getElementById('read-cnt-area');

var strNoHtmlTag = '';

var iReadTime = '';

var strSetHtml = '';

if(getElm != null){

// htmlタグを排除して文字列だけを抜き出す(※2)

strNoHtmlTag = getElm.innerHTML.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');

// 1分間に読める秒数に変換

iReadTime = Math.floor( strNoHtmlTag.length / MINUTE_READ_CHAR );

if( iReadTime == 0 ){

// 1分未満の場合は1分に変更

iReadTime = 1;

}

// タグ作成

strSetHtml = '<span style="color: red;">この記事は約' + iReadTime + '分で読めます！</span>';

// タグ埋め込み

getElm.innerHTML= strSetHtml + getElm.innerHTML;

}

//-->

</script>

※1　日本人が1分間に読める文字は400文字～600文字のようなので、間を取って500文字で1分と設定しています。
参考記事：人は１分間に何文字読めるの？スキマ時間で読まれる文字数を推測してみよう。
※2　参考記事：JavaScriptでHTMLタグを削除する正規表現

上記プラグラムはdivタグの後に設置しなければ機能しないので注意して下さい。
このプログラムが正常に動くと、divタグの上に自動で「この記事は〇分で読めます」という文言が表示されるはずです。

実際に使ってみると、下記のようになります。

【↓divタグここから】

拙者親方と申すは、お立ち会いの中に、御存知のお方も御座りましょうが、御江戸を発って二十里上方、相州小田原一色町をお過ぎなされて、青物町を登りへおいでなさるれば、欄干橋虎屋藤衛門、只今は剃髪致して、円斎となのりまする。
元朝より大晦日まで、お手に入れまする此の薬は、昔ちんの国の唐人、外郎という人、我が朝へ来たり、帝へ参内の折から、この薬を深く籠め置き、用ゆる時は一粒ずつ、冠のすき間より取り出す。
依ってその名を帝より、とうちんこうと賜る。
即ち文字には、「頂き、透く、香い」と書いて「とうちんこう」と申す。

只今はこの薬、殊の外世上に弘まり、方々に似看板を出し、イヤ、小田原の、灰俵の、さん俵の、炭俵のと、色々に申せども、平仮名をもって「ういろう」と記せしは、親方円斎ばかり。
もしやお立ち会いの中に、熱海か塔ノ沢へ湯治にお出でなさるるか、又は伊勢参宮の折からは、必ず門違いなされまするな。
お登りならば右の方、お下りなれば左側、八方が八棟、表が三棟玉堂造り、破風には菊に桐のとうの御紋を御赦免あって、系図正しき薬でござる。

【↑divタグここまで】

いけましたね！
このプログラムを使用することで「この記事は約〇分で読めます。」の文言を自動で出すことが可能となります。

JavaScriptでの実装は以上となります