2.3 メッセージのユーザーリストからチャット画面へ

1 分Reading Time

JetEngineを使って、以下の機能を実現する方法を詳しく説明します：

  1. メッセージ相手のリストを表示
    • 各相手の新着メッセージ数を表示。
  2. 相手をクリックするとその相手とのチャット画面に遷移。
  3. チャット画面でその相手とのメッセージが表示される。

全体の流れ

  1. メッセージ投稿タイプに「送信者」「受信者」「既読」などのフィールドが設定されていることを前提とします。
  2. Query Builderを使って、各相手の最新メッセージ情報を取得します。
  3. Listing Gridで相手のリストを表示します。
  4. Dynamic Linkでクリック時に相手とのチャット画面に遷移します。
  5. チャット画面では、Query Builderを使って相手とのメッセージを取得します。

手順 1: メッセージ相手のリストを表示

ステップ 1: メッセージ相手を取得するクエリを作成

  1. JetEngine > Query Builder > Add New
    • Query Type: Users Query（ユーザーを取得）。Posts Queryを使用
    • Query Name: message_partners_query（例: メッセージ相手リスト用）。
  2. クエリ条件を設定:
    • General設定：
      • PostType
      • Post Status
    • Meta Query:
      • 条件 1: 自分が受信者のメッセージを取得。
        • Key: JetEngine meta field 　Field：送信者ID　Return：Field name/key/ID
        • Value: Current User ID（Dynamic Tagで設定）
        • Compare: =
      • 条件 2: 自分が送信者のメッセージを取得。
        • Key: JetEngine meta field 　Field：受信者ID　Return：Field name/key/ID
        • Value: Current User ID（Dynamic Tag）
        • Compare: =
    • Relation: OR。
  3. 取得するユーザーを一意にする:
    • Distinct: チェックをオン（重複する相手を除外）→ない　要件等
  4. 保存してプレビューで確認。

ステップ 2: 相手のリスティングテンプレートを作成

  1. JetEngine > Listings > Add New
    • Listing Source: Query Bilder　クエリ：message_partners_query
    • Listing Item Name: Message Partner List。
  2. Dynamic Fieldで相手の名前を表示:
    • Dynamic Field:
      • Source: Meta Data
      • Meta Field:送信者名
  3. 新着メッセージ数を表示:
    • Dynamic Fieldウィジェットを追加。
      • Source: Query Count。
      • Query: メッセージ投稿から相手との未読メッセージをカウントするカスタムクエリを作成。
  4. 保存。

ステップ 3: リストに遷移リンクを追加

  1. Dynamic Linkウィジェットを追加:
    • Source: 送信者ID
    • URL Prefix: /dashboard/messages/
  2. リンク例:
    • URLが /chat/123 などになるように設定（123 は相手のユーザーID）。

手順 2: チャット画面を作成

ステップ 1: URLパラメータで相手を特定

  1. Query Builderでメッセージを取得:
    • JetEngine > Query Builder > Add New:
      • Query Type: Posts Query（メッセージ投稿を取得）。
      • Query Name: user_messages_query。
  2. Meta Query条件:
    • 条件 1: 自分が送信者で、相手が受信者。
      • Key: sender_id。
      • Value: Current User ID（Dynamic Tag）。
      • Compare: =。
    • 条件 2: 自分が受信者で、相手が送信者。
      • Key: receiver_id。
      • Value: Queried User ID（Dynamic TagでURLから取得）。
      • Compare: =。
    • Relation: OR。
  3. 保存してプレビューで確認。

ステップ 2: メッセージ表示用のリスティングテンプレートを作成

  1. JetEngine > Listings > Add New:
    • Listing Source: Posts（メッセージ投稿）。
    • Listing Item Name: Chat Messages。
  2. Dynamic Fieldでメッセージ本文を表示:
    • Source: Meta Data。
    • Field: message_body（メッセージ本文のフィールド名）。
  3. 送信者/受信者でスタイルを分ける:
    • Dynamic Visibilityで条件設定。
      • Condition 1: sender_id = Current User ID → 右寄せ。
      • Condition 2: receiver_id = Current User ID → 左寄せ。
  4. 保存。

ステップ 3: チャット画面をデザイン

  1. 固定ページを作成（例: /chat/）。
  2. Elementorで編集し、以下を配置:
    • Listing Gridウィジェット:
      • Source: Custom Query。
      • Query: user_messages_query。
    • メッセージ送信用フォーム（JetFormBuilderを使用）。

手順 3: 未読メッセージを既読にする

  1. JetFormBuilderでメッセージ表示時に既読更新:
    • PHPコードで自動更新:
      • 表示中のメッセージ投稿のis_readフィールドを更新。
  2. Dynamic Visibilityで未読バッジを非表示:
    • Condition: is_read = 1（既読の場合は非表示）。

最終確認

  1. 相手リストページで相手の一覧と新着メッセージ数が正しく表示される。
  2. 相手をクリックすると、その相手とのチャット画面が正しく表示される。
  3. チャット画面で送受信メッセージが適切に表示され、未読が更新される。

これで、相手リストから選択してチャット画面に遷移する機能が完成します！

0
0
1451
  • Facebook
  • Twitter
  • Linkedin
1 分Reading Time