ブログカスタマイズ WebとPCのメモ帳

タイトルどおりにFC2ブログの標準コメントシステムを廃止して、新しくコメント機能としてDISQUS Commentsを導入した際の顛末記。DISQUSの導入話はレンタルサーバを使ったWordPressやMovable Typeでの体験談はそれなりに出てくるものの、無料レンタルブログサービスでは全然見かけなかったので、導入を考えている人がいるとしたらそれなりに参考になるのでは。

発端

FC2ブログのコメント機能には今時のspam対策として非常にスタンダードなCAPTCHA機能が存在するものの、残念ながらspamコメントを完全にblockすることができていない。

これがCAPTCHAが破られているのか、そもそもCAPTCHAを入力しなくてもコメントできる何らかの抜け道があるのかわからないが、恐らくこのブログに投稿されたコメントで一番多いのがエロspamであることは間違いない。ブログを更新しようがしまいがspamコメントは投稿されるため、spam処理の手間だけはかかってしまう。（その後一定期間更新しないFC2ブログのコメントは個別に認証しないと表示されなくなったため、sapm放置で酷いありさまになるのだけは防げるようになった。）

「CAPTCHAは投稿者に面倒と手間をかける上に、spamは防げていない。しかし、CAPTCHAをOFFにすればもっとspamは増える、どうしたもんか」とかなり前から感じていたので、この際思い切ってより高性能なコメントシステムに乗り換えようと決意。サービスを探す前の前提条件は以下のような感じだった。

• OpenIDが認証システムとして使えること
• 無料で始められること（選択肢として有料コースなどがあってもいいが、とりあえず無料で試せないと話にならない）
• 日本語環境でも動作すること
• FC2ブログに設置できること
• （結果的に）spam対策になること

この条件はどれが欠けてもダメだと実際にサービスを探す前に決めていた。それはこの条件を満たせなければ、わざわざFC2のコメントシステムを捨ててまで採用する必然性がなくなってしまうから。「spamは来なくなったが同時にコメント欄がまともに機能しなくなった」なら、そもそも「コメント欄を閉じればいい」というだけの話になってしまう。

この条件で今すぐ使い始められそうなものを探した結果、日本のサービスはまったく見あたらず、見つけられたのは以下の二つの海外サービスだけだった。

• TypePad - Connect Beta
• DISQUS Comments

使うにしても「アカウントを取得した→動かなかった」では単なる時間の無駄になってしまうので、日本語環境での導入体験談を探したところ、DISQUSの導入例はそこそこ発見することができた。ということで、使ってみるのはDISQUSに決定。Typepad ConnectはDISQUSが動かなかったときのサブとして検討しておく、にとどめることに。

導入手順

とりあえずアカウントを取得する必要があるので、DISQUSのトップページへアクセスし、「Sign Up」をクリック。すると次のような画面に移行する。ちなみにトップや管理画面を含めインターフェースはまったく日本語化されておらず、言語切り替えもできないが、特に難しいことは書いてないので大した問題にはならないのでは。

入力項目はコメント機能を導入する「サイトURL」「サイト名」「サイト略名（DISQUS内の管理で使う）」とID作成用の「ユーザID」「パスワード」「メールアドレス」で、変な個人情報を取得されたりはしない。このサイトの場合はサイト名を入れたところで、「webpc」というサイト略名が自動的に決定された。（任意の値に変更可能。）

次の画面はコメント機能の簡易設定。このサイトは日本語なので当然言語設定（Language）は日本語。「Optional Features」は項目がいくつもあるものの、日本である程度まともに使えるサインイン機能はTwiterとOpenIDしかないと思ったのでそれだけチェックした。Trackbackその他の機能は別に必要ないので次へ。

設定の最後はこの画面。「Popular Platforms」や「More Platforms」には色々並んでいるが、当然FC2ブログには関係ないので下段の「Universal Code」を選択。もちろん設置したいサービスがこの中にある場合は、そのまま選択すればいいはず。

「Universal Code」を選ぶとこの画面に移動する。「1.」のコードはDISQUSのコメント機能を表示させたいところに書き込む。FC2ブログならテンプレートのカスタマイズから任意の場所に、変数<!--permanent_area-->と<!--/permanent_area-->間に挟むようにして使うような形になると思う。（本来のコメント部分が表示される<!--comment_area-->の間でいいんじゃないの？と思われるかもしれないが、この間に入れるとFC2ブログ記事のコメントを受け付けない設定にすると表示されなくなってしまう。）

「2.」のコードはコメント機能のコードではなく、記事ごとのコメント数を表示するための機能。DISQUSのコメントにリンクを張る場合は、コメントエリアに「disqus_thread」というidが設定されているので

<a href="http://記事のパーマリンク#disqus_thread">Comment</a>

というような形になるのだが、上の例のようにリンクURLに「#disqus_thread」が含まれている場合に、自動的に「xx Comments」となるように文字列を書き換えてくれる。（コメントがない場合は「0 Comments」になる。）このコードは説明どおりに（特に変数を使わず全ページの）</ body>の手前に書き込めばOK。

これでめでたくDISQUSが使えるようになる……ものの、実はまだやらなければならないことが残っている。

不完全な日本語化と文字化けを何とかする

ここまで特にミスがなく作業が進んだなら、恐らくDISQUSのコメント欄が表示されているはず。ただ入力フォームは閲覧ブラウザの状態によって動的に変わるので、一度ログアウトしてページを開き直せば違和感に気が付くかもしれない。そう、設定言語に日本語を選んでも非常に中途半端な日本語化しかされていないし、文字コードが（FC2ブログのように）UTF-8以外だと一部文字化けしている可能性があるという点。

先に結論を書いてしまうと、この問題をすべて解決する情報は見つからず、少なくとも自分の環境では文字化けを修正することができなかった。ただ、FC2ブログと同じようにEUC-JPの文字コードの環境下で、DISQUSのコメント機能をWiki（PyukiWiki）に組み込んだ体験談が書かれた以下のページが非常に役にたち、かなりの部分の問題が解消できた。

• WikiにDisqusを組み込む - KamoLand

このページが見つからなければ、そもそもそれ以前の段階で設置を挫折していた可能性もあった。UTF-8以外の環境でDISQUSを設置したい人は、まず一読をお勧めしたい。

とりあえず先人の例に倣い、「SETTINGS」→「Customize」に移動してテーマをNarcissusからClassic Aに変更。これで大部分が日本語化される。次にお知らせというか注意書き部分が完全に英語なので、これを日本語に書き換える。これも上のページに書いてあるJavaScriptコードをほぼそのまま使わせていただいた。

なぜ「ほぼ」かというと、調べたところ（設定の問題なのか）このBlogに設置したDISQUSのコメント欄では、書き換え部分のIDが異なったため。従ってIDとコメント部分を書き換えて以下のようにした。

<script type="text/javascript">
<!--
var disqus_my_customize_retry = 10;
function disqus_my_customize() {
	if( ! document.getElementById('dsq-no-anon-msg')) {
		if (--disqus_my_customize_retry > 0) {
			window.setTimeout('disqus_my_customize()',1000);
		}
		return;
	}
	document.getElementById('dsq-no-anon-msg').innerHTML =
'コメント機能を利用するにはDISQUSかTwitterのアカウント、または<a href="http://www.hatena.ne.jp/info/openid" target="_blank">はてな</a>、<a href="http://openid.yahoo.co.jp/" target="_blank">Yahoo!</a>、<a href="http://auth.livedoor.com/openid/" target="_blank">livedoor</a>などのOpenIDでログインしてください。 (<a href="http://www.hatena.ne.jp/info/openid#whatis" target="_blank">OpenIDとは？</a>)';
}

// -->
</script>
<script type="text/javascript">
<!--
disqus_my_customize();
// -->
</script>

このコードを「embed.js」というDISQUSのコードの手前に記述すればいい。

これで注意書き部分を任意の文章で記述できるようになったので、ほぼ問題なく使えるようになった。ただ実際に設置する場合は、当然そのDISQUSの設定に合致した文章にしないと意味不明になってしまうので要注意。（例えばログインしなくても書き込める設定なのに、ログイン必須のように書いてしまうのはよくないということ。）

文字化けは直せず

ここまで作業して残った問題は二つ。

ひとつはコメント欄のTEXTAREAの初期値として書き込まれている文章だけが文字化けしていること。本来は「ここにコメントを入力」と表示されるらしいものの、どんなに設定を変えても直らなかった。気になったので呼び出されているJavaScriptファイルをチェックしたところ、なぜかファイル内ですでに文字化けしていた。

ただMovable TypeやWordPressでDISQUSを使っているサイトでは文字化けしていないので、日本語版のUniversal Codeのみの問題のように思える。以前は文字化けしていなかったようなので、DISQUS側が何からのミスで文字化けさせてしまったのかもしれない。（ちなみに上でリンクした参考サイトのコメント欄も、2009年10月下旬現在文字化けしている。）

もうひとつはDISQUSの管理画面での、コメントされたページタイトルが化ける問題。これも前出の参考ページですでに話題にあがっていて、修正方法も書かれている。

disqusはデフォルトで，そのページ<title>タグの文字列をタイトルとして扱うが， 文字コードがUTF-8以外の場合，以下のような症状が出る (というか，出た)

• DISQUSのコミュニティ画面(http://kamoland.disqus.com/ など)で，ページ名が文字化け状態
• DISQUSのコメント欄が出ないページがある．FireBugでiframe内を見ると，disqusがエラーを出していた

WikiにDisqusを組み込む - KamoLand

これは元からサイトの文字コードがUTF-8だとか、レンタルサーバ+ブログツールで任意の文字コードが使える場合は特に問題はない。ただFC2ブログの文字コードはEUC-JPなので、半角英数字以外のタイトル部分は見事に文字化けする。

対応方法はリンク先に書いてあるので参照して欲しいが、自分の環境では上手くいかなかった。具体的には以下のような方法を試したが、どの方法も効果がなかった。

• JavaScriptでDISQUSのタイトル変数に、FC2ブログの変数で表示できるUTF-8化したタイトルを設定する。
• JavaScriptでDISQUSのタイトル変数に、JavaScriptでUTF-8化したタイトルを設定する。
• 公開されたスクリプトを使って、JavaScriptでエントリタイトルをUnicodeエスケープしたのち、DISQUSのタイトル変数に設定する。

DISQUSはタイトル部分の変数に「disqus_title」を使っていて、この変数に任意の文字列を代入できるはずだが、なぜかそれ自体が上手くいかない模様。ただ少なくとも変数自体に変えたタイトルを代入することはできたので、それ以外の何か別の部分に問題があるのかもしれない。（例：変数「disqus_title」に「aaa」という文字列を代入。disqus_titleをdocument.writeなどで書き出すと「aaa」と表示されるが、DISQUS側ではそれとは関係なく文字化けしたタイトルが表示される。）

まあ本文や名前が文字化けするわけではないので、多少管理に面倒になりそうなもののこれで（今のところは）OKということにしておきたい。

DISQUSのメリット・デメリット

今のところテスト書き込みぐらいしかしてないが、感じたメリットとデメリットを並べると以下のような感じになる。

メリット

• spamコメントが来なくなった。（少なくとも設置してからは一度も来ていない。）
• CAPTCHAを入力する手間がなくなる。
• 設定を変更することによって、コメントできる条件をログイン不要、ログインユーザに制限、承認されたログインユーザのみに限るなど自由に調節できる。
• ログインユーザに制限してもOpenIDに対応しているので、わざわざDISQUSのIDを取得する必要はなく、Yahoo!、Google、mixi、はてな、livedoorなどのOpenID対応アカウントが使い回せる。
• ブラックリスト、ホワイトリスト、コメント事前承認機能も搭載。

デメリット

• 日本語化が不完全でカスタマイズしないとダメ。
• カスタマイズしても完全に日本語にはならない。
• 文字コードがUTF-8以外の場合は文字化けに悩まされる可能性が高い。
• JavaScriptがONでないと機能しない。
• 管理インターフェースがすべて英語。（ただしそんなに難しくないので、あまり問題にはならないはず。）

設置してみた感想は「設置のハードルは（ブログテンプレートの修正も含め）比較的高いし、日本語対応じゃないので取っつきにくいし、（自分の環境では）文字化けも完全に解消できなかったのも含め、日本語環境向けサービスとはお世辞にも言いにくいが、それを補えるメリットもある」という感じ。特に前から欲しいと思っていた「OpenID対応コメント機能」が設置できるのが嬉しい。（これは単純にspamを防げる可能性が高くなるし、発言者のトレーサビリティも上がる。）

現状のDISQUSはお決まりの「素人でも簡単！お勧め！」と言えるようなものではまったくないものの、少なくとも自分の環境ではそのハードルを乗り越えて設置する価値がありそうだと感じた。同じように「多少のハードルがあっても多機能コメント欄が欲しい」という人にはお勧めできると思う。そうじゃない人はもう少し待って、日本語環境での取っつきやすさが上がってからでも遅くないかな、ということで。

FC2ブログのテンプレートに、マイクロブログ(つぶやきサービス)であるTwitterへエントリのタイトル + URLを投稿するボタンと、外部サービスのTwib から取得できるtweet数（つぶやかれた数）を表示するためのカスタマイズ方法の紹介。

他のブログサービスでは変数の問題でJavaScriptを使わなければいけない場合があるものの、FC2ブログなら標準で用意された変数のみで対応できるのが強みのひとつ。

貼り付けコード

以下のコードをテンプレートの<!--topentry--> から <!--/topentry-->に囲まれた任意の部分に貼り付けることによって、「Twitterでつぶやく」ボタンが設置できます。通常はtopentryに囲まれた部分が本文になっているので、記事の下部（か上部）辺りに設置すれば丁度いいはず。

<a href="http://twitter.com/home?status=<%topentry_enc_utftitle>%20<%topentry_link>" target="_blank" title="Twitterでつぶやく"><img src="画像URL" alt="Twitterでつぶやく" width="16" height="16" border="0" /></a>

表示例

表示例ではアイコンは下記のサイトからダウンロードしたものを使用。実際は画像である必要はないので、面倒なら画像タグを文字に書き換えてもいいかもしれない。

• Social Media Network Icons | Komodo Media

同様にTwibを利用した「tweet数」を表示する場合は、以下のコードを上記と同じように<!--topentry--> から <!--/topentry-->の間に書き込めばOK。上記の「つぶやく」ボタンとセットで置けば、関連性がわかりやすくなるので丁度いいかと。

<a href="http://twib.jp/url/<%topentry_link>" title="ツイート数" target="_blank"><img src="http://image.twib.jp/counter/<%topentry_link>" border="0" alt="" /></a>

表示例

1postもされていなくても「0tweets」と表示される画像が常時呼び出される以外は、はてなブックマーク数やlivedoorクリップ数の画像呼び出し機能との大きな差はないですね。（似たような挙動をするサービスとしては、POOKMARKなどがある。）最近はTwitterで一言コメントがされているようなことも多いので、言及チェックツールとしても結構便利なのでは。

先日、コメント欄に非公開で以下のようなコメントが寄せられました。

グーグルウェブマスターの問題解決に、こちらの記事を参考にさせて頂きました。その結果、タイトルタグの重複、メタデータの重複とも重複する数が減ったのですが、まだ問題点が多いという現状です。他サイト様も参考させて頂いたのですが問題解決には至らず、厚かましいとは思いますが、貴サイト様のコメントで質問するに至った次第です。

非公開コメントより

私もそれなりにコメントには返信するようにしているのですが、このまま何も表示されてないところで私だけ返事を書き込んでも意味不明な上に、誰の役にも立ちそうありません。

ということで、Googleウェブマスターツールでエラーが表示されたときの、FC2ブログテンプレートのmetaタグ修正方法について軽くまとめておこうと思います。独り言のようにコメント欄に書き込むよりも、エントリにした方が他の人も参照しやすいでしょう。

このBlogのサイドバーにも置いてあるのですが、最近受信したトラックバックが一目でわかる「最近のトラックバック」というプラグインがFC2ブログにはあります。これ自体は別に珍しいものではなく、大概のBlogサービスでは同じようなプラグインが存在しています。

ところが、FC2ブログのものは直接そのトラックバック元にリンクが張られるわけではなくて、トラックバックが送られた自分のBlogのエントリがリンク先になっているんですね。個人的にここは「自分のエントリへのリンク」ではなくて、「相手先のエントリへのリンク」にしておきたいところです。そもそもリンクに使われている文字列は「トラックバック元のエントリ名＋Blog名」なのに、実際のリンク先が自分のBlogじゃおかしいじゃないですか。

というわけで、今回は「最近のトラックバック」のリンク先をトラックバック元へのエントリに修正するカスタマイズです。私と同じように「リンク先を変更させたい」という方は使ってみてください。

親子カテゴリを導入したので、一緒に現在使っているパンくずリスト(*1)を親子カテゴリに対応したVer.2にアップグレードしました。
([*1]正確にはHTMLのマークアップが微妙に違うんですが、やってることは同じ。)

親子カテゴリを使い始めたのでパンくずリストも更新したい方、これからパンくずリストを追加したい方はこちらを利用してください。親子カテゴリを使っていない場合でも、旧バージョンと同じ挙動をするだけなので特に問題は起こりません。