CEDEC+KYUSHU2022の登壇資料です。 http://cedec-kyushu.jp/2022/session/12.html

2. KLabについて

3. © KLab Inc. 2022
3
ミッション：「世界と自分をワクワクさせろ」
ビジョン：「エンターテインメントで、世界中のユーザーをひとつにつなげる」
社会に感動と喜びを提供できるような、サービス・技術を創造しています。
会社紹介：KLab株式会社（クラブ）
設立 2000年8月1日
資本金 53億6364万円（2022年10月末現在）
株式公開市場 東京証券取引所･プライム市場（3656）
代表者
代表取締役社長CEO 森田 英克
代表取締役副会長 五十嵐洋介
所在地
本社（東京都港区、六本木ヒルズ森タワー）
大阪事業所、福岡事業所、仙台事業所
主要関連会社
株式会社BLOCKSMITH&Co.
株式会社グローバルギア
海外拠点 可来软件开发（上海）有限公司 （KLab China Inc.）
グループ従業員数 正社員 553名(2022年9月末時点)
主力：ゲーム事業
アニメ、コミック、ゲームなど、
世界中で人気の高いIPを原作とした
モバイルオンラインゲームを
国内外に展開。
現在155の国と地域で配信
その他：
スマートフォン関連のアプリケーション、
サービス及びサーバーインフラの企画、
開発、提供、新規事業開拓など

4. © KLab Inc. 2022
4
コーポレートサイト紹介
https://www.klab.com/jp/

5. 本日の講演について

6. © KLab Inc. 2022
6
本日の講演について
勝見 祐己
6つのゲームで採用されたチャットサービスの作り方
〜マイクロサービスは使い回しがきく♪〜
𠮷富 愛梨沙
Kubernetesで作るマイクロサービス
〜複数プロジェクト×複数環境でも大丈夫🥤〜
山内 敏彰
ゲーム内チャットのUIをWebViewで実装してみた話
～Unityと絵文字🤗🐩～
山田 雅人
Push通知でチャットサーバの負荷対策
〜常時接続やめました🔌〜

7. 6つのゲームで採用された
チャットサービスの作り方
〜マイクロサービスは使い回しがきく♪〜

8. superficial

9. © KLab Inc. 2022
9
ゲーム内チャット？

10. © KLab Inc. 2022
10
ゲーム内チャット？

11. © KLab Inc. 2022
11
KMS -- KLab Messaging Service
● 内製の、ゲーム内チャットシステム
● KLabのゲーム用に開発 (2015年〜運用
￭ 汎用性をもたせて開発(特定のゲーム用ではない
￭ ６タイトルに採用(予定含む
● 現在は Kubernetes®上で運用
￭ 当初はオンプレ環境で運用
https://youtu.be/vgcspB34-ro
「KLabチャットシステム インフラ変遷」
KLabのチャットサービス

12. © KLab Inc. 2022
12
KMSの設計思想
○ 汎用のゲーム内チャットシステム
■ 特定のゲームのために設計されたものではない
○ チャットメッセージの中身や表示の仕方はゲーム側に一任
KMSの主要な構成要素は5つ
KMS ― このセクションで話すこと
○ Client API
○ Message Bus
○ Push通知サービス
○ Server API
○ DB

13. © KLab Inc. 2022
13
汎用的なゲーム内チャットシステム
● 開発もシステム運用も完全に分離
● ゲームシステムとは疎結合
￭ ゲーム側とはAPIでやり取り
￭ マイクロサービス ( Not! ライブラリ )
KMS ― 設計思想
KMSチーム ゲームチーム

14. © KLab Inc. 2022
14
汎用的なゲーム内チャットシステム
● 開発もシステム運用も完全に分離
● ゲームシステムとは疎結合
￭ ゲーム側とはAPIでやり取り
￭ マイクロサービス ( Not! ライブラリ )
KMS ― 設計思想
1つのシステム/サービスを構成
する複数の機能/要素を分解し、
それぞれを切り出して1つのシス
テムとしたもの
ex: ショッピングサイト
● ID 管理システム
● 決済機能
● データ分析
KMSチーム ゲームチーム

15. © KLab Inc. 2022
15
KMS ― 役割
ゲームクライアント間の、チャットメッセージの配送
● 最大の役割
+ 周辺機能
チャットメッセージ配送のための仕組みを提供
● メッセージの中身はノータッチ
● メッセージの表示の仕方もノータッチ

16. © KLab Inc. 2022
16
KMS ― 役割
ゲームクライアント間の、チャットメッセージの配送
● 最大の役割
+ 周辺機能
チャットメッセージ配送のための仕組みを提供
● メッセージの中身はノータッチ
● メッセージの表示の仕方もノータッチ
● 普通のチャット
● 対戦機能の、対戦
相手の募集

17. © KLab Inc. 2022
17
● Game Client API
○ ゲームクライアントと直接やり取りする
○ メインは、チャットメッセージのやり取り
● Game Server API
○ ゲームサーバからのリクエストを受け付ける
○ ユーザ管理やチャンネル管理などの機能を提供
● DB / Message Bus
○ サーバ間の、メッセージやデータのやり取りを仲立ち
● Push通知サービス
KMS ― システム構成

18. © KLab Inc. 2022
18
● Game Client API
○ ゲームクライアントと直接やり取りする
○ メインは、チャットメッセージのやり取り
● Game Server API
○ ゲームサーバからのリクエストを受け付ける
○ ユーザ管理やチャンネル管理などの機能を提供
● DB / Message Bus
○ サーバ間の、メッセージやデータのやり取りを仲立ち
● Push通知サービス
KMS ― システム構成

19. © KLab Inc. 2022
19
● Game Client API
○ ゲームクライアントと直接やり取りする
○ メインは、チャットメッセージのやり取り
● Game Server API
○ ゲームサーバからのリクエストを受け付ける
○ ユーザ管理やチャンネル管理などの機能を提供
● DB / Message Bus
○ サーバ間の、メッセージやデータのやり取りを仲立ち
● Push通知サービス
KMS ― システム構成

20. © KLab Inc. 2022
20
● Game Client API
○ ゲームクライアントと直接やり取りする
○ メインは、チャットメッセージのやり取り
● Game Server API
○ ゲームサーバからのリクエストを受け付ける
○ ユーザ管理やチャンネル管理などの機能を提供
● DB / Message Bus
○ サーバ間の、メッセージやデータのやり取りを仲立ち
● Push通知サービス
KMS ― システム構成

21. © KLab Inc. 2022
21
● Game Client API
○ ゲームクライアントと直接やり取りする
○ メインは、チャットメッセージのやり取り
● Game Server API
○ ゲームサーバからのリクエストを受け付ける
○ ユーザ管理やチャンネル管理などの機能を提供
● DB / Message Bus
○ サーバ間の、メッセージやデータのやり取りを仲立ち
● Push通知サービス
KMS ― システム構成

22. © KLab Inc. 2022
22
KMS system
Client API Server API
Game Servers
KMS ― システム構成(Client API)
Message Bus
チャットメッセージ等
DB
Push通知サービス

23. © KLab Inc. 2022
23
KMS system
Client API Server API
Game Servers
KMS ― システム構成(Server API)
Message Bus
ユーザ登録など
DB
Push通知サービス
チャットメッセージ等
接続してくるゲームク
ライアントの、
認証情報など

24. © KLab Inc. 2022
24
KMS system
Client API Server API
Game Servers
KMS ― システム構成(Backend)
Message Bus
チャットメッセージ等
ユーザ登録など
DB
Push通知サービス
Push
通知
メンション付きメッセージ

25. into the Depth!

26. © KLab Inc. 2022
26
KMS system
Client API Server API
Game Servers
KMS ― システム構成(通信)
Message Bus
DB
Push通知サービス
WebSocket
HTTPS
単純な Request &
Response 通信

27. © KLab Inc. 2022
27
KMS system
Client API Server API
Game Servers
KMS ― システム構成(通信)
Message Bus
DB
Push通知サービス
WebSocket
HTTPS
常時接続
新着メッセージをClient API側
から送るのに必要

28. © KLab Inc. 2022
28
Client API
KMS システム ― Client API
Client API
● クライアント認証
● チャット送信
● チャット受信
● 過去ログ取得
● 既読管理
● ユーザ情報取得

29. © KLab Inc. 2022
29
KMS
KMS システム ― Server API
Server API
Game Servers
Server API
● ユーザ管理
● チャンネル管理
● システムメッセージ投稿
● NG word 管理
● メンテ状態管理

30. © KLab Inc. 2022
30
ex: チャンネルへの参加について
● オープンチャンネルへの参加は、Client API
○ ex: ワールドチャット = 誰が参加しても OK
● クローズドチャンネルへの参加は、Server API
○ ex: ギルドチャット = ギルドメンバーだけが参加
ゲームデザインに基づく判断は、KMSでは行わない
○ 判断が必要な操作は
(Game Client) → Game Server → Server API
Client API / Server API 役割分担

31. © KLab Inc. 2022
31
ex: チャンネルへの参加について
● オープンチャンネルへの参加は、Client API
○ ex: ワールドチャット = 誰が参加しても OK
● クローズドチャンネルへの参加は、Server API
○ ex: ギルドチャット = ギルドメンバーだけが参加
ゲームデザインに基づく判断は、KMSでは行わない
○ 判断が必要な操作は
(Game Client) → Game Server → Server API
Client API / Server API 役割分担

32. © KLab Inc. 2022
32
Client API
KMS ― システム構成(バックエンド)
Message
Bus
DB
Server API
DB(RDB)
● チャットログ
● ユーザ情報
○ 認証情報
● チャンネル情報
Message Bus
● サーバ間のメッセージ
送受信を仲立ち
○ チャットメッセージ
○ データ更新情報
Game
Servers

33. © KLab Inc. 2022
33
Client API
KMS ― システム構成(バックエンド)
Message
Bus
DB
Server API
DB(RDB)
● チャットログ
● ユーザ情報
○ 認証情報
● チャンネル情報
Message Bus
● サーバ間のメッセージ
送受信を仲立ち
○ チャットメッセージ
○ データ更新情報
Game
Servers
Client API も
Server API も
複数台のサーバで運用

34. © KLab Inc. 2022
34
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
サーバは複数台 ＝ 女の子と男の子は別サーバへ接続
1. 女の子からのメッセージが上のサーバへ届く
2. 男の子は別のサーバに接続しているのでMessage Busへ
3. Message Busを経由して下のサーバへメッセージを転送
4. 下のサーバから男の子へ、女の子のメッセージが届く
Game
Servers
①
②
③
④

35. © KLab Inc. 2022
35
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
サーバは複数台 ＝ 女の子と男の子は別サーバへ接続
1. 女の子からのメッセージが上のサーバへ届く
2. 男の子は別のサーバに接続しているのでMessage Busへ
3. Message Busを経由して下のサーバへメッセージを転送
4. 下のサーバから男の子へ、女の子のメッセージが届く
Game
Servers
①
②
③
④

36. © KLab Inc. 2022
36
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
サーバは複数台 ＝ 女の子と男の子は別サーバへ接続
1. 女の子からのメッセージが上のサーバへ届く
2. 男の子は別のサーバに接続しているのでMessage Busへ
3. Message Busを経由して下のサーバへメッセージを転送
4. 下のサーバから男の子へ、女の子のメッセージが届く
Game
Servers
①
②
③
④

37. © KLab Inc. 2022
37
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
サーバは複数台 ＝ 女の子と男の子は別サーバへ接続
1. 女の子からのメッセージが上のサーバへ届く
2. 男の子は別のサーバに接続しているのでMessage Busへ
3. Message Busを経由して下のサーバへメッセージを転送
4. 下のサーバから男の子へ、女の子のメッセージが届く
Game
Servers
①
②
③
④

38. © KLab Inc. 2022
38
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
サーバは複数台 ＝ 女の子と男の子は別サーバへ接続
1. 女の子からのメッセージが上のサーバへ届く
2. 男の子は別のサーバに接続しているのでMessage Busへ
3. Message Busを経由して下のサーバへメッセージを転送
4. 下のサーバから男の子へ、女の子のメッセージが届く
Game
Servers
①
②
③
④

39. © KLab Inc. 2022
39
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
Game
Servers
⑤
⑥
⑦
⑦
⑧
⑧
Server APIへの更新情報＝ex:新規チャンネル参加
5. ゲームサーバから Server API へリクエスト
6. 更新情報を Message Bus へ
7. Client API のサーバへ更新情報が届く
8. ゲームクライアントに、チャンネル参加情報が届く

40. © KLab Inc. 2022
40
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
Game
Servers
⑤
⑥
⑦
⑦
⑧
⑧
Server APIへの更新情報＝ex:新規チャンネル参加
5. ゲームサーバから Server API へリクエスト
6. 更新情報を Message Bus へ
7. Client API のサーバへ更新情報が届く
8. ゲームクライアントに、チャンネル参加情報が届く

41. © KLab Inc. 2022
41
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
Game
Servers
⑤
⑥
⑦
⑦
⑧
⑧
Server APIへの更新情報＝ex:新規チャンネル参加
5. ゲームサーバから Server API へリクエスト
6. 更新情報を Message Bus へ
7. Client API のサーバへ更新情報が届く
8. ゲームクライアントに、チャンネル参加情報が届く

42. © KLab Inc. 2022
42
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
Game
Servers
⑤
⑥
⑦
⑦
⑧
⑧
Server APIへの更新情報＝ex:新規チャンネル参加
5. ゲームサーバから Server API へリクエスト
6. 更新情報を Message Bus へ
7. Client API のサーバへ更新情報が届く
8. ゲームクライアントに、チャンネル参加情報が届く

43. © KLab Inc. 2022
43
Client API
KMS ― システム構成(Message Bus)
Message
Bus
DB
Server API
Game
Servers
⑤
⑥
⑦
⑦
⑧
⑧
Server APIへの更新情報＝ex:新規チャンネル参加
5. ゲームサーバから Server API へリクエスト
6. 更新情報を Message Bus へ
7. Client API のサーバへ更新情報が届く
8. ゲームクライアントに、チャンネル参加情報が届く

44. © KLab Inc. 2022
44
Pub/Sub
topicを軸にメッセージを
a) Publishすると
b) Subscribeしてる全員に届く
KMS ― Message Bus
Message Bus
● Redis (以前は IRC)
○ Master - Replica
● Pub/Subのみ利用
Client API Publish
Sub-
scribe
Subscribe
Replica
Replica
Master
Redis Icon: © Liran.amir, CC BY-SA 4.0
Replication

45. © KLab Inc. 2022
45
KMSはゲーム用のチャットマイクロサービス
● ゲーム側の事情を持ち込まないことで汎用性を確保
● 結果
○ 6タイトルのゲームに採用
○ チャット以外の用途にも活用
最後に

46. © KLab Inc. 2022
46
この後のセクションに向けて
KMSは Kubernetes上で運用
KMSはゲーム用のチャットマイクロサービス
○ チャットメッセージ配送のための仕組みを提供
○ チャットメッセージの中身や表示はゲームクライアント任せ
KMSの主要な構成要素は5つ
○ game client 用の Client API
○ game server 用の Server API
○ Push 通知サービス
○ DB / Message Bus(Redis)

47. Kubernetesで作るマイクロサービス
〜複数プロジェクト×複数環境でも大丈夫🥤〜

48. KMSのシステム構成

49. © KLab Inc. 2022
49
KMSのシステム構成
Client API
Server API
ログ収集
メッセージバス
メトリクス収集
etc…
KMSを構成するアプリケーション群

50. © KLab Inc. 2022
50
KMSのシステム構成
ゲーム①
本番KMS
開発KMS
ゲーム②
本番KMS
開発KMS
ゲーム③
本番KMS
開発KMS
KMSには沢山環境がある
ゲーム環境毎に
開発・本番など...
：
：

51. © KLab Inc. 2022
51
複数のアプリケーションの運用にKMSでは
Kubernetes(k8s)を利用
本スライドではどのようにKMSをk8sを利用して
運用管理を行っているか紹介していきます
KMSのシステム構成

52. Kubernetesについて

53. © KLab Inc. 2022
53
Kubernetesとは：
複数のコンテナを統合管理するコンテナオーケスト
レーションツール
Kubernetesについて
Kubernetesの主な機能
● サービスディスカバリーと負荷分散
● ストレージオーケストレーション
● 自動化されたロールアウトとロールバック
● 自動ビンパッキング
● 自己修復
● 機密情報と構成管理
今回はこれらの機能
について具体的な話
はほぼしません

54. © KLab Inc. 2022
54
システムの管理・運用のためのリソース：
● 実行するアプリケーションに関するリソース
￭ (ワークロードリソース)
￭ Pod、Deployment、DaemonSet
● 負荷分散・アプリケーションの公開に関するリソース
￭ Service、Ingress
Kubernetesについて

55. © KLab Inc. 2022
55
今スライドで出てくるリソース
● Pod
￭ 実行中のコンテナを抽象的に扱うリソース
● Service
￭ Podへのエンドポイントを管理するリソース
○ エンドポイント：アクセスする方法
● Ingress
￭ Serviceに対する外部からのアクセスする方法を管理するリソース
Kubernetesについて

56. © KLab Inc. 2022
56
機能毎にシステムを細かく分離する
マイクロサービス構成を実現
Kubernetesについて
Client API
Server API
ログ収集
メッセージバス
メトリクス収集
動作するコンテナは Pod単位
に抽象化されるので、
コンテナ内での技術選定は自
由になる

57. KMSのK8s構成

58. © KLab Inc. 2022
58
KMSのK8s構成
ALB
Message Bus Game Server API
Game Client API
WSS
HTTPS
Pub/Sub
RDS
Game Server
API
Game Client
API

59. k8sリソースの管理

60. © KLab Inc. 2022
60
k8sリソースはテキストベースで管理が出来る
k8sリソースの管理
マニフェストファイル：
k8sリソースをYAML(また
はJSON)形式で内容を定義
作成・削除・変更などの操作
apiVersion: v1
kind: Pod
metadata:
namespace: default
name: test
labels:
app: test
spec:
containers:
- name: app1
image: testapp:latest
マニフェストファイル例

61. © KLab Inc. 2022
61
k8sリソースの管理
apiVersion: v1
kind: Pod
metadata:
namespace: default
name: test
labels:
app: test
spec:
containers:
- name: app1
image: testapp:latest
リソースの種別
リソースのメタ情報
リソースの状態 リソースの希望の状態を定義
k8sはこの状態を目指して管理
を行う
k8sのバージョン

62. © KLab Inc. 2022
62
KMSの環境は沢山ある
● ゲーム毎の環境
● 開発・本番・ステージングetc...
k8sリソースの管理
環境差分の管理にはKustomizeを利用
ゲーム①
本番KMS
開発KMS
ゲーム②
本番KMS
開発KMS
ゲーム③
本番KMS
開発KMS
：
：
└ ホスト名・スケーリングの設定など

63. © KLab Inc. 2022
63
k8sリソースの管理
Kustomizeとは：
k8sマニフェスト管理ツール
ベースとなるマニフェストファイルを、変更したい箇所だけ上書き
apiVersion: v1
kind: Pod
metadata:
namespace: default
name: test
labels:
app: test
spec:
replicas: 1
containers:
- name: app1
image: testapp:latest
apiVersion: v1
kind: Pod
metadata:
namespace: default
name: test
spec:
replicas: 3
ベース 上書き
apiVersion: v1
kind: Pod
metadata:
namespace: default
name: test
labels:
app: test
spec:
replicas: 3
containers:
- name: app1
image: testapp:latest
適用される内容

64. CD(継続的デリバリー)

65. © KLab Inc. 2022
65
CDツールとしてArgoCDを利用
CD(継続的デリバリー)
PUSH
変更を検知
デプロイ
開発者 GitHub
Argo CD
k8s
Podの状態を管理
出来る

66. © KLab Inc. 2022
66
● KMSはKubernetesで運用
￭ 疎結合なシステム
￭ テキストベースでの管理
● さらにKustomize・ArgoCDを利用
￭ 複数環境
￭ CD
まとめ

67. ゲーム内チャットのUIをWebView
で実装してみた話
～Unityと絵文字🤗🐩～

68. © KLab Inc. 2022
68
● 今回とあるアプリにチャット機能を導入したお話をします
￭ クライアントの役割とUIにWebViewを採用した話
● 特にWebViewはKLabの中でも特殊な使いをした
前置き

69. © KLab Inc. 2022
69
● 簡単な構成と役割の紹介
● チャットの発言時を例にして処理の流れ紹介
● WebViewの表示で困ったところ
もくじ

70. 簡単な構成と役割

71. © KLab Inc. 2022
71
簡単な構成と役割
クライアント(Unity)
WebView チャットScene
KMS
ゲームサーバー
各種情報の
取得や更新
取得した
情報の表示
KMS
クライアント
ライブラリ
各種情報の
取得や更新
KMSに関する
情報の取得や
更新

72. © KLab Inc. 2022
72
KMSとの通信をラップしたライブラリ
● KMSのAPIを簡単に利用できる
￭ 各ゲーム制作チームは導入コスト
が軽減される
● 開発を社内の基盤系ライブラリチーム
が担当
簡単な構成と役割: KMSクライアントライブラリ
クライアント(Unity)
WebView チャットScene
取得した
情報の表示
KMS
クライアント
ライブラリ
KMSに関す
る情報の取
得や更新
これ

73. © KLab Inc. 2022
73
大まかに提供される機能
● クライアントからKMSに対して情報を取得/更新するためのインター
フェースの提供
● KMSからクライアントに対して送られる情報を受け取るためのインター
フェースの提供
簡単な構成と役割: KMSクライアントライブラリ

74. © KLab Inc. 2022
74
● クライアントからKMSに対して
情報を取得/更新するための
インターフェースの提供
● KMSからクライアントに対して
送られる情報を受け取るため
のインターフェースの提供
簡単な構成と役割: KMSクライアントライブラリ
ゲーム
クライアント
KMS
ゲーム
クライアント
KMS
・新しい発言をしたい！
・チャンネルに参加したい！
・他ユーザーの新しい発言があるよ！
・他ユーザーからチャンネルに招待された
よ！

75. © KLab Inc. 2022
75
● クライアントからKMSに対して
情報を取得/更新するための
インターフェースの提供
● KMSからクライアントに対して
送られる情報を受け取るため
のインターフェースの提供
￭ KMSからどのタイミングで
通信が来るのかがわからない
簡単な構成と役割: KMSクライアントライブラリ
ゲーム
クライアント
KMS
ゲーム
クライアント
KMS
・新しい発言をしたい！
・チャンネルに参加したい！
・他ユーザーの新しい発言があるよ！
・他ユーザーからチャンネルに招待された
よ！

76. © KLab Inc. 2022
76
KMSからどのタイミングで通信が来るのか分からない
● 通信を受けたらすぐ処理を行わず以下のような考慮が必要
￭ 他の何らかの処理を実行中ではないか
￭ 実行中の場合、KMSから受け取ったときの処理を並行で実行してよい
ものか
￭ ダメならKMSの処理を一旦保留しておいて準備が出来たら実行する
● 例えばブロックの処理中に新たなメッセージが届いた場合
￭ ブロック処理が完了するまで届いたメッセージの表示は保留
簡単な構成と役割: KMSクライアントライブラリ

77. © KLab Inc. 2022
77
● チャットの表示(UI)部分を担当
● ネットワーク上のウェブページで
はなく、アプリに同梱するローカ
ルのHTMLファイルを参照
簡単な構成と役割: WebView
クライアント(Unity)
WebView チャットScene
取得した
情報の表示
KMS
クライアント
ライブラリ
KMSに関す
る情報の取
得や更新
これ

78. © KLab Inc. 2022
78
WebViewを採用した経緯
● 要件で「絵文字(Unicode絵文字)👍」を利用したかった
● Unity標準のコンポーネントでは絵文字は使用不可
● 要件を満たしたサードパーティのアセットもなかった
● WebViewであれば絵文字を表示できることが判明
簡単な構成と役割: WebView

79. © KLab Inc. 2022
79
● メリット
￭ Unicode絵文字が利用できる😄
● デメリット
￭ UIの構築にWebView(HTML/CSS/JavaScript)が必要
○ Web系のスキルが必要
￭ WebView⇔Unity間でデータのやり取りが必要
○ 間にネイティブ(javaやswift等)を介した実装が必要
￭ WebView独自の挙動が発生する
○ OS/バージョン依存がある
簡単な構成と役割: WebView

80. © KLab Inc. 2022
80
UnityのチャットScene実装
● チャットのScene表示
● ゲームサーバーとの通信
● KMSクライアントライブラリを通して
チャットに関する情報を取得
● 取得した情報をWebViewに渡す
簡単な構成と役割: チャットScene
クライアント(Unity)
WebView チャットScene
取得した
情報の表示
KMS
クライアント
ライブラリ
KMSに関す
る情報の取
得や更新
これ

81. © KLab Inc. 2022
81
簡単な構成と役割: まとめ
クライアント(Unity)
WebView チャットScene
KMS
ゲームサーバー
各種情報の
取得や更新
取得した
情報の表示
KMS
クライアント
ライブラリ
各種情報の
取得や更新
KMSに関する
情報の取得や
更新

82. 処理の流れ紹介

83. © KLab Inc. 2022
83
処理の流れ紹介
WebView
KMS
(CL API)
発言内容を入力して
送信ボタンを押下
KMSクライアント
ライブラリへデータを
渡す
KMSから発言成功のレス
ポンスを受け取る
発言内容をWebView
に送信して表示
チャットScene
KMS
クライアント
ライブラリ
発言内容をKMSへ送信
発言成功のレスポンスを
渡す

84. © KLab Inc. 2022
84
処理の流れ紹介
WebView
KMS
(CL API)
発言内容を入力して
送信ボタンを押下
KMSから発言成功のレス
ポンスを受け取る
発言内容をWebView
に送信して表示
チャットScene
KMS
クライアント
ライブラリ
発言内容をKMSへ送信
発言成功のレスポンスを
渡す
KMSクライアント
ライブラリへデータを
渡す

85. © KLab Inc. 2022
85
発言内容を入力して送信ボタンを押下 &
KMSクライアントライブラリへデータを渡す
● WebView上に入力エリアを表示
￭ 入力のプレビュー段階でも絵文字を表示したいため
● WebViewからチャットSceneへ送る
● チャットSceneからKMSクライアントライブラリへ渡す
￭ ライブラリで定められたインターフェースに従う
処理の流れ紹介

86. © KLab Inc. 2022
86
処理の流れ紹介
WebView
KMS
(CL API)
発言内容を入力して
送信ボタンを押下
KMSクライアント
ライブラリへデータを
渡す
KMSから発言成功のレス
ポンスを受け取る
発言内容をWebView
に送信して表示
チャットScene
KMS
クライアント
ライブラリ
発言内容をKMSへ送信
発言成功のレスポンスを
渡す

87. © KLab Inc. 2022
87
発言内容を入力して送信ボタンを押下 &
KMSから発言成功のレスポンスを受け取る
● KMSクライアントライブラリからKMSの発言用の
APIをコール
● KMSからレスポンスを受け取る
￭ KMSからライブラリへレスポンスが返る
処理の流れ紹介

88. © KLab Inc. 2022
88
処理の流れ紹介
WebView
KMS
(CL API)
発言内容を入力して
送信ボタンを押下
KMSクライアント
ライブラリへデータを
渡す
KMSから発言成功のレス
ポンスを受け取る
発言内容をWebView
に送信して表示
チャットScene
KMS
クライアント
ライブラリ
発言内容をKMSへ送信
発言成功のレスポンスを
渡す

89. © KLab Inc. 2022
89
発言成功のレスポンスを渡す &
発言内容をWebViewに送信して表示
● KMSクライアントライブラリ、チャットScene、WebViewの
順にレスポンスを渡す
● WebViewで表示
￭ 新規発言のJavaScriptを実行
処理の流れ紹介

90. © KLab Inc. 2022
90
処理の流れ紹介: まとめ
WebView
KMS
(CL API)
発言内容を入力して
送信ボタンを押下
KMSクライアント
ライブラリへデータを
渡す
KMSから発言成功のレス
ポンスを受け取る
発言内容をWebView
に送信して表示
チャットScene
KMS
クライアント
ライブラリ
発言内容をKMSへ送信
発言成功のレスポンスを
渡す

91. WebViewで発生した問題

92. © KLab Inc. 2022
92
1. スクロールバーのデザインを変更できない
2. 画像を長押しするとドラッグアンドドロップできる
WebViewで発生した問題

93. © KLab Inc. 2022
93
デザインをCSSで変更していたが…
● スクロールバーの見た目がおかしい！と報告が来る
￭ 端末標準のスクロールバーが表示されていた
￭ 手元の端末ではカスタムしたデザインで表示されている🤔
● 調査してみるとiOS13以上ではスクロールバーのデザインを
変更できないケースがあるとのこと
スクロールバーのデザインを変更できない

94. © KLab Inc. 2022
94
どうしたか
● UIのデザインはアプリ全体で揃えたい
● ただOS上の制限なので対応が難しい
スクロールバーのデザインを変更できない

95. © KLab Inc. 2022
95
選択肢
● OSでスクロールバーのデザインが変わることを許容
● チャットに関してはデザインのカスタマイズを廃止する
● HTMLのスクロールバーを使用せずスクロールバーを独自
実装する
スクロールバーのデザインを変更できない

96. © KLab Inc. 2022
96
選択肢
● OSでスクロールバーのデザインが変わることを許容
● チャットに関してはデザインのカスタマイズを廃止する
● HTMLのスクロールバーを使用せずスクロールバーを独自
実装する
スクロールバーのデザインを変更できない

97. © KLab Inc. 2022
97
ユーザーのアイコン画像を表示していたが…
● 画像を長押しすると画像をドラッグしている間動かせる
￭ なにそれ…🤯
● iOS15(iPadOSは11)以上だと長押しでドラッグアンドド
ロップできる機能が追加されている
￭ 例えばiPhone標準の写真アプリでも確認できる
画像を長押しするとドラッグアンドドロップできる

98. © KLab Inc. 2022
98
どうしたか
● iOSのこの機能は明示的に利用しない限り有効とならない
￭ ただWebViewは勝手に有効となる事が判明
● 機能的に害はないが防ぐ対応を入れてもらった
￭ 基盤系ライブラリチームに感謝🙏
● 余談。私がプレイしている他社のアプリでも同じ挙動を見たことがあ
ります
画像を長押しするとドラッグアンドドロップできる

99. © KLab Inc. 2022
99
● 苦労したがWebViewで実現できました
● マイクロサービスでシステムとして切り分けされ
ているメリットを享受できた
￭ UIの構築に制限がなく、WebViewを採用する
選択肢が取れた
まとめ

100. Push通知でチャットサーバの負荷対策
〜常時接続やめました🔌〜

101. © KLab Inc. 2022
101
簡単な構成紹介
クライアント(Unity)
チャットScene
KMS
ゲームサーバ
各種情報の
取得や更新
KMS
クライアント
ライブラリ
KMSに関する
取得や更新
KMSに関する
情報の取得や更新
その他のScene
FCM
Push通知の送信
各種情報の
取得や更新
Push
通知

102. © KLab Inc. 2022
102
FCM
クライアント(Unity)
チャットScene
KMS
ゲームサーバ
各種情報の
取得や更新
KMS
クライアント
ライブラリ
KMSに関する
取得や更新
KMSに関する
情報の取得や更新
その他のScene
FCM
Push通知の送信
各種情報の
取得や更新
Push
通知
Push通知を送る
Firebase Cloud
Messaging

103. © KLab Inc. 2022
103
FCM
Firebase Cloud Messaging（FCM）は、無料で確実に
メッセージを送信できるクロスプラットフォームのメッセージ
ングソリューションです。
※公式ドキュメントより引用
iOSとAndorid双方にPush通知を送るサービス

104. © KLab Inc. 2022
104
本日話すところ
クライアント(Unity)
チャットScene
KMS
ゲームサーバ
各種情報の
取得や更新
KMS
クライアント
ライブラリ
各種情報の
取得や更新
KMSに関する
取得や更新
KMSに関する
情報の取得や更新
その他のScene
FCM
Push通知の送信
Push
通知
この部分に
ついて話します

105. © KLab Inc. 2022
105
WebSocketとPush通知
クライアント(Unity)
チャットScene
KMS
ゲームサーバ
各種情報の
取得や更新
KMS
クライアント
ライブラリ
各種情報の
取得や更新
KMSに関する
取得や更新
KMSに関する
情報の取得や更新
その他のScene
FCM
Push通知の送信
Web Socket
チャット画面のみ
Push通知で
リアルタイム性を
カバー
Push
通知

106. © KLab Inc. 2022
106
常時接続のメリット
● サーバ側からリアルタイムでクライアントに情報送信
常時接続のデメリット
● サーバに負荷がかかる
￭ 特に今回は規模が大きいゲーム
Push通知を使って常時接続やめる

107. © KLab Inc. 2022
107
常時接続のメリット
● サーバ側からリアルタイムでクライアントに情報送信
常時接続のデメリット
● サーバに負荷がかかる
￭ 特に今回は規模が大きいゲーム
Push通知を使って常時接続やめる
Push通知を使ってカ
バー

108. © KLab Inc. 2022
108
本日のアジェンダ
● ゲームの機能と仕様の紹介
● ゲームサーバでやること
● クライアントでやること
● 苦労したこと

109. © KLab Inc. 2022
109
ゲームの機能と仕様の紹介
● ゲームの機能と仕様の紹介
● ゲームサーバでやること
● クライアントでやること
● 苦労したこと

110. © KLab Inc. 2022
110
● チャット画面でのユーザー間のメッセージの通知
● リアルタイム対戦の招待
● チャットのテキストをアプリ内の別画面で通知する
※未ローンチのためスクショなどがお見せできません
ゲームの機能と仕様の紹介

111. © KLab Inc. 2022
111
凡例
Push通知
Web API
WebSocket
画面遷移
Push
Web
Socket
画面
○○画面
○○画面
送信側の画面
受信側の画面

112. © KLab Inc. 2022
112
ユーザー間のメッセージの通知
一般的なチャットとプッシュ通知の関係と同じ
アプリを起動していなくてもほぼリアルタイムに通知が届く
おはよう
チャット画面
山田

113. © KLab Inc. 2022
113
ユーザー間のメッセージの通知
おはよう
山田
おはよう
チャット画面
おはよう
チャット画面
画面
通知から起動
チャットに送信
Push通知送信
Push
一般的なチャットとプッシュ通知の関係と同じ
アプリを起動していなくてもほぼリアルタイムに通知が届く
山田 山田

114. © KLab Inc. 2022
114
リアルタイム対戦の招待
対戦の招待でも同じようなことをしたい
届いたメッセージからすぐに対戦したい
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
ユーザーD 対戦する チャット画面
チャットに投稿
対戦招待
対戦しよう 山田
Web

115. © KLab Inc. 2022
115
リアルタイム対戦の招待
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
ユーザーD 対戦する Game Start
山田 D
マッチング
成立状態
チャット画面
チャットに投稿
画
面
対戦画面に遷移
対戦の招待でも同じようなことをしたい
届いたメッセージからすぐに対戦したい
対戦招待
対戦しよう 山田
Web

116. © KLab Inc. 2022
116
リアルタイム対戦の招待
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
ユーザーD 対戦する
山田
対戦招待
Game Start
山田 D
マッチング
成立状態
Push
画
面
対戦画面に遷移
チャット画面
Push通知
チャットに投稿 対戦画面に遷移
画
面
対戦の招待でも同じようなことをしたい
届いたメッセージからすぐに対戦したい
対戦招待
対戦しよう 山田
Web

117. © KLab Inc. 2022
117
チャットのテキストをアプリ内の別画面で通知する
アプリ起動中にもユーザー間のメッセージと
招待メッセージがリアルタイムで通知され、
通知からチャット画面や対戦画面に遷移できるようにする
おはよう
チャット画面
Push

118. © KLab Inc. 2022
118
チャットのテキストをアプリ内の別画面で通知する
アプリ起動中にもユーザー間のメッセージと
招待メッセージがリアルタイムで通知され、
通知からチャット画面や対戦画面に遷移できるようにする
山田：おはよう
ホーム画面など
おはよう
チャット画面
ゲーム内で
リアルタイム通知
Push

119. © KLab Inc. 2022
119
チャットのテキストをアプリ内の別画面で通知する
アプリ起動中にもユーザー間のメッセージと
招待メッセージがリアルタイムで通知され、
通知からチャット画面や対戦画面に遷移できるようにする
山田：おはよう
チャット画面
ホーム画面など
おはよう
チャット画面
ゲーム内で
リアルタイム通知
Push おはよう 山田
画面

120. © KLab Inc. 2022
120
チャットのテキストをアプリ内の別画面で通知する
アプリ起動中にもユーザー間のメッセージと
招待メッセージがリアルタイムで通知され、
通知からチャット画面や対戦画面に遷移できるようにする
山田：おはよう
Game Start
山田 D
対戦画面
チャット画面
ホーム画面など
山田：対戦招待
ホーム画面など
画面
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
対戦招待
おはよう
チャット画面
ゲーム内で
リアルタイム通知
ゲーム内で
リアルタイム通知
Push
Push
おはよう 山田
画面

121. © KLab Inc. 2022
121
ゲームサーバーでやること
● ゲームの機能と仕様の紹介
● ゲームサーバでやること
● クライアントでやること
● 苦労したこと

122. © KLab Inc. 2022
122
サーバでやること
クライアント(Unity)
チャットScene
KMS
ゲームサーバ
各種情報の
取得や更新
KMS
クライアント
ライブラリ
各種情報の
取得や更新
KMSに関する
取得や更新
KMSに関する
情報の取得や更新
その他のScene
FCM
Push通知の送信
Push
通知
この部分に
ついて話します

123. © KLab Inc. 2022
123
● デプロイ時に行うこと
￭ チャットメッセージの変換
● リアルタイムに行うこと
￭ 対戦招待のメッセージを中継する
ゲームサーバでやること

124. © KLab Inc. 2022
124
ゲームサーバとKMS
ゲームサーバ
KMS FCM
iOS
Andorid
Web
Web
Push
P
u
s
h
デプロイ時に行うこと
リアルタイムに行うこと

125. © KLab Inc. 2022
125
クライアント
KMS FCM
iOS
Andorid
こちらのルートが
チャット画面での発言
チャットのメッセージを変換
Push
P
u
s
h
Web
Socket

126. © KLab Inc. 2022
126
チャットのメッセージを変換
クライアント
KMS FCM
iOS
Andorid
チャットのテキストを
適切に変換して
Push通知を送信
Socket
Push
P
u
s
h
Web

127. © KLab Inc. 2022
127
チャットのメッセージを変換
ゲームサーバ
KMS FCM
iOS
Andorid
KMSはPush通知の
内容にノータッチ
Web
Web
Push
P
u
s
h

128. © KLab Inc. 2022
128
チャットのメッセージを変換
ゲームサーバ
KMS FCM
iOS
Andorid
デプロイ時に
変換ルールを設定
Web
Web
Push
P
u
s
h

129. © KLab Inc. 2022
129
どのように変換するか？
おはよう
チャット画面
山田
山田
おはよう

130. © KLab Inc. 2022
130
どのように変換するか？
おはよう
チャット画面
山田
山田
おはよう
タイトル
本文
● タイトルには送信元のユーザー名
● メッセージにはチャットの本文を
Push
Push

131. © KLab Inc. 2022
131
どのように変換するか？
おはよう
チャット画面
山田
山田
おはよう
タイトル
本文
本文とタイトルに加えて
メッセージの種別も追加で設定しておく
Push通知の
種類
「チャット」
Push
Push
Push通知にも
「イベント開始」
などほかの種類があ
る

132. © KLab Inc. 2022
132
どのように変換するか？
山田
おはよう
チャット画面 チャット画面
Push 画面
チャットの
メッセージは
チャット画面に遷移
これでユーザー間のメッセージのやり取りが完成
おはよう 山田
おはよう
山田

133. © KLab Inc. 2022
133
リアルタイム対戦の通知は
サーバを経由してKMSに送信依頼を行う
対戦招待のメッセージを中継する

134. © KLab Inc. 2022
134
ゲームサーバとKMS
ゲームサーバ
KMS FCM
iOS
Andorid
こちらのルートが
招待の投稿
Web
Web
Push
P
u
s
h

135. © KLab Inc. 2022
135
対戦招待のメッセージを中継する
ゲームサーバ
KMS FCM
iOS
Andorid
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
対戦招待
対戦ボタンを押したら
ゲームサーバを経由して
KMSに投稿
KMSはFCMにも送信
Web
Web
Push
P
u
s
h
Web

136. © KLab Inc. 2022
136
対戦招待のメッセージを中継する
ゲームサーバ
KMS FCM
iOS
Andorid
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
対戦招待
対戦招待の画面は
KMSと常時接続していない
(KMSの負荷を抑えるため)
Web
Web
Push
P
u
s
h
Web

137. © KLab Inc. 2022
137
対戦招待のメッセージを中継する
ゲームサーバ
KMS FCM
iOS
Andorid
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
対戦招待
対戦に必要な情報を
通知受信時に
取得できるようにしておく
Web
Web
Push
P
u
s
h
Web

138. © KLab Inc. 2022
138
リアルタイム対戦の招待
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
ユーザーD 対戦する
山田
対戦招待
Game Start
山田 D
マッチング
成立状態
Push
画
面
対戦画面に遷移
チャット画面
Push通知
チャットに投稿
画
面
対戦画面に遷移
これでリアルタイム対戦の招待が完成
対戦しよう 山田
Web

139. © KLab Inc. 2022
139
クライアントでやること
● ゲームの機能と仕様の紹介
● ゲームサーバでやること
● クライアントでやること
● 苦労したこと

140. © KLab Inc. 2022
140
クライアントでやること
クライアント(Unity)
チャットScene
KMS
ゲームサーバ
各種情報の
取得や更新
KMS
クライアント
ライブラリ
各種情報の
取得や更新
KMSに関する
取得や更新
KMSに関する
情報の取得や更新
その他のScene
FCM
Push通知の送信
Push
通知
この部分に
ついて話します

141. © KLab Inc. 2022
141
クライアントでやること
基本的にPush通知送信側の役割は
● ゲームサーバ
● KMS
が担当するため受信時の挙動を抑えておけばよい

142. © KLab Inc. 2022
142
クライアントでやること
● プッシュ通知をアプリ内通知に変換
● OS通知画面からの起動

143. © KLab Inc. 2022
143
チャットのテキストをアプリ内の別画面で通知する
山田：おはよう
Game Start
山田 D
おはよう
対戦画面
チャット画面
ホーム画面など
山田：対戦招待
ホーム画面など
画面
ユーザーA 対戦する
ユーザーB 対戦する
ユーザーC 対戦する
画面
対戦招待
おはよう
チャット画面
ゲーム内で
リアルタイム通知
ゲーム内で
リアルタイム通知
● Push通知をアプリ内通知に変換する
● アプリ内通知からの画面遷移
Push
Push

144. © KLab Inc. 2022
144
アプリ内通知の表示と遷移
アプリがフォアグラウンドの状態でも
プッシュ通知はハンドリング可能
常時接続の代わりにリアルタイム性を担保

145. © KLab Inc. 2022
145
OS通知画面からの起動
山田
おはよう
チャット画面
画面
チャット画面に遷移
山田
対戦招待
Game Start
山田 D
画
面
対戦画面に遷移
通知に設定されたメッセージ種別から
どこ画面に遷移するか判別可能
おはよう 山田

146. © KLab Inc. 2022
146
● ゲームの機能と仕様の紹介
● ゲームサーバでやること
● クライアントでやること
● 苦労したこと
苦労したこと

147. © KLab Inc. 2022
147
苦労したこと
OSの違いによる微妙な差異
FCMがOSの差異はできるだけ吸収
大体同じようなことはできる

148. © KLab Inc. 2022
148
苦労したこと
■メッセージの種別など
設定する場所と取得できる場所がOSによって異なる
■本文とタイトル
揮発してしまうシチュエーションがある

149. © KLab Inc. 2022
149
苦労したこと
プッシュ通知を活用した機能を作るときは
十分に検証してできることを確認してから
ゲームの仕様を決めましょう

150. © KLab Inc. 2022
150
まとめ
チャットとPush通知を連動させることで・・・
● リアルタイムで楽しむゲーム
● サーバの負荷とリアルタイム性のバランス
をうまく実現することができます。

151. 本日のセッションの振り返り

152. © KLab Inc. 2022
152
本日のセッションの振り返り
勝見 祐己
6つのゲームで採用されたチャットサービスの作り方
〜マイクロサービスは使い回しがきく♪〜
𠮷富 愛梨沙
Kubernetesで作るマイクロサービス
〜複数プロジェクト×複数環境でも大丈夫🥤〜
山内 敏彰
ゲーム内チャットのUIをWebViewで実装してみた話
～Unityと絵文字🤗🐩～
山田 雅人
Push通知でチャットサーバの負荷対策
〜常時接続やめました🔌〜

153. © KLab Inc. 2022
153
6つのゲームで採用されたチャットサービスの作り方 Kubernetesで作るマイクロサービス
ゲーム内チャットのUIをWebViewで実装してみた話 Push通知でチャットサーバの負荷対策

154. © KLab Inc. 2022
154
さいごに
どれか一つでも皆様の参考になるネタがあれば幸いです。
ご清聴ありがとうございました。