5K note

仙台在住Webデザイナーの日々の備忘録

ブログ記事に読了時間を入れるスクリプトを作ってみた

タイトルの通り。業務で携わってるサイトの中に「このページは〇分で読めます」的なものをjQueryで作成したので、そのコードを紹介しようと思います。

なぜ読了時間を入れたのか?

たまたまネットサーフィンしていたらこんな記事を発見。(だいぶ古い記事ですが。。)

たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法・・・

なんか読了時間を入れるとユーザー離脱が減ったり、SNS活用が増えたりするらしいので、入れてみることにしました。

参考サイト

コードは下記のサイトを参考に作成しています。

コピペでOK!はてなブログで記事の読了時間の目安を表示させてみた!

当初はほぼそのまま使用していたのですが、社内のフロントエンジニアに見せたら「これはこう書いた方が良いんじゃないかな」と言われて書き直したのが現在のコードになります。

実装するソースコード

コードは下記の通り。jQueryを読み込んでいるページで下記のコードを記述することで、Webページの読み込みが完了した時に読了時間が表示されます。「.MainText」の所は導入するサイト、ブログの形式に合わせて書き換えてください。

//ページの読み込み完了後に作動
$(window).on('load' ,function(){
    //一分間の読書量を500文字として計算
    var count = 500;
    //「.MainText」内のテキストを抽出し、文字の総数をカウント
    var $length = $('.MainText').text().trim().replace(/[\n\r]/g,'').length;
    //文字総数から一分間の読書量を割り算し、かかる時間を算出
    var min = Math.floor($length / count);
    //読了時間を表示(1分より少ない場合は1分以内として表示)
    var countTime = (min === 0) ? '1分以内' : '約'+ min +'分';
    //読了時間をHTMLタグで作成
    var text = '<p class="countTime">この記事は<span class="countTime-m">' + countTime + '</span>で読み終わります。</p>';
    //「.MainText」の直前に読了時間のタグを挿入
    $('.MainText').before(text);
});

まとめ

現在扱ってるサイトでは改修前後の数週間のアクセスログから、改修の良し悪しを判断しているので、結果がわかったらこの記事にも結果を掲載してみようかと思います。

そして結果がよければうちのブログにも導入してみようかとw