読了時間を表示させる

本ブログに読了時間を表示させる機能を加えました。

以下、メモ

■ 設定方法
■ コード改変
■ 実際の画面

■ 設定方法

次のブログを参考に設定。

randamlife.hatenablog.com

■ コード改変

次のように自分好みに修正 (コードはあまり整備していないので、少し汚い...)。

1時間を超える場合、〇〇分ではなく、〇時間〇分となるように修正。
cpm (1分あたりに読める文字数。造語) は 600 想定。実際に自分で自分のブログを対象に測定したところ 900 でしたが、日本人平均は 400 - 600 のようでしたので、600 にしました。
その他、色々修正 (時間部分を太字、文字色変更など)

<script type="text/javascript">

addEventListener('DOMContentLoaded', function() {

const cpm = 600;
const length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
const one_hour = 60;
const calc_reading_time = length / cpm; 
let msg = '';

if (calc_reading_time < one_hour ) {
    const minute = Math.ceil(calc_reading_time);
    msg = '<p style="font-size: 90%; color: #999999; text-align: right;">この記事は約' + '<b style="color: #4682b4;"> ' + minute + ' 分</b>で読めます。</p>';
} else {
    const hour = Math.floor(calc_reading_time / one_hour);
    const minute = Math.ceil(calc_reading_time % one_hour);
    msg = '<p style="font-size: 90%; color: #999999; text-align: right;">この記事は約' + '<b style="color: #4682b4;"> ' + hour + ' 時間 ' + minute + ' 分</b>で読めます。</p>';
}

$('.entry-content').prepend(msg);

}, false);

</script>