文字カウンター
BLOGを読んでいると、「この記事はおよそ3分で読めます」といった文言を見かけます。読了までの所要時間を伝えることに、ユーザーにメリットがあり、離脱を防ぐなどの効果があるようです。
これは自身で「だいたい、これ位かな」と考える場合もありますし、オンライン上のツールで計測することもできます。しかし、記事を投稿するたびに手数が発生するので、面倒かもしれません。そこで、JavaScriptでプログラムを組んでおくと、タグを挿入しておけば自動ですべて処理してくれるので、おすすめです。
文字数カウントのサンプル
下記の憲法第七章の引用文の文字数をカウントし、読了目安を表示します。
第七章 財政
第八十三条 国の財政を処理する権限は、国会の議決に基いて、これを行使しなければならない。
第八十四条 あらたに租税を課し、又は現行の租税を変更するには、法律又は法律の定める条件によることを必要とする。
第八十五条 国費を支出し、又は国が債務を負担するには、国会の議決に基くことを必要とする。
第八十六条 内閣は、毎会計年度の予算を作成し、国会に提出して、その審議を受け議決を経なければならない。
第八十七条 予見し難い予算の不足に充てるため、国会の議決に基いて予備費を設け、内閣の責任でこれを支出することができる。
② すべて予備費の支出については、内閣は、事後に国会の承諾を得なければならない。
第八十八条 すべて皇室財産は、国に属する。すべて皇室の費用は、予算に計上して国会の議決を経なければならない。
第八十九条 公金その他の公の財産は、宗教上の組織若しくは団体の使用、便益若しくは維持のため、又は公の支配に属しない慈善、教育若しくは博愛の事業に対し、これを支出し、又はその利用に供してはならない。
第九十条 国の収入支出の決算は、すべて毎年会計検査院がこれを検査し、内閣は、次の年度に、その検査報告とともに、これを国会に提出しなければならない。
② 会計検査院の組織及び権限は、法律でこれを定める。
第九十一条 内閣は、国会及び国民に対し、定期に、少くとも毎年一回、国の財政状況について報告しなければならない。
読了時間計算機の作り方
特定のDIV要素内の文字数をJAVASCRIPTで取得して、200～500文字あたり1分で読めると仮定し、その旨を表示します。例えば2000文字なら、分間400字読めるとして、5分で読了する計算です。ただし、カッコや句読点などの記号は、文字数から省くようにしています。
ソースコード
<div id="count_disp">
<!–ここに読了時間を表示 –>
</div>
<div id="count_body">
<!–count_bodyの要素内の文字数を計算する –>
</div>
function CountON(){
let element = document.getElementById(‘count_body’);
let element_txt = element.innerText.replace(/\s+/g,”).length;
console.log(“ze-no:TxtCounter”,element_txt);
let cnt_Time = Math.ceil(element_txt / 500);
let element_in = document.getElementById(‘count_disp’);
element_in.innerText =”この記事は、およそ[“+cnt_Time+”]分で読めます”;
}
まとめ
文字数をカウントして、自動で読了予想時間を表示するツールの紹介でした。参考になれば幸いです。
目次-Index-
