はじめに
みなさんはrork.comをご存知でしょうか？
rork.comはAIノーコードツールの一つで、bolt.newやDifyのように自然言語のみでアプリ開発が可能な生成AIプラットフォームです。
特徴としては、Expo(ReactNative)を利用したモバイル開発に特化していて、TestFlightへのデプロイサポート機能などもあります。
そんなrork.comですが、2025年9月1日にモバイルアプリを開発できるスマホアプリ「Rork: Vibe Coding App」を配信しました！(以降は「rork.app」と呼称します)
このアプリが新時代の突入を感じさせてくれたので、今回はrork.appでどんなことができるのかを体験ベースでご紹介していきます！
簡単なTodoアプリを作る
アプリを開くと、画像のようなホーム画面が表示されます。
ホーム画面の下部にプロンプトを入力することで、アプリを生成することができます。
Claudeに簡単なモバイルTodoアプリのプロンプトを作成してもらったので、rork.appで試しに作ってみました。
プロンプト
# シンプルなモバイルTodoアプリを作成してください
## 基本機能
- タスクを追加する
- タスクを完了にする（チェック）
- タスクを削除する
- タスク一覧を表示する
## モバイル対応
- スマートフォンで使いやすいデザイン
- タップ操作で全ての機能を実行
- 縦画面に最適化
## UI要件
- タスク入力欄
- 追加ボタン
- タスクリスト（チェックボックス + テキスト + 削除ボタン）
- シンプルで見やすいデザイン
## 技術要件
- React Native、Flutter、またはWebアプリ（PWA）で作成
- データはローカルに保存（端末を再起動してもデータが残る）
## 完成イメージ
1. 上部にタスク入力欄と追加ボタン
2. 下部にタスク一覧
3. 各タスクに完了チェックと削除ボタン
動作するシンプルなTodoアプリを作成してください。
プロンプトを入力してCreateボタンをクリックすると、写真のようなモーダルが表示されました。
どうやらアプリが完成したら通知を送ってくれるようです。生成作業中に進捗を気にせず別の作業ができるのはありがたいですね。
数分後アプリ完成の通知が来たので確認してみると、ダッシュボードにアプリが追加されていました！
そのままスマホで動作確認
このRork.appですが、なんと、アプリ作成をしたスマホでそのまま動作確認ができます。スマホでアプリを作ってそのまま実機で確認ができるのは面白いですね。
ダッシュボードに表示されている作成済みのアプリをクリックすると、作成したアプリを触ることができるプレビュー画面が起動します。
簡単に動作確認を実施してみましたが、機能的な問題もなく、動きも滑らかでした。
画面上にある黒い丸は自由に動かせるため、動作確認の邪魔にはなりませんでした。
開発時のワークスペースがある
プレビュー画面に表示されている黒丸をクリックすると、写真のようなワークスペースが開きます。
ワークスペースの内容は以下の通りです。
- ホームボタン
- 共有ボタン
- リロードボタン
- AIとの対話内容
- 追加の修正をする入力フォーム
AIとの対話内容に作成されたファイル名は表示されますが、ファイル内容までは確認できませんでした。(web版のrork.comではファイル内容の確認が可能です)
「Rork: Vibe Coding App」というアプリ名の通り、自然言語によるバイブコーディングが主軸であることが伺えます。
自然言語で追加実装をする
ワークスペースの入力フォームを利用して、以下の二つの要望を追加で実装させてみました。
- Todo期限設定機能
- カレンダー表示画面
プロンプト
# 現在のモバイルTodoアプリに以下の2つの機能を追加実装してください：
## 実装要件
### 1. Todo期限設定機能
- 新規タスク作成時および既存タスク編集時に期限（日付・時刻）を設定できる機能
- 日付選択はデートピッカー、時刻選択はタイムピッカーを使用
- 期限の有無を選択可能（期限なしも設定可能）
- 期限が設定されたタスクは、一覧画面で期限日時を表示
- 期限が近づいたタスクは視覚的に強調表示（色変更、アイコンなど）
- 期限切れのタスクも別の色で表示
### 2. カレンダー表示画面
- 第3のタブとしてカレンダー画面を追加
- 月表示カレンダーで期限付きタスクを確認可能
- カレンダーの各日付に該当日が期限のタスク数を表示
- 日付タップで、その日が期限のタスク一覧をモーダルまたは詳細画面で表示
- 今日の日付をハイライト表示
- 期限切れの日付は赤色などで強調
## 技術仕様
- React Nativeまたは類似のクロスプラットフォーム対応
- 既存のデザインシステムと一貫性を保持
- 日本語UIに対応
- データ永続化（ローカルストレージ）
- レスポンシブデザイン
## デザイン要件
- 既存の2画面と同じミニマルでクリーンなデザイン
- 直感的で使いやすいUI/UX
- アクセシビリティを考慮
完全に動作するコードと、実装手順を提供してください。
プロンプトを投げてみると、AIが作業を開始しました。
修正したコードは確認できませんが、思考プロセス・修正プロセスは確認できます。
ゼロから生成した場合と同じく、生成作業が完了するとプッシュ通知で教えてくれました。
実装完了後、再びプレビューを確認してみました。
プロンプトで指示した通り、Todoに期限を設定する機能とTodoの期限をカレンダービューできるカレンダー画面が追加されていました。動作も問題なかったです。
エレメントを指定して修正する
プロンプトによる修正作業ですが、エレメントを指定して行うことができます。
ワークスペースの入力フォーム内にあるセレクトボタンを押すと、エレメント選択ができるようになります。
エレメント選択画面 & 選択後のフォーム
複数のエレメントは選択できず、単一のエレメントのみ選択可能なようです。
今回は、Todo追加画面の中央に表示されているチェックマークの色を変えてみました。
before & after
従来、細かい修正を行いたいときはAIが理解できるように長めのプロンプトを書く必要がありました。しかし、エレメントを指定する機能があることで、細かな修正をより直感的に行うことが可能になっています。
画像を使って実装する
初期実装、追加実装共に画像と添付してプロンプトを投げることができます。画像は複数枚選択できるようです。
今回はStitchにログイン画面と設定画面を作ってもらい、プロンプトと共に投げてみます。
プロンプト
# 既存Todoアプリへの機能追加依頼
## 概要
既存のTodoモバイルアプリに「ログイン画面」と「設定画面」を追加実装してください。添付の画像を参考に、既存のデザインシステムと統一感のある実装をお願いします。
## 実装要件
### 1. ログイン画面
**機能要件：**
- メールアドレス・パスワードによる認証
- ログイン状態の保持
- バリデーション機能（必須項目チェック、メール形式チェック）
- エラーハンドリング（認証失敗時の表示）
- 新規登録画面への遷移リンク
**UI要件：**
- 添付画像のデザインを参考に実装
- 既存アプリのカラーパレット・フォントスタイルを継承
- レスポンシブ対応
- ローディング状態の表示
- アクセシビリティ対応
### 2. 設定画面
**機能要件：**
- ユーザープロフィール編集（名前、メールアドレス）
- アプリ設定（通知ON/OFF、テーマ切り替え）
- ログアウト機能
- アカウント削除機能
- アプリバージョン情報表示
**UI要件：**
- 添付画像のデザインレイアウトに従う
- セクション分けによる整理された構成
- 設定項目のon/off切り替え
- 危険な操作（ログアウト、削除）には確認ダイアログ
### 3. ナビゲーション統合
- 既存のメイン画面に設定画面へのアクセスボタンを追加
- ログイン状態によるルーティング制御
- スプラッシュ画面での認証状態チェック
## 技術的要件
- **状態管理：** ログイン状態とユーザー情報の永続化
- **セキュリティ：** パスワードの暗号化、トークン管理
- **エラーハンドリング：** ネットワークエラー、認証エラーの適切な処理
- **パフォーマンス：** 画面遷移のスムーズな動作
## 出力要件
1. **完全なソースコード**（全ファイル）
2. **実装の説明**（新規追加したコンポーネントの説明）
3. **既存コードとの統合方法**
4. **テスト用のダミーアカウント情報**（ハードコーディングで良い）
## 制約事項
- 既存のTodo機能は一切変更しない
- 既存のデザインシステム・コンポーネントを最大限活用
- モバイルファーストでの実装
- アプリストア審査基準に準拠
## 追加要望
- できるだけ軽量で高速な実装
- 将来的な機能拡張を考慮した拡張性のある設計
- コードコメントによる実装意図の説明
stitchで作成したUIサンプル
出来上がったUIを確認してみると、ほぼ添付した画像通りの画面を作ってくれました。
エラーの自動検知 & 修正提案機能
試しにInstagramライクなアプリを作っていたところ、動作確認中にプレビュー画面の黒丸に赤い通知が表示されました。
ワークスペースを開くと、AIからエラー修正の提案が来ていました。
どうやら、エラーが発生するとAIが自動で検知して、アプリから修正の提案があるようです。
fixボタンを押すと、AIがエラー修正のプロンプトを投げて、修正作業が始まりました。
エラーの修正作業を半自動で行う機能があることで、ユーザ側が開発のみに集中できるのはいいですね。
まとめ
スマホから自宅PCで稼働しているClaude Codeを操作してバイブコーディングを行う手法などは存在していましたが、、セットアップに時間がかかったり、開発したアプリの動作確認は別途準備する必要がありました。
それに比べ、スマホアプリ一つでモバイルアプリ開発と動作確認が手軽にできるrork.appは、まさに画期的な生成AIアプリだと言えるでしょう。
今までのAI開発とは一味違った開発体験ができるので、皆さんもぜひ一度ダウンロードしてみてください！
Discussion