差分表示

便利そうなので，Disqusコメントシステムをカモランド([[PyukiWiki]]ベース)に組み込んだ．デザインのカスタマイズや日本語化についての苦労話．
//parent=CMS
#contents
*WikiにDisqusを組み込む
&link(Disqus,http://disqus.com/) は訪問者コメントの仕組みを提供していて，JavaScriptインクルードで簡単にサイトに組み込むことができる．
今時のサービスを知るために，カモランドに組み込んでみた．~
※現在は，カモランドから除去してあります．カモランドでは，サイトの閲覧者に大量にJSを読み込んでもらう負担を強いてまで設置しておく価値は無いと判断しました (2010/2/14)
今時のサービスを知るために，カモランドに組み込んでみた．

※現在は，''カモランドから除去してあります''．カモランドでは，サイトの閲覧者に大量にJSを読み込んでもらう負担を強いてまで設置しておく価値は無いと判断しました (2010/2/14)
**１．日本語化
日本語Webサイトのコメント入力部が英語というのはまず考えられないので，日本語にする．
***ボタン類の日本語化
まずはボタン類の日本語化で，これは簡単．Disqusの管理画面で，サイトの設定(General > Basic Settings)をLanguage=Japaneseにすれば良い．

ただし，デザインのテーマを「Narcissus」にしていると効かないので注意．これで数時間ハマった．Classicにするべし．
Narcissusは他にも，iframe用CSSファイルを設定できないという問題があるので，使い物にならないと思う．

これで，
-ネーム
-メールアドレス
-ウェブサイト
-ボタン「コメント入力」/「XXXのユーザ名で入力」
という風に日本語のメッセージが出るようになる．

ちなみにNarcissusだと，こんな感じの中途半端な日本語化になった．~
&ref(narcissus.png,75%,left)
***メッセージの強制差し替え
しかし困ったことに，まだこんなメッセージが出る．
--(
You are commenting as a Guest. You may select one to log into:
--)
disqusの設定をくまなく探したが，これは変更できなさそうだ．そこで，JavaScriptで強制的にHTMLを書き換えることにした．
--(
var disqus_my_customize_retry = 10;
function disqus_my_customize() {
	if( ! document.getElementById('dsq-login-message')) {
		if (--disqus_my_customize_retry > 0) {
			window.setTimeout('disqus_my_customize()',1000);
		}
		return;
	}
	document.getElementById('dsq-login-message').innerHTML =
'Disqus，Twitterのアカウントがある人は，下のボタンでログインすればその名義で書き込みできます．' +
'ただしブラウザが第三者のクッキー許可の設定になっていない場合は，ログインできません．<br>' +
'ログインしない場合は「ネーム」と「メールアドレス」が入力必須になりますが，' +
'メールアドレスは表示も公開もされません';
}

<script type="text/javascript" src="http://disqus.com/forums/kamoland/embed.js"></script>
<script type="text/javascript">
disqus_my_customize();
</script>
--)
やっていることは，embed.jsを取り込んだあとで，要素'dsq-login-message'のinnerHTMLを書き換えて，
メッセージを変えているだけ．ただ，この要素がいつ構築されるのかがわからないので，タイマーでリトライして構築されるのを待っている．~
&ref(disqus_login_mes.png,75%,left)

目を覆うばかりのダサダサ方式だが，まぁできているから良しとする．
**２．デザインのカスタマイズ
***テーマの選び方
Narcissusは使い物にならない．
-日本語対応していない
-iframe用CSSファイル設定ができない

なので，Classicから選ぶべし．うちはClassic Aにした．なお，iframe用CSSファイルについては後述．
***コメント入力欄以外のカスタマイズ
コメント入力欄以外は，disqusの設定の「Custom CSS」にCSSを書き込めば簡単．FireBugを使って地道に，スタイルを変えたい要素のidやclassを調べて，
それにスタイルを当てればよい．
カモランドでは，こういう内容を設定している．
--(
h3#dsq-comments-count { display: none; }
div#dsq-options { display: none; }
div.dsq-likedtxt {display:none;}
li.dsq-rate {display:none !important;}
li.dsq-report {display:none !important;}
h3#dsq-add-new-comment {
	font-size:100%;
	background-color:#606070;
 	color: #ffffff;
	font-weight:bold;
	padding: .2em 0px .5em 1em;
	border: 0px;
	margin: 0px 0px 0.2em 0px;
	width:400px;
}
div#disqus_thread {
	width: 400px;
	float: left;
	margin-top: 2em;
}
--)
***コメント入力欄(iframe)のカスタマイズ
FireBugでDOMを探索すると気づくが，肝心のコメント入力欄の部分はiframeでdisqus.comから読み込まれている．
ヒェー，CSSを当てれない！？

それでdisqusのドキュメントを調べると，
-&link(DISQUS | JavaScript Embed Overrides,http://disqus.com/docs/embed/);

JavaScriptのパラメータで
-disqus_iframe_css

を使って外部CSSのURLを指定すれば，それがコメント欄のiframeに適用されるということだ．
これを使えば問題ない．

カモランドではこんな感じで設定して，レイアウトを圧縮している．URLの入力欄は邪魔なので消している．
--(
★ HTML本体
<script type="text/javascript">
var disqus_iframe_css = "http://kamoland.com/wiki/skin/disqus_iframe.css";
</script>
<script type="text/javascript" src="http://disqus.com/forums/kamoland/embed.js"></script>

★ disqus_iframe.css
form#comment-form textarea {height:4em;}
div#form-block-name {}
div#form-block-email {}
div#form-block-url {display:none;}
div#form-block-submit {}
--)
**３．ページのエンコーディングがUTF-8で無い場合の注意
ページがUTF-8なら気にする必要はないが，sjis(Shift-JIS)とかカモランドのようにEUC-JPの場合は，
注意が必要．

disqusはデフォルトで，そのページ<title>タグの文字列をタイトルとして扱うが，
文字コードがUTF-8以外の場合，以下のような症状が出る (というか，出た)
-DISQUSのコミュニティ画面(http://kamoland.disqus.com/ など)で，ページ名が文字化け状態
-DISQUSのコメント欄が出ないページがある．FireBugでiframe内を見ると，disqusがエラーを出していた
--(
<title>DISQUS | Error (500)</title>
・・・中略・・・
<h3>Sorry, an error occurred on our end.</h3>
<p>We've been notified of the issue and are on the case.</p>
--)
エラーメッセージが全然あてにならないので試行錯誤を強いられたが，結局，JavaScriptのパラメータ
-disqus_title

をUnicodeで設定すればこれは解決した．(設定しない場合のデフォルトは，<title>タグの内容)

カモランドではこんな感じで，ページタイトルのUTF-16を，エンコードした表記を使ってパラメータを設定しています．
--(
var disqus_title = "\u0057\u0069\u006B\u0069\u306B\u0044\u0069\u0073\u0071\u0075\u0073\u3092\u7D44\u307F 〜";
--)
このエンコード表記の生成は，Wikiのperlで処理しています．

しかしもし，CGIやPHPでない静的HTMLのページだと，どうするんだろうか？．．．

JavaScriptでどの程度文字コード変換ができるのか知らないが，
静的HTMLでsjis(Shift-JIS)やEUC-JPを使っているというパターンだと，disqusを使うのは無理かもしれないな．

最悪，<title>を，UTF-8でもそれ以外でもコードが変わらないASCII文字(英数字)だけでつければ化けないだろうが，それは閲覧者にやさしくないし．(SEO的にも．．．)

また，
-サイト管理者に送られてくる投稿通知メールのタイトル
-投稿者が自分の過去の投稿を閲覧できる画面(http://disqus.com/kamo/ など)で表示される，ページ名

にも同じようにタイトルが使われているため，disqus_titleを設定しないとここでも文字化けが発生します．

★ (2009.10.31 追記) さらにその後，いつの間にかコメント入力欄にこんな文字化けが出るようになった．~
&ref(comment_mojibake.jpg,100%,left)

thread.jsのソースを調べたところ，disqus_default_textを設定すれば，ここの文字列を変えることができることが判明した．

カモランドではこんな感じで半角スペースを設定し，文字化けにならないようにしています．
--(
var disqus_default_text = " ";
--)
本来は「ここにコメントを入力」というのを適当な文字コードで設定すればいいんでしょうが，
めんどくさくなりました．

ここまでの「UTF-8で無い場合の注意」をまとめると，こんな感じになります．
,JavaScript変数名,設定内容,解消される問題
,disqus_title,ページタイトルをUTF-16で表記したもの,コミュニティ画面のタイトル文字化け，投稿通知メールのタイトル文字化け，投稿者プロファイル画面での投稿一覧のタイトル文字化け ※disqus_titleが実際にDISQUSのサーバに反映されるにはかなり時間がかかるようです．数週間かかっても反映されないページもあります
,disqus_default_text,半角スペース,コメント入力欄の初期表示の文字化け
**４．ここまでのまとめ
カモランドの場合の設定例です
***DISQUSの設定
-デザインテーマ = Classic A

&ltitle(Custom CSS);
--(
/* 投稿欄の周りの部分のカスタマイズ */
h3#dsq-comments-count { display: none; }
div#dsq-options { display: none; }
div.dsq-likedtxt {display:none;}
li.dsq-rate {display:none !important;}
li.dsq-report {display:none !important;}
h3#dsq-add-new-comment {
	font-size:100%;
	background-color:#606070;
 	color: #ffffff;
	font-weight:bold;
	padding: .2em 0px .5em 1em;
	border: 0px;
	margin: 0px 0px 0.2em 0px;
	width:400px;
}
div#disqus_thread {
	width: 400px;
	float: left;
	margin-top: 2em;
}
--)
***Disqusを設置しているページのHTML記述
&ltitle(Disqusを設置しているページのHTMLソースの例);
--(
<div id="disqus_thread"></div>
<script type="text/javascript">
// 英語のメッセージを日本語メッセージに強制書き換え
var disqus_my_customize_retry = 10;
function disqus_my_customize() {
	if( ! document.getElementById('dsq-login-message')) {
		if (--disqus_my_customize_retry > 0) {
			// DISQUSの要素が構築されるまでリトライする
			window.setTimeout('disqus_my_customize()',1000);
		}
		return;
	}
	document.getElementById('dsq-login-message').innerHTML =
'Disqus，Twitterのアカウントがある人は，下のボタンでログインすればその名義で書き込みできます．ただしブラウザが第三者のクッキー許可の設定になっていない場合は，ログインできません．<br>ログインしない場合はメッセージは管理者が承認するまで公開されません．また「ネーム」と「メールアドレス」が入力必須になりますが，メールアドレスは表示も公開もされません';
}
// ページのURL
var disqus_url = "http://kamoland.com/wiki/wiki.cgi?Wiki%A4%CBDisqus%A4%F2%C1%C8%A4%DF%B9%FE%A4%E0";

// 投稿欄をカスタマイズするための外部CSS
var disqus_iframe_css = "http://kamoland.com/wiki/skin/disqus_iframe.css";

// ページの文字コードがUTF-8でない場合は，これらを設定しないと文字化けする
// ページのタイトル (通常は<title>の内容)
var disqus_title = "\u0057\u0069\u006B\u0069\u306B\u0044\u0069\u0073\u0071\u0075\u0073\u3092\u7D44\u307F\u8FBC\u3080\u0020\u002D\u0020\u004B\u0061\u006D\u006F\u004C\u0061\u006E\u0064";
// ページの説明
var disqus_message = "\u4FBF\u5229\u305D\u3046\u306A\u306E\u3067\uFF0C\u0044\u0069\u0073\u0071\u0075\u0073\u30B3\u30E1\u30F3\u30C8\u30B7\u30B9\u30C6\u30E0\u3092\u30AB\u30E2\u30E9\u30F3\u30C9\u0028\u0050\u0079\u0075\u006B\u0069\u0057\u0069\u006B\u0069\u30D9\u30FC\u30B9\u0029\u306B\u7D44\u307F\u8FBC\u3093\u3060\uFF0E\u30C7\u30B6\u30A4\u30F3\u306E\u30AB\u30B9\u30BF\u30DE\u30A4\u30BA\u3084\u65E5\u672C\u8A9E\u5316\u306B\u3064\u3044\u3066\u306E\u82E6\u52B4\u8A71\uFF0E";
// コメント入力欄が空の時に表示する文字列 (本来は「ここにコメントを入力」だったもの)
var disqus_default_text = " ";

// メッセージ強制書き換えの呼び出し
disqus_my_customize();
</script>

// DISQUSのJavaScript取り込み
<script type="text/javascript" src="http://disqus.com/forums/kamoland/embed.js"></script>
--)
***投稿欄に適用する外部CSS
&ltitle(http://kamoland.com/wiki/skin/disqus_iframe.css);
--(
/* 投稿欄のカスタマイズ */
form#comment-form textarea {height:4em;} /* コメント欄の高さを縮小 */
div#form-block-name {}
div#form-block-email {}
div#form-block-url {display:none;} /* URL入力欄は表示しない */
div#form-block-submit {}
--)
**５．Disqusの変な自画面リロードURLへの対策
ここからは，Wikiというか[[PyukiWiki]]独特の話になる．

Disqusでは，
-投稿時
-ログイン時

に，なんか処理したり第三者クッキーを設定したりしたあと現在の画面を再読み込みする．
このとき，URLの後ろに変なパラメータが付いてくるので，[[PyukiWiki]]が誤動作するという問題が起きた．

&ltitle(付いたパラメータの具体例);
--(
【投稿時】&dsq=16909359#comment-16909359
【ログイン時】&success
--)
それでWiki側の実装を改造して，これらのパラメータが付いたURLを要求されたときは，
これらのパラメータを削ったURLにリダイレクトするようにしておいた．
**参考
-&link(「通りすがり」コメントの終焉 − ＠IT,http://www.atmarkit.co.jp/news/analysis/200903/09/social.html);
-&link(DISQUS | Developers,http://disqus.com/developers/);

© 2023 KMIソフトウェア