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

前の関連記事：Blogger：ページビュー設定(6)iOS Safari:Blogger管理画面での設定は不要

各ブラウザで方法が違うのは結構面倒ですので、どのブラウザでも同じ方法で、しかも簡単にできる方法を考えてみました。
(2018.1.16追記。このページで使ったスクリプトはBlogger：ページビュー設定(9)myPageView_Bloggerモジュールの作成に置き換えました。)

ChromeとSleipnir4はCookie _ns=2さえ設定すればあとは自動的に設定される

これでよいはずです。有効期限は2030年に設定しています。

Cookieの削除は有効期限を過去の日付に設定すればできます。

これをどのブラウザでも実行できるようにするためにはこれをリンクに設定したページを作成すればよいわけです。

自分のページビューの設定のリンクを置いたページを作る

まずCookieを設定するリンクを置いたページを作ります。

Blogger：レイアウト編集(3)普通のウェブページを作成で「ページビュー設定」のページを作ります。


管理画面→ページ→新しいページ→空白のページ。

ページタイトルは自動的に設定されてしまいますが、あとでファイル名をパスワードに使うのでまずは英数字のタイトルで公開してファイル名を決めといた方がよいかもしれません。

公開後は下書きに戻さなければタイトルを変更してもファイル名は変わらないはずです。

HMTLモードにして以下のコードを入力します。(改行タグ<br/>をdocument.writeの("")内に書くと表示されずに改行されてしまうので記載していません。適当に追加してください。)Blogger:SyntaxHighlighter(5)Configurationを設定するで解決。

投稿編集画面を開くたびに<h3>タグの後ろに改行が自動的に挿入されてScriptが動かなくなるので"+"でわざわざ分割しています。

<script>
var domein=location.hostname;
var domein_TLD_nashi=domein.slice(0,domein.lastIndexOf(".")+1);
//if(document.referrer.match("http://"+domein_TLD_nashi)){
 if(navigator.cookieEnabled){
   if(document.cookie.match("_ns=2")){
      document.write("<h3"+">この"+domein+"はページビューを追跡していません。</h3"+"><br/>");
      document.write("<a href=\'javascript:document.cookie=\"_ns=2;expires=Sun, 09 Aug 2000 11:53:58 GMT;domain=."+domein+";path=/;\";location.reload();\'>自分のページビューを追跡に変更する</a><br/>");
      document.write("<span style=\'color: #cccccc;\'>自分のページビューを追跡しないに変更する。</span><br/>");
   }else{
      document.write("<h3"+">この"+domein+"はページビューを追跡しています</h3"+"><br/>");
      document.write("<span style=\'color: #cccccc;\'>自分のページビューを追跡に変更する</span><br/>");
      document.write("<a href=\'javascript:document.cookie=\"_ns=2;expires=Sun, 09 Aug 2030 11:53:58 GMT;domain=."+domein+";path=/;\";location.reload();\'>自分のページビューを追跡しないに変更する。</a><br/>");
   }
   if(domein.match(/.com$/)){
      document.write("<a href=\'"+document.URL.replace(".com",".jp")+"\'>"+domein_TLD_nashi+"jpも設定する</a>");
   }else{
      document.write("<a href=\'"+document.URL.replace(".jp",".com/ncr")+"\'>"+domein_TLD_nashi+"comも設定する</a>");
   }
 }else{
   document.write("cookieが使用できません。");
 }
//}else{
// location.href="http://"+domein;
//}
</script>

検索画面などから直接アクセスされてもトップページに誘導するようにまずdocument.referrerに自分のBloggerのドメイン名が含まれているのかをチェックするコードを入れていますが、それに関する部分は上記では「//」でコメントアウトにしています。

.jpと.com両方からアクセスできるようにこれらを削ったドメイン名でreferrer内を比較しています。

referrer内にドメイン名がなければ、location.href="http://"+domein;を実行してトップページに誘導しています。

if(document.referrer.match("http://"+domein_TLD_nashi)){

これらを有効にするには行頭の「//」を全て削除します。

document.cookieでCookieが全て取得できますがそのなかに"_ns=2"があるかないかで、ページビューを追跡していないのか、いるのかを判断しています。

if(document.cookie.match("_ns=2")){

_ns=2があるときは「自分のページビューを追跡しない」に設定されているということなので

document.write("<a href=\'javascript:document.cookie=\"_ns=2;expires=Sun, 09 Aug 2000 11:53:58 GMT;domain=."+domein+";path=/;\";location.reload();\'>自分のページビューを追跡に変更する</a>");

で、_ns=2の有効期限を2000年に設定してCookieを消去して、その後ページをリロードするリンクを表示させています。

_ns=2がないときは2030年の有効期限の_ns=2のCookieを設定するリンクを表示させます。

document.write("<a href=\'javascript:document.cookie=\"_ns=2;expires=Sun, 09 Aug 2030 11:53:58 GMT;domain=."+domein+";path=/;\";location.reload();\'>自分のページビューを追跡しないに変更する。</a>");

最後にcomとjpドメインを行き来できるリンクも表示させています。


適当に<br/>を入れるとこんな感じに表示されます。

自分のページビューの設定のリンクを置いたページを簡易隠しページにする

自分のページビューの設定は管理者以外には関係のない設定なので隠しページにします。

Bloggerでは検索対象をページごとに設定できないので特定のページからアクセスした場合のみページを表示するを使って先ほど自分のドメインからしかアクセスできないように設定しましたね。
今度はこのページへのリンクをどこにおくかを考えないといけません。

パスワード入力で秘密のページへ－JavaScript入門に2番目に載っている隠しページのファイル名自体をパスワードにするという方法を使います。
先ほど作ったページのアドレスは.blogspot.jp/p/blog-page_481.htmlとなっていました。

ということでこの481をパスワードにすることにします。

HTML/JavaScriptガジェットのなかに書き込む場合は以下をそのまま書き込めます。

<a href='javascript:location.href ="http://"+location.hostname+"/p/blog-page_"+prompt("パスワードを入力してください。","")+".html";'>.</a>

ピリオド「.」をクリックするとパスワード入力画面が出現します。

パスワードが間違っていると「このブログ内でお探しのページは存在しません。」と表示されます。

テンプレートHTMLに直接書き込む場合はHTMLエンコードしないといけません。

HTML EnCoder | Widget Generatorsで変換してくれます。

<a href='javascript:location.href =location.hostname+"/p/blog-page_"+prompt("パスワードを入力してください。","")+".html";'>.</a>

これをテンプレートHTMLに貼り付けます。

これらの方法は単にそのページに簡単にアクセスしてほしくない、といった程度の隠しページになります。

Blogger:JSONPを使ってJSON形式でブログの情報を引き出すにあるようにBloggerにあるページは読者を限定していない限り、全てフィード情報で内容が漏れていますので、秘密のページにはならないです。

IE8ではJavaScriptのpromptの動作にはセキュリティの設定が必要

IE8ではJavaScriptのpromptは標準では無視するように設定されているようです。

IE8の方の設定を変更します。メニュー→ツール→インターネットオプション。


セキュリティ→レベルのカスタマイズ。


「スクリプト化されたウィンドウを使って情報の入力を求めることをWebサイトに許可する」を「無効にする」から「有効にする」に変更。


あとはOKボタンを押してダイアログを閉じてIE8を再起動するとpromptが動くようになります。

IE8では入力ダイアログと組み合わせるとdocument.referrerが空になる

もうわざわざIE8の対応を考えるが嫌になってきますね。

WindowsXPでもIE10にアップデートできるようにしてほしいです。

そもそもBloggerの投稿編集画面の作成モードはIE8ではちゃんと動きませんね。

IE8だとpromptと組み合わせた入力だと直接アクセスと思われるのかdocument.referrerが空っぽになっています。

javascript:location.href ="http://"+location.hostname+"/p/blog-page_"+prompt("パスワードを入力してください。","")+".html";

変数に一旦いれてもダメですね。

javascript:pw=prompt("パスワードを入力してください。","");location.href ="http://"+location.hostname+"/p/blog-page_"+pw+".html";

結局IE8かどうかの判定をしてIE8であればもう一度パスワードを入れてもらうようにしました。

<script>
var domein=location.hostname;//ドメイン名を取得
var domein_TLD_nashi=domein.slice(0,domein.lastIndexOf(".")+1);//トップレベルドメインを削除
if(typeof window.getSelection === "function"){
 if(document.referrer.match("http://"+domein_TLD_nashi)){
   Jibun();
 }else{
   location.href="http://"+domein;
 }
}else{
 var pw=prompt("パスワードを入力してください\u3002","");
 if(pw==domein_TLD_nashi){
  Jibun();
 }else{
  location.href="http://"+domein;
 }
}
function Jibun(){
 if(navigator.cookieEnabled){
   if(document.cookie.match("_ns=2")){
      document.write("<h3"+">この"+domein+"はページビューを追跡していません。</h3"+"><br/>");
      document.write("<a href=\'javascript:document.cookie=\"_ns=2;expires=Sun, 09 Aug 2000 11:53:58 GMT;domain=."+domein+";path=/;\";location.reload();\'>自分のページビューを追跡に変更する</a><br/>");
      document.write("<span style=\'color: #cccccc;\'>自分のページビューを追跡しないに変更する。</span><br/>");
   }else{
      document.write("<h3"+">この"+domein+"はページビューを追跡しています</h3"+"<br/>>");
      document.write("<span style=\'color: #cccccc;\'>自分のページビューを追跡に変更する</span><br/>");
      document.write("<a href=\'javascript:document.cookie=\"_ns=2;expires=Sun, 09 Aug 2030 11:53:58 GMT;domain=."+domein+";path=/;\";location.reload();\'>自分のページビューを追跡しないに変更する。</a><br/>");
   }
   if(domein.match(/.com$/)){
      document.write("<a href=\'"+document.URL.replace(".com",".jp")+"\'>"+domein_TLD_nashi+"jpも設定する</a>");
   }else{
      document.write("<a href=\'"+document.URL.replace(".jp",".com/ncr")+"\'>"+domein_TLD_nashi+"comも設定する</a>");
   }
 }else{
   document.write("cookieが使用できません。");
 }
}
</script>

if(typeof window.getSelection === "function"){

この4行目でIE8かどうかの判断をしています。

windows.getSelection関数がIE8にはないことを利用しています。

パスワードは12行目で設定してます。丸見えですけど。

 if(pw==domein_TLD_nashi){

思ったより手こずりました。

Chrome、Sleipnir4、Firefox、IE10、IE8、iOS Safariで動作確認しました。

IE8では.comで_ns=2が設定されているのにBloggerの設定画面では「自分のページビューを追跡する」が選択されています、、、というか「追跡しない」で保存しても「追跡する」になってしまいますね。

_ns=2は設定されていてカウントもされていないようなのでおかしいと思ったらCookieの受け入れ設定をしていませんでした。

Internet Explorer 8（Windows版）　Cookieを受け入れる設定方法：BIGLOBE会員サポートをみて設定すると保存されるようになりました。

参考にしたサイト

とほほのCookie入門
最長で2030年頃の有効期限が無難だそうです。

Cookie(クッキー)の届く範囲 (あいまいモード)
Cookieの設定にはdomainの設定項目がありますが実際は他のドメインには設定不可のようです。

パスワード入力で秘密のページへ－JavaScript入門
いい方法だと思い利用させていただきました。

特定のページからアクセスした場合のみページを表示する
パスワード入力と組み合わせて利用します。IE8では使えませんでした。

ロケーション（Location）
JavaScriptのLocationの使い方の説明

文字列（String）
文字列操作の関数について解説されています。

正規表現による検索－JavaScript入門
こんな便利な方法があるのですね。

正規表現（RegExp）
詳細な解説。

HTML EnCoder | Widget Generators
テンプレートHTMLにJavaScriptを書き込むときの変換ツール。

javascript - prompt() with Internet Explorer 8 - Stack Overflow
IE8でJavaScriptのpromptを有効にする方法。

特殊な文字の入力(エスケープシーケンス) - JavaScriptのデータ型 - JavaScript入門
JavaScriptのpromptやalertで特殊文字の入力方法。

IE 9/10 未満のブラウザとそれ以外を判定する - メモ用紙
typeof window.getSelection === "function"のtrue/false判定が一番スマートだと思いました。

JavaScript window getSelection
IE9にはあってIE8にはない関数

javascriptでel === windowのようなイコール３つはどういう意味ですか？ - Yahoo!知恵袋
「===」はデータ型も一致という意味でした。

Internet Explorer 8（Windows版）　Cookieを受け入れる設定方法：BIGLOBE会員サポート
IE8ではデフォルトではBloggerのページビュー設定が保存されません。

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