posted by bon at 2011.10.07 02:02:56
Comment(0) | 日記 | このブログの読者になる | 更新情報をチェックする

こんばんは。

さて今日はこんな記事を見て発狂したというお話。

IDEA*IDEA-たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法
http://www.ideaxidea.com/archives/2010/07/reading_estimates.html


なん・・・・だと・・・・??
これは実践の価値があるじゃないかどうなんだコラと思ったので、早速調べてみました。

すると、上記記事が書かれた当初はまだphpで自炊だったみたいですけど、
どうも最近ではWordpressのプラグインになってて比較的誰でも導入可能になっているようです。
実際検索すると結構引っかかりました。

でも普通のブログサービスでphp使えるところってなかなかないわけで、出来ればJavaScriptでこのくらいできないの?と思ってググったら、
やっぱり出てきました。

1.smashmedia−ブログに目安の読了時間を表示
 http://smashmedia.jp/blog/2010/08/003494.html
2.記事を読む所要時間を表示すると、ブログの再訪問率まで上がるらしい
 http://ameblo.jp/meat18-sub/entry-10618530825.html


1つめの方は比較的簡単なんですけど、丸パクリは良くないですしご本人様もそんなに自信が無いようなので、あえて紹介しませんw
それに、このスクリプト、headタグ直下に書くとうまく文章量をカウントしてくれないので、ある意味使い方に制限がある方法でした。
(すんません認識不足で嘘言ってるかもです)

2つめのほうはjQueryを使ったJavaScriptで、これは使えそうだなーと思ったんですけど、
何気にアメーバブログ専用にカスタマイズしてあるらしく、その仕様がアメブロ使ってない私にはいまいちわからんので正直どこをどういじればいいか謎でした。
しかも元ネタになった記事のほうが汎用性が高いらしいとうことは分かったものの、元記事はNot foundという状況…

とはいえいちから作り直すのは面倒だしスキルが足りてない。。。
しかたないので2のほうのjQueryをベースにしつつ、Seesaaブログで所要時間表示を実現するために苦手なJavaScriptを読み解くことにしたのです。


ちゅーことでJavaScriptの解説は面倒なんで結果だけ。
jQueryがどんなことやってるのか完全に把握出来なかったしなんかややこしい作りだなーと感じつつも、先にも述べたように一から作り直すスキルはないので、最終的には方法1と方法2の合体技にしてみました。

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
jQuery(function(){
var numCharsPerSecond = 9;//1秒間に何文字読めるか
var ImgViewTime = 3;//画像1枚あたり観るのに何秒かかるか
jQuery(".blogbody").each(function(){
jQuery(this).append('<p class="readtime"></p><div class="scp" style="display:none;"></div>');
jQuery(".scp",jQuery(this)).eq(0).get(0).innerHTML=jQuery(this).get(0).innerHTML;
var il=0;
jQuery("img",jQuery(this)).each(function (){if(jQuery(this).width()>100 && jQuery(this).height()>100){il++}
});
jQuery("#advertising2",jQuery(".scp",jQuery(this)).eq(0)).before("articleends");
var rt=((il*ImgViewTime)+(jQuery(".scp",jQuery(this)).eq(0).text().replace(/\s/g,"").split("articleends")[0].length/numCharsPerSecond));
jQuery(".scp",jQuery(this)).eq(0).remove();
var readtime = document.getElementById('readtime');
readtime.innerHTML =rt>10?"この記事を読むのにかかる時間は"+String((rt/60)|0)+"分"+String((((rt%60)/10)|0)*10)+"秒くらいです。":"この記事を読むのにかかる時間は10秒以内です。";
});
});
</script>



jQueryはGoogleのプラグインを直リンクで呼び出してます。Google Analytics使うんだったらこれでいいと思うんです。
使い方は以下。

1.HTML編集
 Seesaaブログの デザイン > HTMLより、「HTMLの追加」とかで作ったカスタマイズ用のHTMLを開き、
 </head> の直前に上記コードをコピペする。

2.コンテンツのHTMLを変更
 デザイン > コンテンツ > 記事 を選択し、右上にある「コンテンツHTML編集」をクリックする。
 んで、< % if:page_name eq 'article' -% > の直下に以下のコードをコピペする。
 
<p id="readtime"></p>

 
3.更新する
 うまく変更が反映されないことがあるので、設定 > ブログ設定 へ移動し、
 「最新の情報に更新」の右にあるボタン「実行」をクリックしてブログの状態を最新に更新する。

ちなみにこのスクリプトは「個別記事限定」なので、そこんとこ注意してくだしあ。



Comments
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

TOP
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。