ファンブログでの404ページ表示法

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

この記事はファンブログ専用情報です。2013年3月10日、記事を大幅に書き換えました。

今ご覧いただいている、このブログで実際に使っている方法は下のやり方とは違います。このブログではappendChildという方法で「404の時だけ文章を追加」しています。下の説明は、元々書き込まれている文章の「表示・非表示の切替え」をしています。SEO的には、不要な文章がない方が望ましいですが、説明が難しくなるので簡単な方法を書いています。

今回は、ファンブログ純正のスキンを使っているブログ「八百屋勘太のおもしろ体験談」のキャプチャを使わせていただきました。
ページがある時

ファンブログのページはarchive/1から始まるので、archive/0というページは存在しません。

 <- このページは存在しない。

ファンブログだと、何も設定しない場合、存在しないページは次のように表示されます。

記事がないページ

記事がないので、その下の「HOMEへ行くナビ」や、「トラックバック」「コメント」が上に上がって表示されています。これだと、記事がないのがわかりづらいので、「記事が見つからない」というメッセージを表示するように変更します。

設定方法

まず、サイドバーに1項目追加して、次のソースをそのまま貼り付けてください。サイドバーに項目を追加する方法がわからなければ、別記事「モジュールの設置方法」を参照してください。

<div id="message404" style="display:none;">
<h2 class="entryTitle">ご指定のページが見つかりません</h2>
<div class="entryBody">
ここに好きなメッセージを書いてください
</div>
</div>

<script type="text/javascript"><!--
if(-1==window.location.href.indexOf('profile')&&
	-1==window.location.href.indexOf('portal')&&
	!document.querySelector('.entryTitle a').innerHTML.length){

	var message=document.querySelector('#message404');
	var entries=document.querySelector('#entries');

	entries.parentNode.insertBefore(message,entries);
	entries.parentNode.removeChild(entries);

	message.id='entries';
	message.style.display='block';
}//-->
</script>

このソースの赤字と青字を好きな文章に書き換えてください。赤字がタイトル、青字が説明文です。今回はタイトルは変更せず、説明文のところで画像を使って説明しました。

完成したのは下のソースです。青字部分の場所だけ書き換えています。

<div id="message404" style="display:none;">
<h2 class="entryTitle">ご指定のページが見つかりません</h2>
<div class="entryBody">
<p style="text-align:center;">
<img alt="ページが存在しません" src="画像のURL" width="400" height="126" />
</p>
</div>
</div>

<script type="text/javascript"><!--
if(-1==window.location.href.indexOf('profile')&&
	-1==window.location.href.indexOf('portal')&&
	!document.querySelector('.entryTitle a').innerHTML.length){

	var message=document.querySelector('#message404');
	var entries=document.querySelector('#entries');

	entries.parentNode.insertBefore(message,entries);
	entries.parentNode.removeChild(entries);

	message.id='entries';
	message.style.display='block';
}
//-->
</script>

これを保存すれば、記事がないURLを指定された時に下のように表示されます。

ページがない時の表示

スクリプトの説明

初期状態では、追加したメッセージは非表示になっています。

<div id="message404" style="display:none;">
<h2 class="entryTitle">ご指定のページが見つかりません</h2>
<div class="entryBody">
<p style="text-align:center;">
<img alt="ページが存在しません" src="画像のURL" width="400" height="126" />
</p>
</div>
</div>

<script type="text/javascript"><!--

//開いているページがプロフィールでもポータルでもない場合、
//タイトルをクラス名entryTitleで探し、a タグの中身があるかを調べる
//なければ記事はない。その場合は括弧の中を実行
if(-1==window.location.href.indexOf('profile')&&
	-1==window.location.href.indexOf('portal')&&
	!document.querySelector('.entryTitle a').innerHTML.length){

	//非表示になっているメッセージを探す
	var message=document.querySelector('#message404');

	//記事の表示場所を探す
	var entries=document.querySelector('#entries');


	//本来記事が表示される場所の直前にメッセージを移動
	entries.parentNode.insertBefore(message,entries);

	//記事表示領域を削除（トラックバックやコメント欄も削除される）
	entries.parentNode.removeChild(entries);

	//メッセージのidをentriesに変更（スタイルシートを適用するため）
	message.id='entries';

	//メッセージを表示
	message.style.display='block';

}
//-->
</script>

このスクリプトを使うのは１記事ページだけなので、サイドバーではなく、1記事のスキンに書き込んでもかまいません。その場合は、スキンの最後に書いてください。entryTitleやentriesの前に書くと、それを見つけられないので正しく動きません。

今回のinsertBeforeの使い方は、少し特殊ですが、それに関しては別記事「appendChildやinsertBeforeでノードを移動させる」で詳しく説明しています。

余談ですが本来ペーがないときにはステータス404を返すのが決まりです。しかしファンブログは404ではなく200を返してきます。200というのは問題なしOKのコードです。確かに、記事がない空のページですが、ページそのものは表示されています。しかし、この場合200でいいのでしょうか？私は別のスクリプトで404が返って来れば、それ用の処理、200なら通常の処理という内容のものを書いたのですが、どうしてもうまく行かないので調べた結果404が返っていないことに気がつきました。

あんちゃんからのスパムコメント削除モジュール

あんちゃんという奴がコメント欄にスパムを書き込んできた。それも1回目ではない。（注:現在は名前を変えています。送信者URL http://fanblogs.jp/sghsk/ で判断してください）

先に追記

考えてみれば、あれですね。書き込まれたリンクのaf以降が奴のアフィリエイトIDなので、/840009/と/pfC9rlTk/を拒否すれば書き込めなくなりますな。どちらかがアフィリエイター識別IDでどちらかが商品IDです。（情報によると、数字だけのほうが個人IDだそうです）。スパムフィルターの設定方法は別の記事「買取コレクターからのコメント拒否方法」に書いてあります。

ということで、今後はうちのブログにアフィリエイターからスパムが来たら、そのIDを拒否ワードに加えることにします。で、そのIDをさらしますのでアフィリエイトスパマー各位ご了承ください。

この下が追記前の元の記事です。

緊急告知
貴方はもうご存知ですか
↓↓↓↓↓↓↓↓↓↓
http://123direct.info/tracking/af/840009/pfC9rlTk/

送信元IPアドレスの125.199.185.126を拒否しても変えられたら意味がない。
そこで変更できないURL　http://fanblogs.jp/sghsk/で書き込まれたら削除する。ただし、書き込めないようにするのではなく、書き込めてしまう。削除するといってもサーバーに残っているのでページを表示するたびにデータが送られてくる。わかりやすく言えば、削除というよりも表示しないようにする。結局は管理画面で削除しないといけないが、その間にウザいコメントで画面を汚されないようにするためのスクリプトです。

使いたい方は下のソースコードをコピーして、モジュールの設置方法の要領でサイドバーに貼り付けてください。ただ、判断の対象がURLなのでURLなしで書き込まれたら表示されます。また、サイドバーのコメント一覧には表示されたままです。

<script type="text/javascript">
<!--
(function(){
	var comments=document.querySelectorAll('div.comment_layer');

	for(var i=0;i<comments.length;i++){
		var a=comments[i].querySelector('div.posted a');

		if(a&&-1!=a.href.indexOf('http:\/\/fanblogs.jp/sghsk/')){
			comments[i].parentNode.removeChild(comments[i]);
			return;
		}
	}
})();
// -->
</script>

コードの赤字部分 http:\/\/fanblogs.jp/sghsk/ を違うURLに書き換えれば、そのコメントが削除されます。

しなくても平気かも知れませんが、誤作動防止のために http:// は http:\/\/ にします。たとえばTomウザい！という方は http:\/\/fanblogs.jp/ayzfqir5/ とすれば私のコメントが表示されなくなります。

コメント欄に絵文字以外の画像を挿入する手順

独自拡張でコメント欄に絵文字以外の画像も入れられるようにしました。その使い方です。

NARUシカ

今回はNARUさんのちぎり絵作品「NARUシカ」を題材にして説明します。

コメント欄に表示する画像はアップロードするのではなくリンクです。すでにインターネット上にある画像しか使えません。たった今デジカメで撮った写真を、このブログにアップロードして表示するようなことはできません。また表示できるのは、末尾の拡張子が.jpg .gif .pngのいずれかのものに限られます。

手順

１.コメント欄のリンクボタンをクリックする。

リンクボタンは下の赤い丸で囲ったチェーンのようなマークです。これをクリックするとURL入力フォームが現れます。

ボタン

２.画像のURLを入力する。

入力フォームの見た目はパソコンによって違いますが、URLを書き込む場所とOKボタンがあるはずです。ここに画像のURLを記入します。先ほども注意しましたが、このURLの末尾が.jpg .gif .pngのものしか表示しません。たとえ画像ファイルであっても末尾がそうなっていないと表示しませんので注意してください。画像表示でなく普通のリンクを貼りたい時は、今までどおりに使えます。

URL入力フォーム

３.OKボタンを押す。

入力フォームにURLを入力したらOKボタンを押します。問題がなければプレビュー欄に画像が表示されます。後は普通にコメントを送信すれば完了です。

プレビュー画面に表示される

注意

使う画像は著作権が自分にあるもののみにしてください。無断で他人のサイトの画像を使わないようにお願いします。アダルト画像など、こちらでふさわしくないと判断したものは断りなく削除します。

このページのコメント欄に実際に入力したサンプルを置いておきます。

電脳卸がドロップシッピング現金仕入れを開始

アフィリエイトの電脳卸が2013年1月23日、ドロップシッピング現金仕入れを開始！
と、何日も前にアナウンスされていたが、午前１時の時点で、サイトを見ても新しい情報はない。
きっと、日中に詳しい事が発表されるのだろう。

電脳卸と言えば、このような商品で、いつもお世話になっている。

電脳卸のアフィリエイトは「こうやれば売れるのか！」といつも参考になる。

でも、なぜか売れた試しがない。きっと、俺様のブログの読者層と、商品の購買層が合っていないのだ。
これだけ優れた広告なのに残念だ。

上の広告はクリックだけでは課金されないので、ご自由にリンク先の広告をご覧ください。
アフィリエイトの楽しい世界がそこにある！アフィリエイトに行き詰った時に見ると癒されます。

Google Analyticsのイベント トラッキングはaddEventListenerやattachEventでは計測されない

先日書いた記事「Google Analyticsでクリック数を計測するスクリプト」で、どこへのリンクがクリックされたのかのログをonclickイベントで拾うコードを書きました。ちゃんと動いていたんですが、Tweetボタンやmixiボタンが動作しなくなっていたので修正しました。

動かなくなった理由はonclickを上書きしていたからです。普通のaタグはonclickがnullなので、書いたコードで問題なかったんですが、Tweetボタンやmixiボタンはhref=”javascript:void(0);”でリンクを無効にして、onclickで作動していたからです。そのスクリプトを消してしまっていたから、ボタンを押しても動作しませんでした。正確に言えばボタンを押すと、違う動きになった。つまりGoogle Analytics用のデータ作成に使われるようになったということです。

そこで、addEventListener 或いは attachEventを使って、アクションを「上書き」ではなく「追加」したんですが、それではログが記録されていないことに気がつきました。

Google Analyticsのイベント トラッキングはonclickでなくては計測されない

確認するために丸一日、下のコードで置いておきました。その結果計測されたイベントはゼロです。ただ、そのコードはすでに消してしまっていたので、下のコードは記憶を元に書いています。元のソースでは_gaq.pushのところをalertに変えてテストしましたが、意図どおりに動いていました。

<script type="text/javascript">
<!--
function add_ga(elem){
	var type=(-1==elem.href.indexOf('/ayzfqir5/')&&elem.href.match(/^[^\?]*\/\//))?'Out':'In';
	_gaq.push(['_trackEvent',type+'bound Link','click',elem.href]);
};

var set_event=(function(){
	if(document.addEventListener){
		return function(elem,func){
			elem.addEventListener('click',func,false);
		};
	}

	if(document.attachEvent){
		return function(elem,func){
			elem.attachEvent('onclick',func);
		};
	}

	return null;
})();

if('function'==typeof set_event){
	var a=document.querySelectorAll('a');

	for(var i=0;i<a.length;i++){
		set_event(a[i],(function(elem){
			return function(){add_ga(elem);};
		})(a[i]));
	}
}

delete set_event;
// -->
</script>

対処として、上のコードを次のものに変更したところ、addEventListenerのfirefoxでもattachEventのIEでも計測されるようになりました。滅多に押されないところを自分でクリックして記録されているかどうかを見たのですが、偶然誰かが他のブラウザでクリックしていないのならaddEventListenerでもattachEventでも記録されているのだと思います。

<script type="text/javascript">
<!--
function add_ga(elem){
	var type=(-1==elem.href.indexOf('/ayzfqir5/')&&elem.href.match(/^[^\?]*\/\//))?'Out':'In';
	_gaq.push(['_trackEvent',type+'bound Link','click',elem.href]);
};

var set_event=(function(){
	if(document.addEventListener){
		return function(elem){
			if(null!==elem.onclick){
				elem.addEventListener('click',elem.onclick,false);
			}

			elem.onclick=function(){add_ga(elem);};
		};
	}

	if(document.attachEvent){
		return function(elem){
			if(null!==elem.onclick){
				elem.attachEvent('onclick',elem.onclick);
			}

			elem.onclick=function(){add_ga(elem);};
		};
	}

	return null;
})();

if('function'==typeof set_event){
	var a=document.querySelectorAll('a');

	for(var i=0;i<a.length;i++){
		set_event(a[i]);
	}
}

delete set_event;
// -->
</script>

元々のonclickの内容をelem.addEventListener(‘click’,elem.onclick,false);かelem.attachEvent(‘onclick’,elem.onclick);という形でコピーしてから、elem.onclick=function(){add_ga(elem);};で新しいonclickに_gaq.pushする関数を上書きするという内容です。正直、これで動くか心配だったんですが、出来るんですね。

結論として、addEventListenerやattachEventではダメで、onclickでなくてはイベントは計測されないようです。

ただ、検索してみるとaddEventListenerでうまくいっていると言う記事がたくさんあったのですが、他の方は動いてるんでしょうか？

参考記事： addEventListenerとattachEvent