Tweet
Tweet

Slide 1

Slide 1 text

マルチテナント戦略における Server-Driven UIのリアーキテクチャ ©️ Gaudiy Inc. Sho Nagai Software Engineer / Gaudiy inc.

Slide 2

Slide 2 text

Sho Nagai 自己紹介 ©️ Gaudiy Inc.

Slide 3

Slide 3 text

01 _今日のテーマ 02 _SDUIとは 03 _リアーキテクチャに至った背景 04_どのようにリアーキテクチャしたか 05_リアーキテクチャによる成果 06_まとめ ©️ Gaudiy Inc.

Slide 4

Slide 4 text

©️ Gaudiy Inc. 今日のテーマ 今日話すこと、はじめに伝えたいこと

Slide 5

Slide 5 text

©️ Gaudiy Inc. マルチテナン ト戦略における Server-Driven UIのリ アーキテクチャ どんなマルチテナント戦略なのか？

Slide 6

Slide 6 text

20 ©️ Gaudiy Inc. フ ァ ン の 熱 量 を 最 大 化 す る W e b 3 時 代 の フ ァ ン プ ラット フ ォ ー ム ©️ Gaudiy Inc.

Slide 7

Slide 7 text

サービス構成と特徴 1 ここで言うIPは、作品やキャラクターなどの知的財産 権を指していまA 1 という 構成で、マルチテナントにサービス提供していまA 1 提供するコミュニティが増えるほどに、提供したい画 面レイアウトや表示するコンテンツも多種多様になる 特徴を持っています １つのIPファンコミュニティ=１つのテナント コミュニティ機能 エンタメIP向けにファンコミュニティを立ち上げられるサービス ©️ Gaudiy Inc.

Slide 8

Slide 8 text

特にサービスの顔であるホーム画面のカ スタマイズ性 IP毎の拘りに応えやすい戦略 ©️ Gaudiy Inc.

Slide 9

Slide 9 text

このカスタマイズ性を SDUIを使って実現しています 今日はこのSDUIを お話です リアーキテクチャした ©️ Gaudiy Inc.

Slide 10

Slide 10 text

はじめに伝えておきたいこと ひとつの にす ぎない 選択 今日話す内容は、僕らのプロダクト特性や環境に対して 一番効果的と判断して選択したリアーキテクチャの手法 です。 プロダクトが違えば、特性や環境も異なるため、SDUI の活用方法も変わってくると思いますが、話す内容が皆 さんの選択を助けるものになれば嬉しいです。 ©️ Gaudiy Inc.

Slide 11

Slide 11 text

©️ Gaudiy Inc. SDUIとは Server-Driven UIとは何のことか、おさらい

Slide 12

Slide 12 text

SDUIのアーキテクチャ SDUI（Server-Driven UI）とは UIの表現方法をすべてサーバーサイドで決定し、クライアントに返す、という手法になります。 https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server- driven-ui-system-842244c5f5 ©️ Gaudiy Inc.

Slide 13

Slide 13 text

より詳しくは… テックブログの記事をご参照ください ©️ Gaudiy Inc.

Slide 14

Slide 14 text

©️ Gaudiy Inc. リアーキテクチャに至った背景 何が発端でリアーキテクチャに至ったのか

Slide 15

Slide 15 text

リアーキテクチャに至った背景 ビジネス要件の拡大 積み残った技術負債 ©️ Gaudiy Inc.

Slide 16

Slide 16 text

1 ©️ Gaudiy Inc. ファンコミュニティ（テナント）毎に表 示ロジックの拘りの増加 ビジネス要件の拡大

Slide 17

Slide 17 text

ビジネス要件の拡大 求められる柔軟性の増加 各ファンコミュニティの要望に答えやすいように、画面の作りを柔軟に扱え る設計にしなければいけない ©️ Gaudiy Inc.

Slide 18

Slide 18 text

手を入れにくい既存の仕組み U 社内方針としてマイクロサービス化を推進する前に作 られたサービスであり、内部で直接に複数ドメインの データ取得をするなど、マイクロサービス構成に載れ てなR U Go言語主流とした中でKotlin言語のままであC U を挟んでいた BFF（BE for FE）からREST通信 積み残った技術負債 ©️ Gaudiy Inc.

Slide 19

Slide 19 text

積み残った技術負債 技術負債の解消チャンス ©️ Gaudiy Inc.

Slide 20

Slide 20 text

©️ Gaudiy Inc. どのようにリアーキテクチャしたか リアーキテクチャの進め方と改善したポイント

Slide 21

Slide 21 text

どのようにリアーキテクチャしたか ©️ Gaudiy Inc. ドメインの再整理 UI-Serviceの作成

Slide 22

Slide 22 text

SDUIに必要な要素の更新 ドメインの再整理 ©️ Gaudiy Inc.

Slide 23

Slide 23 text

UI-Serviceという表示ロジックを責務 に持つサービスを作成 UI-Serviceの作成 ©️ Gaudiy Inc.

Slide 24

Slide 24 text

©️ Gaudiy Inc. 表示ロジックの更新 UI-Serviceの作成

Slide 25

Slide 25 text

protobufでSDUIを定義 UI-Serviceの作成 ©️ Gaudiy Inc.

Slide 26

Slide 26 text

©️ Gaudiy Inc. リアーキテクチャによる成果 リアーキテクチャ後の反応と達成できたこと

Slide 27

Slide 27 text

リアーキテクチャによる成果 ©️ Gaudiy Inc. サービス価値の向上 X より提供する の施策に応えやす い画面を提供できるようになった ファンコミュニティ毎 技術負債の解消

Slide 28

Slide 28 text

©️ Gaudiy Inc. サービス価値の向上 サービス価値に貢献できた 画面の要望に答えやすくなった

Slide 29

Slide 29 text

©️ Gaudiy Inc. 技術負債の解消 リアーキテクチャ前

Slide 30

Slide 30 text

©️ Gaudiy Inc. 技術負債の解消 リアーキテクチャ後

Slide 31

Slide 31 text

©️ Gaudiy Inc. まとめ 今回のリアーキテクチャが正解とは限らない、良きリアーキテクチャを行うために

Slide 32

Slide 32 text

©️ Gaudiy Inc. まとめ 良き選択を如何に 行うか x マルチテナントで且つ画面表示に様々な拘りが発生し やすいプロダクトの性質に合わせたのが、今段階では 良い選択だったと感じてい‡ x アーキテクチャを考えるうえで、利用者・関係者の知 見を注入することで、無駄なくビジネスに貢献できる ものを作れ‡ x 設計の採用目的によって重きを置くところが違うの で、SDUIの思想をベースにしつつ、ユースケースに あった調整・改善を行っていくのが効果的と思う

Slide 33

Slide 33 text

©️ Gaudiy Inc. Thank you