JavaScript

読了時間を計算する文字数カウンター

POSTED: 5月 3rd, 2024
UPDATE: 6月 18th, 2024
目次-Index-
  • 目次の一つ目
  • 目次の二つ目
    • TEST:HEAD
  • 目次の三つ目

文字カウンター

BLOGを読んでいると、「この記事はおよそ3分で読めます」といった文言を見かけます。読了までの所要時間を伝えることに、ユーザーにメリットがあり、離脱を防ぐなどの効果があるようです。

これは自身で「だいたい、これ位かな」と考える場合もありますし、オンライン上のツールで計測することもできます。しかし、記事を投稿するたびに手数が発生するので、面倒かもしれません。そこで、JavaScriptでプログラムを組んでおくと、タグを挿入しておけば自動ですべて処理してくれるので、おすすめです。

文字数カウントのサンプル

下記の憲法第七章の引用文の文字数をカウントし、読了目安を表示します。

この文章はおよそ〇分で読めます。

第七章 財政

第八十三条 国の財政を処理する権限は、国会の議決に基いて、これを行使しなければならない。

第八十四条 あらたに租税を課し、又は現行の租税を変更するには、法律又は法律の定める条件によることを必要とする。

第八十五条 国費を支出し、又は国が債務を負担するには、国会の議決に基くことを必要とする。

第八十六条 内閣は、毎会計年度の予算を作成し、国会に提出して、その審議を受け議決を経なければならない。

第八十七条 予見し難い予算の不足に充てるため、国会の議決に基いて予備費を設け、内閣の責任でこれを支出することができる。

② すべて予備費の支出については、内閣は、事後に国会の承諾を得なければならない。

第八十八条 すべて皇室財産は、国に属する。すべて皇室の費用は、予算に計上して国会の議決を経なければならない。

第八十九条 公金その他の公の財産は、宗教上の組織若しくは団体の使用、便益若しくは維持のため、又は公の支配に属しない慈善、教育若しくは博愛の事業に対し、これを支出し、又はその利用に供してはならない。

第九十条 国の収入支出の決算は、すべて毎年会計検査院がこれを検査し、内閣は、次の年度に、その検査報告とともに、これを国会に提出しなければならない。

② 会計検査院の組織及び権限は、法律でこれを定める。

第九十一条 内閣は、国会及び国民に対し、定期に、少くとも毎年一回、国の財政状況について報告しなければならない。

読了時間計算機の作り方

特定のDIV要素内の文字数をJAVASCRIPTで取得して、200~500文字あたり1分で読めると仮定し、その旨を表示します。例えば2000文字なら、分間400字読めるとして、5分で読了する計算です。ただし、カッコや句読点などの記号は、文字数から省くようにしています。

ソースコード

HTML

<div id="count_disp">
<!–ここに読了時間を表示 –>
</div>

<div id="count_body">
<!–count_bodyの要素内の文字数を計算する –>
</div>
JavaScript
//ze-no:WebDevelopment
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+”]分で読めます”;
}

まとめ

文字数をカウントして、自動で読了予想時間を表示するツールの紹介でした。参考になれば幸いです。

全国対応の”Design+Cording”によるWEB制作Studio
About Service HOMEFAQ CONTACTS

(c)Ze-No 2024