ChatChatChat ～シンプルなチャットを作る～
UnityのWebGL出力に簡単に無料でグローバルランキングを実装できる仕組みを考えてみた の続きになります。
まず、 https://github.com/divide-by-zero/GSSA/ をチェックアウトし、
projects/Assets/Samples/Empty/Sample1_ChatChatChat/ChatChatChat.unity を開きます。
※こちら、ある程度作ってあるけれど重要なところが空のプロジェクトです。 完成品はCompleteフォルダ配下にあるので、チマチマと講座なんてみるより完成品見た方が早い！ というかたはそちらを見てくれればいいと思います。
0.下準備
- 元記事にもあったように、GoogleSpreadSheet側の準備と、WebアプリケーションとしてのURL取得、SpreadSheetSettingsのinspectorへのURLのセットが済んでいる事を前提に進めていきます。
初期のソースコードは
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using GSSA;
using UnityEngine;
using UnityEngine.UI;
public class ChatChatChat : MonoBehaviour
{
[SerializeField] private Text logText;
[SerializeField] private InputField nameInputField;
[SerializeField] private InputField messageInputField;
void Start ()
{
messageInputField.onEndEdit.AddListener(SendChatMessage);
StartCoroutine(GetChatLogIterator());
}
private void SendChatMessage(string s)
{
}
private IEnumerator GetChatLogIterator()
{
while (true)
{
yield return new WaitForSeconds(5.0f);
}
}
}
以上な感じで、実行しても何も起きない状態です。
徐々に処理を追加していきます。
1.メッセージでエンターを押したらGSSA経由で保存する
NameのInputFieldとMessageのInputFieldは用意してありonEndEditにAddListenerでSendChatMessageを呼ぶところまではできています。 が、中身が空なので、何もできていない状態です。
ここで、onEndEdit＝Enterキー押下 のたびに名前とメッセージをSpreadSheetに登録するよう処理を書きます。
private void SendChatMessage(string s)
{
var so = new SpreadSheetObject("Chat");//Chatシート用のSpreadSheetObject作成
so["name"] = nameInputField.text;//"name"列に名前用InputFieldのtextをセット
so["message"] = s;//"message"列にはメッセージ用InputFieldのtext = onEndEditで渡される文字列(s)をセット
so.SaveAsync();//SpreadSheetへ保存
messageInputField.text = "";//サーバーに送信したので、手元の文字はクリア
}
この時点で名前を入れて、メッセージを入力してエンターを押すたびに、サーバに1行データが保存されるようになるはずです。
＜EX＞
2.一定時間間隔で、ログ取得する
すでにサーバーにはデータがたまっているので、たまったデータを取得して、画面に表示すればチャットの大枠の出来上がりです。
上の何もない空間がTextField(logText)なので、ここにサーバーから取得したログを表示いれてあげます。
private IEnumerator GetChatLogIterator()
{
while (true)
{
var query = new SpreadSheetQuery("Chat");//Chatシート用のQueryオブジェクト作成
query.OrderByDescending("createTime").Limit(20);//生成日時の大きい順にソートして、最新20件を取得
yield return query.FindAsync();//取得処理(yield returnで、サーバーから返却されるまで待機する）
logText.text = "";
foreach (var so in query.Result.Reverse())//取得できた結果をReverseで逆転（↑で生成日時の新しい順でソートしてしまっているので）
{
logText.text += so["name"] + ">" + so["message"] + "\n";
}
yield return new WaitForSeconds(5.0f);//5秒待ってあげてから、またサーバーからデータ取得
}
}
キモは、queryにOrderByDescendingでcreateTimeを指定して、生成日時の大きい＝新しいデータ順にしているところ。
＋Limitに20を指定して、最新データ20だけに抑えているところです。
これをしないと、表示しきれないほどのデータを毎回サーバーから取得しようとするので、通信量がなかなかな事になりかねません。
しかし、これでもまだ無駄が多いです。
SpreadSheetSettingのIs Debug Log Outputにチェックを入れて、通信ログを取得するとわかるのですが
常に最新データ上20件を取得するので、まったくデータが更新されていなくても同じデータが5秒に1回来てしまいます。
これは・・・あかんですよ・・・。
3.既に取得しているログはいらない
そんなわけで、↑これに尽きるんですが、どうやってすでに取得したものかどうかを判断するか。
今回の例だと、自動で生成されるcreateTimeを保持しておいて、Queryオブジェクトに条件を追加すればよさそうです。
最後に取得した時間(long)を取っておくための変数
private long lastGetTime;をフィールド変数として用意し、
Queryオブジェクトに、保持しているlastGetTimeよりも新しいデータだけほしいというWhereを追加してあげます。
query.OrderByDescending("createTime").Limit(20); →query.OrderByDescending("createTime").Where("createTime",">",lastGetTime).Limit(20);
加えて、この変更によって、Queryで返却される件数が0の場合があります（データ更新が無い場合、lastGetTimeよりも新しいデータが無いため）
そのためのif追加や、Logを継ぎ足していくだけではなく、表示しきれない範囲分は消していかなくてはいけないため、いきなりlogTextにログを追加するのではなく、Listの形で表示分の文字列リストを作成してからlogTextにセットするようにします。
private List<string> chatLogList = new List<string>();
private long lastGetTime;
private IEnumerator GetChatLogIterator()
{
while (true)
{
var query = new SpreadSheetQuery("Chat");
query.OrderByDescending("createTime").Where("createTime",">",lastGetTime).Limit(20);//ローカルで保持していない最新データ上限20件に絞る
yield return query.FindAsync();
if (query.Count > 0)//有効なデータが無い場合は何もしない
{
foreach (var so in query.Result.Reverse())
{
chatLogList.Add(so["name"] + ">" + so["message"]);//いきなりlogTextに入れるのではなく、一旦Listに追加
if (chatLogList.Count > 17) chatLogList.RemoveAt(0);//画面に収まりきらない部分(17以上)からは古いデータを削除
}
logText.text = string.Join("\n", chatLogList.ToArray());//Listを改行でjoinしてlogTextにセット
lastGetTime = (long)query.Result.First()["createTime"];//createTimeの新しい順に並んでいるので、先頭(First)のcreateTimeを保持しておく。
}
yield return new WaitForSeconds(5.0f);
}
}
※要注意！：createTimeは実際にはlongでデータが入っていますが、SpreadSheetObject上ではobject型なので、よしなにキャストしてあげる必要があります
この修正により、ローカルにあるデータは来なくなるので、通信量の削減につながります。
最後に
たかが、チャット。 しかも5秒に1回しか更新しない、プル型のチャットですが、いろいろな基本が詰まっており、これが出来れば大体のことができるんじゃないかと思ってます。
次回は、実際にゲームにランキング機能を付けて行きたいと思います。