UXエンジニアになりたい人のブログ

エッチだってしたのにふざけんなよ!

はてなブログでの「所要時間の目安表記」の自動化

下記の記事に対する補足です。もろもろの問題は解決しないけど、簡単にできなくはないよ、という。 まあ2個目の記事にあるように先越されてるんですけどw

はてなブログで「所要時間の目安表記」の自動化を検討してみたが・・・ - operationservicebuの日記はてなブログで「所要時間の目安表記」の自動化を検討してみたが・・・ - operationservicebuの日記
JavaScriptで記事本文の読了予測時間を自動で表示するjQueryプラグインを自作した - はぴらき合理化幻想JavaScriptで記事本文の読了予測時間を自動で表示するjQueryプラグインを自作した - はぴらき合理化幻想

 

設定方法とイメージ図

ダッシュボード→デザイン→カスタマイズ→記事上下のカスタマイズ→「記事ページのプレビュー」を設→記事上*1

 <script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var length = $('div.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var elem = '<p style="font-size: 80%; color: #aaa; text-align: right;">この記事は約' + Math.ceil(length/400) + '分で読めます(1分400字換算)</p>';
$('div.entry-content').prepend(elem);
}, false);
// ]]></script>

 

設定結果のイメージ

f:id:uxlayman:20140914085928p:plain

こんな感じになります。(右上のグレーの文字ね)

 

 

欠点

元記事でオペさんが指摘していた欠点はそのまま残ってしまいます。

  1. Google検索で引っかかったとき表示されない
  2. javascriptオフにしてると表示されない
  3. feedlyなどrss経由で流入してくる人に表示されない
  4. ブログトップページの記事一覧で表示されない

1は最近のGoogle様はjavascriptで生成されるコンテンツの中身もみれるとのことなので、もしかしたらいけるかも?

4はわりと致命的ですね。トップページには「続きを読む」の前までしか文面がないので、全文の記事数をとってくるにはajaxバリバリでやらにゃあかんのです。15行くらいになるかな?

元記事にもある通り、はてなが文字数を変数化してくれるとよいですねえ。

 

 

ちなみに、私自身は所要時間の目安表記をやる気はないです。

だってそんなの出したら時間だけみてUターンする人が増えるだけじゃないですか。時間をみて「お、長そうな記事だから後でじっくり読んであげよう」なんてそんな奇特な人がいるわけないw

 

おまけ

分数の切り捨て/切り上げとか、文字数から空白や改行を除去するとかの設定があるのですが、めんどくさいので↓を作ってみました。

30分くらいでサクっとできると思いきやハマって、結局説明した方が早かったのでもうこういうのはやらないw

 

1分あたりの文字数:

分数小数点以下の丸め:

文言:

スタイル:

 

結果(コピペ用):

プレビュー(1234文字相当):

 

*1:まあ記事下でも結局記事開始直下にprependするんですが