2.2 メッセージ機能の作成手順

1 分Reading Time

不動産マッチングサイトで、一般ユーザーと不動産会社がメッセージのやり取りを行える機能を構築する手順を以下に説明します。この仕組みはJetEngineやJetFormBuilderを活用し、WordPressのカスタム投稿タイプやフォーム機能を組み合わせて構築します。

メッセージ機能の作成手順

1. 必要な準備

  • JetEngine: カスタム投稿タイプ（CPT）と動的コンテンツの管理。
  • JetFormBuilder: フロントエンドでのフォーム投稿。
  • Dynamic Visibility: 特定のユーザー間の表示制御。

2. カスタム投稿タイプ (CPT) の設定

カスタム投稿タイプ「メッセージ」の作成

  1. JetEngine > Post Types > Add New:
    • 投稿タイプ名: メッセージ
    • スラッグ: messages
    • 公開設定:
      • 投稿公開を制限し、ユーザー同士のプライベートメッセージに。
  2. メタフィールドの追加:
    • 送信者: 現在のユーザーID（Dynamic Tag: Current User ID）
    • 受信者: メッセージの相手のユーザーID
    • メッセージ本文: テキストエリア
    • 関連投稿ID: 希望情報や提案のIDを保存（どの案件に紐づくかを識別するため）。

3. メッセージ送信フォームの作成

JetFormBuilderでメッセージ送信フォームを作成

  1. JetFormBuilder > Add New:
    • フォーム名: メッセージ送信フォーム
  2. フォームフィールドの追加:
    • 受信者フィールド:
      • フィールドタイプ: Hidden（非表示）。
      • 値: Dynamic Tagで「受信者ユーザーID」を設定。
    • メッセージ本文フィールド:
      • フィールドタイプ: Textarea。
    • 関連投稿フィールド:
      • フィールドタイプ: Hidden。
      • 値: 動的タグで「現在の投稿ID」を取得。
  3. 投稿保存アクションの設定:
    • フォーム送信時に新しい「メッセージ」投稿を作成。
    • メタフィールドに各入力データをマッピング:
      • 送信者: 現在のユーザーID。
      • 受信者: 動的に取得したユーザーID。
      • メッセージ本文: 入力されたデータ。
      • 関連投稿: 現在の投稿ID。

4. メッセージ表示の設定

Listing Gridの作成

  1. JetEngine > Listing > Add New:
    • リスト対象: メッセージ カスタム投稿タイプ。
  2. リストテンプレートの作成:
    • 表示項目:
      • 送信者情報: 送信者の名前やメールアドレス。
      • メッセージ本文。
      • 送信日時。
  3. フィルタリング設定:
    • 受信者IDが現在のユーザーIDと一致する場合のみ表示。
  4. Listing Gridを受信ボックスページに追加:
    • 一般ユーザーと不動産会社が自分の受信メッセージを確認可能。

5. メッセージスレッドの表示

  1. 特定の案件に関連するメッセージの表示:
    • JetEngineのクエリビルダーを使用。
    • フィルタ条件:
      • 関連投稿IDが一致。
      • 送信者または受信者が現在のユーザー。
  2. スレッド形式のデザイン:
    • Listing Gridでメッセージを時系列順に並べる。
    • CSSを使用してチャット形式のUIを作成。

6. アクセス制限の設定

Dynamic Visibilityの活用

  • メッセージを受信者または送信者本人のみに表示:
    • 条件: メタフィールド「送信者」または「受信者」が現在のユーザーIDと一致。
  • 他のユーザーがメッセージを閲覧できないよう制御。

7. 通知機能の追加

メール通知

  1. 送信者に通知:
    • JetFormBuilderの「After Submit」アクションで、送信完了の通知メールを送信。
  2. 受信者に通知:
    • メールにメッセージ本文や関連投稿のリンクを含める。
    • 例: 「新しいメッセージが届きました」

ダッシュボード通知

  • ユーザーのダッシュボードに未読メッセージ件数を表示。
  • クエリビルダーで「未読メッセージ」をカウント。

8. UIデザインと改善

  • メッセージフォームのデザイン:
    • ElementorやGutenbergでスタイリング。
  • スレッド表示のカスタマイズ:
    • CSSを使用してチャットアプリのようなデザインを実現。

最終的な成果

この手順を実施することで、一般ユーザーと不動産会社が案件ごとにメッセージを送受信し、やり取りをスムーズに進められる機能を実現できます。必要に応じて、さらに以下を追加できます:

  • リアルタイム通知（例: WebSocketやAjax）。
  • 既読/未読管理。
  • ファイル添付機能（物件資料の送付など）。

 

参考

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