カスタマイズと設定
カスタマイズと設定
コンテキスト
ここでは、コメントウィジェットがサポートする各機能と設定についての詳細なドキュメントを確認できます。
本ドキュメントではコアコンセプトをカバーし、各機能領域について使い方やよくある落とし穴を含めて詳しく説明します。
コード例を示し、該当する行をハイライトします。該当する場合は設定ページのスクリーンショットも提供します。
コード例では当社のバニラJavaScriptライブラリを使用しますが、設定オプションはコメントウィジェットの全バージョン（React、Vue など）でまったく同じ名前を使用しています。
このガイドで説明するほとんどの設定と機能は、コードを書く必要はありません。
アカウントの識別 
コメントウィジェットは例えばテナントIDに "demo" を使って利用できることに気付くかもしれません:
Run 
これはコメントウィジェットを試して遊ぶためのものです。 本番環境では、次のようにあなたのテナントIDを渡します:
Run あなたのテナントIDは、コメントウィジェットのあなたのアカウント内のコードスニペットに既に適用されているのが確認できます。
テナントIDを見つけたり、APIキーを管理したりするには、API認証情報ページをご覧ください。
以降、FastCommentsにログインしている場合、コード例ではあなたの実際のテナントIDが使用されます（https://fastcomments.com にログインしている場合）。
コメントがページや記事に結び付けられる方法
コメントスレッドを表示したり、コメントを投稿したりする際、FastComments はそのコメントが属するページ、記事、または製品を把握する必要があります。
そのために、私たちは「URL ID」と呼ばれるものを使用します。これは文字列や数値のような識別子、または URL のいずれかです。
デフォルトでは、urlId を指定しない場合はページの URL が使用されます。現在のページ URL を取得し、一般的なマーケティングパラメータやトラッキング識別子を除去してクリーンにします。
WordPress などのサードパーティ統合の場合、プラグインは通常、現在表示されている情報を表す識別子（例：記事/ページ ID）を URL ID として使用します。
Run このドキュメントで頻繁に参照するものの一つは、ウィジェットカスタマイズ UIです。
この UI を使用すると、コードを書かずにコメントウィジェットに多数の変更を加えることができます。
カスタマイズルールを作成する際、通常はサイト全体のすべてのページに適用したいと考えます。しかし、特定のページでコメントウィジェットをカスタマイズしたい場合もあります。たとえば、カスタムスタイルを適用したり、そのページのコメントを匿名化したりすることが考えられます。また、例として、あるページではライブコメントをすぐに表示し、別のページでは通知ボタンの下に隠すことも可能です。
これらはすべて、このページの URL ID 入力フィールドを使用して実現できます。フィールドは以下のようになります：
このフィールドの値は、コメントウィジェットに渡される urlId パラメータと一致する必要があります。カスタマイズルールを urlId に依存させたくない場合は、このフィールドを空にするか、* を入力してください。
2023年現在、ウィジェットカスタマイズの URL ID フィールドはパターンも受け付けるようになりました！たとえば、*/blog/* を使用してブログ専用のスタイルを追加したり、*/store/* を使用してストア専用のスタイルを適用したりできますが、ドメインは同じままです。
Gotchas
- ページにハッシュパラメータ（例: example.com#page-1）が含まれている場合、デフォルトでそれが URL ID の一部になります。
- 移行中、たとえば WordPress から Gatsby への移行の場合、初回の移行後に URL ID のコメント値を移行する必要があるかもしれません。その際はお問い合わせください。
異なるページで同じコメントを表示する
urlId パラメータはコメントがどのページ、またはどのIDに紐づくかを定義できるため、これらのページでは単に urlId を同じ値に設定すればよいです。
Run カスタムスタイリング
FastComments はカスタマイズ可能になるよう設計されています。コメントウィジェット自体はセキュリティ上の理由で iframe 内で実行されるため、カスタムスタイリングを適用するには以下の 2 つのアプローチのいずれかに従う必要があります。
最初の、最も簡単なアプローチであり、当社が推奨する方法は、ウィジェットカスタマイズページ を使用することです。
ウィジェットカスタマイズページで「高度なオプションを表示」セクションを確認すると、そこに「Custom CSS」とラベル付けされた領域があります：
このアプローチにはいくつかの利点があります：
- 入力された CSS はユーザーに送信される前に圧縮され、編集 UI でのフォーマットが一貫して保たれます。
- ウィジェットカスタマイズ UI のすべての利点を活用でき、例えばサイトごとにコメントウィジェットを簡単にカスタマイズできます。
- コメントウィジェットに変更を加える際、カスタムスタイリングはリリースプロセスの一部としてテストされます。
2 番目のアプローチは、ウィジェット設定で customCSS パラメータを指定する方法です。例：
Run ただし、これには 制限 があります：
- ヘッダーサイズの制限により、サーバーがリクエストを拒否するまでに渡せるカスタム CSS の量に上限があります。
- カスタム CSS をインフラストラクチャやビルドシステムで管理する必要があります。これはデメリットというよりメリットになることもあります。
- この使用ケースでは、カスタム CSS をネットワーク上で 2 回 送信する追加のオーバーヘッドがあります（サーバーに送信され、iframe コンテンツとして返されます）。ただし、ほとんどのペイロードサイズでは目立ちません。
- 一般的な最適化として CSS を圧縮してネットワーク上のサイズを削減しますが、このアプローチでは自分で処理する必要があります。
- コメントウィジェットに変更が加わった際、カスタム CSS はテストされません。
外部 CSS ファイル
@import を使用してウィジェットに外部ファイルを取得させることができます！
@import はカスタマイズルール内に入れることが推奨されます。こうすれば、コメントウィジェットに変更が必要になった際に、当社の自動化ツールで設定を検証できます。たとえば、ウィジェットカスタマイズ UI でカスタマイズルールを作成し、Advanced をクリックして Custom CSS に次のように入力します：
@import url(https://example.com/styles.css);コードでの使用 - 推奨しません
customCSS プロパティを使用して外部 CSS ファイルをロードすることもできます：
Run ただし、これを行うと当社が CSS をテストできなくなることに注意してください。
ユーザープロファイルモーダルのスタイリング
ユーザープロファイルモーダルもカスタム CSS でスタイリングできます。ただし、ユーザープロファイルにカスタムスタイリングを適用するには、すべての CSS セレクタに .user-profile プレフィックスを付ける必要があります。このプレフィックスがないと、ユーザープロファイルモーダルのカスタムスタイリングは無視されます。
例：
Run 後方互換性
FastComments では、顧客がコメントウィジェットをカスタマイズすることを前提に設計されています。これは意図的なものであり、製品が顧客のデザインに不整合をもたらすことは望んでいません。
この重要な機能のため、当社はリリースごとにコメントウィジェットの変更を顧客ごとにレビューできるビルドパイプラインを備えています。
小さな問題が見つかった場合は、リリースが円滑に進むようにアカウントを更新します。重大な破壊的変更が見つかった場合は、リリースを中止できるようにしています。
カスタムフォント
FastComments はカスタマイズ可能になるよう設計されており、ウィジェットで使用するフォントも例外ではありません。
デフォルトでは、FastComments は幅広いデバイスでできるだけ見栄えが良くなるように system font stack を使用します。
独自のフォントを定義するには、Custom CSS ドキュメント を参照してください。
そこにはカスタム CSS を定義する方法が記載されており、希望するフォントを設定できるようになります。
フォントの定義方法
フォントを上書きするには、.fast-comments, textarea セレクタを使用して CSS を定義することをお勧めします。例：
Run ブランドの削除
Pro または Enterprise アカウントをお持ちのお客様は、ホワイトラベリングが可能です。単に お問い合わせください。喜んでお手伝いします。
コメントウィジェットから当社のロゴを削除したいだけの場合、Flex および Pro プランではこれが自動的に有効になります。
これらのプランは、当社のプラットフォームから送信されるメールについても同じ機能を提供します。
ダーク背景（ダークモード）への対応
デフォルトでは、FastComments のコメントウィジェットはほとんどのサイトでダークモードを自動的に検出します。
ダークモードが検出されると、FastComments は白背景に黒い文字から黒背景に白い文字へ切り替わります。画像も変更されます。
ページ読み込み時に、ウィジェットはコメントウィジェットの背後にあるページの背景がどれくらい暗いかを判定しようとします。これはつまり ページ自体は白い背景でも、コメントウィジェットを黒い背景のコンテナ内に置けば、ダークモードが コメントを読みやすくするために自動的に有効になるはず、ということです。
しかし、「luminance」を判定する検出メカニズムは、望むときにダークモードを有効にしない場合があります。強制的に有効にするには、次のように hasDarkBackground フラグを true に設定してください:
Run ダークモードの切り替え
ページの初回読み込み後にダークモードの切り替えを許可するサイトでは、これにはもう少し手間がかかります。
まず、Commentウィジェットライブラリのすべての現在のバージョン（React、Vue）には、それぞれのリポジトリにダークモード切り替えの例があります。
VanillaJSウィジェットについては、もう少し作業が必要です。まず、FastCommentsUIは "destroy" と "update" の関数を持つオブジェクトを返します。
コメントウィジェットの設定を更新したいたびに、単純にupdate関数を呼び出すことができます。以下は、VanillaJSウィジェットでダークモードを切り替える完全に動作する例です。
Run テキストの上書き
FastComments を使用すると、コメントウィジェット内のすべてのテキストをカスタマイズできます。
送信ボタンのような単一のテキストや、コメントウィジェット全体のすべてのテキストを上書きすることができます。
デフォルトでは、コメントウィジェット内のテキストはユーザーのロケールに基づいて翻訳されます。ただし、ユーザー層が同じロケール/言語を使用していると確信できる場合は、テキストを上書きすることができます。例として：
Run すべてのカスタマイズ可能な翻訳は、こちらの「高度なオプション」タブで確認できます。
しかし、ウィジェットカスタマイズ UI を使用すると、より簡単な方法があります。そこでは、EN_US ロケールでコメントウィジェットに表示されるテキストを見つけて、置き換えを指定するだけです。
現在、すべての翻訳上書きはすべてのロケールに影響します。
これはウィジェット自身のテキストに関するものです。訪問者が書くコメントを翻訳するには、Comment Translation を参照してください。
デフォルトアバターの変更
ユーザーが FastComments で初めてコメントすると、https://gravatar.com/ からアバターを取得しようとします。
ただし、アバターが見つからない場合や、ユーザーがアカウントで設定していない場合は、静的なデフォルトアバター画像を表示します。
独自の静的アバター画像を指定するには、defaultAvatarSrc 設定を使用します。
Run コードを使用せずに行うこともできます。ウィジェットカスタマイズページで「Default Avatar」セクションをご覧ください。
SSO などで特定のユーザーのアバターを定義する方法は、別のセクションで説明しています。
アバターの無効化
アバターは、ユーザーが独自のアバターを設定している場合でも、コメントウィジェットから完全に削除できます。
Run これはコードなしで、ウィジェットカスタマイズページでカスタマイズできます。
すべてのデフォルトスタイルの無効化
より大規模なカスタムスタイリングプロジェクトでは、デフォルトのスタイリングを全く使用せず、クリーンな状態から始めることが望ましい場合があります。
すべてのデフォルトスタイリングは、noStyles パラメータを true に設定することで削除できます。以下のように：
Run これは、コードを使用せずに、ウィジェットカスタマイズページの「詳細オプション」セクションでカスタマイズできます：
コメントからページへのリンク
通知メールの送信時や、モデレーションページなどのユーザーインターフェースにコメントを表示する際に、コメントからそのコメントが存在するページへのリンクを張れると便利です。
URL ID が常に ID であるとは限らない場合、URL を別の場所に保存する必要があります。それが "url" プロパティの役割で、以下のように定義されています。
Run よくあるユースケースは、コメントスレッドを記事などの識別子に紐付け、その上で特定のページにリンクを張ることです。例えば:
Run URL から一般的なマーケティングパラメータは除去されません。デフォルトでは、現在のページの URL がそのままコメントと共に保存されます。
デフォルトで返信を折りたたむ
デフォルトでは、トップレベルのコメントへの返信が表示されます。
これを設定すると、ユーザーはトップレベルのコメントで「Show Replies」をクリックして子コメントを表示する必要があります。
Run コードを使用せずに、ウィジェットカスタマイズページでカスタマイズできます:
この設定は、最初に読み込まれるトップレベルコメントの数には影響しません。この設定が有効な場合、トップレベルコメントが1つで子コメントが29件あると、次のようになります。
- トップレベルのコメントを見る。
- このコメントの下に「Show Replies (29)」が表示されます。
このオプションと組み合わせてすべてのトップレベルコメントを表示したい場合は、starting page to -1 を設定してください。
WYSIWYG を有効化
デフォルトでは、FastComments の書式機能は、テキストの周りに <b></b> のような可視のアンカータグを追加することで実現されます。ツールバーをクリックするかショートカットを使用すると、これが自動的に行われます。ただし、一部のコミュニティではアンカータグなしで書式設定を使用したい場合があります。これは WYSIWYG（What You See Is What You Get）エディタを有効にすることと呼ばれます。このエディタはデフォルトのものと見た目は全く同じですが、可視のアンカータグなしで太字、下線などを可能にする追加コードをロードします。
Run コードを書かずにこれを行うこともできます。ウィジェットカスタマイズページで「高度な書式設定を有効にする」オプションを確認してください。
ツールバーの無効化
デフォルトでは、FastComments はコメントを書いているときにツールバーを表示し、テキストの装飾や画像のアップロード のショートカットを提供します。
このツールバーはコードまたはカスタマイズ UI で無効にできます。
Run コードを使用せずにこれを行うこともできます。ウィジェットのカスタマイズページで、"Disable The Reply Toolbar" オプションを確認してください。
ブロック機能の無効化
デフォルトでは、FastComments はユーザーが他のユーザーをブロックできるようにしています。ユーザーをブロックすると、そのコメントが
マスクされ、ユーザー間の通知が防止されるなどの効果があります。
この機能を無効にしたい場合があります。以下のように実行できます：
Run コードを使用せずに、ウィジェットカスタマイズ UI を使用して実行することもでき、これにより適切なサーバー側検証も有効になります：
表示するページの決定
コメントを取得してレンダリングする際、コメントウィジェットはどのページから開始するかを知る必要があります。デフォルトでは最初のページから始まり、そのページのみがレンダリングされます。
必要に応じて、描画する正確なページを設定 startingPage としてコメントウィジェットに渡すことができます。
Run ページ番号は0から始まることに注意してください。そのため、上の例は2ページ目をレンダリングします。
ページをリロードせずにコメントスレッドを切り替える
urlId はコメントが紐付けられるページまたは記事の ID であることについては既に説明しました。
また、おさらいとして、urlId が定義されていない場合は現在のページの URL がデフォルトとして使用されます。
では、ページの再読み込みなしにコメントが紐付けられるページやコンテンツが動的に変化する SPA(シングルページアプリケーション)の場合はどうでしょうか?
Angular、React、Vue など
Angular や React などの当社のライブラリでは、ウィジェットに渡される urlId プロパティを更新するだけで、コメントウィジェットが更新されます。例えば React アプリでの動作は、こちらで確認できます。
VanillaJS
VanillaJS ライブラリを使用している場合、Angular や React のようなデータバインディングや状態伝播を処理するフレームワークがないため、少し複雑になります。
VanillaJS ウィジェットをインスタンス化すると、ウィジェットを更新するために呼び出せる関数がいくつか返されます。
以下は、ページハッシュを変更してコメントウィジェットを更新する実際に動作する例です:
Run 絶対日時（人間に優しいタイムスタンプの無効化）
デフォルトでは、ローカライズされた相対日時が使用されます。例えば、最近投稿されたコメントの横に「11 分前」と表示されることがあります。
絶対日時を使用する必要がある、または使用したい場合は、このパラメータを true に設定します。
Run コードを使用せずに、ウィジェットのカスタマイズページの「詳細オプション」セクションでカスタマイズできます。
絶対日時と相対日時の両方を表示
デフォルトでは、ローカライズされた相対日時が使用されます。例えば、最近投稿されたコメントの横に「11 分前」と表示されることがあります。
この相対日時形式を保持しつつ、完全な日付も併せて表示したい、または必要な場合は、このパラメータを true に設定します。
Run この設定はコードを書かずに、ウィジェットカスタマイズページの「高度なオプション」セクションでカスタマイズできます。まず、UI でこのオプションを表示させるために「絶対日時」を有効にする必要があります。
ヘッダーテキストの追加
ヘッダーやメッセージのようなテキストは、コメント数の下、ログインステータスのテキストの上に表示できます。
これをヘッダーと呼び、デフォルトでは非表示になっています。
Run コードを使用せずに、ウィジェットカスタマイズページの「高度なオプション」セクションでカスタマイズできます。
リンクをテキストとして表示
デフォルトでは、FastComments は次のようにリンクをレンダリングします: https://exmaple.com - リンク URL がクリック可能な HTML アンカータグになります。
一部のサイトでは、たとえば詐欺師を抑止するためにこれを無効にしたい場合があります。この機能は、Comment HTML Rendering Option を Links as Text に設定することで提供されます。
この設定はコードを書かずに、ウィジェットカスタマイズページで、ドメイン全体または個別のページごとにカスタマイズできます。
ボタンでコメントの切り替え
デフォルトでは、FastComments はコメント入力ボックスとコメントスレッドを同時に表示します。垂直方向のスペースを節約するため、ウィジェットが操作されるまで他の必須フィールドは非表示になります。
ただし、コメントウィジェットはボタンの背後に隠すことができます。例として:
ボタンは、コメントが現在表示されているかどうかに応じて異なる翻訳テキストを使用します。コメントが非表示の場合は translations.SHOW_COMMENTS_BUTTON_TEXT を使用し、コメントが表示されている場合は translations.HIDE_COMMENTS_BUTTON_TEXT を使用します。翻訳テキストには [count] を含めることができ、ローカライズされた件数に置き換えられます。
Run これは hideCommentsUnderCountTextFormat 設定の代わりに使用することを意図しています。
件数はコメントスレッドとリアルタイムで更新されます。コメントがない場合、ボタンは表示されません。
コードを書かずに、カスタマイズルールを作成し「Click to Show Comments」を有効にすることで有効化できます。
コメント数テキストのカスタマイズ
コメントウィジェットの上部に表示されるコメント数はカスタマイズできます。
任意の文字列に置き換えることができ、値 [count] はユーザー向けにローカライズされたカウント値に置き換えられます。
Run コードなしで、ウィジェットのカスタマイズページでカスタマイズできます。
![ウィジェットカスタマイズページのコメント数テキストフィールド。ここで [count] はリアルタイムの合計に置き換えられます](/images/8f5c6e31e1885d089b072b89c169783c.png)
画像リダイレクトの無効化
デフォルトでは、FastComments はユーザーが画像をアップロードできるようにしています。ユーザーがその画像をクリックすると、FastComments はデフォルトで 別タブを開き、その画像をフルサイズで表示します。このフラグを true に設定するとこの動作が無効になります：
Run 画像のクリックを自分で捕捉する予定がない場合（onImageClicked を参照）、画像がクリック可能に見える見た目を取り除くために、これを何らかのスタイリングと組み合わせることを推奨します。
自動ハッシュタグ作成の無効化
ユーザーがハッシュタグ（例: #someexampletag）を入力すると、FastComments は自動的にその HashTag を作成し、コメント内でハイライトします。
場合によっては、この機能を無効にしたり、API を通じて使用できるハッシュタグを制御したりしたいことがあります。
そのためには、ウィジェットカスタマイズ UI で Disable Automatic #hashtag Creation を有効にするだけです。
通知ベルの無効化
デフォルトでは、FastComments はコメント領域の右上に通知ベルを表示します。
このベルは赤くなり、ユーザーが受け取っている通知の数を表示します。例として以下の通知があります：
- ユーザーがあなたに返信しました。
- ユーザーがあなたがコメントしたスレッドで返信しました。
- ユーザーがあなたのコメントに賛成票を付けました。
- ユーザーがあなたが購読しているページに返信しました。
通知ベルは、ページ全体を購読する機能も提供します。
ただし、通知ベルを完全に無効にすることもできます：
Run コードを使用せずにこれを行うこともできます。ウィジェットカスタマイズページで「Disable Notification Bell」セクションを参照してください。
プロフィールの無効化
デフォルトでは、FastComments はユーザーのアバターをクリックするとそのユーザーのプロファイルを表示します。
ただし、この機能は無効にすることができます:
Run コードを使用せずにこの設定を行うこともできます。ウィジェットのカスタマイズページで「プロファイルの無効化」セクションを確認してください。
プロフィールコメントの無効化
デフォルトでは、FastComments はユーザープロフィールに「Profile Comments」タブを表示し、訪問者が誰かのプロフィールにコメントを残すことができます。
ただし、このタブを無効にすることができます:
Run コードを使用せずにもこれを行うことができます。ウィジェットカスタマイズページで「Disable Profile Comments」セクションをご覧ください。
プロフィールのダイレクトメッセージの無効化
デフォルトでは、FastComments はユーザープロフィールに「ダイレクトメッセージ」タブを表示し、訪問者がユーザーに直接メッセージを送信できるようにします。
ただし、このタブを無効化することができます:
Run コードを使用せずにも設定できます。ウィジェットカスタマイズページの「ダイレクトメッセージを無効化」セクションをご覧ください。
成功メッセージの無効化
デフォルトでは、FastComments はコメント投稿後に成功メッセージを表示します。これを無効にするには、以下のようにします：
Run コードを使用せずに行うこともできます。ウィジェットのカスタマイズページで：
GIF のコンテンツレーティングを変更
デフォルトでは、FastComments のコメントウィジェットは gif rating を pg に設定します。
利用可能なオプションは g、pg、pg-13、および r です。
この設定はコードまたは UI で行うことができます。コードでは次のように設定できます：
Run UI では、Disable Image Uploads? がチェックされていない限り、Gif Picker Rating の下にこの設定があります。
画像コンテンツのモデレーション
デフォルトでは、FastComments のコメントウィジェットは画像コンテンツのモデレーションが off に設定されています。
利用可能なオプションは off、low、medium、high です。
ウィジェットのカスタマイズ UI では、Disable Image Uploads? がチェックされていない限り、Image Content Moderation Level の下にこの設定があります。
投票スタイルの変更
デフォルトでは、FastComments は投票オプションを上下矢印として表示し、ユーザーはコメントに対して賛成または反対の投票ができます。
ただし、投票ツールバーのスタイルを変更することが可能です。現在のオプションはデフォルトの上下ボタン、またはハートスタイルの投票メカニズムです。
voteStyle フラグは次のように使用します:
Run コードなしで行うことを強くお勧めします。これによりサーバー側の検証も有効になります。ウィジェットカスタマイズページの「Vote Style」セクションをご覧ください。
投票は無効にすることもできます。スタイルオプションの上にある Disable Voting を参照してください。
削除の無効化
デフォルトでは、FastComments はユーザーが自分のコメントを削除できるようにします。
ただし、これを防止することも可能です。
ウィジェットカスタマイズページで、"Disable Deleting" オプションをご確認ください。
- これは通常のコメント投稿者にのみ影響し、モデレーターや管理者には影響しません。彼らは引き続き削除できます。
- また、
contextUserIdが渡された場合の API 統合にも影響します。
編集の無効化
デフォルトでは、FastComments はユーザーが自分のコメントを編集できるようにします。
ただし、これを防止することも可能です。
ウィジェットカスタマイズページで、「編集の無効化」オプションをご確認ください。
- これは通常のコメント投稿者にのみ影響し、モデレーターや管理者には影響しません。彼らは引き続き編集可能です。
contextUserIdが渡された場合の API 統合にも影響します。
新しいコメントのハイライト
FastCommentsでは、新しいコメントをハイライトする方法をいくつか提供しています。
まず最も重要な点として、デフォルトでは、アプリ内通知をトリガーしたコメント(返信、同じスレッド内の返信、または購読しているページへのコメント)は、ユーザーのアバターがわずかに光ることで自動的にハイライトされます。この色は、is-unread クラスを使用してCSSでカスタマイズできます。
過去24時間以内に投稿されたコメントには 24hr クラスが適用され、スタイリングに使用できます。
最後に、ユーザーのセッション中に表示される新しいライブコメントは、アニメーションによって数秒間ハイライトされます。これは is-live CSSクラスを通じて行われ、こちらもカスタマイズ可能です。
ページサイズ
デフォルトでは、FastComments のページサイズは 30 です。これにはスレッド内の返信も含まれます。
ページサイズは、ウィジェット設定 UI で 10 から 200 までのさまざまなサイズにカスタマイズできます。
ページサイズを変更すると、アカウント内のすべてのコメントスレッドを再計算する必要があることに注意してください。これには数分かかる場合があります。
ページはサーバー側で計算されるため、クライアント側のウィジェットでは設定できません。
以下に設定例を示します：
ページサイズは、グローバル、ドメイン単位、ページ単位で、異なるカスタマイズルールを作成することでカスタマイズできます。
これにより、当社プラットフォームを通じてコメントを表示するすべてのクライアント、統合、フレームワークに影響が及びます。
メールテンプレート
FastComments からお客様へ送信されるメールはカスタマイズできます。テンプレート、ロジック、 翻訳もすべて変更できます。テキストはロケールごとにカスタマイズでき、スタイリング ドメインごとに変更することも可能です。 カスタムメールテンプレートの詳細はこちら
ユーザー名の形式
デフォルトでは、FastCommentsはユーザーが入力した名前、またはSSO経由で渡された名前をそのまま表示します。
しかし、ユーザー名をマスクしたり、別の方法で表示したい場合があります。例えば、ユーザー名がAllen Rexの場合、「Allen R.」のように表示したいかもしれません。
これは、Widget Customization UIの Commenter Name Format という設定で、コードを書かずに行うことができます:
利用可能な形式は以下の通りです:
- Capitalize(例のユーザーを Example User と表示)
- Last Initial(Example User を Example U. と表示)
- All Initials(Example User を E. U. と表示)
- "Anonymous" を表示
この設定を変更すると、すぐに反映されます。ユーザー本人にはコメント欄の上部に自分の完全なユーザー名が表示されたままですが、コメントには変更後のユーザー名が表示されます。
ユーザー名はユーザーを保護するためにサーバー側でマスクされます。
画像アップロードの無効化
デフォルトでは FastComments は画像のアップロードを許可しています。この設定は noImageUploads フラグを true に設定することで無効にできます。
Run コードを使用せずに、ウィジェットのカスタマイズページでカスタマイズできます：
メディア埋め込みの許可
デフォルトでは、FastComments はコメント内で iframe を許可していません。メディア埋め込みを有効にすると、コメント投稿者は YouTube、Vimeo、SoundCloud、Spotify などの信頼できるプロバイダーから埋め込みコード（<iframe> スニペット）を貼り付けることができ、コメント内にインラインで表示されます。
セキュリティ上、これはクライアント側のウィジェット設定フラグではありません。サーバー側の設定で、各コメントが保存される際に検証されるため、ページ上からオンにすることはできません。組み込みの信頼できるプロバイダーリストに該当する iframe のみが許可され、その他の iframe は削除されます。
これはコードを書かずに、ウィジェットカスタマイズページで行えます：
独自のプロバイダーを追加する
組み込みの信頼リストにないプロバイダーからの埋め込みを許可したい場合は、同じページの「Additional Embed Domains」フィールドにそのホスト名を追加します。これらのホスト名は組み込みプロバイダーに加えて許可されます。マッチは完全一致なので、フルホスト名（例: player.example.com）を入力してください。リストに含めなかったものはブロックされたままです。
プレーンなコメントボックスと WYSIWYG エディタの両方で埋め込みの貼り付けがサポートされています。WYSIWYG エディタでは、埋め込みは削除可能なブロックとして挿入されます。
検索ボックスの有効化
デフォルトでは、コメントウィジェットに検索ボックスは表示されません。
ただし、enableSearch フラグを true に設定することでこれを有効にできます：
Run これはコードなしでも行えます。ウィジェットのカスタマイズページで「Enable Search Box」オプションを確認してください。
スポイラーの有効化
enableSpoilers フラグを true に設定することで、スポイラーサポートを有効にできます:
Run コードを使用せずにこれを行うこともできます。ウィジェットカスタマイズページで「Enable Spoilers」オプションを確認してください。
テキストがハイライトされ、表示された SPOILER ボタンがクリックされると、テキストはマスクされ、ユーザーがマウスオーバーするまで隠れたままになります。ダークモードの場合は、同様の動作を行いますが、ダークモードにより適した異なる色を使用します。
これは WYSIWYG エディタでも互換性があります。
コメント閲覧数の有効化
デフォルトでは、FastComments は各コメントを誰が閲覧したかを追跡せず、これに関する統計情報も提供しません。
ただし、この機能を有効にすれば、システムは各ユーザーがコメントにスクロールした際に追跡を開始します。
このようになると、各コメントに表示される目のアイコンの横にあるカウントが増加します。カウントはリアルタイムで更新され、ユーザーのロケールに合わせて省略形で表示されます。
enableViewCounts フラグを true に設定することで、この機能を有効にできます：
Run コードを書かずに、ウィジェットのカスタマイズページで設定できます：
コメントを閲覧したユーザーID* を1週間追跡します。そのため、同じ週内に再度コメントを閲覧してもカウントは増加しません。1週間が経過した後に再度閲覧すると、カウントは再び増加します。
- *注: 匿名セッションID、またはユーザーのIPをハッシュ化した値でも構いません。
ライブコメントをすぐに表示
デフォルトでは、ライブコメント機能が有効になっています。つまり、コメントが追加、削除、編集、ピン留めされた場合、その変更は同じコメントスレッドを閲覧しているすべてのユーザーにリアルタイムで表示されます。
ただし、デフォルトでは、これらの新着コメントは「Show 2 New Comments」のようなテキストの動的に表示されるボタンの下に表示されます。
新着コメントがページへの直接の返信である場合、ボタンはコメントスレッドの上部に表示されます。特定のコメントへの返信である場合は、そのコメントの下に表示されます。
これは、ページのサイズが絶えず変化してユーザーがスクロールバーを掴もうとする際に不満を感じる可能性があることを防ぐためです。
ライブオークションやオンラインイベントなどの一部のユースケースでは、これは望ましい動作ではありません。コメントウィジェットを、新着コメントが「すぐに表示される」チャットボックスのようなものにしたい場合があります。
そのため、この機能を有効にするフラグの名前は showLiveRightAway となっています。
以下のようにして有効にできます:
Run コードを使わずに、ウィジェットカスタマイズページでこれを設定できます:
ライブコメントの無効化
デフォルトでは、FastComments はライブコメント機能が有効になっています。
これは、コメントスレッドのすべての閲覧者が同じ内容を見ることになることを意味します。
例えば、コメントが追加された場合、そのコメントが表示されます。コメントが編集または削除された場合、
そのコメントがスレッドのすべての閲覧者に対して編集または削除されます。投票やすべてのモデレーションアクションも同様です。
ただし、これを無効にすることができます。
Run コードを使用せずにこれを行うこともできます。ウィジェットカスタマイズページで「ライブコメントの無効化」セクションを確認してください。
新しいライブコメントを下部に表示
デフォルトでは、新しいライブコメントはリアルタイムで投稿されると、コメントリストの上部に表示されます。
このオプションを有効にすると、新しいライブコメントはリストの下部に追加されるようになります。これは、ユーザーがコメントスレッドを閲覧している間にコメントがライブで投稿された場合の表示方法に影響します。
Run この設定を有効にした場合:
- 他のユーザーが投稿した新しいライブコメントは、コメントリストの下部に表示されます
- ユーザーは、新しいコメントが既存のコメントの下にリアルタイムで表示されるのを見ることができます
- これはライブコメントの更新にのみ影響し、ページの初回読み込みには影響しません
- ディスカッションをフォローしているユーザーの読書フローを維持するのに役立ちます
この設定は、リアルタイムで届く新しいライブコメントの配置場所にのみ影響することに注意してください。ページ読み込み時の初期ソート順には影響しません。
無限スクロールの有効化
デフォルトでは、FastComments ウィジェットは表示されているすべてのコメントに合わせて縦方向に自動的にサイズを調整します。ページネーションは現在のページ末尾にある「次を表示」ボタンで行われます。これは多くのユーザーにとって最も自然に感じられる操作方法であると判断しているためです。
しかし、無限スクロールの方が好まれるケースもあります。例えば、Stream Chat 製品ではこの機能を使用しています。
enableInfiniteScrolling フラグを true に設定することで、「次を表示」ボタンを非表示にして無限スクロールに切り替えることができます:
Run これにはカスタム CSS の追加も必要です。スクロールを有効にするには、.comments セレクタに対して次のようなカスタム CSS を追加します。例えば：
Run 完全な動作例は次のとおりです：
Run 上の例では customCSS プロパティを使用していますが、パフォーマンスの観点からは代わりにウィジェット設定 UI を使用することを推奨します。 カスタム CSS のドキュメントを参照してください。
デフォルトのソート方向の変更
デフォルトでは、FastComments はコメントを「最も関連性が高い」ソート方向で並べ替えます。
「最も関連性が高い」ソートは、コメントが投稿された時間と投票数を考慮して並べ替えます。
ユーザーはコメントウィジェットの UI で、ソート方向を「最も古い」または「最新」へ変更できます。
ただし、デフォルトを3つのいずれかに変更できます。たとえば、最も古いコメントを最初に表示したい場合は次のようにします：
Run defaultSortDirection の値を "OF" に設定して、方向を "OF" にします。
最新順のソート方向にするには、次のようにします：
Run defaultSortDirection の有効な値は次のとおりです：
- MR: "最新"
- NF: "最新順"
- OF: "最も古い順"
これはコードなしでも行えます。ウィジェットのカスタマイズページで「Default Sort Direction」セクションをご覧ください。
各ページの各ソート方向のコメントは事前に計算されているため、すべてのソート方向で同じパフォーマンスになります。
すべてのコメントを一度に表示 - ページネーションの無効化
ページネーションを無効にして、すべてのコメントを一度にレンダリングするには、startingPageを-1に設定します。
Run 返信ボックスをコメントの後に移動
デフォルトでは、コメント入力エリアはコメントスレッドの 前 にあります。 ただし、この設定パラメータ を true に設定すると、後 に移動できます。
Run コードを使用せずに、ウィジェットカスタマイズページでカスタマイズできます：
コメント長さの制限
コメント入力フィールドに入力できる最大文字数は、maxCommentCharacterLength パラメータで制限できます。
デフォルトは 2000 です。
画像 URL などは文字数の計算に含まれません。
Run コードなしで、ウィジェットのカスタマイズページで設定できます。
複数行コメントの無効化
デフォルトでは、FastComments はユーザーが好きなだけの行数でコメントを入力でき、デフォルトの文字数制限まで許可します。
ただし、ユーザーがテキストを1行だけ入力できるように制限したい場合があります。例として、オンライン入札やライブチャットなど、FastComments を利用できるケースがあります。
次のように useSingleLineCommentInput フラグを有効にします：
Run これはコードなしでも設定できます。ウィジェットカスタマイズページで「Enable Single-Line Comment Input」セクションを確認してください。
なお、各ページのコメントは各ソート方向ごとに事前に計算されているため、すべてのソート方向で同じパフォーマンスが得られます。
ユーザーごとのコメント量の制限
デフォルトでは、各ユーザーは同じ分内に最大 5 コメント を投稿できます。
これはユーザーID、匿名ユーザーID、IPアドレス（ハッシュ化）で追跡されます。
コードを書かずに、ウィジェットカスタマイズページでカスタマイズできます。
コメント作成APIを使用している場合、レートリミットが適用されるように、ユーザーの元の ip アドレスをリクエストでバックエンドに渡す必要があることに注意してください
ユーザー単位で適用され、アカウント全体に対しては適用されません。
新しいトップレベルコメントの防止
noNewRootComments を true に設定すると、ウィジェットはルート返信エリアを非表示にしますが、ユーザーは返信
を子コメントに対して行うことができます。例えば、ページ読み込み時に条件付きでこれを設定し、一部のユーザーのみがトップレベルのコメントを残せるようにすることができます。
Run 最大返信深さ
デフォルトでは、FastComments は返信のネストを無制限に許可し、ユーザーが返信に対して際限なく返信できるスレッド構造を作成します。
maxReplyDepth オプションを使うと、返信スレッドの深さを制限できます。最大深度に達すると、そのレベルのコメントには返信ボタンが表示されなくなります。
Run With maxReplyDepth set to 2:
- ユーザーはトップレベルでコメントできます（depth 0）
- ユーザーはトップレベルのコメントに返信できます（depth 1）
- その返信にさらに返信できます（depth 2）
- depth 2 を超える返信は許可されません
maxReplyDepth を 1 に設定すると、トップレベルのコメントへの返信のみが許可され、より平坦な議論の構造になります。
maxReplyDepth を 0 に設定すると、すべての返信が無効になり、トップレベルのコメントのみが許可されます。指定しない場合、返信は無制限にネストされます。
利用規約への同意を必須にする
FastCommentsでは、初めてコメントするユーザーに対して、コメントの送信前に利用規約(Terms of Service)への同意を求めることができます。
有効にすると:
- 匿名ユーザーは、コメントするたびにTOSチェックボックスが表示されます
- 認証済みユーザーは、最初のコメント時、またはTOSを更新した時にのみチェックボックスが表示されます
設定
ウィジェットのカスタマイズページに移動し、「利用規約への同意を必須にする」チェックボックスを有効にします。有効にすると、以下のオプションが表示されます:
- TOSテキストモード: デフォルトでは、チェックボックスには「利用規約とプライバシーポリシーに同意します」というテキストと、両方のドキュメントへのリンクが表示されます。「ロケールごとにテキストをカスタマイズ」を選択すると、言語ごとに独自のテキストを設定できます。
- TOS最終更新日: 利用規約を更新した際に、この日付を設定します。この日付より前に同意したユーザーは、再度同意する必要があります。
仕組み
- TOS同意のタイムスタンプは、ユーザーごと、コメントごとに保存されます
- ユーザーがTOSに同意すると、その日付はユーザープロフィール(テナントごと)に記録されます
- ユーザーの同意日より後の「最終更新」日を設定した場合、ユーザーは再同意する必要があります
- 追跡できない匿名ユーザーの場合は、コメント送信のたびにチェックボックスが表示されます
未送信コメントがある状態で離脱しようとしたら警告
デフォルトでは、ユーザーがコメントを入力し、送信前にページをリロードしたり、タブを閉じたり、別のページへ移動したりすると、下書きは黙って失われます。
warnOnUnsavedComment を true に設定すると、コメントボックスや編集中のテキストが残っている間にページを離れようとした際、ブラウザがユーザーに確認を求めます。コメントが送信されるとテキストはクリアされるため、プロンプトは表示されません。
Run このプロンプトはブラウザ固有のダイアログを使用します。最新のブラウザは独自の文言を表示し、カスタムテキストは無視されるため、メッセージをカスタマイズすることはできません。
このオプションは必要に応じて小さな拡張機能をロードするため、無効にしているサイトのウィジェットには何も追加されません。
投票機能の有効化
Pollsは、コメント投稿者が2〜10項目の選択肢を持つ質問をコメントに添付できるようにします。ページ上の全員がその場で投票し、結果がリアルタイムで更新されるのが確認できます。
Pollsはデフォルトで無効になっています。ウィジェットカスタマイズ設定で Enable Polls にチェックを入れると、コメントツールバーに投票ボタンが追加されます。さらに2つの設定が表示されます：
- Who Can Create Polls: 管理者/モデレーターのみ（デフォルト）または全員。
- Allow Anonymous Poll Votes: チェックが外れている場合（デフォルト）、ログインユーザーのみが投票できます。
投票の作成方法、投票方法、プライバシー、投票通知の仕組みについては、Polls guide を参照してください。
シングルサインオン (SSO) の概要
SSO(Single Sign-On、シングルサインオン)とは、あなたやあなたのユーザーが新しいアカウントを作成することなくFastCommentsを利用できるようにするための一連の規約です。
匿名コメントを許可していない場合、FastCommentsでコメントするにはアカウントが必要です。サインアッププロセスは非常に簡単にしています。ユーザーはコメント時にメールアドレスを残すだけです。 しかし、それでも余分な手間を避けたいサイトがあることは理解しています。
サイト全体でログインフローを1つにすることで、この手間を減らすことができます。
利用するには?
現在、すべてのアカウントタイプでSSOを利用できます。ただし、SSOユーザーの最大数はプランによって異なります。他の機能と同様に、Proプラン以上では直接の開発サポートが提供されます。
まず各オプションを比較し、その後それぞれの詳細を見ていきましょう。
ユーザーとコメントの移行
DisqusのようなSSO対応プラットフォームから移行する場合、すでにユーザーとそのコメントが存在しています。
コメントは、API、インポートUI、またはカスタマーサポートによる移行の一部としてインポートされます。移行元のプラットフォームがサポートされている場合は、インポートUIの利用が推奨されます。インポートUIには、エラーハンドリング、アバターおよびメディアの抽出とアップロード、バッチジョブ監視システムが組み込まれています。
ユーザーそのものは、初めてコメントスレッドを表示した際に自動的に追加されます。あるいは、API経由で事前に追加することもできますが、この作業にはあまりメリットがありません。
コメントがインポートされ、SSOユーザーがAPI経由で手動追加されていない場合、ユーザーが任意のコメントスレッドを表示した際に初めてアカウントが作成されるときに、コメントは自動的にそのユーザーのアカウントに移行されます。その後、ユーザーは自分が元々書いたコメントを管理、編集、削除できるようになります。
自動移行はメールアドレスまたはユーザー名によって行われます。Disqusのように、エクスポート時にメールアドレスが提供されないプラットフォームもあるため、その場合はユーザー名にフォールバックします。
- 一致するユーザー名と、SSOペイロード内のメールアドレスを渡していただければ、通知やメンションが機能するように、個々のコメントオブジェクトにメールアドレスを追加します。
コメントとユーザーを一度にインポートしたい場合は、API経由でユーザーをインポートした後、サポートと連携してコメントを各ユーザーのアカウントに移行してください。
まとめると、移行の最も簡単な手順は以下の通りです:
- コメントをインポートする。
Manage Data -> ImportsのインポートUIを使用する場合、アバターやその他のメディアは自動的に移行されます。
- Secure SSOまたはSimple SSOをセットアップする。
- ユーザーが初めてログインした際に、ユーザーごとに自動的に移行が行われるようにする。
- ユーザーのコメント数が5万件未満であれば、通常、ページの読み込み時間に1秒未満しか追加されません。
WordPressユーザー
WordPressプラグインをご利用の場合、コードを書く必要はありません! プラグインの管理ページに移動し、SSO Settingsをクリックして、Enableをクリックするだけです。
これにより、ワンクリックのウィザードが表示され、APIキーが作成され、WordPressインストールに送信され、SSOが有効になります。この操作を1回のボタンクリックにまとめました。
プラグインを初めてインストールする場合は、SSO Settingsボタンのある管理ページが表示される前に、セットアッププロセスを完了する必要がある点にご注意ください。
WordPress SSO - モデレーター
FastComments WordPressプラグインでモデレーターがコメントした際に「Moderator」バッジを表示するには、現在のところ、FastCommentsダッシュボードでもモデレーターとして追加され、メールアドレスの確認が完了している必要がある点にご注意ください。
カスタム統合
カスタム統合には2つのオプションがあります。
オプション1 - Secure SSO
Secure SSOでは、コメント、投票、コメント閲覧を行っているユーザーが、あなたのサイトの実際のユーザーであることをFastCommentsが認識します。
有効なペイロードを作成さえすれば、ユーザーは常にシームレスなコメント体験を得られます。
Secure SSOでは、SSOペイロードはHMAC認証を使用してサーバーサイドで作成され、クライアントのウィジェットに渡されます。
Secure SSOでは、ユーザーのアカウントはFastCommentsの他のユーザーベースから完全に分離されています。つまり、Company AとCompany Bという2つのパートナーがいる場合、それぞれが「Bob」というユーザー名のSSOユーザーを持つことができます。
必要条件
- バックエンド開発に関する基本的な知識。
- シークレットAPIキーの取り扱いに関する基本的な知識。
- API開発またはサーバーサイドレンダリングに関する基本的な知識。
メリット
- セキュア。
- シームレスなコメント体験。
デメリット
- バックエンド開発が必要。
ユーザーデータの更新
Secure SSOでは、SSOユーザーペイロードを渡すたびに、最新の情報でユーザーが更新されます。例えば、ユーザーのユーザー名が X で、SSOペイロードで Y を渡すと、ユーザー名は Y に変更されます。
この方法で値を削除したい場合は、undefined ではなく null を設定してください。
Secure SSO API
SSOユーザーとやり取りするためのAPIも提供しています。詳しくはドキュメントをご覧ください。
Secure SSOを使用する場合、ユーザーはページ読み込み時にバックグラウンドで自動的に作成されます。ユーザーを一括インポートする必要はありません。
オプション2 - Simple SSO
Secure SSOの代替手段として、ユーザー情報をコメントウィジェットに直接渡す方法があります。
Simple SSOではメールアドレスの提供は必須ではありませんが、提供しない場合、そのコメントは「Unverified」と表示されます。
注意! 2022年初頭以降、Simple SSOのユーザー名はFastComments.com全体で一意である必要はありません。
理想的には、Simple SSOはバックエンドアクセスを提供しないプラットフォームで開発する場合にのみ選択すべきです。
必要条件
- クライアントサイド開発に関する基本的な知識。
- 少なくともユーザーのメールアドレスを知っている必要がある。
メリット
- シンプル。
- すべてのアクティビティは引き続き検証される。
- ユーザーはユーザー名やメールアドレスを入力する必要がない。
デメリット
- クライアントサイドのペイロードが細工されて任意のユーザーになり得るため、Secure SSOよりもセキュリティが低い。
Simple SSO API
Simple SSOフローで自動作成されたユーザーは、SSOUser オブジェクトとして保存されます。これらは SSOUser API経由でアクセスおよび管理できます。詳しくはドキュメントをご覧ください。
カスタム統合 - 安全なシングルサインオン (SSO)
FastComments Secure SSO では、SSO を実装する仕組みとして HMAC-SHA256 暗号化を使用します。まず全体のアーキテクチャを説明し、その後に例と詳細な手順を示します。
また、類似の SSO 仕組みを持つ他のプロバイダーからの移行に関するドキュメントや、その違いについてのドキュメントもあります。
フローは以下のようになります:
Secure SSO はフルスタック開発を伴うため、Java/Spring、NodeJS/Express、素の PHP による完全に動作するコード例が現在 GitHub で公開されています。
NodeJS の例では ExpressJS、Java の例では Spring を使用していますが、FastComments SSO を実装するためにこれらのランタイムでフレームワークやライブラリは必要ありません。ネイティブの暗号化パッケージで動作します。
FastComments SSO では、新しい API エンドポイントを書く必要はありません。秘密鍵を使ってユーザー情報を暗号化し、そのペイロードをコメントウィジェットに渡すだけです。
API シークレットキーの取得
API シークレットは このページ から取得できます。このページには、マイアカウントに移動し、API/SSO タイルをクリックし、「Get API Secret Key」をクリックすることでもアクセスできます。
コメントウィジェットのパラメータ
コメントウィジェットの高度な API ドキュメントは こちら にあります。
これらのパラメータの意味について詳しく見ていきましょう。
コメントウィジェットは設定オブジェクトを受け取ります。FastComments を使用している場合、顧客 ID(tenantId と呼ばれます)を渡す際にすでにこれを渡しています。
SSO を有効にするには、新しい "sso" オブジェクトを渡します。このオブジェクトには以下のパラメータが必要です。値はサーバーサイドで生成する必要があります。
- userDataJSONBase64: JSON 形式のユーザーデータを Base64 エンコードしたもの。
- verificationHash: UNIX_TIME_MILLIS + userDataJSONBase64 から作成された HMAC-SHA256 ハッシュ。
- timestamp: エポックタイムスタンプ(ミリ秒)。未来の時刻、または 2 日以上過去の時刻であってはなりません。
- loginURL: コメントウィジェットがユーザーのログイン用に表示できる URL。
- logoutURL: コメントウィジェットがユーザーのログアウト用に表示できる URL。
- loginCallback: ログイン URL の代わりに指定できる、ログインボタンがクリックされたときにコメントウィジェットが呼び出す関数。
- logoutCallback: ログアウト URL の代わりに指定できる、ログアウトボタンがクリックされたときにコメントウィジェットが呼び出す関数。
ユーザーオブジェクト
ユーザーオブジェクトには以下のスキーマが含まれます:
モデレーターと管理者
管理者およびモデレーターの場合は、SSOUser オブジェクトにそれぞれ isAdmin または isModerator フラグを渡してください。
通知
通知を有効または無効にするには、optedInNotifications の値をそれぞれ true または false に設定します。この値が SSO ペイロードに含まれた状態でユーザーが初めてページを読み込むと、そのユーザーの通知設定が更新されます。
さらに、アプリ内通知だけでなく、ユーザーが購読したページでのアクティビティに関する通知メールを受け取らせたい場合は、optedInSubscriptionNotifications を true に設定してください。
VIP ユーザーと特別ラベル
オプションの "displayLabel" フィールドを使用すると、ユーザー名の横に特別なラベルを表示できます。
未認証ユーザー
未認証ユーザーを表すには、userDataJSONBase64、verificationHash、timestamp を設定せず、loginURL を指定するだけです。
これらのユーザーはコメントできず、代わりにログインメッセージ(設定に応じてメッセージ、リンク、またはボタン)が表示されます。
ユーザーデータのシリアライズとハッシュ化の直接の例
詳細な例は こちら(js)、こちら(java)、こちら(php)にあります。
どのような統合でも複雑で苦労するプロセスになり得ることを私たちは理解しています。担当者に遠慮なく連絡するか、サポートページ をご利用ください。
カスタム統合 - シンプルなシングルサインオン (SSO)
Simple SSO を使用すると、コメントウィジェットにユーザー情報を提供できるため、ユーザーはコメントする際にユーザー名やメールアドレスを入力する必要がなくなります。
Simple SSO は以下のように設定できます：
Run ユーザーはログイン状態となり、裏で SSO ユーザーが作成されます。API から取得された場合、ユーザーの createdFromSimpleSSO は true に設定されます。
注意点：
- メールアドレスは Simple SSO のユニークな識別子です。
- Simple SSO でメールアドレスを提供することは必須ではありませんが、デフォルトではコメントは「未確認」と表示されます。メールアドレスが提供されない場合、ユーザーは完全に認証されません。
- NEW 2022年1月以降: ユーザー名は fastcomments.com 全体でユニークである必要はなくなりました。
- メールアドレスが提供され、かつユーザーが Secure SSO から元々作成されていない場合、Simple SSO は SSO ユーザーを自動的に作成・更新できます。Simple SSO のペイロードで Secure SSO または API によって作成されたユーザーが指定された場合、そのユーザーは変更されず、訪問者には別のユーザーが作成されます。
badgeConfigプロパティでユーザーにバッジを指定できます。badgeIds配列にはユーザーに関連付けるグローバルバッジの ID が含まれます。pageBadgeIds配列には現在のページ（urlId）にスコープされたバッジ ID が含まれ、これらのバッジは割り当てられたページでのみ表示されます。overrideがtrueに設定されている場合、既存の表示バッジ（グローバルとページスコープ）は置き換えられます（それぞれ独立して上書き）。falseの場合は既存のバッジに追加されます。
Simple SSO 設定
Simple SSO は常に利用可能です。2 つの設定で FastComments がどの程度信頼するかを制御します。これらは カスタマイズルール 内で SSO を検索することで見つけられます。デフォルトでは両方ともオフになっており、"Require SSO To View Comments" がオンかオフかに関わらず適用されます。
これらの設定が追加された時点で既に Simple SSO を使用していたアカウントは、両方ともオンになっているため、変更はありません。
ページに最も適合するカスタマイズルールのみが適用されるため、複数のルールがある場合はそれぞれに設定してください。他のルールでオンになっている場合、新しいルールはそれらがオンの状態で開始されます。
Simple SSO によるコメントの自動検証
この設定がオンの場合、Simple SSO ユーザーからのコメントはすぐに検証されます。
この設定がオフの場合、Simple SSO ユーザーからのコメントは「未確認」と表示され、ユーザーが Simple SSO ペイロード内のメールアドレスに送信されたリンクをクリックするまで検証されません。検証済みコメントのみ自動承認する設定の場合も同様にリンクを待ちます。ペイロードにメールアドレスが含まれていない場合、コメントは未確認のままです。
この設定はコメントにのみ影響し、Simple SSO ユーザーからの投票は常に即座にカウントされます。
Simple SSO 管理者の許可
この設定がオンの場合、Simple SSO ユーザーはアカウントの管理者またはモデレーターになることができます：
- 管理者またはモデレーター権限を持つ Simple SSO ユーザーはその権限を保持します。
- 管理者またはモデレーターのメールアドレスと同じメールアドレスを持つ Simple SSO ユーザーは、その権限を取得します。
この設定がオフの場合、Simple SSO はこれらの権限を付与しません。権限を持つユーザーが指定された Simple SSO ペイロードは、権限のない別のユーザーを作成し、元のユーザーは変更されません。
Simple SSO ペイロードは署名されていないため、この設定がオンの場合、管理者のメールアドレスやユーザー ID を知っている誰でもその管理者として振る舞うことができます。サイトでこれが問題になる場合は、オフにして管理者には Secure SSO を使用してください。
Secure SSO または API によって作成されたユーザーは、Simple SSO がオンかオフかに関わらず、Simple SSO からはアクセスできません。
カスタム統合 - Disqus SSO からの移行
Disqus と FastComments Secure SSO の最大の違いは、Disqus が暗号化に SHA1 を使用しているのに対し、当社は SHA256 を使用している点です。
つまり、Disqus からの移行は簡単です - 使用するハッシュアルゴリズムを SHA1 から SHA256 に変更し、UI に渡されるプロパティ名を更新するだけです。
カスタム統合 - Commento SSO からの移行
Commento は大幅に異なる SSO アプローチを採用しています - ユーザーを認証するために呼び出すエンドポイントを用意する必要があります。
FastComments はその逆で - 単にユーザーの情報をあなたの秘密鍵でエンコードしてハッシュし、それを渡すだけです。
シングルサインオンでコメントスレッドを保護
FastComments SSO（詳細はこちら）は、ユーザーが別のプラットフォームにログインせずにコメントできる方法を提供します。
しかし、これだけではコメントスレッドは保護されません。デフォルトではコメントデータは公開情報であり、ページを閲覧できる誰でもコメントを見ることができます。
設定を変更することで、管理者または有効な SSO ユーザーでない限りコメントの取得を制限できます。
コーディング不要の設定
SSO が設定されている場合、カスタマイズルールを作成することで、コメントスレッドの閲覧と操作を防止できます。
その際、SSO を検索すると、次のオプションが表示されます：
このオプションを有効にし、カスタマイズルールを保存します。
特定のドメインまたはページのみを保護する
特定のドメインまたはページだけを保護するには、カスタマイズルールを設定するだけです。
カスタマイズ UI の上部に、Domain と URL ID の 2 つの入力欄があります。
特定のドメインだけを保護するには、対象のドメインを「domain」フィールドに入力します。
特定のページを保護するには、「URL ID」フィールドにページの URL を入力します。FastComments とカスタム統合している場合は、URL の代わりに ID の種類を入力できます。
セキュリティレベル
SSO を必須にする際、Simple SSO を要求するか Secure SSO を要求するかを決めます。Simple SSO を要求すると、どちらでも許可されますが、Secure SSO を要求する場合、コンテンツは API キーでハッシュされた Secure SSO ペイロードで取得されなければ表示できません。
「コメント閲覧に SSO が必要」を選択すると、セキュリティレベルのオプションが表示され、このオプションが有効な間だけ適用されます。
Simple SSO によるコメントの自動検証と Simple SSO 管理者の許可設定は別個であり、このオプションの有無に関わらず適用されます。
読み取り以外の保護
このオプションを有効にすると、ユーザーが SSO でログインしていない限り、ページまたはドメインへのコメントができなくなります。
注意点
SSO 統合前にコメントを作成したユーザーは、SSO 統合でログインしない限りコメントを見ることができません。
匿名コメントの許可
デフォルトでは、FastComments はコメントする際にメールアドレスの入力を必須とします。メールアドレスが有効である必要はありませんが、ユーザーが送信されたリンクをクリックするまで、コメントには「未確認コメント」ラベルが表示されます。
ただし、メールアドレスの必須設定は解除できます。メール入力フィールドは引き続き表示されますが、必須ではなくなります。
この設定はウィジェットカスタマイズ UI から構成できます：
ユーザー名は依然として必須です。そのステップも省略したい場合は、全員が共有するデフォルトのユーザー名を設定するか、FastComments に各訪問者ごとにユニークなユーザー名を自動生成させることができます。
匿名コメントの期限切れ防止
FastComments は、希望する日数経過後に未確認コメントを削除するように設定できます。これによりスパム対策が支援されます。
デフォルトでは、削除されません。
これは、モデレーション設定ページから設定または無効化できます。
メール入力の無効化
ユーザーがログインせずにコメントすると、メールアドレスの入力を求められます。
これにより、そのユーザーに対して「未検証セッション」が作成され、メールでそのセッションの確認を求めます。
サイトやアプリケーションによっては、コメントや投票の際にユーザーにメールアドレスを求めたくない場合があります。
匿名コメントを有効にすると、メールアドレス入力フィールドが任意になります。さらに、これを完全に無効にすることもできます。まず匿名コメントを有効にすると、メールアドレス入力フィールドを無効にするオプションが表示されます。
これを有効にすると、すべてのコメント製品でメールフィールドがまったく表示されなくなります。
なお、この設定では、ユーザーがアカウントを作成して https://fastcomments.com にログインしない限り、すべてのコメントは未検証となります。
未検証ラベルを無効にすることを検討するとよいでしょう。
未確認ラベルの無効化
デフォルトでは、FastComments は、未確認のブラウザー セッションを持つユーザーに対して残されたコメントに「Unverified Comment」ラベルを表示します。未確認コメントについての詳細はこちらをご覧ください。
Run さらに、この機能はコードを書かずにカスタマイズ UI で使用できます。
匿名投票の許可
ユーザーがコメントに投票しようとし、ログインしていない場合、ユーザー名とメールアドレスの入力を求められます。
この要件を削除すれば、誰でも情報を残さずにコメントに投票できるようになります。
デフォルトユーザー名の設定
ユーザーがログインせずにコメントや投票を行うと、メールアドレスとユーザー名の入力を求められます。
匿名コメントの場合、コメント時の摩擦を減らすためにデフォルトのユーザー名を定義しておくと便利なことがあります。これはカスタマイズUIから設定できます。まず匿名コメントを有効にする必要があります。
デフォルトユーザー名の共有
デフォルトのユーザー名は共有される表示名であり、識別情報ではありません。デフォルトのままメールアドレスを入力した訪問者は、それぞれ自分のアカウントを取得し、デフォルトの名前が公開名として表示されます。任意の数の訪問者が同じデフォルト名を使えるため、「Anonymous」が既に使用されていると報告されることはありません。
訪問者自身が入力したユーザー名は、引き続き一意である必要があります。
訪問者ごとに名前を考える手間なく、異なる名前を自動的に付与したい場合は、ユーザー名の自動生成をご覧ください。
ユーザー名を自動生成
ユーザーがログインせずにコメントや投票を行う場合、メールアドレスとユーザー名の入力を求められます。
サイトによっては、訪問者に独自のユーザー名を考案してもらうことが、特にモバイルではハードルになることがあります。FastCommentsは、新しい訪問者ごとに中立的なユーザー名を生成し、BraveOtter4172 のようにユーザー名フィールドに事前入力することができます。
訪問者はそのまま使用することも、任意の名前に変更することもできます。
この機能は、カスタマイズUIの Generate Usernames Automatically という設定から有効にできます:
動作の仕組み
- 生成される各名前は一意です。既存のアカウントと照合され、その訪問者のブラウザセッション用に予約されるため、2人の訪問者に同じ名前が提案されることはありません。
- 名前は、まだ名前を持っていない訪問者にのみ生成されます。ログインユーザー、SSOユーザー、およびすでにコメントしたことのある訪問者は、既存の名前を保持します。
- 匿名コメントの有無にかかわらず機能します。匿名コメントがオフの場合でも、訪問者はメールアドレスを入力しますが、ユーザー名を考える必要はなくなります。
- 以前使用したことのあるメールアドレスを入力した再訪問者は、既存のアカウントと照合され、そのアカウントの名前を保持します。
- デフォルトユーザー名も設定されている場合、生成された名前が優先されます。
コールバック
コメントウィジェット用のすべてのライブラリ（現在は Angular、React、Vue）はコールバックをサポートしています。
コールバックは設定オブジェクトで指定し、各ライブラリで同じシグネチャを持ちます。
サポートされているコールバックは以下です：
- onInit
- onAuthenticationChange
- onRender
- commentCountUpdated
- onReplySuccess
- onVoteSuccess
- onImageClicked
- onOpenProfile
- onCommentSubmitStart
- onCommentsRendered
正確なシグネチャはTypeScript 定義で確認できます。
以下はすべてのコールバックを使用した例です：
Run ユーザーのロケールを手動で定義
デフォルトでは、FastComments はユーザーのシステムとブラウザで決定されたロケールでコメントウィジェットを表示します。
ユーザーがコメントしたりログインしたりすると、最後に使用したロケールを更新し、メール送信にもこのロケールを使用します。
これにより、コメントウィジェットの翻訳がユーザー向けにどのように行われるかが影響を受けます。ロケールはユーザーの言語と地域で構成されるため、ロケールを設定すると通常、ユーザーに表示されるテキストの言語が変更されます。
UI から
ウィジェットカスタマイズ UI を使用して設定できます。「ロケール / 言語」オプションをご覧ください：
コードから
希望するロケールで上書きできます。
Run サポートされている言語とロケールコード
サポートされている言語と対応するロケールコードの完全なリストは、こちらで確認できます。
SSO に関する注意
SSO を使用している場合、ユーザーオブジェクトにユーザーのロケールを渡すと、メールやその他の項目が正しくローカライズされます。
許可される言語の制限
デフォルトでは、FastComments はコメントに使用される言語を制限しません。
コミュニティが使用する言語を制限したい場合があります。
この設定はコードを書かずに、ウィジェットカスタマイズページで行えます:
システムはコメントを解析して言語を判定し、許可リストと照合します。
コメントが許可されていない言語で書かれている場合、ローカライズされたエラーメッセージが表示されます。
コメント翻訳
デフォルトでは、FastCommentsはウィジェット自体のインターフェース(ボタン、ラベル、エラーメッセージ)を閲覧者の言語に翻訳しますが、コメントは書かれた通りにそのまま表示されます。
コメント翻訳(Comment Translation)はコメント自体の翻訳を追加する機能で、複数の言語で書き込まれるコミュニティでも、すべてのコメントを自分の言語で読むことができます。
2つのモードがあります:
- 自動: ウィジェットの言語以外の言語で書かれたコメントは、翻訳されて表示されます。コメントの下に「スペイン語から翻訳」という行が表示され、原文を表示リンクで翻訳と未翻訳のテキストを切り替えることができます。
- 手動: すべてのコメントに翻訳リンクが付きます。クリックすると、そのコメントだけが閲覧者の言語に翻訳され、その後は同じ原文を表示の切り替えが使えます。すでに閲覧者の言語で書かれているコメントは、その旨が表示されます。
翻訳先の言語はウィジェットの言語です。同じカスタマイズルールにロケール / 言語の設定があればそれが使われ、なければ訪問者のブラウザの言語が使われます。訪問者側ではアカウント、拡張機能、追加ソフトウェアなどは一切不要で、埋め込みウィジェットでもスタンドアロンのコメントページでも同じように動作します。
この機能はカスタマイズルールごとに有効化されるため、サイト全体、1つのドメイン、または単一のページに適用できます。デフォルトではオフです。
翻訳はサーバー側の設定です。ウィジェットのJavaScript設定で commentTranslation を渡しても有効にはなりません。ルールによって有効化されます。
各コメントは翻訳先の言語ごとに最大1回だけ翻訳され、その結果はコメントとともに保存されます。そのため、1,000人のスペイン語話者に読まれたコメントも1回しか翻訳されません。投稿者またはモデレーターがコメントを編集すると、保存されていた翻訳は破棄され、次の閲覧時に再度翻訳されます。翻訳されたテキストは、元のコメントと同じサニタイズおよびリンクのルールを通ります。長すぎるコメントや、言語を検出できないコメントは、翻訳されずに表示されます。
使用量はAIエージェントと同じレートでLLMトークンとして課金され、請求詳細の同じ場所に表示されます。
ページタイトル
現在のページタイトルは指定された urlId に関連付けられ、モデレーションツールで使用するために保存されます。
デフォルトでは、これは document.title から取得されます。
必要に応じて、独自のページタイトルを次のように指定できます：
Run 新しい返信の防止と投票の無効化
readonly フラグを true に設定することで、コメント機能をロックし、新しいコメントや投票を受け付けなくすることができます。
コメントは編集や削除もできなくなります。
Run これはコードを書かずに、ウィジェットカスタマイズページで、ドメイン全体または個別ページ単位でカスタマイズできます。
更新！
2022年11月以降、スレッドは管理者やモデレーターが返信エリア上部の三点メニューから リアルタイム にロックまたはロック解除できます。
これにより新しいコメントは防止されますが、投票は引き続き可能で、必要に応じてユーザーは自分のコメントを削除できるようになります。一方、readonly ではこれらの操作は許可されません。
Page API の isClosed フィールドに対応しています。
リンクドメインの制限
デフォルトでは、FastComments は任意の外部サイトへのリンクを許可します。
これを、希望するサイトやドメインのリストに限定することができます。定義されたリストに含まれないサイトやドメインへのリンクを投稿しようとすると、ユーザーにエラーが表示されます。
この検証は Comment Widget と API のみ対象です。インポートには影響しません。
この設定はコードを書かずに、ウィジェットのカスタマイズページで行えます：
コメント数とすべてのネストされた返信のカウント
コメントウィジェットの上部に表示されるコメント数は、ページや記事自体への直接の返信である「トップレベル」のコメントのみを表示するか、ネストされたすべてのコメントの数を表示するかを選択できます。
デフォルトでは、これは true です。つまり、後者のすべてのコメントの数を表示します。古いバージョンのコメントウィジェットでは、デフォルト値は false です。
countAll フラグを true に設定することで、ネストされたすべてのコメントの数を表示するように動作を変更できます。
Run トップレベルのコメントのみをカウントしたい場合は、フラグを false に設定します。
Run 現在、この設定はコードを変更せずにカスタマイズすることはできません。
コメント投稿者リンクの有効化
デフォルトでは、FastComments はユーザーにコメント、ユーザー名、メールアドレスのみを求めます。
しかし、状況によっては、ユーザーに自分のブログやウェブサイトへのリンクを残してもらいたい場合があります。
enableCommenterLinks フラグを true に設定することで、ユーザーのウェブサイト URL を入力する追加フィールドを表示できるようにします:
Run その URL が提供されると、ユーザーのアカウントが更新され、過去および将来のすべてのコメントでユーザー名がこの URL にリンクされます。
これはコードを書かずに、ウィジェットカスタマイズページでカスタマイズできます:
モデレーショングループ
このリストはModeration Groupsページで生成されたIDの一覧です。
指定すると、その構成を使用して投稿されたコメントには同じセットの moderationGroupIds が含まれます。
もし Moderator が1つ以上の Moderation Groups を定義している場合、
自分のグループに関連する Moderate Comments ページのコメントのみを見ることができます。
Run メンショングループID
オートコンプリートの**@mentions**で使用するIDの一覧。ユーザー同士のグループが交差していない場合にタグ付けされないようにしたいときに便利です。
指定すると、@文字を入力したときに、他のグループに属するユーザーのみがオートコンプリートに表示されます。
Run サードパーティクッキー回避
認証のために、FastComments はブラウザでサードパーティークッキーが有効になっていることに依存しています。これが無効だと、ユーザーは常にコメントする際にメールアドレスを入力しなければならず（メール入力フィールドが非表示でない限り）、コメントはデフォルトで未確認として表示されます。
この問題を回避するには、サードパーティークッキー バイパスを有効にできます。
この設定を有効にすると、ユーザーがログイン中であることを示すメッセージを表示する小さなポップアップが表示されます。このポップアップは、ユーザーがコメントウィジェットとやり取りするたびに表示されます。たとえば、コメントを残すときなどです。
コードでこれを行うには、enableThirdPartyCookieBypass フラグを true に設定します：
Run ウィジェットカスタマイズ UI でも、Enable Third-Party Cookie Popup の下でこの設定を行うことができます：
返信付きコメントの削除
デフォルトでは、ユーザーは自分のコメントを削除できます。また、コメントを削除すると、スレッド内のすべての子コメントおよび一時的なコメントが自動的に削除されます。この動作はリアルタイムでも適用されます。
次の方法でこれを制限できます：
- 代わりに、削除されたコメントを匿名化します（名前とテキストを
[deleted]またはカスタム値に設定）。 - 返信がある場合、コメントの削除を許可しません。カスタマイズ可能なエラーメッセージが表示されます。
- コメントに返信がある場合の削除を、管理者とモデレーターのみに制限します。
Comment Thread Deletion セクションで、ウィジェットカスタマイズ UI から設定できます。
トップバーにバッジを表示
デフォルトでは、FastComments はコメントスレッド内のコメントに対してのみユーザーバッジを表示します。
ただし、ウィジェットカスタマイズページでこの機能を有効にすることで、コメントフォーム上部の名前の横にユーザーバッジを表示できます。
これにより、トップバー領域でユーザーの名前の横にバッジが表示され、コメント作成時にユーザーの実績やステータスがより目立つようになります。
この機能が動作するには、ウィジェットカスタマイズ UI で有効にする必要があることに注意してください。サーバーレベルで有効になっている場合でも、コード設定で showBadgesInTopBar フラグを false に設定して個別に無効化することができます。
Run オンラインユーザーリストを表示
デフォルトでは、FastComments はページ上にユーザーのリストを表示しません。
コメントウィジェットと並べて、現在ページを閲覧しているユーザーのリストを表示できます。このリストは、ユーザーが参加・退出するたびにリアルタイムで更新され、名前、アバター、オンライン状態のインジケーターが表示されます。
レイアウトには 3 つのオプションがあります:
1- 上: コメントの上に、重なり合うアバターを横一列に表示します。2- 左: ウィジェットの左側に、名前とオンラインドットを含むサイドバーを表示します。3- 右: 同じサイドバーをウィジェットの右側に表示します。
usersListLocation フラグを設定して、この機能を有効にします:
Run デフォルトでは、リストには現在オンラインのユーザーのみが表示されます。過去にページにコメントしたことがあるユーザー(現在は閲覧していないユーザー)も含めるには、usersListIncludeOffline を true に設定します:
Run 過去のコメント投稿者には緑のオンラインドットが表示されないため、今この瞬間に誰がいるのかが明確になります。
プライベートプロフィールのユーザーは、汎用のアバターと「Private Profile」ラベル付きで表示されるため、身元を明かすことなくカウントは正確に保たれます。
コードを使わずに設定することもできます。ウィジェットのカスタマイズページで「Users List Location」オプションを確認してください。場所が Off 以外に設定されると、その下に「過去のコメント投稿者を含める」チェックボックスが表示されます。
同時接続ユーザーが 500 名を超える場合、リストは最大 30 秒遅れて更新されます。