Declarative screens
画面はJSON layoutとして宣言し、描画・配置・状態管理をengineが引き受けます。画面ごとの手描き実装をなくします。
Mods / 01
Manta
UIを、再定義する。
複雑な画面設計を、ひとつの一貫した体験として組み立てるUI framework。
Point of view
Interfaces should feel connected before they feel configurable.
宣言する。描かれる。
画面は layout JSON で宣言します。コンパイラが中間表現へ落とし、描画はエンジンの仕事になります。手続きで画面を組み立てるコードは、もう書きません。
- レイアウトはデータ — レビューでき、差分が読める
- 変わった部分だけを検出して再構築する dirty 管理
- content-hash キャッシュで同じものは二度作らない
測って、正しい。
描画結果は pixel 単位で capture し、基準imageと機械照合します。「たぶん正しく描けている」は、成果物から排除します。
- 画面 capture と基準の byte 照合
- 実機のGPUとリファレンスの突き合わせ
- 回帰は目視ではなく検査が見つける
部品は、そろっている。
テキスト・入力・トグル・ドロップダウン・スロット。そしてmarkdown・SVG icon・動画・canvasまで、同じ設計語彙の上に載っています。
- BelugaExperience — 全 mod 共通のデザインワークフロー
- ゲーム内 wiki・多言語 UI を標準装備
- 角丸から入退場アニメまで、視覚言語はひとつ
Motion & feedback
入場・退場・状態変化のmotionを共通の時間設計で扱い、操作への応答が途切れない画面を作ります。
Verified rendering
描画結果はpixel単位のcaptureで基準と突き合わせます。見た目の正しさを、印象ではなく測定で確かめる開発体制です。
Capabilities
JSON Layout System
画面構造をdataとして記述し、要素の追加・変更をコードの書き直しなしに反映します。
Dynamic Binding
実行中の値と画面要素を宣言的に接続し、変化した部分だけを効率的に再描画します。
Unified Drawing
角丸・グラデーション・SVG iconを含む描画primitiveを、全画面共通のAPIで提供します。
Input Components
text field・toggle・dropdownなどの入力部品を、focus管理とkeyboard操作込みで統一します。
Media Layer
画像・video・Webコンテンツを画面の一部として合成し、ひとつのUIとして描画します。
Accessibility Baseline
操作対象の最小サイズやfocusの可視化を規約として組み込み、全 mod に適用します。
Related
