Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Takuma Katsumata
September 04, 2022
260

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

Takuma Katsumata

September 04, 2022
Tweet

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
    3つの施策
    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