滞在時間は本当に上がるの？読了までの所要時間を予測して表示するカスタマイズ

こんにちは、つばさ（@tsubasa123）です。

www.ideaxidea.com

ちょっと古いですがこちらの記事にインスパイアされたカスタマイズです。

もうあるけど自分で作ろう
このカスタマイズの目的
1. 短い記事は最後まで読んでもらいやすくなる
2. 長い記事はブックマークされやすくなる
機能説明
1. カウントされないもの
カスタマイズ手順
想定している利用者
把握している課題
さいごに
関連記事

もうあるけど自分で作ろう

記事を読むのにかかる時間の目安を記事のボリュームから表示するだけなんですがこれだけで

滞在時間が13.8%向上
SNSへの登録が67%向上

ってすごいですよね。これはやるしかない。でもほんとかな？

いつもカスタマイズの相談にのっていただいていているポジ熊さんにも話を聞いていただいたところ、有用なカスタマイズだと言っていただけたのでちょっと試してみることに。

作る前に検索してみたところ、やはりすでに同じようなカスタマイズを行った方が何名かいらっしゃいました。わざわざ自分で作る必要もないのですが、まぁ、これも経験かなと。せっかくなんで記事にしたかったですし。

hapilaki.hateblo.jp

プラグイン化されてる方もいたので、はてなブログ以外の方はこちらを参考にされるとよいと思います。私もライセンス表記書こうかな。

はてなブログ初のカスタマイズを作るのはなかなか難しいですね。もうちょっと早い時期に参入していれば今よりはチャンスはあったかのかも。もうアイデアが浮かびません。次はページャでも作ってみようかな。できるかわかりませんが。

このカスタマイズの目的

元記事を読むのがめんどくさい人のために、このカスタマイズの趣旨をご説明。大きく分けて2つの効果が期待できると考えています。

短い記事は最後まで読んでもらいやすくなる

「この記事は約2分で読めます」と冒頭に記載されていれば、じゃあちょっと読んでみようなって気になる人、結構いると思います。

特に都会住まいの方など、電車やバスでの待ち時間とか短い移動時間とかにスマホを利用してブログを閲覧したりするケースが多いはず。そんな移動時間に「約2分」というのはうってつけですね。

最後まで読んでもらえて、さらにその記事がおもしろい記事だと思ってもらえたらそのままSNSに拡散してくれたり新しい読者になってくれたりもします。やったね！そのための導線はちゃんと用意しておきましょう。

長い記事はブックマークされやすくなる

短い記事とは反対に、長文だとわかる記事は「後で読む」というブックマークがつきやすくなるかなと思います。

時間がある人はその場で読んでくれますが、例えば6000文字越えの長い記事なら「この記事は約15分で読めます」と表示されます。ちょっと重いです。なので時間がない人は、今は読めないからとりあえずブックマークして後で読もうなるんじゃないでしょうか。

直帰率上がるかもね。

読んでいる途中で時間切れになった場合、ブックマークせずにそのまま閉じてしまう可能性があります。時間切れですから。急いでますからね。そうするとその記事を再読してくれる可能性はあまり高くないでしょう。

ブックマークしてくれていれば時間が取れたときに思い出して読まれたり、ブクマを整理しているときに気づいてもらえて読まれたりと、再読の可能性がアップします。やったね！

機能説明

ブログの記事中に表示されている文字数をカウント、1分あたりに読める文字数を400文字（原稿用紙1枚分ですね）として記事の読了にかかる時間を算出しています。分単位表記で繰り上げ計算となっています。

600文字なら「約2分」、1280文字なら「約4分」といった形で表示されます。

秒まで出してもよかったんですが、読者はそこまで気にしないだろうなというところと、あくまで「アバウトな目安」として使っていただければというところです。

記事の内容が難しいものは読むのに時間がかかりますし、当然ですが読む人によっても速度に差がありますので、あくまでも目安として時間を表示させるものだと思ってご利用いただきたいです。

カウントされないもの

画像へのURL、埋め込んだTweetの中の文字、埋め込んだ動画の説明、埋め込んだURL（ブログカードとか）の説明などは文字数としてカウントされません。

ただし、埋め込みURLでもリンクテキスト（HTML的にはとの間のテキスト）はカウントします。

あと空白もカウントされません。

カスタマイズ手順

今回のカスタマイズはHTMLとCSS、JavaScriptとそれぞれに設定が必要です。デザインについてはそこまでこだわっていませんので、導入していただける際にはご自身で調整してください。

HTMLの追記

<div id="estimated-area"></div>

上記のタグ1行を任意の記事の上、もしくは任意の場所に追記してください。記事の上に配置されることを想定していますが、記事中であれば基本的にはどこでも動作するはずです。

CSSの追記

/*記事所要時間*/
#estimated-area {
color: #888;
font-size: 12px;
}
#estimated-area span {
font-size: 16px;
font-weight: bold;
padding: 0 3px;
}

上記のコードをデザインCSSに追記してください。

JavaScriptの追記

<script>
(function() {
$(function() {
var contents = '';
var regSpace = /^\s*$/;
var ignoreNodeType = ['SCRIPT', 'PRE'];
$('.entry-content').contents().each(function() {
var s = $(this).text().replace(/\r?\n/g, '');
if (regSpace.test(s)) return;
if (s === '<!-- more -->') return;
if ($.inArray(this.nodeName, ignoreNodeType) !== -1) return;
s = s.replace(/\s/g, '');
contents +=  s;
});
$('#estimated-area').append('この記事は約<span>' + Math.ceil(contents.length / 400) + '<\/span>分で読めます');
});
})();
</script>

上記のコードを記事の下に追記してください。jQueryを利用していますので、まだjQueryを導入していない場合は、

<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->

このようなコードを先に追加してください。

想定している利用者

基本的には編集モードで「見たままモード」を利用している方を想定していますが、その他のモードでも特殊な使い方をしていなければ正常に動作するかと思います。

はてなブログではモードによっては直接HTMLタグを入力することができるため、私のように記事中に直接JavaScriptコードを入力して遊んだり、独自のスタイルを適用するために無茶をする方もいらっしゃいます。

そのような記事では文字数のカウントが正常に動作しない可能性がありますのでご了承ください。実行速度をあまり落としたくないため、内部まで厳密に走査するような処理は省略しました。スキル不足もまぁ認めます。

把握している課題

はてなブログではそこまで数は多くないかもしれませんが、表示しているソースコードはカウントしないようにしています。私のようにソースコードをペタペタと貼り付けていると文字数が多くなってしまうので、無駄に長い時間がかかる記事だと思われるのを避けるためにこのようにしました。

ソースコード自体を読む人がどの程度いるのか、そのソースコードは読まれたいのか、それともコピペで使われたいので読まれる必要はないのか、などなど、目的によってカウントの必要性が変わってきます。とりあえずはカウントしない方向で落ち着かせましたが、導入いただけましたらカウントの有無についてご意見をいただけると嬉しいです。

それと、記事中に挿入する広告のコードへの対応率がまだまだ低い（広告のプログラムもカウントしちゃうかも）状況です。私自身がまだ広告を貼っていないため、正直なところあまりテストを行っておりません。こちらもお気づきの点がありましたらご連絡をいただけると助かります。対応を検討します。