お知らせ
気温の差が激しく、衣服にも気を使う季節になりましたが、皆さん体調管理は万全でしょうか?
今回は、最初になかみつ園の生姜紅茶を宣伝させてください。
IT系の皆さんにとってお茶とは馴染みの薄いものかもしれませんが、特に寒くなる季節に女性を中心に人気なのが生姜紅茶です。奥さんやご両親へのプレゼントなど、ぜひ検討してみてください。注文時に「gihyo.jpを見た」とコメントいただければオマケがつくようになっていますので、この機会に是非。
MODxにおけるコメント投稿機能
今回は、MODx上でコメントの投稿、表示機能を行うためのQuipというスニペットを紹介します(とはいっても、なかみつ園では執筆時点で導入していないのですが…)。
QuipとはMODx Revolutionの中では比較的メジャーなスニペットであり、「システム」→「パッケージマネージャー」よりパッケージのダウンロード画面に進むと、ダウンロードランキングの上位に位置しているスニペットです。
動作イメージとしては、皆さんがご覧いただいているこのページの下部を見ていただくのが一番です。以前紹介したように、gihyo.jpではMODx-1.0系が使用されているため、Quipとは異なるスニペットが使用されているはずですが、Quipを使用することで下記のような機能を実現できます。
- サイト全体や任意のページにコメント機能を付加できる
- モデレート機能
- 日本語や任意の表示
- コメントの削除などはMODxの管理画面から操作可能
それではさっそく設定を行ってみましょう。
Quipのインストールと基本的な設置
Quipは従来のように、パッケージマネージャーより導入しますが、インストール画面では、これまでのスニペットと異なり、簡単な初期設定が要求されますので、モデレーションなどに使用されるメール関連の設定をさくっと行なっておきましょう。これらの値は、後々「システム設定」より変更することが可能です。
導入テストを行う前に、気になることがありませんか?このスニペットは、これまで紹介してきた一連のスニペットと異なり、ユーザからのデータを取得し、HTMLとして表示します。実際のコメントはデータベース内でどのように管理されているのでしょうか?
- 各リソースに埋め込まれる?
- それとも専用のテーブルに保存される?
答えは、スニペットインストール後のMySQL内の様子を見ると一目瞭然です。投稿されたコメントなどはmodx_quip_commentsといった専用のテーブルに格納されるようになります。これがわかれば、後々コメントをphpMyAdminのようなツールで編集することも簡単ですね。
それでは、例のごとくスニペットのドキュメントを見ながら、まずは最低限のパラメータを使ってスニペットの設置を行ってみましょう。今回は、【生姜紅茶】という商品ページリソースのフッターに近い部分に次の2行を追加してみました。1行目は既存コメントの表示に使われるスニペット、2行目はコメントの投稿フォームとして使用されるスニペットです。
実際のページは次のようになります。
このように、コメント機能が数分で設置できるのは素晴らしいのですが、現状では投稿制限がないため、spam投稿の格好の餌食となってしまいますし、日本語サイトなのにコメント部分は英語表示、という微妙な状態になっていますので、まずは実用的なレベルになるまでカスタマイズしていきます。
スレッド名をエイリアスにする
コメント受付可能なページが複数存在する場合、全てのページにユニークなスレッド名を与えるのは大変ですので、MODx変数を使って楽をしてみましょう。具体的には、スニペットのコールを次のようにします。
この形式であれば(エイリアスの重複がない限り)どのページにもコピー&ペーストが可能なので、ずいぶん構築の手間を省くことができると思います。また、常に最新の情報を表示する必要があるコメント表示部分と異なり、コメント投稿部分ではキャッシュを使用しても問題がないことが多いため、必要に応じて
という書式でキャッシュを有効にしておきましょう。
英語表示を日本語表示にする
Quipスニペットには残念ながら日本語対応のLexicon、つまり語彙ファイル(馴染みが薄いので、以後「翻訳ファイル」とします)が含まれていません。MODxの一ユーザである筆者としても、この辺りの国際化対応にはぜひ貢献したいところではあるのですが、継続的なメンテナンスを考えると、なかなかコミュニティに貢献できないのが現状です。
今回は、翻訳ファイル全体を日本語化するのは大変ですので、「ユーザの目に見える部分」のみを日本語表示にしてみます。翻訳ファイルは/var/www/html/core/components/quip/lexicon以下に保存されていますので、enディレクトリをjaという名前にコピーして、各ファイルの修正を行っていきましょう。
ここで、翻訳したいキーワードを検索し、文字列を置き換えていきます。たとえば、現在ブラウザで表示されている「Add a new comment」という文字列を次のようにgrepしてみると、default.inc.phpというファイルを修正すれば良いことがわかります。
結果的に、筆者の環境では次のような修正を行ってみました。ファイルを修正した後は、管理画面からキャッシュをクリアすることを忘れないでください。
以上の修正により、コメント画面がずいぶん自然な感じになるのですが、これだけだと日付の表示が
- 「Oct 12, 2011 at 06:30 PM」
のように、日本人には不自然なフォーマットのままですので、見慣れたYYYY/MM/DD hh:mm:ssのようなフォーマットに修正してみます。こちらはスニペットコール時に指定することが可能です。
日本語表示が可能になったところで、それ以外の設定を見ていきましょう。
モデレート機能
モデレート、またはモデレーション機能とは、コメント投稿者がコメントをポストした後、管理者が内容をチェックして投稿の可否を決定できる機能です。当然コメントの表示はリアルタイムではなくなりますが、いたずらなど不必要なコメントをフィルタするのに役立ちます。
Quipスニペットでモデレート機能を有効にするためには、投稿用である QuipReplyスニペット側で次のようにパラメータを設定します。
この設定により、投稿後の画面は次のようになり、管理者には投稿内容がメールで通知され、コメントは「コンポーネント」→「Quip」より管理することができるようになります。
おっと、機能を有効にしたことで、新たな英語メッセージが表示されるようになってしまいました。さらには、モデレート機能を用いることで、管理者や投稿者にメール送信が行われるようになるのですが、当然それらの内容も英語の状態になってしまいますので、必要に応じて以後紹介する翻訳ファイルを用いてください。
スレッド表示
スレッド機能を有効にすれば、特定のコメントに対してコメントができるようになります。商用サイトでの用途としては、顧客からの質問に対して個別に回答を付与できるのがメリットでしょうか。
この機能を有効にするためには、これまでと異なり「スレッドに返信する」ための新規リソースが必要になります。
表1 スレッド返信用リソースの作成
タイトル | スレッドに返信 |
公開する | チェック |
エイリアス | reply-to-thread |
メニューに表示しない | チェック |
コンテンツ | <h2>スレッドに返信する</h2>
[[!Quip? &dateFormat=`%Y/%m/%d %H:%M:%S`]]
<br />
[[!QuipReply]] |
次に、各商品ページなどに設置するスニペットの定義は次のようにします。&replyResourceIdというパラメータでは、先ほどの返信用リソースIDを指定してください。
なお、スレッド機能を有効にすることで、「Reply」という新たな英語の表示が行われてしまいますので、以下略…(笑)。
翻訳ファイルの修正内容
中途半端ではありますが、今回用いた翻訳ファイルの内容を紹介しておきます。他力本願で勝手ですが、英語の内容自体はそれほど難しくないため、もし、やる気のある方がいらっしゃれば、ぜひスニペットの作者に連絡をとって、日本語の翻訳ファイルをメンテナンスしていただけるとありがたいです(※)。
おわりに
Quipスニペットには今回紹介した以外にもreCAPTCHAなど、さまざまな機能が含まれています。ぜひスニペットを活用していただき、インタラクティブなページを作ってみてください。