こんな経験ありませんか？
AIが実装を完了したけど、コードの差分だけ見ても「本当にちゃんと動くの？」と不安になったことはありませんか。UIの変更やレスポンシブ対応など、実際に動かさないと判断できない変更は意外と多いものです。
HARVASKのプレビュー環境なら、AIが実装したコードをブラウザ上で即座に動作確認できます。ローカル環境を汚さず、Webブラウザだけで完結します。
プレビュー環境とは
HARVASKにはプレビュー環境が用意されています。これはクラウド上に構築される一時的な開発環境で、以下の機能を提供します。
Webターミナル（ttyd）: ブラウザ上でコマンドを実行
リモートブラウザ: Webアプリケーションのプレビュー表示
デプロイ機能: Docker Composeによるアプリケーション起動
手順
Step 1: プレビュー環境を起動
課題の詳細画面からプレビュー環境を起動します。起動すると、専用のVPS環境がプロビジョニングされ、AIが作業したブランチのコードが自動的にセットアップされます。
Step 2: アプリケーションを起動
Webターミナルまたはデプロイ機能を使って、アプリケーションを起動します。Docker Compose対応のプロジェクトなら、デプロイボタンをクリックするだけで自動的にコンテナが立ち上がります。
Webターミナルで手動でコマンドを実行することも可能です。
Step 3: リモートブラウザで動作確認
アプリケーションが起動したら、リモートブラウザで動作を確認します。HARVASKの画面内でWebアプリにアクセスできるため、別途環境を用意する必要はありません。
リモートブラウザの特徴
ブラウザ内ブラウザ: HARVASKの画面内でWebアプリにアクセス
ローカル環境不要: 何もインストールせずに確認可能
チーム共有: URLを共有して他のメンバーにも見てもらえる
Step 4: 確認結果をコメントに反映
動作確認の結果を課題のコメントに記載します。
プレビューで確認しました。
- ページネーションの表示: OK
- 次ページへの遷移: OK
- 最終ページの表示: OK
- 1ページ目に戻る操作: OK
→ LGTM。完了にします。
修正が必要な場合：
プレビューで確認しました。
- ページネーションの表示: OK
- ただし、データが0件の場合にページネーションが表示されてしまう
→ データ0件の場合はページネーションを非表示にしてください
コメントを投稿するとAIが自動で再実装を開始します。
活用パターン
パターンA: UI変更の確認
コードの差分だけでは判断が難しいUI変更を、実際に見て確認。
パターンB: 複数ブラウザでの確認
リモートブラウザの画面サイズを変更して、レスポンシブデザインの動作確認。
パターンC: デモ・レビュー会
チームメンバーやステークホルダーに、プレビュー環境のURLを共有してデモ実施。ローカル環境のセットアップ不要で、全員が同じ画面を見られます。
パターンD: デバッグ
Webターミナルでログの確認やデバッグコマンドの実行。
プレビュー環境の仕組み
HARVASK → プレビュー起動
↓
クラウド上にVPS環境をプロビジョニング
↓
├── Git clone（AIの作業ブランチ）
├── Webターミナル（ttyd）起動
├── Chromium（リモートブラウザ）起動
└── アプリケーションデプロイ（Docker Compose）
↓
ブラウザからすべてにアクセス可能
自動同期
プレビュー環境内での変更は5分間隔で自動バックアップされるため、作業内容が失われる心配はありません。
セキュリティ
プレビュー環境はプロジェクトごとに隔離
一時的な環境のため、セッション終了後にクリーンアップ
テナント単位でアクセス制御
ポイント
ローカル環境不要 — ブラウザだけで動作確認が完結
AIの成果物を即確認 — コード差分だけでなく実際の動作を見られる
チーム共有が簡単 — URLを渡すだけでデモ可能
ターミナル・ブラウザ — 複数のアクセス方法で柔軟に対応
自動プロビジョニング — 環境構築の手間ゼロ
まとめ
この記事では、AIが実装したコードをプレビュー環境で動作確認し、フィードバックする流れを紹介しました。
実際の操作は「プレビュー環境を起動 → デプロイ → リモートブラウザで確認」だけ。ローカル環境の構築は不要で、ブラウザだけで完結します。確認結果を課題のコメントに書けば、AIが自動で修正に取りかかります。
チームメンバーへのデモやステークホルダーへの共有もURLを渡すだけ。まずはAIが実装した課題で試してみてください。