Blogger：ページビュー設定(8)jQueryで「自分のページビューを追跡しない」設定ページをスマートに

前の関連記事：Blogger：ページビュー設定(7)どのブラウザでも同じ方法で設定するページを作る

前回「自分のページビューを追跡しない」を設定するページを作成しましたが更新のたびにページをリロードしていました。jQueryで書き直してもっとスマートに動くようにしました。

jquery-cookie.jsは全てのjQueryコードの最後に組み込みましょう

jQueryではjquery-cookie.jsを組み込むと簡単にcookieが読み書きできるようになります。

carhartl/jquery-cookie · GitHubからjquery-cookie.jsをダウンロードして以下のコードを埋め込むだけです。

<script language='javascript' src='jquery.cookie.jsのURL' type='text/javascript'/>

jquery.min.jsより後ならどこに埋め込んでもよいと思ったらそれが大間違いでした。

全然動かないのでChromeの「要素を検証」→Sources、で左上の矢印ボタンからナビゲーターを表示してページのソースを見てみると以下のエラーがでています。


原因が全く思い当たらなくて解決に四苦八苦しました。

ようやくjQueryのcookie.js で $.cookie is not a function エラー | 開発業務日誌にめぐり合い解決しました。

jquery-cookie.jsは全てのjQueryコードの最後に読み込まないと上記のエラーがでるようです。

このサイトではSyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法で</body>の直前でjQueryを使っています。

そのためにjquery-cookie.jsは</body>の上行で読み込むようにしました。

それでようやく$.cookie()でエラーがでなくなりました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQueryで書き直したコード

Blogger：ページビュー設定(7)どのブラウザでも同じ方法で設定するページを作ると同じようにして静的ページのHTMLモードに以下のコードを貼り付けて使います。

<script>
var domein=location.hostname;//ドメイン名を取得
//if(document.referrer.match("http://"+domein.slice(0,domein.lastIndexOf(".")+1))){//同じドメインからきたとき
  var tuiseki="<h3"+">この"+domein+"はページビューを追跡していません。</h3"+"><br/><a href=\"javascript:saihyoji();\">自分のページビューを追跡に変更する</a><br/><span style=\'color: #cccccc;\'>自分のページビューを追跡しないに変更する。</span><br/><br/>";//追跡に変更するリンクを表示
  var futuiseki="<h3"+">この"+domein+"はページビューを追跡しています。</h3"+"><br/><span style=\'color: #cccccc;\'>自分のページビューを追跡に変更する</span><br/><a href=\"javascript:saihyoji();\">自分のページビューを追跡しないに変更する。</a><br/><br/>";//不追跡に変更するリンクを表示
  var nisu;//Cookieの有効期間日数
  var cookie_atai;//cookie _nsの値
  $(function(){
    hyoji();
    var domein2=(domein.match(/.com$/))?domein.replace(".com",".jp"):domein.replace(".jp",".com");//ドメイン名　jpとcom入れ換え
    var URL2=(domein.match(/.com$/))?document.URL.replace(".com",".jp"):document.URL.replace(".jp",".com/ncr");//URL　jpとcom入れ換え
    $("#pagebyu_jump").html("<a href=\'"+URL2+"\'>"+domein2+"も設定する</a>" );
  })
  function hyoji() {
    $("#pagebyu").html(($.cookie('_ns')=="2")?tuiseki:futuiseki); //選択肢を表示
  }
  function saihyoji() {
    cookie_atai = $.cookie('_ns');//Cookie _nsの値を取得
    nisu=(cookie_atai=="2")?-1:3650;//Cookieの期限を過去にするか10年後にするか。
    $.cookie('_ns', 2, { expires: nisu, path: '/', domain: "."+domein });//Cookieを設定
    ($.cookie('_ns')==cookie_atai)?$("#pagebyu").html("Cookieを変更できませんでした。"):hyoji();//選択肢を更新
  }
//}else{
//  location.href="http://"+domein;//他のドメインからきたときはトップページに誘導
//}
</script>
<div id="pagebyu"></div>
<div id="pagebyu_jump"></div>

referrerをチェックして検索エンジンなどでダイレクトに飛んできた場合はトップページに誘導させるコードも入れていますが上ではコメントアウトしてあります。

IE8ではreferrerがうまく入らないのでreferrerをチェックする場合はBlogger：ページビュー設定(7)どのブラウザでも同じ方法で設定するページを作るでやったような方法を考える必要があります。

jQueryにしたおかげで一瞬で「自分のページビューを追跡する」か「しない」かが設定できるようになりました。

Cookieの有効期限は10年で設定しますが、Chromeでチェックしてみると1年後ぐらいになっています。

Bloggerのシステムに書き換えられているのかもしれません。

三項演算子は初めて知りましたが結構便利ですね。

クリックしたら関数を呼ぶ部分は最初はセレクタで呼び出していましたが、一旦動作させるとページをリロードしないと再動作しなかったため直接関数を呼び出しています。

jQueryのコードは全て$(function(){　｝の中に書かないといけないと思い込んでいたため<a href=～>で関数をどう呼ぶかに頭を悩ませました。

結局$(function(){　｝はページ読み込んだときに実行させるものであって、関数は普通に書けば動くことがわかったので<a href=\"javascript:saihyoji();\">としてsaihyouji()関数を呼び出しています。

これでページをリロードしなくても追跡するかしないかの設定が繰り返せます。

参考にしたサイト

carhartl/jquery-cookie · GitHub
jquery-cookie.jsの開発元。右列のDownload Zipボタンでダンロードします。

jQueryのcookie.js で $.cookie is not a function エラー | 開発業務日誌
jquery-cookie.jsが動かない理由を教えていただきました。

jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ: 小粋空間
jquery-cookie.jsの解説です。

jQueryを高速に動作させるためのポイント５つ | 株式会社LIG
同じセレクタの変数化は関数の外の変数にすると動きませんでした。

条件演算子(三項演算子) - 演算子 - JavaScript入門
わかると便利な三項演算子

次の関連記事:Blogger：ページビュー設定(9)myPageView_Bloggerモジュールの作成