埋め込み可能な画像チャットウィジェット
FastComments Image Chat は、ユーザーが画像上の任意の場所をクリックして議論のポイントを作成できるようにすることで、画像上でのインタラクティブなディスカッションを可能にします。ユーザーは画像の特定の部分をクリックしてその箇所について会話を始めることができ、ディスカッションの位置を示す視覚的なマーカーが作成されます。
この機能は、デザインフィードバック、製品レビュー、図を含む教育資料、コメント付きのフォトギャラリー、そして特定の画像位置に紐付いた文脈的なディスカッションを行いたいあらゆるシナリオに最適です。
はじめに 
ユースケース
Image Chatは、チームがモックアップやスクリーンショット内の特定の要素について話し合う必要があるデザインフィードバックに最適です。製品レビューサイトでは、製品写真に写っている特定の機能について顧客が話し合えるようにできます。教育プラットフォームでは、図、地図、科学画像についての議論に利用できます。フォトギャラリーは、場所固有のコメントでインタラクティブにできます。不動産サイトでは、物件写真に写っている特定の特徴について閲覧者が話し合えるようになります。
クイックスタート
Image Chatの導入は簡単です。FastCommentsのImage Chatスクリプト、画像を含むimage要素またはコンテナ、そしてテナントIDを含む設定オブジェクトが必要です。
インストール
Image Chatスクリプトをページに追加します:
基本的な実装
最小限の例を以下に示します:
Run 
まだ置き換えていない場合は、'demo' を実際のFastCommentsテナントIDに置き換えてください。テナントIDはFastCommentsダッシュボードで確認できます。
仕組み
初期化すると、ユーザーは画像上の任意の場所をクリックできます。クリックが発生すると、その位置に視覚的な四角形のマーカーが表示され、チャットウィンドウが開きます。他のユーザーはすべてのマーカーを見ることができ、マーカーをクリックしてその議論を閲覧または参加できます。すべての議論は、すべての訪問者間でリアルタイムに同期されます。
このウィジェットはパーセンテージベースの位置指定を使用しているため、画像がリサイズされたり、異なる画面サイズで表示されたりしても、マーカーは正しい位置に保たれます。
ライブデモ
Image Chatの動作は、ライブデモページで確認できます。
次のステップ
基本が動作するようになったら、Configuration Optionsガイドで外観と動作をカスタマイズできます。Responsive Designガイドで、パーセンテージベースの位置指定の仕組みを確認してください。Customizationガイドで、スタイリングとダークモードのサポートについて学びましょう。高度な統合については、APIリファレンスをご覧ください。
フロントエンドライブラリ
すべてのFastCommentsフロントエンドライブラリ(react、vue、angularなど)にImage Chatが含まれています。
例
基本的な例
Image Chat を使用する最も簡単な方法は、単一の画像要素をターゲットにすることです。この例は、画像上でインタラクティブなディスカッションを有効にする方法を示しています:
Run コンテナ要素の例
画像を内包するコンテナ要素を渡すこともできます:
Run カスタム URL ID を使用した例
デフォルトでは、Image Chat はページの URL と画像のソースおよび座標を組み合わせて会話を識別します。カスタムの urlId を指定できます:
Run URL 構造が変更されても同じ会話を維持したい場合や、複数のページで同じ議論ポイントを共有したい場合に便利です。
ダークモードの例
サイトがダークな背景を持ち、ウィジェットが自動的に検出しない場合は、手動でダークモードを有効にできます:
Run チャットスクエアのカスタムサイズの例
画像上に表示されるクリック可能な四角（スクエア）のサイズを調整できます。サイズは画像幅に対するパーセンテージで指定します:
Run コメント数コールバックの例
コメントが追加または更新されたときは commentCountUpdated コールバックで追跡できます:
複数画像での例
複数の画像に対して Image Chat を初期化できます。各画像は独立したディスカッションポイントを持ちます:
Run 設定オプション
概要
FastComments Image Chat は標準の FastComments コメントウィジェットを拡張したものであり、ベースウィジェットのすべての設定オプションを継承しつつ、画像アノテーションに特化したいくつかのオプションを追加しています。
必須の設定
tenantId
FastComments のテナント ID(tenantId)が必要です。FastComments ダッシュボード から確認できます。
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Image Chat 固有のオプション
urlId
デフォルトでは、Image Chat はページ URL、画像のソース、X/Y 座標に基づいて会話ごとに一意の識別子を生成します。カスタムの urlId を指定してこれを上書きできます。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});これは、URL 構造が変わる可能性があるが同じ会話を維持したい場合や、複数のページ間でアノテーションを共有したい場合に便利です。
chatSquarePercentage
クリック可能なチャットマーカーのサイズを画像幅に対する割合で制御します。デフォルトは 5% で、各マーカーは画像幅の 5% になります。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // より大きく目立つマーカー
});小さい値にすると目立ちにくいマーカーになり、細かいディテールのある画像に適しています。大きい値にすると、情報の多い画像やモバイルデバイスのユーザーにとって、マーカーが見やすくクリックしやすくなります。
hasDarkBackground
ページの背景が暗い場合に、ダークモードのスタイリングを有効にします。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
コメント数が変わるたびに呼び出されるコールバック関数です。バッジやページタイトルなどの UI 要素の更新に便利です。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});継承される設定オプション
Image Chat は標準のコメントウィジェットを拡張しているため、ベースの FastComments ウィジェットの任意の設定オプションを使用できます。よく使われるオプションの例を以下に示します:
locale
ウィジェット UI の言語を設定します。FastComments は数十の言語をサポートしています。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // スペイン語
});readonly
すべての会話を読み取り専用にします。ユーザーは既存のマーカーやディスカッションを閲覧できますが、新規作成や返信はできません。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso と simpleSSO
シングルサインオン(SSO)を使用して、お使いの認証システムと統合できます。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// SSO 設定
}
});認証オプションの詳細については、SSO ドキュメントをご覧ください。
maxReplyDepth
返信が何階層までネストできるかを制御します。デフォルトでは、Image Chat はこれを 0 に設定しており、すべてのコメントがフラット(ネストされた返信なし)になります。スレッド形式の会話が必要な場合は変更できます。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // 3 階層までのネストを許可
});内部設定
これらのオプションは Image Chat によって自動的に設定されるため、上書きしないでください:
Image Chat では productId が自動的に 2 に設定されます。チャットウィンドウの機能を提供するために、floating-chat 拡張が自動的に読み込まれます。また、ウィジェットはモバイルデバイス(幅 768px 未満の画面)を自動検出し、フルスクリーンのチャットウィンドウを使用するように UI を調整します。
対象要素の柔軟性
FastCommentsImageChat の最初のパラメータには、<img> 要素を直接指定することも、画像を含むコンテナ要素を指定することもできます:
// 画像要素を直接指定
FastCommentsImageChat(document.getElementById('my-image'), config);
// 画像を含むコンテナを指定
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);コンテナ要素を渡した場合、ウィジェットが自動的に画像を見つけます。
完全な例
複数の設定オプションを組み合わせた例を以下に示します:
FastCommentsImageChat(document.getElementById('product-image'), {
tenantId: 'demo',
urlId: 'product-v2-main',
chatSquarePercentage: 6,
hasDarkBackground: false,
locale: 'en',
commentCountUpdated: function(count) {
document.title = count > 0 ? `(${count}) Product Photo` : 'Product Photo';
},
sso: {
// お使いの SSO 設定
},
maxReplyDepth: 1
});ベースウィジェットから継承されるすべての利用可能な設定オプションの一覧については、FastComments のメイン設定ドキュメントをご覧ください。
レスポンシブデザイン
パーセンテージベースの位置指定
Image Chat は、画像上のチャットマーカーを配置するためにピクセル座標ではなくパーセンテージベースの座標を使用します。ユーザーが画像をクリックすると、ウィジェットはクリックのピクセル座標を画像の幅と高さに対するパーセンテージに変換します。この方法により、画像の表示方法に関係なくマーカーが正しい位置に保持されます。
例えば、ユーザーが幅1000pxの画像の左端から250ピクセルの位置をクリックした場合、ウィジェットはこれを左から25%として保存します。別のユーザーが同じ画像をモバイル端末で幅500pxで表示すると、マーカーは左から125ピクセルの位置に表示されますが、それは幅の25%に相当します。
レスポンシブレイアウトにおける利点
このパーセンテージ方式により、Image Chat はすべてのデバイスサイズと向きでシームレスに動作します。画像は画面幅、CSSルール、またはコンテナの制約に応じて異なるサイズで表示されることがありますが、マーカーは常に意図した位置に正しく揃います。
大きなモニターを使うデスクトップユーザーも、小さな画面のスマートフォンユーザーも、マーカーは同じ相対的な位置に表示されます。マーカーは画像自体とともに比例してスケールします。
画像のスケーリングとアスペクト比
画像がスケーリング時にアスペクト比を維持している限り（これはブラウザのデフォルト動作です）、パーセンテージベースのマーカーは完全に整列したままになります。ウィジェットは画像が比例してスケールすると仮定して位置を計算します。
もし object-fit: cover のように特定の寸法で画像のアスペクト比を歪めるような CSS を適用すると、マーカーの位置が正しく揃わない場合があります。最良の結果を得るには、画像を自然にスケールさせるか、アスペクト比を維持するために object-fit: contain を使用してください。
チャット四角のサイズ指定
チャットマーカーの視覚的な大きさもパーセンテージベースです。chatSquarePercentage 設定オプションはデフォルトで5%になっており、各四角は画像幅の5%になります。これにより、異なる画像サイズ間で視覚的な大きさが一貫します。
幅1000pxの画像でデフォルトの5%設定を使用すると、マーカーは50px四方になります。幅500pxの画像では、同じマーカーは25px四方になります。これらは画像サイズに対して比例したままです。
モバイルでの挙動
幅が768px未満の画面では、Image Chat はモバイル最適化レイアウトに切り替わります。チャットウィンドウはマーカーの横に浮かぶのではなく全画面で開きます。これは、浮動するウィンドウが画像を過度に遮ってしまう小さな画面での使いやすさを向上させます。
マーカー自体はパーセンテージベースの位置に表示され、クリック可能なままです。ユーザーはディスカッションの位置を確認し、マーカーをタップして全画面のチャットインターフェースを開くことができます。
動的な画像読み込み
画像が非同期で読み込まれたりページ読み込み後にサイズが変わったりしても、パーセンテージベースのシステムは正しく機能します。ウィジェットは画像要素を監視し、画像の寸法が変わるたびにマーカー位置を再計算します。
遅延読み込みを行っている場合や、ブレークポイントごとに異なるサイズのレスポンシブ画像を実装している場合でも、画像サイズが変わるとマーカーは自動的に調整されます。
デバイス間での一貫性
座標がデータベースにパーセンテージとして保存されるため、デスクトップで作成されたディスカッションはタブレットや電話で表示しても同じ相対位置に表示されます。ユーザーはデバイスを跨いで協力しても位置の不整合が発生しません。
これは双方向に機能します。モバイルデバイスで特定のスポットをタップして作成されたディスカッションは、大きなデスクトップモニターで表示しても同じ相対位置に表示されます。
ビューポートに関する考慮
ウィジェットはパーセンテージをビューポートではなく画像要素自体に対して計算します。つまり、ページをスクロールしたりブラウザウィンドウのサイズを変更したりしてもマーカーの位置には影響しません。マーカーはビューポートの変更に関係なく画像上の位置に固定されます。
将来への備え
パーセンテージベースのアプローチにより、レイアウト、デザイン、デバイス環境の変化に対して画像ディスカッションは強靭になります。新しい画面サイズやデバイスが登場しても、既存のディスカッションは更新や移行を必要とせず正しく表示され続けます。
カスタマイズ
ダークモードのサポート
Image Chat には組み込みのダークモードサポートがあります。設定で hasDarkBackground: true を指定すると、チャットウィンドウや UI 要素が自動的にダーク背景に適した表示に調整されます。
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});ダークモードのスタイリングはチャットウィンドウ、マーカーの四角、そしてすべてのインタラクティブ要素に適用されます。サイトにダークモードのトグルがある場合、モード変更時にウィジェットを再初期化するか、以下に説明する body クラス方式を使用できます。
ダイナミックダークモード
サイトのダークモードが body 要素に .dark クラスを追加することで制御されている場合、Image Chat の UI は再初期化を必要とせず自動的にこれを反映します。ウィジェットのスタイルはこのクラスの有無に応じて反応するよう設計されています。
/* ダークモード用の CSS */
body.dark {
background: #1a1a1a;
color: #ffffff;
}CSS によるカスタムスタイリング
マーカー、チャットウィンドウ、その他の要素の外観は CSS でカスタマイズできます。ウィジェットは特定のクラスを追加するため、スタイルシートでそれらをターゲットにできます。
チャットの四角とウィンドウは FastComments のコメントバブルのスタイリングシステムを使用しているため、標準のコメントウィジェットに適用したカスタマイズは Image Chat にも反映されます。
チャットスクエアのサイズ調整
chatSquarePercentage オプションはクリック可能なマーカーのサイズを制御します。デフォルトは画像幅の 5% です：
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // 大きめで視認性の高いスクエア
});値を小さくすると画像に馴染む控えめなマーカーになります。値を大きくすると、特にモバイルデバイスやアクセシビリティの観点でマーカーが目立ち、クリックしやすくなります。
モバイルでの挙動
幅が 768px 未満の画面では、Image Chat は自動的にモバイル最適化レイアウトに切り替わります。チャットウィンドウはマーカー横に浮かぶ代わりにフルスクリーンで表示され、小さい画面での使いやすさが向上します。
マーカーは画像上のレスポンシブな位置に表示されたままです。ユーザーは任意のマーカーをタップしてフルスクリーンのチャットインターフェースを開けます。この挙動は組み込み済みで、設定は不要です。
チャットウィンドウの外観
チャットウィンドウはデスクトップでは幅 300px、マーカーを指す 16px の矢印があります。ウィンドウは利用可能なビューポート空間に基づいて自動的に位置を決め、to-right、to-left、to-top、to-bottom のような配置クラスを使用します。
色、フォント、間隔、その他の視覚プロパティを調整するためにカスタム CSS を追加できます。チャットウィンドウは標準の FastComments ウィジェットと同じコンポーネント構造を使用しているため、適用したグローバルなカスタマイズを継承します。
遅延初期化
チャットウィンドウはデスクトップユーザーではホバー時に、または作成時に即座に初期化されます。これにより、ユーザーが実際にマーカーと対話するまでチャットインターフェースのレンダリングを行わないため、初期の読み込み負荷が軽減されます。
遅延初期化は透過的に行われます。ユーザーは遅延を感じませんが、画像上に多数のマーカーがある場合でもブラウザが隠れたチャットウィンドウを何十個もレンダリングする必要はありません。
ローカリゼーション
Image Chat は標準の FastComments ウィジェットと同じローカリゼーションオプションをすべてサポートします。locale オプションを設定して UI テキストを別の言語で表示できます：
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // フランス語
});FastComments は数十の言語をサポートしています。ロケール設定はプロンプト、ボタン、プレースホルダーテキストを含むすべての UI テキストに影響します。
継承されるカスタマイズオプション
Image Chat は標準のコメントウィジェットを拡張しているため、ベースウィジェットからすべてのカスタマイズオプションを継承します。これにはカスタム CSS クラス、カスタム翻訳、アバターのカスタマイズ、日付フォーマットなどが含まれます。
利用可能なすべてのカスタマイズオプションの完全な一覧は、FastComments のメインのカスタマイズドキュメントを参照してください。
カスタムフォントの利用
サイトでカスタムフォントを使用している場合、Image Chat の UI はページの CSS からそれらのフォントを継承します。チャットウィンドウはページの DOM 内にレンダリングされ、既存のタイポグラフィ設定を尊重します。
最良の結果を得るには、Image Chat を初期化する前にカスタムフォントがロードされていることを確認するか、フォント読み込み中にスタイルのないテキストが一時的に表示されることを許容してください。
マーカーのビジュアルデザイン
四角いマーカーは目立ちすぎない控えめなビジュアルデザインになっています。異なる見た目にしたい場合は CSS で外観をカスタマイズできます。
マーカーにはホバーステートがあり、ユーザーがマウスを乗せた際にフィードバックを提供します。タッチデバイスでは、タップ操作がチャットウィンドウを開くことで即時のフィードバックを提供します。
ライブ同期
リアルタイム更新
Image ChatはWebSocket接続を使用して、接続中のすべてのユーザー間で会話をリアルタイムに同期します。誰かが新しいマーカーを作成したり、コメントを追加したり、ディスカッションを削除したりすると、同じ画像を見ている他のすべてのユーザーはページを更新することなく即座にその更新を確認できます。
WebSocket同期の仕組み
Image Chatを初期化すると、ウィジェットはFastCommentsサーバーへのWebSocket接続を確立します。この接続はユーザーのセッション期間中開いたままとなり、現在の画像に関連する更新を待ち受けます。
WebSocketシステムはImage Chatのために3種類のブロードキャストメッセージを使用します。new-image-chat イベントは誰かが画像上に新しいマーカーを作成したときに発火します。image-chat-updated イベントは誰かが既存の会話を更新したときに発火します。deleted-image-chat イベントは誰かがマーカーを削除したときに発火します。
ブロードキャストIDシステム
ユーザーが自分のアクションを自分に戻ってブロードキャストされることで発生するエコー効果を防ぐために、各更新には一意の broadcastId が含まれます。ユーザーがマーカーを作成または更新する際、クライアントはその操作に対してUUIDを生成します。WebSocketが更新をすべてのクライアントにブロードキャストするとき、発信元のクライアントは自分の broadcastId と一致するためその更新を無視します。
これにより、ユーザーはサーバーを経由した往復を待つことなくUI上で自分の変更を即座に確認でき、同時に他のすべてのユーザーにも更新が確実に行き渡るようになります。
接続の回復性
ネットワーク障害やサーバーメンテナンスによりWebSocket接続が切断された場合、ウィジェットは自動的に再接続を試みます。再接続中でも既存のマーカーとのやり取りは可能ですが、接続が再確立されるまでは他のユーザーによるリアルタイム更新は表示されません。
再接続が完了すると、ウィジェットは見逃した更新がないことを確認するために再同期を行います。これはユーザーの介入を必要とせず透過的に行われます。
帯域幅に関する考慮事項
WebSocketメッセージは軽量で、状態を同期するために必要な最小限の情報のみを含みます。新しいマーカーの作成は通常1KB未満の帯域幅を使用します。システムには高活動期間中のメッセージ頻度を削減するためのインテリジェントなバッチ処理も含まれています。
FastCommentsダッシュボードの使用状況メトリクスは pubSubMessageCount と pubSubBandwidth を追跡するため、サイト全体のリアルタイム同期アクティビティを監視できます。
タブ間同期
ユーザーが同じページを複数のブラウザタブで開いている場合、あるタブでの更新は他のタブにも即座に反映されます。これは同じWebSocket同期メカニズムを通じて動作し、追加の設定は必要ありません。
ユーザーは複数のデバイスでサイトを同時に開くことができ、すべてのデバイスが同期された状態を維持します。デスクトップで作成されたマーカーは、両方のデバイスが同じ画像を表示している場合にタブレット上でも瞬時に表示されます。
セキュリティ
WebSocketメッセージは安全な接続（WSS）で送信され、テナント検証を含んでいるため、ユーザーは自身が閲覧を許可されている会話の更新のみを受信します。サーバーは不正アクセスや改ざんを防ぐため、ブロードキャストする前にすべての操作を検証します。
オフライン時の動作
ユーザーが完全にオフラインの場合、既存のマーカーを表示することはできますが、新しいマーカーを作成したり他のユーザーからの更新を見ることはできません。ウィジェットはオフライン状態を検出し、適切なメッセージを表示します。
ユーザーがオフライン時にマーカーを作成し、その後オンラインに戻った場合、その操作はキューに蓄積されるのではなく失敗します。データの一貫性を保つため、ユーザーは接続が復旧したら操作を再試行する必要があります。
パフォーマンスへの影響
WebSocket接続はパフォーマンスへの影響が最小限です。更新が発生していないときは接続はアイドル状態になり、アクティビティがあるときだけメッセージを処理します。通常のマーカー活動のある画像では、WebSocketのCPU使用量は画像自体のレンダリングよりも少ないです。
数百人の同時ユーザーと高いマーカー作成アクティビティを伴うページでも、システムは個々のクライアント接続に影響を与えることなく水平スケーリングしてパフォーマンスを維持します。
共同作業のユースケース
リアルタイム同期により、Image Chatは共同作業ワークフローに特に有用です。デザインチームはモックアップを一緒にレビューし、全員がマーカーの配置をリアルタイムで確認できます。カスタマーサポートチームは問題の特定のためにスクリーンショットに共同で注釈を付けることができます。教育グループは図を参加者全員で議論し、作成されるマーカーを互いに確認しながら進められます。
即時のフィードバックにより、ユーザーが更新を見るためにリフレッシュする必要がある従来のコメントシステムと比べて、より魅力的で生産性の高い共同作業体験が生まれます。
APIリファレンス
APIの概要
Image Chat は、画像の会話をプログラムで管理するための3つのREST APIエンドポイントを提供します。これらのエンドポイントを使用すると、ブラウザウィジェットを使用せずにマーカーの取得、作成、削除ができます。
すべてのAPIエンドポイントは認証を必要とし、標準のFastComments APIパターンに従います。これらはAPIキーではなくブラウザのクッキーで認証する公開エンドポイントです。
ベースURL
すべての Image Chat API エンドポイントは次の下にあります:
https://fastcomments.com/comment-image-chats認証
これらのエンドポイントはブラウザのクッキーを介してユーザーを認証します。APIキーは使用しません。ユーザーはブラウザでFastCommentsにログインしている必要があります。
すべての会話を取得
特定の画像に対するすべての画像会話を取得します。
エンドポイント
GET /comment-image-chats/:tenantId?urlId=<urlId>パラメータ
tenantId (パスパラメータ、必須) はあなたの FastComments テナントIDです。
urlId (クエリパラメータ、必須) は会話を取得したい画像の識別子です。
レスポンス
レスポンスにはAPIステータス、認証されている場合の現在のユーザーセッション情報、ID、URL、X/Y座標を含む会話の配列、クリーンなURL識別子、現在のユーザーがサイト管理者またはモデレーターかを示すフラグ、およびライブ同期用のWebSocket接続情報（tenantIdWS、urlIdWS、userIdWS）が含まれます。
リクエスト例
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"レスポンス例
{
"status": "success",
"user": {
"id": "user123",
"username": "john_doe"
},
"conversations": [
{
"_id": "conv123",
"urlId": "my-product-image:/images/product.jpg:25:30",
"x": 25.5,
"y": 30.2
},
{
"_id": "conv456",
"urlId": "my-product-image:/images/product.jpg:60:45",
"x": 60.8,
"y": 45.1
}
],
"urlIdClean": "my-product-image",
"isSiteAdmin": false,
"tenantIdWS": "demo",
"urlIdWS": "my-product-image",
"userIdWS": "user123"
}会話の作成
画像上の特定の位置に対して新しい画像会話を作成します。
エンドポイント
POST /comment-image-chats/:tenantIdパラメータ
tenantId (パスパラメータ、必須) はあなたの FastComments テナントIDです。
リクエストボディはJSONで、以下の必須フィールドを含める必要があります。
urlId (string, 必須) は基本のページ識別子です。
windowUrlId (string, 必須) は画像ソースと座標を組み合わせたURLで、例えば my-page:/images/photo.jpg:25.5:30.2 のようになります。
pageTitle (string, 必須) はページのタイトルです。
src (string, 必須) は画像のソースURLです。
x (number, 必須) はパーセンテージ（0-100）としてのX座標です。
y (number, 必須) はパーセンテージ（0-100）としてのY座標です。
createdFromCommentId (string, 必須) はこのチャットを開始したコメントのIDです。
broadcastId (string, 必須) はエコー効果を防ぐためのライブ同期用UUIDです。
レスポンス
レスポンスにはAPIステータスと、新しく作成された会話のIDが含まれます。
リクエスト例
curl -X POST "https://fastcomments.com/comment-image-chats/demo" \
--cookie "your-session-cookie" \
-H "Content-Type: application/json" \
-d '{
"urlId": "my-product-image",
"windowUrlId": "my-product-image:/images/product.jpg:25.5:30.2",
"pageTitle": "Product Gallery",
"src": "/images/product.jpg",
"x": 25.5,
"y": 30.2,
"createdFromCommentId": "comment789",
"broadcastId": "550e8400-e29b-41d4-a716-446655440000"
}'レスポンス例
{
"status": "success",
"createdChatId": "conv789"
}会話の削除
既存の画像会話を削除します。このエンドポイントを使用するには管理者またはモデレーター権限が必要です。もしくは会話が認証されたユーザーによって作成されている必要があります。
エンドポイント
DELETE /comment-image-chats/:tenantId/:chatIdパラメータ
tenantId (パスパラメータ、必須) はあなたの FastComments テナントIDです。
chatId (パスパラメータ、必須) は削除する会話のIDです。
broadcastId (リクエストボディ、必須) はライブ同期用のUUIDです。
リクエスト例
curl -X DELETE "https://fastcomments.com/comment-image-chats/demo/conv789" \
--cookie "your-session-cookie" \
-H "Content-Type: application/json" \
-d '{
"broadcastId": "550e8400-e29b-41d4-a716-446655440001"
}'レスポンス例
{
"status": "success"
}座標系
X および Y の座標は画像の寸法に対するパーセンテージとして保存されます。X は左端からの水平位置を示します（0 = 左端、100 = 右端）。Y は上端からの垂直位置を示します（0 = 上端、100 = 下端）。
これらのパーセンテージ値は精度のために小数を含むことができます。例えば、x: 25.5 は画像の左端から25.5%の位置を意味します。
レート制限
これらのエンドポイントは標準のFastComments APIのレート制限の対象です。レート制限ミドルウェアはテナントごとに適用され、通常の使用パターンを妨げることなく悪用を防ぎます。
エラー応答
すべてのエンドポイントは標準のHTTPステータスコードを返します。400は無効なリクエストパラメータを示します。401は認証失敗を意味します。403は権限不足を示します。404は会話が見つからないことを意味します。429はレート制限を超えたことを示します。
エラー応答には詳細を含むJSONボディが含まれます:
{
"status": "error",
"message": "Conversation not found"
}使用状況の追跡
会話を作成すると conversationCreateCount の使用状況メトリクスが増加します。すべてのWebSocket同期アクティビティは pubSubMessageCount と pubSubBandwidth を増加させます。これらのメトリクスはFastCommentsダッシュボードの使用状況分析で監視できます。
ご質問はありますか？
FastComments Image Chat は以上です！ご不明な点がある場合、実装のサポートが必要な場合、または機能のご提案がある場合は、以下でお知らせいただくか、サポートチームまでご連絡ください。
Image Chat の動作を確認するには、デモページのライブデモをご覧ください。