Lightning Talk_SDUI -Airbnbから学ぶサーバー駆動型UI- | Lightning Talk_LT会レポート

＊この記事は2021年9月24日(金)に社内で行ったライトニングトークのスライドを元に作成しています。

こんにちは、Another works デザイナーの小田です！
最近、Airbnbのサーバー駆動型UIについての記事を読んだので、その内容についてお話したいと思います。

初めに

SDUIについてお話しする前に、従来のレンダリング方法について少しお話しします。

図にある通り、フロントエンドからサーバーサイドにデータを要求し、サーバーサイドがデータを渡してレンダリングするという方法が一般的です。
しかし、この従来のレンダリング方法には2つの課題があると考えています。

課題1
それぞれのプラットフォームでロジックが異なり、それらは複雑に絡み合う。
そしてそれぞれのプラットフォームで乖離が生まれてしまう。

課題2
アプリの場合、実際に使ってもらうためにはユーザーにアップデートをしてもらう必要がある

AirbnbのSDUIは、これら2つの課題を解決することができるサーバー駆動型システムです。

ではSDUIとはどのようなものなのか、詳しく見ていきましょう！

SDUIとは

改めて、SDUIとはAirbnbが開発したサーバー駆動型UIシステム（Server-Driven UI System）です。
AirbnbがGuestとHostの2つの側面のサービスを提供していることから、
Guest+Host=Ghost Platform という名称が付けられています。

SDUIの概念

SDUIには
Screen view
Section view
Action view
の3つの概念が存在します。

まずはScreen viewについてお話しします。

Screen viewについて

Ghost Platformでは任意の数のスクリーンを持つことができるのですが、
Screen viewでは画面のレイアウトやセクションの表示について定義しています。
また、細かなレンダリング方法についてもScreen viewで定義することができます。

Section viewについて

Section viewは、UIコンポーネントのまとまったグループのデータを記述するもので
実際にレンダリングされるべき正確なデータが定義されています。
他のセクション画面から完全に独立しているため、特定の機能や関係を気にすることなく再利用や再構築ができます。

Action viewについて

Action viewではユーザーが画面上のUIを操作する際のアクションを定義しています。
Action viewは特定のユースケースや機能固有のビジネスロジックを自由に含むことができます。

SDUIの特徴

SDUIには2つの特徴があります。

特徴1
バックエンドがデータとそのデータの表示方法を管理している

特徴2
プラットフォーム全体で単一のバックエンドレスポンスによって制御している

考察

実際にAnother worksに導入した場合のメリット・デメリットを考えました。

メリットとして挙げられたのは、開発の生産性の向上です。
理由としては、リリースがサーバーサイドだけで完結するからです。

懸念点として挙げられたのが、
自社のプロダクト開発に合っているのか・既存のデザインシステムが使えるのかです。
まだまだ前例が少ない分、自社に合っているのか見極めるのはとても難しいです。

最後に

デザイナーとして普段は関わることの少ないエンジニアリングについて深く学ぶことができ、
とても良い機会でした。
デザイン✖︎エンジニアリングの観点で、今後も様々な技術・プロダクトに触れていきます。

今回のお話の元となったスライドはこちらです。

複業クラウドに登録して一歩を踏み出してみませんか？

複業クラウドへの登録はこちら

Another worksでは一緒に働ける仲間を探しています

エンジニア

CTO室立ち上げ！技術で経営課題を解決できるエンジニア募集！

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

AI・機械学習エンジニア

AI・機械学習を使って複業を世の中に広めるプロダクトを作りましょう！

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

エンタープライズCS

総額6.5億円シリーズB調達完了／人材業界を変えるエンプラCSを募集！

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

フレックス_副業/リモートOK

総額6.5億円シリーズB調達完了／CDO直下のリードデザイナーを募集します

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

フロントエンジニア

複業クラウドをReactで開発するフロントエンジニア募集

株式会社Another worksは、複業したい人と企業や自治体をマッチングするプラットフォーム「複業クラウド」を開発、運営しています。 ▍複業クラウドの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎創業以来変わらない想いとプロダクト 2019年の創業以来一貫して『複業クラウド』を提供しており、事業ピポットすることなくご利用企業／個人双方にとって良いプロダクトを開発し続けています。現在は85,000名（2024年10月9日時点）にご利用いただき、導入企業も2,000社（2024年8月31日時点）を超える急成長を遂げています。 ◎手数料や中間マージンが無料人材業界の常識を覆す。通常であれば紹介手数料50万円〜100万円や、中間マージン30〜50%が発生する中、企業と個人が直接契約ができるサービスを提供しています。専属のカスタマーサクセスが採用成功に向けて伴走することで、複業人材の採用成功率は85％以上です。 ◎新規事業展開複業の社会実装の実現に向けて、複業クラウドを軸にした関連する新規事業を展開しています。 ▼複業クラウドfor Public 優秀な複業人材が自治体職員とともに行政課題解決に取り組み、地方創生の実現を目指すプロジェクトを全国各地で行なっています。専門性の高い知見を備えた複業人材を活用することで、DXの推進計画や広報戦略の立案などあらゆる行政課題を解決することができます。日本全国の202自治体に複業クラウドを導入頂いており（2024年12月2日時点）これは導入数、複業人材の登用数、プロジェクト組成数において日本一の実績を誇っています。 ▼プロウィズ - 大手企業様×正社員／複業人材 ▍Another worksの特徴￣￣￣￣￣￣￣￣￣￣￣￣ ◎社員について年代：20代が中心　平均年齢：28歳　社員数：50名　男女比：6：4 ◎社員出身企業ビズリーチ / リクルート / パーソル / パソナ / ベネフィット・ワン / レバレジーズ / ネオキャリア / マイナビ / ディップ / / etc

株式会社Another works

株式会社Another worksでは一緒に働く仲間を募集しています

フロントエンジニア
 SaaS事業セールス
 SaaSカスタマーサクセス
開発フロントエンジニア
 サーバーサイドエンジニア
 アプリエンジニア
 フロントエンドエンジニア
 インフラエンジニア
 Webエンジニア
 フルスタックエンジニア
 エンジニア
 AI・機械学習エンジニア
ビジネスSaaS事業セールス
 SaaSプロダクト新規営業
 ライター／ToCマーケター
 ライター

その他
SaaSカスタマーサクセス

Invitation from 株式会社Another works

If this story triggered your interest, have a chat with the team?

株式会社Another works's job postings

Lightning Talk_SDUI -Airbnbから学ぶサーバー駆動型UI-

小田滉太

株式会社Another works / デザイナー

開発デザインデザイナーサーバーサイド

Lightning Talk_LT会レポート

毎月月末金曜日に開催のLT会のレポートです！

Follow

Like 小田滉太's Story

Let 小田滉太's company know you're interested in their content