Dactyl 触ってみる

8/24 に Ryan Dahl が Xにて Dactyl をアナウンス。

ネイティブ iOS およびネイティブ Android アプリ向けのバイブコーディング プラットフォームだそうです。

今回は、これを触ってみる。

参考

Dactyl について

このサービス、「Deno社のメンバーにより開発」と紹介されているのだが、どこにDenoが使われているのかは開示されていないように見受けられる。
むしろ押し出しているのは、WASM で SwiftUI レンダラを構築したというのがポイントになるようだ。
その他デバイスの持つハードウェアについてもサポートするというのが特徴のようだ。

やってみる

プライベートのデバイスは、Androidしかないので、今回は Androidアプリを作ることを試していく。

セットアップ

Google連携ログイン、Apple連携ログインのみが用意されている。
Github アカウント連携は無い。

今回は、Googleアカウント連携で試していく。

登録できると、ホーム画面としてプロンプトといくつかのサンプルがある状態の画面が開く。

サンプルアプリを作成

ためしに、選択肢にある City Builder を選択してみる。

すると、以下のプロンプトが挿入される。

An isometric SceneKit city builder on a tile grid. Pinch to zoom, drag to pan, tap a tile to place a building that drops in with a spring animation. Flat-shaded low-poly geometry under one warm sun light and a soft ambient fill.

Design it like a shipped Apple-design-award app, not a demo: system fonts with real hierarchy (largeTitle down to footnote), one restrained accent against neutral greys, .ultraThinMaterial over content instead of solid fills, an 8pt spacing grid, generous whitespace, hairline dividers instead of card borders. No emoji, no rainbow icon circles, no drop shadows on everything. Dark mode is first-class, not an afterthought.

翻訳してみると、以下のような感じ。

タイルグリッド上のアイソメトリック SceneKit シティビルダー。ピンチでズーム、ドラッグでパン、タイルをタップして建物を配置すると、スプリングアニメーションで落ちてくる。暖かい太陽光の下でフラットシェードの低ポリゴンジオメトリと柔らかい環境光。

デモではなく、Apple デザインアワードを受賞したアプリのようにデザインする: 実際の階層構造を持つシステムフォント (largeTitle から footnote まで)、ニュートラルグレーに対して控えめなアクセント、コンテンツの上に .ultraThinMaterial を使用し、ソリッドフィルは使用しない、8pt の間隔グリッド、余白を十分に取り、カードの境界線の代わりにヘアラインの区切り線を使用。絵文字なし、虹色のアイコン円なし、すべてにドロップシャドウなし。ダークモードは第一級であり、後付けではない。

Submit すると、画面遷移して作成が始まる。

5分くらい待っていたら、作成されたが画面が明滅したので、画面が点滅しています検証して と指示して再度待つ。

まず現状を確認します。

screenshot
タイルハイライト（オレンジの四角）が画面左下に固定表示されています。点滅の原因はこれです。TileHighlightView が viewSize を取得する前に SIMD2(0,0) のタイルを描画し、viewSize が更新されるたびに再レンダリングが起きています。フィルムストリップで点滅を確認します。
…
…

英語しか対応しないということはないようで、指示に問題はなかった。
点滅も解消された。

なんか動くアプリにはなっている。

バイブコーディング プラットフォームということだったので、コードはかなり隠蔽されているのかなと考えていた。
Code タブを押すと、ソースコードが出てきた。その他BackendやAssetsなどのタブも用意されている。

0to1でアプリを作ってみる。

改めてHomeに戻り、0to1で作ってみる。
「簡単なToDoアプリ、ToDoの追加、削除、一覧画面で現在達成した個数を表示。ToDoのデータは永続化。」と指示して作成開始。

すこし調整もして上で、できたアプリが以下の通り。

ここまで作業したら、Running low — 2 credits left this cycle. と表示され、クレジットが残り少ないことの通知が有った。
もちろん先のサンプルアプリ作成で消費した分もあるが、無料枠はかなり「試用」という範囲に収められていそう。
これについては、Freeプランだと月額100クレジットだそうなので、100クレジット使い切ったといってもいいでしょう。

先の通りソースコードも提示されているので、直接色に関する所を書き換えます。
シミュレーター画面に行くとコンパイル実行の表示の後反映されていることがわかります。

Swiftを記述するスキルがあるのであれば、実はエージェントに記述させずひな形を埋め込んでしまって始めると、クレジット削減へつながる可能性はあります。
(私は門外漢ですが。)

シミュレータ内でスクショや、画面の収録データをチャット上に埋め込むこともできるので、自由度は高いようです。

データの永続化

Accounts & data (Cloud) に記載がある。
データはアカウントに対して永続化をするものだそうです。

ドキュメント曰く、以下のように尋ねろということです。

1
Add sign up and login, and save each user's posts to their account.

今回は、上記に加えTodoデータを永続化しろと指示をしています。
すると以下の様に、ログイン画面が生えます。

そのうえでToDoを入れ、一度ログアウトして再度ログインするとデータが維持されているのがわかります。

バックエンドのタブを見ると、登録ユーザーや登録したデータがユーザー単位で残っていることが確認できます。

その他、カメラなどデバイスの利用を含む機能が使用できるので活用できるのでしょう。

Android実機に展開

現状できなかった。

Native iPhone, iPad, and Android apps, built live in your browser, and installed on your device.

記載はあるが、ドキュメントに具体的な手順は見当たらなかった。

試しに、チャット内でも確認したら以下の回答。

Android用にビルドして

この環境では Android 用ビルドはできません。Dactyl はネイティブ SwiftUI / iOS アプリとしてビルド・プレビューする環境です。

今できることは以下です。

iOS 向けにビルド・動作確認
SwiftUI 実装を Android / Kotlin / Jetpack Compose へ移植するための設計整理
同じ機能の Android 版コード方針を提案
必要なら次に、現在のToDoアプリを Jetpack Compose版へ移植するための画面構成・データ設計をまとめます

しかし、How Dactyl works ではできると書いてあります。

画面を探していると、以下の動線が有りました。




QRコードが現れるので、これをAndroid端末で読み取り。

ダウンロードの後、インストールすると起動はできた。
しかし、登録処理しようとすると、処理中のまま進まなくなった。

この旨をチャット上で報告・直させて、再度試してみた。
修正後再度アプリを先の動線で取得すると、更新として認識されている。

が登録はできなかったので、残念ながら一旦ここまでとする。

iOSならサクッとできたのでしょうか。

ということで、Dactylを触ってみました。
Android アプリをこのくらいでサクッと、それも環境構築することなく作れるのは、非常に魅力的だと感じました。
SwiftUI の知識があれば、吐き出されたソースの解釈もできるでしょうから、受け取り方は異なるでしょう。

しばらく追いかけてみたいと考えます。

では。