AWESOME LINUX WORLD

Linux 成分多めの技術系ブログ

読了時間を表示させる

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

以下、メモ

■ 設定方法

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

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>

■ 実際の画面

試しに直近のブログを表示させてみます (オレンジ枠の部分です)。

f:id:Kernel_OGSun:20200902195338p:plain