Channel Developers

thumbnail

スニペットの動作フロー

スニペットのフローは、チャネルとご自身のスニペットサーバーとの間で行われる2つの主要なやり取りで構成されています。

  1. チームメンバーによるアクセス:チームメンバーがユーザーチャットページにアクセスすると、チャネルは自動的にスニペットの初期化プロセスを開始します。

  2. 初期化リクエスト:チャネルは、チャネルの詳細、ユーザー情報、オンラインステータス、チームメンバーのデータを含む、現在のコンテキストに関するメタ情報を含んだPOSTリクエストを、ご自身のスニペットサーバーに送信します。リクエスト形式は、以下のInitializeの例に従います。

  3. スニペットレスポンス::ご自身のサーバーはリクエストを処理し、表示されるUIコンポーネントを含むスニペットモデルをレスポンスとして返信します。レスポンスは「Snippet Model」の構造に従う必要があります。

  4. レンダリング:チャネルはスニペットモデルを受け取り、チャットインターフェース内にインタラクティブなUIコンポーネントをレンダリングしてチームメンバーに表示します。

  1. ユーザーインタラクション:チームメンバーがスニペットコンポーネントを操作する(例:ボタンをクリックする、フォームを入力する)と、チャネルはチームメンバーによって入力されたすべての値を収集します。

  2. 送信リクエスト:チャネルは、収集したデータとともにPOSTリクエストをご自身のスニペットサーバーに送信します。このリクエストには、初期化リクエストに含まれていたすべてのコンテキスト情報に加え、特定のスニペットデータ、アクションをトリガーしたコンポーネントID、および送信された値が含まれます。リクエスト形式は、以下のSubmitの例に従います。

  3. 更新されたスニペットレスポンス:ご自身のサーバーは送信されたデータを処理し、ユーザーの入力に基づいた新しいコンテンツ、確認メッセージ、または次のステップを示す、更新されたスニペットモデルをレスポンスとして返信します。

  4. 再レンダリング:チャネルは更新されたスニペットモデルを受け取り、インターフェースを再レンダリングして、チームメンバーに新しい状態を表示します。

スニペットは、いくつかのメタ情報を含むPOSTリクエストをサーバに送信します。

リクエストには、InitializeSubmitの2種類があります。

チームメンバーがユーザーのチャットページにアクセスすると、初期化リクエストが送信されます。この初期化リクエストには、以下のメタ情報が含まれます。

JSON

スニペット内のボタンをチームメンバーがクリックすると、送信リクエストが実行されます。ボタンが押された際、チャネルはチームメンバーが入力したすべての値を収集します。

JSON

リクエストがサーバーに到着した際、サーバーはSnippet Model(スニペットモデル)をレスポンスとして返却する必要があります。

Snippet Modelは、レンダリングに必要なUI情報を含むJSON形式のデータです。

フィールド名

説明

version

Snippet Modelのバージョン。現在は v0。

layout

レイアウトはコンポーネントのリスト形式になる。利用可能なすべてのコンポーネントがこちらにリストされる。

params

保持する必要があるパラメータ

JSON

https://snippet-builder.channel.io/ にあるインタラクティブデモを使用して、スニペットのレイアウトをプレビューおよびテストできます。

重要な注意点:Snippet Builderに表示されるサンプルコードには、レスポンスのlayoutフィールド内に配置する必要があるコンポーネント定義のみが含まれています。スニペットのエンドポイントを実装する際は、必ずこのコードを完全なスニペット構造内にラップするようにしてください。

JSON