記事の詳細
「この記事は約〇分で読めます。」をJavaScriptで実装する方法(ついでにWordPressのプラグインで実装する方法も記載します)
今回は他のサイト様でよく見かける「この記事は約〇分で読めます。」を実装する方法を記載します。
今回のブログの見出しはコチラです!
JavaScriptを使用して実装する
まずはJavaScriptで実装する方法を記載します。
本プログラムで実装する際に、必要となる条件は下記となります。
・記事を表示するコンテンツが特定のidを付けたdivタグ等で囲われている事。
具体的には、HTMLコードが下記のようになっていれば機能します。
1 2 3 |
<div id="read-cnt-area"> ここに記事を書く </div> |
上記のような構造になっていれば下記のプログラムは正常に動きます。…動くはずです!
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 |
<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 日本人が1分間に読める文字は400文字~600文字のようなので、間を取って500文字で1分と設定しています。
参考記事:人は1分間に何文字読めるの?スキマ時間で読まれる文字数を推測してみよう。
※2 参考記事:JavaScriptでHTMLタグを削除する正規表現
上記プラグラムはdivタグの後に設置しなければ機能しないので注意して下さい。
このプログラムが正常に動くと、divタグの上に自動で「この記事は〇分で読めます」という文言が表示されるはずです。
実際に使ってみると、下記のようになります。
【↓divタグここから】
拙者親方と申すは、お立ち会いの中に、御存知のお方も御座りましょうが、御江戸を発って二十里上方、相州小田原一色町をお過ぎなされて、青物町を登りへおいでなさるれば、欄干橋虎屋藤衛門、只今は剃髪致して、円斎となのりまする。
元朝より大晦日まで、お手に入れまする此の薬は、昔ちんの国の唐人、外郎という人、我が朝へ来たり、帝へ参内の折から、この薬を深く籠め置き、用ゆる時は一粒ずつ、冠のすき間より取り出す。
依ってその名を帝より、とうちんこうと賜る。
即ち文字には、「頂き、透く、香い」と書いて「とうちんこう」と申す。只今はこの薬、殊の外世上に弘まり、方々に似看板を出し、イヤ、小田原の、灰俵の、さん俵の、炭俵のと、色々に申せども、平仮名をもって「ういろう」と記せしは、親方円斎ばかり。
もしやお立ち会いの中に、熱海か塔ノ沢へ湯治にお出でなさるるか、又は伊勢参宮の折からは、必ず門違いなされまするな。
お登りならば右の方、お下りなれば左側、八方が八棟、表が三棟玉堂造り、破風には菊に桐のとうの御紋を御赦免あって、系図正しき薬でござる。
【↑divタグここまで】
いけましたね!
このプログラムを使用することで「この記事は約〇分で読めます。」の文言を自動で出すことが可能となります。
JavaScriptでの実装は以上となります
WordPressのプラグインで実装する
こちらはJavaScriptと違って実装がとんでもなく簡単です。
おおまかには、プラグインをインストールして簡単な設定をして作業完了となります。
WordPressを使っているのであれば、こちらの方が楽な作業となりますのでオススメ致します。
まずは「Insert Estimated Reading Time」プラグインをインストールする
プラグインの新規追加より「Insert Estimated Reading Time」を検索してインストールを実行します。
プラグインを有効化すると、設定のメニューに「Insert Estimated Reading Time」の項目が表示されますので、クリックして設定画面を開きます。
1分間あたりの文字数を500に変更して、「変更を保存」ボタンを押します。
投稿ページを確認すると、記事を読むのに必要な時間が自動で表示されます。
以上!簡単!
やっぱりWordPressのプラグインは凄い!
いかがでしたか?
今回のJavaScriptの方のプログラムは制作時間としては20分~30分程かかりました。
ですが、WordPressのプラグインなら同じような機能が1分程度で実装できてしまいます…。
自作のプログラムは応用ができるので便利ではあるのですが、今回の内容に関してはプラグインが優秀なのでプラグインを使いたいですね。
以前にも書いた気がしますが、やはりWordPressのプラグインは非常に優秀なので、何かプログラムを作る際には、まずは類似した機能があるかどうかを調べたほうが良いですね。
もしプラグインが見つかったら作業時間が1/10になるかもしれません!
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。