Swift Web Studio
SwiftUIをブラウザでデザイン。Swiftはそのままに。
ビジュアル編集、Swiftコードエディタ、インタラクティブなデバイスプレビューを、ひとつのワークスペースに。テンプレートや手持ちのSwiftファイルから始めてデザインを磨き上げ、ネイティブ開発用のプロジェクトとして書き出せます。
多くのデザインツールが描くのは、アプリの絵です。Swift Web Studioが編集するのは、アプリそのもの。キャンバス上の変更はすべてSwiftのソースコードへの変更になるので、そのままコードとして引き渡せます。
ハイライトをチェック。
Swiftを話す、デザイナーのためのツール。
ソースを保つ編集。ビジュアルの変更は、元になるSwiftコードに直接加えられます。キャンバスで編集できない部分も、コードでそのまま編集できます。
コンポーネント。インスタンスの入力値、保存済みバリアント、共有のカラー、余白、テキストスタイル。
コレクション。共通の行デザインを持つレコードと、コンテンツを試すためのプレビューシナリオ。
デバイスプレビュー。さまざまなデバイスサイズ、外観、文字サイズで確かめられるインタラクティブなプレビュー。
チェック。コントラスト、タップ領域、はみ出しで問題になりそうな箇所を知らせます。
プレゼンテーション。画面をそのまま見せたり、PNGやコンタクトシートとして書き出したりできます。
共通の取り消し。画面とレイヤーを整理でき、取り消しとやり直しは両方にまたがって使えます。
画像。PNGとJPEGを読み込めます。ダークモード用のバリエーションも追加できます。
自動保存とアーカイブ。プロジェクトはブラウザに保存され、編集可能なアーカイブをいつでもダウンロードできます。
その内側へ。
コンパイラ、インタプリタ、レイアウトの各パッケージは、ReactやDOMから独立しています。プレビューはWeb Workerで動作します。
apps/webNext.jsのワークスペース、エディタ、ダイアログ、Workerホストswift-syntax字句解析器、構文解析器、構文木、ソース編集swift-sema名前解決、意味解析、デザイン編集swift-runtimeSwiftインタプリタswiftui-runtimeSwiftUIの状態、ビューの合成、インタラクションswiftui-layoutレイアウトとテキストの計測swiftui-render-domレンダーツリーの表示project-modelプロジェクト、ファイル、テンプレート、永続化、共有exporterプロジェクトの雛形生成と、ZIPの読み込み・書き出しshared · sim-shell共通の型とデバイス仕様プレビューが解釈するのは、SwiftとSwiftUIのうち、サポートされている一部の機能です。AppleのコンパイラやiOS Simulatorは実行しないため、書き出したアプリはリリース前にXcodeでビルドし、確認します。
書き出し方は、6通り。
どの形式でも、Swiftのソースコードはそのまま残ります。
技術仕様
- 技術スタック
- TypeScript。言語、ランタイム、レイアウトの各パッケージが独立したNext.jsワークスペース
- プレビュー
- Web Worker上で動作するSwiftとSwiftUIのインタプリタ（ドキュメント化されたサブセットに対応）
- ストレージ
- ブラウザへの自動保存（IndexedDB）、編集可能な
.swiftstudio.zipアーカイブ - 書き出し
- Xcodeプロジェクト、Swift Playgroundsアプリ、Swiftパッケージ、XcodeGenスペック
- プロンプト
- プロンプトによる作成（オプション、各自のプロバイダキーを使用）
- 品質
- 型チェック、lint、ユニットテストを含むCI。Playwrightによるエンドツーエンドテスト。バンドルサイズの上限設定
