一度デザインすればどこでも実行可能: Web、iOS、Android で 1 つの UI ファイルを使用可能
一度デザインして Web、iOS、Android で UI を実行するために実際に必要なのは、共有レイアウトとモーション、プラットフォーム固有のパーツ、テスト、ExodeUI がどこに適合するかです。
核心
一度デザインすればどこでも実行できるということは、React、SwiftUI、Flutter で同じモーションを再構築するのではなく、1 つのソース ファイルで UI コンポーネントを記述し、各プラットフォームがランタイムでそれを再生することを意味します。これは、レイアウト、状態、モーション、および入力が共有ファイル内に存在する場合に機能し、ナビゲーション、アクセシビリティ、およびシステム ジェスチャがプラットフォーム固有のままである場合に誠実さを保ちます。 ExodeUI は、React、Vue、Svelte、Angular、Solid、React Native、SwiftUI、Flutter のランタイム パッケージでこのモデルをサポートします。
「一度設計すれば、どこでも実行できる」には実際に何が必要なのか
エクスポート ボタン以上のものが必要です。共有ファイルには、コンポーネントがさまざまなサイズでどのようにレイアウトされるか、各状態でどのように見えるか、状態間をどのように移動するか、アプリが入力でコンポーネントを駆動する方法を記述する必要があります。各プラットフォームには、ファイルを再生し、それらの入力を実際のイベントに接続できるランタイムも必要です。これらの要素のいずれかが欠けている場合、約束は別の引き継ぎに変わります。
共有ファイルとプラットフォームごとの再構築
従来のルートは、1 回のデザインと 3 回の再構築です。Web は CSS および JavaScript、iOS は SwiftUI、Android は Kotlin または Flutter になります。リビルドごとに、タイミング、間隔、ジェスチャ処理に小さな違いが生じます。共有ファイル ルートはコンポーネント定義を 1 か所に保持し、各プラットフォームでそれを再生できるようにします。トレードオフとして、ランタイムがファイルとプラットフォームの間に位置するため、プラットフォーム固有のレンダリングに対する直接制御の一部を放棄することになります。
プラットフォーム固有のものを維持すべきもの
共有コンポーネントは、すべてのプラットフォームが同じであるかのように見せるべきではありません。ナビゲーション パターン、戻るジェスチャー、システム ダイアログ、権限、およびアクセシビリティ API は異なります。共有ファイルはインタラクティブなビジュアル コンポーネントを所有する必要があります。ホスト アプリは、プラットフォーム クロムとその周りのセマンティック コントロールを所有する必要があります。たとえば、共有アニメーション ボタンは、適切な役割とラベルを公開するネイティブ ボタン要素内に配置できます。
ランタイムの仕組み
ランタイムはファイルを読み取り、ビジュアル ツリーを構築し、入力の変更に応じてそれを更新します。アプリケーション コードは、押下、無効化、読み込みなどの入力を設定し、確認や拒否などのイベントをリッスンします。視覚的な定義はプラットフォームごとに手書きのコードではなくデータであるため、同じファイルを移植可能にするのはランタイムです。ランタイムも依存関係であるため、無料であると仮定するのではなく、独自のビルドに対するその影響を測定してください。
すべての環境で同じファイルをテストする
エディタ内だけでなく、ファイルを実行する場所でもファイルをテストします。サポートされている最小サイズと最大サイズでレイアウトを確認し、実際のコンテンツですべての状態を確認し、タッチ、マウス、キーボード入力を個別にテストします。次に、フォーカス順序、ラベル、動きの減少、スクリーン リーダーの動作などのアクセシビリティを確認します。ファイルを共有すると視覚的なずれが軽減されますが、各プラットフォームをテストする必要がなくなるわけではありません。
ExodeUI が適合する場所
ExodeUI は、開いている .exode ファイルにコンポーネントを保存し、React、Vue、Svelte、Angular、Solid、React Native、SwiftUI、Flutter のランタイム パッケージを提供します。ファイルには、レイアウトとブレークポイント、タイムライン、ステート マシン、スプリング物理学、入力およびイベントを含めることができます。同じファイルはブラウザまたはデスクトップ エディタで編集でき、AI コーディング ツールは MCP サーバー経由でそのファイルを操作できます。
1 つの共有ファイルを使用しない場合
インターフェイスがプラットフォームのみの API に大きく依存している場合、ネイティブ レンダリングをピクセル レベルで制御する必要がある場合、またはコンポーネントが主にビデオまたは 3D シーンである場合、共有ファイルは適していません。また、チームが各ターゲットをテストできない場合にも適していません。このような場合、プラットフォーム固有のコードを選択するのが正直な選択であり、共有ファイルは、そのコードから真にメリットが得られる部分のみをカバーする必要があります。
実装コード例
import { ExodeUICanvas } from 'exodeui';
// The same component file can be played by the runtime your app already uses.
// Web, React Native, SwiftUI and Flutter packages read the same .exode source.
export function ShareSheet({ open, progress, onClose }) {
return (
<ExodeUICanvas
src="/share_sheet.exode"
inputs={{ open, progress }}
onTrigger={(name) => name === 'close' && onClose()}
/>
);
}覚えておきたい原則
- 一度デザインすればどこでも実行可能で、レイアウト、状態、モーション、入力の共有に加え、プラットフォームごとのランタイムが必要です
- ナビゲーション、権限、アクセシビリティ API はプラットフォーム固有のものである必要があります
- ランタイムは依存関係です。ビルドへの影響を測定する
- すべてのターゲットのレイアウト、入力、モーション、アクセシビリティをテストする
- ExodeUI は、React、Vue、Svelte、Angular、Solid、React Native、SwiftUI、Flutter のランタイムを提供します