便利そうなので,Disqusコメントシステムをカモランド(PyukiWikiベース)に組み込んだ.デザインのカスタマイズや日本語化についての苦労話. WikiにDisqusを組み込むDisqus は訪問者コメントの仕組みを提供していて,JavaScriptインクルードで簡単にサイトに組み込むことができる. 今時のサービスを知るために,カモランドに組み込んでみた.※現在は,カモランドから除去してあります.カモランドでは,サイトの閲覧者に大量にJSを読み込んでもらう負担を強いてまで設置しておく価値は無いと判断しました (2010/2/14) 1.日本語化日本語Webサイトのコメント入力部が英語というのはまず考えられないので,日本語にする.ボタン類の日本語化まずはボタン類の日本語化で,これは簡単.Disqusの管理画面で,サイトの設定(General > Basic Settings)をLanguage=Japaneseにすれば良い.ただし,デザインのテーマを「Narcissus」にしていると効かないので注意.これで数時間ハマった.Classicにするべし. Narcissusは他にも,iframe用CSSファイルを設定できないという問題があるので,使い物にならないと思う. これで,
ちなみにNarcissusだと,こんな感じの中途半端な日本語化になった. メッセージの強制差し替えしかし困ったことに,まだこんなメッセージが出る.You are commenting as a Guest. You may select one to log into: 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> 目を覆うばかりのダサダサ方式だが,まぁできているから良しとする. 2.デザインのカスタマイズテーマの選び方Narcissusは使い物にならない.
なので,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のドキュメントを調べると, JavaScriptのパラメータで
を使って外部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 {} 3.ページのエンコーディングがUTF-8で無い場合の注意ページがUTF-8なら気にする必要はないが,sjis(Shift-JIS)とかカモランドのようにEUC-JPの場合は, 注意が必要.disqusはデフォルトで,そのページ<title>タグの文字列をタイトルとして扱うが, 文字コードがUTF-8以外の場合,以下のような症状が出る (というか,出た)
<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>
をUnicodeで設定すればこれは解決した.(設定しない場合のデフォルトは,<title>タグの内容) カモランドではこんな感じで,ページタイトルのUTF-16を,エンコードした表記を使ってパラメータを設定しています. var disqus_title = "\u0057\u0069\u006B\u0069\u306B\u0044\u0069\u0073\u0071\u0075\u0073\u3092\u7D44\u307F 〜"; しかしもし,CGIやPHPでない静的HTMLのページだと,どうするんだろうか?... JavaScriptでどの程度文字コード変換ができるのか知らないが, 静的HTMLでsjis(Shift-JIS)やEUC-JPを使っているというパターンだと,disqusを使うのは無理かもしれないな. 最悪,<title>を,UTF-8でもそれ以外でもコードが変わらないASCII文字(英数字)だけでつければ化けないだろうが,それは閲覧者にやさしくないし.(SEO的にも...) また,
にも同じようにタイトルが使われているため,disqus_titleを設定しないとここでも文字化けが発生します.
★ (2009.10.31 追記) さらにその後,いつの間にかコメント入力欄にこんな文字化けが出るようになった. thread.jsのソースを調べたところ,disqus_default_textを設定すれば,ここの文字列を変えることができることが判明した. カモランドではこんな感じで半角スペースを設定し,文字化けにならないようにしています. var disqus_default_text = " "; ここまでの「UTF-8で無い場合の注意」をまとめると,こんな感じになります.
4.ここまでのまとめカモランドの場合の設定例ですDISQUSの設定
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記述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> 投稿欄に適用する外部CSShttp://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 {} 5.Disqusの変な自画面リロードURLへの対策ここからは,WikiというかPyukiWiki独特の話になる.Disqusでは,
に,なんか処理したり第三者クッキーを設定したりしたあと現在の画面を再読み込みする. このとき,URLの後ろに変なパラメータが付いてくるので,PyukiWikiが誤動作するという問題が起きた. 付いたパラメータの具体例 【投稿時】&dsq=16909359#comment-16909359 【ログイン時】&success 参考 |