Server-Driven UI × HTML × SwiftUI - 柔軟なカードレイアウト実装の挑戦 - by marcy731

ショッピングアプリやSNSなど、さまざまなモバイルアプリで活躍するカード型UI。

画像・タイトル・説明文・価格・割引率・タグなど
多様な要素を自在に組み合わせられる一方で、
特に STORES ブランドアプリ のように、複数のアプリをブランドごとに異なるレイアウトで提供する場合、
アプリごとのデザイン変更に柔軟に対応する必要があります。
そのたびにアプリを更新してパターンを仕込むのは大きな負担となり、運用面で課題が残ります。

この課題を解決するために挑戦したのが、
Server-Driven UI × HTML × SwiftUI という構成です。

サーバーからHTMLのbodyをAPIで配信し、
SwiftUIでパースして動的に描画することで、
カードの構造・表示条件・順序の差し替えを
サーバー側でリアルタイムに制御し、
柔軟かつ安全にUI変更を可能にしました。

具体的には

• HTMLパースの仕組み
• SwiftUI上での動的View生成のコツ

といった技術的チャレンジにも触れます。

特に Server-Driven UI での役割分担に悩んでいる方には参考になる事例です。
Server-Driven UIの可能性を一緒に探求し、新しい解決策を見つけてみませんか？