Chat Widget の利用方法

概要

Mobage JS SDK からアプリケーションに Chat のWidgetを埋め込みます。投稿されたメッセージは Mobage の通常の Chat と同様に審査が行われます。
このサービスを利用するには事前に RESTful API で Chat のチャンネルを生成する必要があります。

Chat チャンネルの生成

Chat Widget を埋め込む前に、Chat のチャンネルがないと何も表示出来ませんので、RESTful API を利用した以下の 4つの処理により チャンネルを作成してください。

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

 

Chat Widget の埋め込み

embed メソッドの第一引数に "chat" を、第二引数にオプションを指定することで、 Chat の埋め込みを行います。
 

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

埋め込み前
埋め込み後

 

mobage.ui.embed メソッドは、必ず getConnetedStatus() メソッドでのログイン状態確認後に実施してください。
viewport にて user-scalable=no の指定を必ず行ってください。

オプション

embed メソッドの第二引数には下記のオプションが指定できます。
明示的に指定しない場合は default value を指定した時と同じ挙動になります。

名前

必須

説明

デフォルト値

備考

targetId

Chat 化するタグの id

channelId

Chat の生成済みチャンネル ID

productName

 

タイトル名

widgetId

 

生成されるウィジェット要素 (iframe) への ID (DOMのid)

"game-chat"

widgetMode

 

ゲームチャットの種類 (設定可能な値: "simple_message_list", "message_list", "preview")

"simple_message_list"

 

useStream

 

リアルタイムチャット (設定可能な値: true, false)

false

previewLimit

 

プレビュー時に表示するメッセージの最大数

1

widgetMode が "preview" の場合のみ有効

stampSize

 

スタンプサイズ (設定可能な値: "small", "large")

"small"

widgetMode が "message_list" の場合のみ有効

limit

 

表示するメッセージの最大数

3

theme

 

テーマ (設定可能な値: "dark", "light")

"light"

defaultMessage

 

入力に表示するデフォルトメッセージ

successCallback

 

メッセージ投稿が成功した場合のリダイレクト先URL

 

showHeader

 

ヘッダー部分の表示/非表示 (設定可能な値: true, false)

true

showLink

 

下部ボタン部分の表示/非表示  (設定可能な値: true, false)

true

Shell App の場合は、オプションの指定に関わらず非表示 (false) になります

showPostform

 

投稿の入力フォームの表示/非表示 (設定可能な値: true, false)

true

styleSheet

 

ゲーム独自のスタイルを定義した CSS ファイル

"http://example.com/css/chat.css" など指定できます

ウィジェットのモード

simple_message_list モード

リスト形式でチャットメッセージが表示されるモードです。

message_list モード

吹き出し形式でチャットメッセージが表示され、履歴を見るボタンが配置されるモードです。
 

preview モード

最新メッセージのみを表示し、アコーディオン形式で開閉できるモードです。

 

HTML 構成と CSS クラス

ゲームチャットのウィジェットで使われている各パーツの HTML には、custom- の接頭辞で始まる class が与えられています。その class に CSS を適用させてカスタマイズすることができます。作成した CSS ファイルは、data-style-sheet 属性で指定します。

カスタマイズのために、bodyに third というclass名が与えられているので、そこから継承して下さい。

custom-log-controller-area

custom-open-chat-app-area

custom-header-area

custom-open-log-reload-area

custom-preview-close-cell

custom-preview-open-cell

custom-post-form-area

custom-preview-cell

custom-messages-area

サンプル

JavaScript

CSS

 

2013年12月より Game chat Widget(Android)に既存の「チャットで見る」ボタンに加え、「アプリで開く」ボタンを追加されました。
ユーザの端末に「Mobage Chat」アプリがインストールされている場合、「Mobage Chat」アプリで開かれます。
ユーザの端末に「Mobage Chat」アプリがインストールされていない場合、Google PlayのAndroidアプリダウンロード画面に遷移します。

 

更新履歴

  • 2014/11/12
    • 新規作成

 

 

PREVIOUS

各種 API / 各種設定の使い方

NEXT

ゲーム内ユーザープロフィールの設定