OpenHands（旧OpenDevin）で作ったHTMLを共有する方法

OpenHandsの成果物はサンドボックスの中にある

OpenHandsは、コンテナ化されたサンドボックス環境の中でコマンドを実行し、ファイルを生成するエージェントです。生成されたHTMLや静的サイトはその作業ディレクトリにあり、ホスト側に取り出してはじめて他の人に渡せます。

エージェントが作ったページの見た目や動作を関係者に確認してもらいたい場合、サンドボックス内のプレビューをそのまま共有することはできません。まずは成果物をエクスポートする必要があります。

作業ディレクトリから成果物を取り出す

OpenHandsの作業ディレクトリから、index.htmlや関連アセットをホスト側へコピーします。CSS・JS・画像を含むサイトは、相対パスが崩れないようにフォルダ構成を保ったまま取り出すのが大事です。

取り出したファイル群はそのままでは配布しにくいので、index.htmlを起点に1つのZIPへまとめておくと、受け渡しがシンプルになります。

AI生成HTMLを共有する前の安全チェック

OpenHands（旧OpenDevin）で作ったHTMLを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。

ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。

• 外部送信: form action、fetch、script src、iframeの向き先を確認する
• 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
• 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
• 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める

一時URLとして公開する手順

まとめた成果物は、ドロップするだけで共有URLが出るサービスに渡すと、すぐにレビューに回せます。ギガサイト便での流れは次の通りです。

発行されるのは 〇〇.giga-site.com 形式のサブドメインで、HTTPSは自動、CDNのエッジ配信で表示が速いのが特徴です。エージェントが何度もタスクを回して成果物を更新するワークフローでも、出来上がるたびに素早く確認に回せるため、生成と検証のサイクルを短く保てます。

1. OpenHandsの作業ディレクトリからindex.htmlとアセットを取り出す
2. フォルダ構成を保ったままZIPにまとめる
3. ギガサイト便のトップにZIPをドロップして共有URLを発行する
4. 認証方式を選び、公開期限を設定する
5. 発行されたサブドメインURLを関係者へ送る

自動生成物だからこそ公開範囲に注意

自律エージェントは指示外のファイルやテスト用データを作ることがあり、そのまま公開すると意図しない内容が見えてしまう恐れがあります。公開前に成果物の中身を確認し、不要なファイルは除いておきましょう。

一時公開ページにはnoindexが付き検索結果には出ませんが、noindexはアクセス制御ではありません。関係者だけに見せたいならパスワードやメール認証を併用してください。

再生成のたびに同じURLで更新

OpenHandsはタスクを繰り返して成果物を改善していくため、共有後の差し替えが頻繁に起こります。同じURLのまま中身を更新できる機能を使えば、毎回リンクを送り直す手間がありません。

アクセスログで閲覧状況を確認でき、QRコードを使えば打ち合わせの場で素早く共有できます。エッジ配信のおかげで遠隔のレビュアーでも表示が速い点も実用的です。