Image Chat | FastComments Docs

FastComments Image Chat は、ユーザーが画像上の任意の場所をクリックして議論のポイントを作成できるようにすることで、画像上でのインタラクティブなディスカッションを可能にします。ユーザーは画像の特定の部分をクリックしてその箇所について会話を始めることができ、ディスカッションの位置を示す視覚的なマーカーが作成されます。

この機能は、デザインフィードバック、製品レビュー、図を含む教育資料、コメント付きのフォトギャラリー、そして特定の画像位置に紐付いた文脈的なディスカッションを行いたいあらゆるシナリオに最適です。

はじめに

ユースケース

Image Chatは、チームがモックアップやスクリーンショットの特定要素について議論するデザインフィードバックに最適です。製品レビューサイトでは、顧客が商品写真に写っている特定の機能について議論できます。教育プラットフォームでは図、地図、科学画像の議論に利用できます。フォトギャラリーは位置特定のコメントでインタラクティブになります。不動産サイトでは物件写真に写る特定の特徴について閲覧者が議論できます。

クイックスタート

Image Chatの開始は簡単です。必要なのは FastComments Image Chat スクリプト、画像を含む img 要素またはコンテナ、そして Tenant ID を含む設定オブジェクトです。

インストール

ページにImage Chatスクリプトを追加します:

Image Chatスクリプトの読み込み

Copy

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>

基本的な実装

最小限の例を示します:

基本的な Image Chat の実装

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Image Gallery with Image Chat</title>
</head>
<body>
    <!-- あなたの画像 -->
    <img id="my-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Pretty Trail" />
    <!-- Image Chatスクリプトを読み込む -->
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <!-- Image Chat を初期化 -->
    <script>
        FastCommentsImageChat(document.getElementById('my-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

Replace 'demo' with your actual FastComments Tenant ID if it's not already, which you can find in your FastComments ダッシュボード.

仕組み

初期化されると、ユーザーは画像の任意の場所をクリックできます。クリックが発生すると、その位置に四角い視覚マーカーが表示され、チャットウィンドウが開きます。他のユーザーはすべてのマーカーを見て、それらをクリックして議論を閲覧したり参加したりできます。すべての議論はすべての訪問者間でリアルタイムに同期されます。

ウィジェットはパーセンテージベースの位置指定を使用するため、画像がリサイズされたり異なる画面サイズで表示されたりしても、マーカーは正しい位置にとどまります。

ライブデモ

Image Chatの動作はライブデモページで確認できます。

次のステップ

基本が動作したら、Configuration Options ガイドで外観や挙動をカスタマイズできます。Responsive Design ガイドを参照して、パーセンテージベースの位置指定の動作を理解してください。Customization ガイドでスタイリングやダークモードのサポートについて学んでください。高度な統合については、API リファレンスを参照してください。

フロントエンドライブラリ

すべての FastComments フロントエンドライブラリ（react、vue、angular など）には Image Chat が含まれています。

例

基本的な例

Image Chat を使用する最も簡単な方法は、単一の画像要素をターゲットにすることです。この例は、画像上でインタラクティブなディスカッションを有効にする方法を示しています:

基本的な Image Chat の例

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>Product Image with Chat</title>
</head>
<body>
    <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <script>
        FastCommentsImageChat(document.getElementById('product-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

コンテナ要素の例

画像を内包するコンテナ要素を渡すこともできます:

コンテナを使用した Image Chat

Copy

Run

<div id="image-container">
    <img src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="System Diagram" />
</div>
<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('image-container'), {
        tenantId: 'demo'
    });
</script>

カスタム URL ID を使用した例

デフォルトでは、Image Chat はページの URL と画像のソースおよび座標を組み合わせて会話を識別します。カスタムの urlId を指定できます:

カスタム URL ID を使用した Image Chat

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        urlId: 'product-v2-main-image'
    });
</script>

URL 構造が変更されても同じ会話を維持したい場合や、複数のページで同じ議論ポイントを共有したい場合に便利です。

ダークモードの例

サイトがダークな背景を持ち、ウィジェットが自動的に検出しない場合は、手動でダークモードを有効にできます:

ダークモード対応の Image Chat

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        hasDarkBackground: true
    });
</script>

チャットスクエアのカスタムサイズの例

画像上に表示されるクリック可能な四角（スクエア）のサイズを調整できます。サイズは画像幅に対するパーセンテージで指定します:

カスタムスクエアサイズの Image Chat

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>Image Chat with Custom Square Size</title>
</head>
<body>
    <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <script>
        FastCommentsImageChat(document.getElementById('product-image'), {
            tenantId: 'demo',
            chatSquarePercentage: 2, // より小さい四角（デフォルトは 5）
        });
    </script>
</body>
</html>

コメント数コールバックの例

コメントが追加または更新されたときは commentCountUpdated コールバックで追跡できます:

コメント数コールバックの Image Chat

Copy

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        commentCountUpdated: function(count) {
            console.log('Total comments:', count);
            document.getElementById('comment-badge').textContent = count;
        }
    });
</script>

複数画像での例

複数の画像に対して Image Chat を初期化できます。各画像は独立したディスカッションポイントを持ちます:

複数画像での Image Chat

Copy

Run

<img id="image-1" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 1" />
<img id="image-2" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 2" />
<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    // 最初の画像で初期化
    FastCommentsImageChat(document.getElementById('image-1'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-1'
    });
    // 2番目の画像で初期化
    FastCommentsImageChat(document.getElementById('image-2'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-2'
    });
</script>

設定オプション

概要

FastComments Image Chatは標準のFastCommentsコメントウィジェットを拡張しており、ベースウィジェットのすべての設定オプションを継承しつつ、画像注釈に特化したいくつかのオプションを追加します。

必須の設定

tenantId

FastCommentsのTenant IDが必要です。これはFastComments dashboardで確認できます。

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'  // Spanish
});

readonly

すべての会話を読み取り専用にします。ユーザーは既存のマーカーや議論を閲覧できますが、新しいマーカーの作成や返信はできません。

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    readonly: true
});

sso and simpleSSO

シングルサインオンを使用して認証システムと統合します。

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    sso: {
        // SSOの設定
    }
});

認証オプションの詳細についてはSSOドキュメントを参照してください。

maxReplyDepth

返信の深さ（ネストのレベル）を制御します。既定では、Image Chatはこれを0に設定しており、すべてのコメントはフラット（ネストなし）です。スレッド化された会話にしたい場合はこれを変更できます。

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    maxReplyDepth: 3  // Allow 3 levels of nesting
});

内部設定

これらのオプションはImage Chatによって自動的に設定され、上書きすべきではありません：

productIdはImage Chatでは自動的に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が実際に動作する様子は、デモページのライブデモをご覧ください。

言語 🇯🇵 日本語

はじめに

設定

カスタマイズ

上級

はじめに

ユースケース

クイックスタート

インストール

基本的な実装

仕組み

ライブデモ

次のステップ

フロントエンドライブラリ

例

基本的な例

コンテナ要素の例

カスタム URL ID を使用した例

ダークモードの例

チャットスクエアのカスタムサイズの例

コメント数コールバックの例

複数画像での例

設定オプション

概要

必須の設定

tenantId

Image Chat 固有のオプション

urlId

chatSquarePercentage

hasDarkBackground

commentCountUpdated

継承された設定オプション

locale

readonly

sso and simpleSSO

maxReplyDepth

内部設定

ターゲット要素の柔軟性

完全な例

レスポンシブデザイン

パーセンテージベースの位置指定

レスポンシブレイアウトにおける利点

画像のスケーリングとアスペクト比

チャット四角のサイズ指定

モバイルでの挙動

動的な画像読み込み

デバイス間での一貫性

ビューポートに関する考慮

将来への備え

カスタマイズ

ダークモードのサポート

ダイナミックダークモード

CSS によるカスタムスタイリング

チャットスクエアのサイズ調整

モバイルでの挙動

チャットウィンドウの外観

遅延初期化

ローカリゼーション

継承されるカスタマイズオプション

カスタムフォントの利用

マーカーのビジュアルデザイン

ライブ同期

リアルタイム更新

WebSocket同期の仕組み

ブロードキャストIDシステム

接続の回復性

帯域幅に関する考慮事項

タブ間同期

セキュリティ

オフライン時の動作

パフォーマンスへの影響

共同作業のユースケース

APIリファレンス

APIの概要

ベースURL

認証

すべての会話を取得

エンドポイント

パラメータ

レスポンス