はじめに
こんにちは！ 株式会社ヤプリでiOSエンジニアをしている白数 (@cychow_app)です！
9/19 (金)〜9/21 (日)の3日間ですが、iOSDC Japan 2025が開催されました。
今年のiOSDCは10周年を迎え、会場も早稲田大学の理工キャンパスから有明セントラルタワーに移動しました。 当日の会場の様子やセッションの感想などは以下にて別記事として公開しておりますので、そちらをご覧いただければと思います！
また、9/20 (土) 13:55〜14:15 の枠でスポンサーセッションにも登壇してきました！
本記事では、スポンサーセッション内でもお話しした「ノーコードアプリプラットフォームを支えるServer-Driven UI 〜Block UIアーキテクチャの設計と実装〜」について、登壇資料も用いて2部構成でまとめていきたいと思います。
1. ノーコードアプリプラットフォームYappliと"Block UI"
Yappliは多種多様な業界・ユースケースに対応しており、柔軟かつリッチなモバイルアプリのUI/UXをWebページのUI構築画面を用いて、簡単に組み立てられるのが、Yappliの特徴です。
上記は、Yappliにおける実際のCMS（Contents Management Systems）のUI構築画面（以降、CMSと記す。）となります。 このCMSで、作りたいモバイルアプリのUIのレイアウトや表示するテキスト、タップ時のアクションなどを設定していきます。
セッション内では、私が実験的にノーコードアプリプラットフォームYappliを用いてiOSDCのアプリを構築している様子を用いて紹介しました。
例えば、カルーセル部分の背景部分に選択した画像を追加したり、
カルーセルのセルを新たに追加したり、そのセルに対して、事前に登録している画像を設定することができます。
また、テキストを変更したり、カルーセル内の任意のセルに対して、タップした時のアクションについても設定することができます。
設定できるアクションは多く存在し、遷移させたい画面を指定したり、テキストコピー、スタンプカード機能のスタンプの押印、チェックイン機能のチェックインなど、Yappliでサポートしている機能と連携させることもできます。
上記では、カルーセル内のSponsorsのセルをタップした時に、WebViewに遷移させ、iOSDC JapanのWebサイトにあるスポンサー一覧を表示するように設定しました。
続いて、上記は先ほどのWebページのCMSで構築した実際のアプリも動画を用いて説明しました。
CMS側で追加したスポンサーのセルもしっかり表示されており、そのセルをタップすると、WebViewに遷移し、iOSDCのサイトが開き、スポンサー一覧もしっかり表示します。
また、スムーズに動くカルーセルがあったり、マップビューが立ち上がり、iOSDC Japan 2025の会場となっていた有明セントラルタワーの位置を確認できるような画面も表示させたりできます。
Yappliでは様々な用途・シーンに合わせて、多種多様なレイアウト、アクションの設定を行うことができます。
ここで、「これって、WebViewメインで構築しているのだろうか…？」と思われる方が多いでしょう。 しかしながら、YappliはWebViewではなく、ネイティブコード（iOSはSwift、AndroidはKotlin）でアプリ側を実装しています。
本記事では、Yappliの柔軟なアプリ表現を支えている「Block UI」 とはどういったものなのか、また、どのようにネイティブコードで実装されているかについてご紹介していきます。
2. "Block UI"はどのように設計されているか
2.1 そもそも"Block UI"って...？
Block UIでは、データソースと紐づく “Block”と呼ばれる画面の部品を組み合わせることでUIを構築していきます。
Blockには様々な種類が用意されていたり、
各Blockではマージンやパディング、背景画像など詳細に値を設定・変更を行うことができるため、より柔軟かつ豊富なUIを構築することができます。
また、上記でもご紹介したCMSでレイアウトや見た目、データを編集すると、アプリのアップデート申請なしで、即時アプリ側に反映されます。
このように、アプリ側は決まったレイアウトを保持せず、サーバからレイアウト情報や表示テキスト情報などを含む「UIの設計図」を受け取り、その設計図通りに画面を組み立てる仕組みを 「Server-Driven UI」 と呼ばれています。
Block UIは「Server-Driven UI」の特徴を持っていると言えます。
2.2 CMSとBlock UI
実際にCMS上で Block UI がどのように構築されていくかについて見ていきたいと思います。
本記事の冒頭でも編集していました、こちらのカルーセル部分を例に見ていければと思います。
画面左端には「グループ・ブロック」というエリアが用意されています。 主に画面の部品である”Block”の一覧がリスト形式で表示されています。
また、今回のカルーセル部分の該当するブロックは、【Group】Topという箇所の配下にある「横スクロール」というブロックになります。
画面右端の方ではBlockやその内部の部品に対して、マージンやパディング、ボーダー、背景画像などを設定できるエリアが用意されています。
これによって、リッチなレイアウトを組むことができます。
CMSを通して、選択したBlockに対して、スタイル（余白・角丸・枠線・影・背景画像など）やアクションを設定できます。
カルーセル要素の背景画像追加、セルの増減、タップ時アクション（WebView遷移など）の定義が直感的に行えます。
2.3 3つのAPIで成り立つ「設計図」
Block UIのUIレンダリングは3つのAPIの合成で決まります。
- Layout API：ページ階層やBlockの並び、余白・配置などのレイアウト情報
- Property API：角丸・枠線・影・背景色／画像などのアピアランス情報
- Data API：テキストなどの表示データ
Layout APIは、画面に紐づくIDをクエリに指定することで、その画面のViewの階層構造情報を含むレイアウト情報を返却してくれます。
また、これから紹介するProperty APIとData APIのURLもResponse内部に含まれ、そのURLを使用することで、他のAPIもリクエストしていく流れとなります。
Property APIは、画面で使用する見た目の情報を一覧で返してくれます。
先ほどのCMSの右端で設定したマージンやパディング、背景色などはこのAPIで取得することになります。
Data APIは、各Blockのデータソースを返却してくれます。
画面に表示するテキスト情報などはこのAPIで取得可能となります。
上記の3つのAPIから返却される情報を「UIの設計図」としてアプリ側は利用することで、リッチなUIを表現しています。
2.4 Block UIの6層構造
Block UIの構造は、Page → Space → Group → Block → Item → Elementの6層でモデル化されています。
それでは、それぞれの階層ごとに役割を見ていきたいと思います。
Pageは、6層構造の基底部分となり、1画面全体のことを指します。
このPageの上にどんどん他の要素が積み重なっていきます。
Spaceは、画面を構成する要素となります。
CMSでは画面左端上部にあるスペースというエリアで確認することができます。
Groupは、Blockをグルーピングするものとなります。
CMSでは、Blockをまとめている箇所がGroupにあたります。
Blockは、データソースに紐づく画面の部品となっています。
Blockの種類としては基本ブロック、レイアウトブロック、そしてユニークブロックに分類することができます。
Itemは、すべてのBlockに含まれております。
こちらも縦組みアイテム、横組みアイテム、カード型アイテムなどがあります。
Elementは、Block UIにおける最小のコンポーネントとなっています。
テキストやイメージはElementとして表示しています。
この階層化により、再利用性・拡張性・表現力を実現しています
ここまでのまとめ
“Block UI” とは、データソースと紐づく画面の部品 “Block” を組み合わせることで UIを構築しています。
そして、アプリ側はLayout API、Property API、Data APIの3つのAPIから「UIの設計図」となる情報を取得し、レンダリングを行っています。
つまり、サーバからレイアウト情報や表示テキスト情報などを含む「UIの設計図」を受け取り、その設計図通りに画面を組み立てる仕組みを有することから、Block UIはServer-Driven UIの特徴を持っていると言えます。
また、Block UIはPage、Space、Group、Block、Item、Elementの6層構造で構築されています。
前半部は以上となります。 ここまで一読いただきありがとうございます！
後半部の記事は以下となりますので、ぜひ合わせて一読いただけると嬉しいです！
また、今回スポンサーセッションの登壇するにあたり、実は今回のBlock UIの事柄を登壇内容として決定するのに紆余曲折ありました💦
今回ご紹介しているBlock UI以外にも、Yappliでは非常に多くの機能 (ビデオ機能、電子書籍機能、ポイントカード機能など) があり、どれも魅力的かつプラットフォームとして展開するためにさまざまな試行錯誤がされています。
今回のセッションではYappliの機能について幅広くご紹介できませんでしたが、Yappliにはどういった機能があり、どのように実装しているかなど技術的な面について、少しでもご興味がある方はぜひカジュアル面談で一緒にお話ししましょう！
