Gaudiy Fanlinkを支える アーキテクチャ

Transcript

1. Gaudiy Fanlinkを支える
   
   アーキテクチャ
   勝又 拓真
   2022/09/07
   

   View Slide

2. アジェンダ
   プロダクト全体のアーキテクチャ
   01.
   開発生産性の向上や拡張性高い設計の導入
   02.
   ブロックチェーンの複雑性を閉じ込めたサービス化
   03.
   開発チームでアーキテクチャを作り上げる文化
   04.
   

   View Slide

3. 1
   多種多様なドメインを扱うGaudiy Fanlink
   G a u d i y Fa n l i n k f o r a v a r i e t y o f d o m a i n s
   コミュニティを起点に、自律分散的なファンによる経済圏を実現し、ファンが自分のIPを常に感じて暮らせる社会を作ろうとしている
   SNS
   t 投稿・コメント・いいねなどの基本機j
   t チャットやDMなどのメッセージ機能
   SNS
   t 投稿・コメント・いいねなどの基本機j
   t チャットやDMなどのメッセージ機能
   SNS
   t 投稿・コメント・いいねなどの基本機j
   t チャットやDMなどのメッセージ機能
   ID連携・決済
   t 外部サービスとのID連携を低コストで実„
   t サービスを横断したファン体験の構築
   ID連携・決済
   t 外部サービスとのID連携を低コストで実„
   t サービスを横断したファン体験の構築
   ID連携・決済
   t 外部サービスとのID連携を低コストで実„
   t サービスを横断したファン体験の構築
   現在準備中
   t メタバー®
   t De-F«
   t グローバルローカライズ
   
   etc...
   現在準備中
   t メタバー®
   t De-F«
   t グローバルローカライズ
   
   etc...
   現在準備中
   t メタバー®
   t De-F«
   t グローバルローカライズ
   
   etc...
   NFT・ブロックチェーン
   t NFTの販売/配布/パブリックチェーンへの書き出Ì
   t 動画/音声/投票券など多様なユーティリティ付与
   NFT・ブロックチェーン
   t NFTの販売/配布/パブリックチェーンへの書き出Ì
   t 動画/音声/投票券など多様なユーティリティ付与
   NFT・ブロックチェーン
   t NFTの販売/配布/パブリックチェーンへの書き出Ì
   t 動画/音声/投票券など多様なユーティリティ付与
   ファン投票/DAO
   t ファン
   活動で
   得たNFTを
   使った投票
   が可j
   t ファンを
   意思決定に巻き
   込むD
   AO構築を実
   現
   ファン投票/DAO
   t ファン
   活動で
   得たNFTを
   使った投票
   が可j
   t ファンを
   意思決定に巻き
   込むD
   AO構築を実
   現
   ファン投票/DAO
   t ファン
   活動で
   得たNFTを
   使った投票
   が可j
   t ファンを
   意思決定に巻き
   込むD
   AO構築を実
   現
   トークン
   グラフ
   マー
   ケティン
   グ
   t
   SN
   Sやイ
   ベント
   、商品購入な
   ど
   
   様
   々なファン
   活動
   にNFTを配布
   。
   
   I
   P独自のトークングラフ
   形成と

   マー
   ケティング
   活動
   が可能
   トークン
   グラフ
   マー
   ケティン
   グ
   t
   SN
   Sやイ
   ベント
   、商品購入な
   ど
   
   様
   々なファン
   活動
   にNFTを配布
   。
   
   I
   P独自のトークングラフ
   形成と

   マー
   ケティング
   活動
   が可能
   トークン
   グラフ
   マー
   ケティン
   グ
   t
   SN
   Sやイ
   ベント
   、商品購入な
   ど
   
   様
   々なファン
   活動
   にNFTを配布
   。
   
   I
   P独自のトークングラフ
   形成と

   マー
   ケティング
   活動
   が可能
   

   View Slide

4. 2
   シード期のGaudiy Fanlinkアーキテクチャ
   G a u d i y Fa n l i n k a r c h i t e c t u r e i n t h e s e e d p h a s e
   圧倒的な初動の開発速度！
   
   開発が進むにつれてDBスキーマの変更され、アプリケーションが壊れやすくなってきた
   Firebase Hosting
   Cloud Firestore
   Cloud Function
   Frontend
   Next.js
   TypeScript
   SSR
   read/write data
   extends Firestore
   trigger by
   
   changing Firestore
   

   View Slide

5. 3
   現在のGaudiy Fanlinkアーキテクチャ
   G a u d i y Fa n l i n k A r c h i t e c t u r e
   Frontend
   Next.js
   TypeScript
   Apollo Client
   BFF
   TypeScript
   Apollo Server
   Backend
   Kotlin Go
   Send Tx
   GraphQL REST・gRPC
   Sync On-Chain data
   Cloud Spanner
   Cloud Run
   Vercel
   Ethereum Polygon etc...
   NFT service
   BE services
   

   View Slide

6. 4
   Gaudiy Fanlinkアーキテクチャの重要なところ
   i m p o r t a n t
   多種多様なドメインを開発しやすくするため
   
   ↓
   
   開発生産性の向上や拡張性高い設計の導入
   
   
   ブロックチェーンを直接扱う部分と利用する部分を分離するため
   
   ↓
   
   ブロックチェーンの複雑性を閉じ込めたサービス化
   
   
   
   開発チームでアーキテクチャを作り上げる文化
   

   View Slide

7. 開発生産性の向上や拡張性高い設計の導入
   

   View Slide

8. 5
   開発生産性の向上や拡張性高い設計の導入
   I m p r o v e d e v e l o p m e n t p r o d u c t i v i t y a n d i n t r o d u ce s c a l a b l e d e s i g n s
   ・Gaudiyのプロダクトの性質上、さまざまなドメインの機能を開発していく必要がある
   
   ・Stream Aligned TeamがFE → BEまで一気通貫で開発できる体制を重視する
   
   　・開発生産性を向上させたり、多くのIPの課題を解決できるような拡張性の高い設計の導入が重要
   Stream Aligned Team 1
   ユーザー体験設計
   プロダクトデザイン設計
   開発要望相談・ドメイン知識の開発反映・受け入れ条件決定
   PdM UXデザイナー UIデザイナー エンジニア
   開発生産性の向上
   拡張性

   高い

   設計
   FE・BE・BFF

   （本質的な価値）
   増幅
   サポート
   

   View Slide

9. 6
   ３つの施策
   T h r e e m e a s u r e s
   結合リスクを低減させるための
   
   スキーマ駆動開発
   Cloud Run
   
   サービス間認証
   Server-Driven UIによる

   多種多様なIPのUIを表現
   SDUI Logic by IP
   

   View Slide

10. 7
    結合リスクを低減させるためのスキーマ駆動開発
    S c h e m a - d r i v e n d e v e l o p m e n t t o r e d u ce co u p l i n g r i s k
    - REST（OpenAPI）、gRPC（移行中）とGraphQLを利用している
    エンジニア
    Update protobuf

    by pair programming
    Publish by
    
    GitHub Action
    gaudiy-api-typescript
    gaudiy-api-typescript
    gaudiy-api-kotlin
    gaudiy-api-go
    

    View Slide

11. 8
    Cloud Runとサービス間認証
    A u t h e n t i c a t i n g s e r v i ce -t o - s e r v i ce f o r C l o u d R u n
    ・BFF、BEのサービスはすべてCloud Runでホスティングし、どのサービスとのリクエストを許可するかをサービス間認証を使って制御している
    
    ・Cloud RunのサービスアカウントのIDトークンをヘッダーに含めて、サービス間通信を行う
    Apply
    Authorization:
    
    Bearer ID_TOKEN_SERVICE_B
    Authorization:
    
    Bearer ID_TOKEN_SERVICE_A
    nft-service
    service-A
    service-B
    

    View Slide

12. 9
    Server-Driven UIによる多種多様なIPのUIを表現
    S e r v e r- D r i v e n U I f o r a v a r i e t y o f I P s
    様々なIPのコミュニティやUIを表現する必要があるため、SDUIを利用し、複雑な表示の切り替えを可能
    GraphQL
    FE
    sections[0]
    nav
    sections[1]
    ・
    
    ・
    
    ・
    union =
    
    |
    ︙
    Section
    TopicSection
    
    ChatSection
    
    UI is constructed with Section

    from GraphQL Response
    Logic to construct UI
    

    View Slide

13. ブロックチェーンの複雑性を

    閉じ込めたサービス化
    

    View Slide

14. 10
    ブロックチェーンの複雑性を閉じ込めたサービス化
    S e r v i ce t h a t co n fi n e t h e co m p l e x i t y o f t h e b l o c kc h a i n
    ・GaudiyとしてはUXを考えたとき、「On-Chain Write・Off-Chain Read」を基本としたブロックチェーン設計をしている
    
    ・ブロックチェーン自体はそこまで検索性に優れたシステムではないため、on chainのデータをoff chain（gaudiy内のDB）に移し、サービス化している
    NFT service
    Frontend
    User Wallet
    Alchemy（Blockchain Node Provider）
    Send Tx
    
    On-Chain Write
    Sync On-Chain data
    Store On-Chain data
    Off-Chain Read
    Ethereum Polygon ・・・
    Spanner
    

    View Slide

15. 11
    NFTサービスでのOn-Chain Sync
    O n - C h a i n S y n c w i t h N F T S e r v i ce
    ・Blockchain（特にEVM系）の特性上、ブロックチェーンで発生したEvent情報をリアルタイムで検知して、それをoff chainのState化していく
    
    ・イメージとしてはCQRSに近い
    NFT service
    Subscribe NFT Transfer Event by Websocket
    
    when Tx is confirmed by EVM chain
    
    event format: ( , , )
    Transfer address address uint256
    from tokenId
    to
    Send Tx

    （ Transfer NFT, Mint NFT）
    Store On-Chain data
    Data Model

    ・Community User ID

    ・Owner Address

    ・TokenID

    Spanner
    NFT Contract（0x...）
    Frontend
    User Wallet
    Ethereum Polygon
    

    View Slide

16. 12
    GaudiyでのNFTを利用したユースケース：ユーティリティ
    U s e c a s e s w i t h N F T i n G a u d i y : U t i l i t i e s
    X of NFT → XはNFTのメタデータ（e.g. NFTの名前、説明文）
    Y is given by NFT → Yは （e.g. NFTを持っている人しか入れないDiscord）
    NFTのユーティリティ
    GaudiyのサービスでNFTのユーティリティを拡張していくことによって、
    
    NFTの実用価値をエコシステムで作っていく
    

    View Slide

17. 13
    Gaudiy内のNFTサービスを利用した、ユーティリティサービス
    U t i l i t y s e r v i ce u s i n g N F T s e r v i ce i n G a u d i y
    特定のNFTを持つユーザーのみが参加可能な限定チャット
    check to own

    NFT by User
    fetch NFT by User
    sync 

    On-Chain data
    ︙
    Gaudiy NFT Contract
    3rd party NFT Contract
    NFT service
    Chat Service
    Spanner
    

    View Slide

18. 14
    Gaudiy FanlinkによるNFTの発行
    M i n t N F T b y G a u d i y Fa n l i n k
    ・Gaudiyでは、権限を持つユーザーがコミュニティからNFTをオンチェーンに書き出す申請をすることで、public chain上でNFTとして利用することができる
    
    　・一般的なOpenSeaなどのNFTマーケットプレイスが利用しているLazyMintの方式に近いものを採用している
    ① verify then create signagure

    to mint NFT
    ③ verify signature then mint NFT
    
    in NFT contract
    ② send Tx to mint NFT with

    signature
    Frontend
    User Wallet
    Ethereum
    Gaudiy NFT Contract
    NFT service
    server-side wallet Cloud KMS
    BFF
    

    View Slide

19. 開発チームで

    アーキテクチャを作り上げる文化
    

    View Slide

20. 15
    Gaudiyの自律的な文化で、チームでアーキテクチャを含む開発課題を改善していく
    A u t o n o m o u s c u l t u r e t o i m p r o v e d e v i s s u e s i n t e a m s
    ・Gaudiyは開発ロールはエンジニア以外存在しなく、基本的にフラットな組織形態
    
    　・新しいアーキテクチャの導入・改善や開発横断の課題は解決策を各々がリーダーシップを持って提案をし、
    
    　　チームでブラッシュアップしてフォロワーシップを持って複数人で実行していく
    

    View Slide

21. ありがとうございました
    

    View Slide