概要

Mobage JS SDK では Chat 機能を Widget としてアプリケーションに埋め込んで利用することが出来ます。
Chat Widget を埋め込んで使う際には RESTful API を使ったChat のチャンネル作成の実装が必要です。
なお、Chat のチャンネルはゲーム毎に自由に生成することができ、また任意のチャンネルに対してゲームからメッセージを投稿することも可能です。
このチュートリアルでは、Chat 機能を実現するために必要な処理をするプログラムを開発していきます。

1 ユーザにつき、1 チャットルームを作成し、特定ユーザーのみにメッセージ（ゲームからのお知らせ）を送る行為は禁止されています。 1アプリケーションにつき生成できるチャンネルの最大エントリ数は 1,000,000 件 になります。

 
Chat 機能の概要図は以下になります。
この概要図では Mobage JS SDK 、 Widget 、 RESTful API の関係を表しています。

図に記載されている主要な実装箇所については下記のリンクからページ内の説明を確認してください。

作成するファイル一覧

このチュートリアルで作成するファイルは下記になります。

チュートリアルをはじめる前に

ログイン機能でログインしておく

このチュートリアルは、以下のチュートリアルを終わらせている前提で進めます。
以下のチュートリアルでファイル作成していない場合は、先にそちらを完成させましょう。

• ログイン

サンプルコードのダウンロード

Github からサンプルコードを clone できます。

チャット機能を有効にする

チャット機能を利用するには、Mobage Developers 上でチャット機能を有効化する設定を行う必要があります。
有効化するためには、「SPWeb」タブの下部にチャットのセクションがありますので、ゲームチャットへの導線（Sandbox）で「オン」ボタンをクリックして有効化します。
本番で有効化するためには、ゲームチャットへの導線（本番用）で「オン」ボタンをクリックして下さい。

また、上記画面でプロフィール設定情報というセクションがありますが、ゲーム内のチャット画面から各ユーザーのアイコンをタップした際に遷移する URL が設定できます。
何も設定しない場合には、アイコンをタップしてもどこにも遷移しません。上記の「プロフィールURLの編集」ボタンをクリックすると以下の画面が表示されますので、こちらで設定します。

このチュートリアルでは以下のように入力します。

http://example.com/mobage-jssdk-sample-others/chat/profile.php?user_id={user_id}

このチュートリアルでは、People API でニックネームとサムネイル画像を表示しますが、ゲーム内でのプロフィールを表示するだけでも構いません。
サンプルコードの profile.php、profile.js を上記 URL になるようにゲームサーバーへ配置しておきましょう。
 

開発のステップ

「Chat機能」を実現するために、大きく以下の3ステップで進めます。

1. ユーザーのチャット一覧を表示する
2. チャット画面を表示する
3. チャットのチャンネルを生成する

ユーザーのチャット一覧を表示する

まずはじめに、ユーザーが参加しているチャット一覧を表示するプログラムを開発します。
ユーザーが参加しているチャットのチャンネルの一覧を取得するには、Mobage JS SDK の mobage.api.userChatChannel.get メソッド を利用します。
その実装はサンプルコード内の chat_list.php と chat_list.js を参考にしてください。

以下のように mobage.oauth.getConnectedStatus にて Mobage Connect へのログイン、ゲームのインストールの確認を行ってから実行します。

mobage.api.userChatChannel.get メソッドのレスポンスを解析して User Chat Channel オブジェクトの配列を取得し、for 文で件数分のチャット画面へのリンクを生成します。
次に開発する chat.php へのリンクにリクエストパラメーターとしてチャンネル ID が渡るようにしておきます。
 

取得できるチャンネル数が多い場合、デフォルトでは 50 件を上限として取得します。count パラメタの指定により、最大で 1000 件まで指定して取得できます。

また、チャットを新規に生成する機能として、chat_list.php の最下部に、chat_create.php へのリンクも追加しておきましょう。

チャット画面を表示する

次にチャットを実際に表示する画面を開発します。
リクエストパラメーターから、チャンネルIDを取得し、Mobage JS SDK の mobage.ui.embed メソッドを利用して UI に Chat Widget を埋め込みます。
実装についはサンプルコード内の chat.js、chat.php を参照してください。
 
以下のように、mobage.ui.embed メソッドの第一引数に "chat" を、第二引数にオプションを指定することで、 Chat の埋め込みを行います。

 
HTMLファイルに下記のように記載しておく事で、Chat Widget の埋め込みが行われます。

なお、Chat Widget に関する詳しい説明については下記を参照してください。

• Chat Widget
   

チャットのチャンネルを生成する

ここまででチャットを表示することが可能になりましたが、チャットのチャンネルがないと何も表示できませんので、チャンネルを生成するプログラムを開発します。
実装についてはサンプルコード内の chat_create.php を参照してください。

1. API を実行するための Access Token を取得する
2. Chat Channel API に POST して空のチャンネルを生成する
3. People API を利用して友達のユーザー ID のリストを取得する
4. Chat Member API に POST してログインしているユーザーとその友達をチャンネルに追加する
5. Chat Message API に POST して、アプリケーションから最初のメッセージを投稿する

1アプリケーションにつき生成できるチャンネル数には上限がありますのでゲーム内イベント終了などにあわせて削除リクエストを適宜おこなって下さい。

API を実行するための Access Token を取得する

 
まず、API を実行するために必要な Access Token を取得します。
API 実行のためには以下の2種類の Access Token を用意する必要があります。

• Authorization Code Grant の Access Token
• Client Credentials Grant の Access Token
   

  Authorization Code Grant

  Authorization Code Grant の Access Token は、ユーザーのログインセッションを発行する際に、ゲームサーバにて取得しているものを利用します。
  ここでは下記を参照して、ゲームサーバのセッションにて管理している Access Token を利用します。
  Authorization Code Grant の Access Token 取得
   

  Client Credentials Grant

  Client Credentials Grant の Access Token は、Client 向けの API 実行権限である Access Token です。
  Client Credentials Grantにより、Client 向けの Access Token を発行します。

実装についてはサンプルコード内の client_credentials.php を参照してください。

 
Token レスポンスで取得した JSON の access_token フィールドに返って来ている値を利用します。
 

Chat Channel API に POST して空のチャンネルを生成する

次に、Chat Channel API に POST して空のチャンネルを生成します。
Chat Channel API は Authorization Code Grant と Client Credentials Grant の両方に対応しているので、どちらの Access Token を利用しても良いです。
ここでは Client Credentials Grant の Access Token を利用した以下のような処理をするプログラムを create_channel.php として開発します。
実装についてはサンプルコード内の create_channel.php を参照してください。

People API を利用して友達のユーザー ID のリストを取得する

次に、People API に GET して、ログインユーザーの友達のユーザー ID のリストを取得します。
People API は Authorization Code Grant にしか対応していないので、 Authorization Code Grant の Access Token を利用します。
ここでは以下のような処理をするプログラムを get_friend_list.php として開発します。
実装についてはサンプルコード内の get_friend_list.php を参照してください。

次の Chat Members API へ POST するデータを組み立てます。People API で取得できるユーザー ID には、ドメインの接頭辞が付いていますので、substring します。

Chat Member API に POST してログインしているユーザーとその友達をチャンネルに追加する

次に、Chat Member API に POST してログインしているユーザーとその友達をチャットに追加します。
Chat Member API は Authorization Code Grant と Client Credentials Grant の両方に対応しているので、どちらの Access Token を利用しても良いです。
ここでは Client Credentials Grant の Access Token を利用した以下のような処理をするプログラムを add_member_to_channel.php として開発します。
なお、複数いる友だちを追加した場合は、HTTP ステータスが 207 になりますので考慮しておきます。今回は特にレスポンスの中身までは確認しません。
 
実装についてはサンプルコード内の add_member_to_channel.php を参照してください。

Chat Message API に POST して、アプリケーションから最初のメッセージを投稿する

次に、Chat Message API に POST して、アプリケーションから最初のメッセージを投稿します。
Chat Message API での POST は Client Credentials Grant にのみ対応しているので、 Client Credentials Grant の Access Token を利用します。
ここでは以下のような処理をするプログラムを post_chat_message.php として開発します。
実装についてはサンプルコード内の post_chat_message.php を参照してください。

これでひと通りの機能の実装が完了しました。

動作確認

では、開発したプログラムを下記のように Game Server に配置します。

このチュートリアルを進めるためには、Platformからのリクエストを受け取れる Game Server の用意が必要となります。 このチュートリアルでは、example.comというドメインでPlatformからのリクエストを受け取れるGame Serverを用意した前提で説明を進めます。

 
チャットの動作確認なので、User1 と User2 の２つのアカウントを用意しておきます。また、今回の実装では、友達同士でチャットを作成するようにしているため、User1 と User2 を友達関係にしておきます。

チャットに参加できるメンバーは、対象のゲームをインストールしておく必要があるので、User1 と User2 がゲームをインストールしている状態にしておいてください。

 
index.html にリンクなどを追加して、User1 でログインし、端末から chat_list.php にアクセスしてみましょう。
まだチャンネルを作成していないため、以下のような画面が表示されます。
 

 
「Create New Chat Channel」のリンクをタップすると、チャット画面が表示され、ゲームからの最初のメッセージが表示されます。
 

ここで、User1 から適当なメッセージを書き込んでおきましょう。
 

次に User2 で chat_list.php を表示してみます。先ほど User1 によって作成されたチャンネルが表示され、未読メッセージが 1 件ある状態になります。
 

User2 でもメッセージを投稿してみましょう。User1 側にもメッセージが表示されるます。
 

以上で、友達とチャットするチュートリアルは完了です。
 

注意事項

• JS SDK のバージョンは2.8.0以上をご利用ください。

開発したコード

このチュートリアルで開発したコードは Github から clone できます。

参考資料

• People API の詳細はこちらを参照してください。
• User Chat Channel API の詳細はこちらを参照してください。
• Chat Channel API の詳細はこちらを参照してください。
• Chat Member API の詳細はこちらを参照してください。
• Chat Message API の詳細はこちらを参照してください。
• チャットサービスの詳細はこちらを参照してください。