Devin（AIソフトウェアエンジニア）が生成したHTMLを共有する方法

Devinの成果物を「動く状態」で見せたい

Devinは指示されたタスクに沿ってコードを書き、HTMLやちょっとしたWebサイトを丸ごと出力することがあります。ところが、できあがった成果物をチームメンバーやクライアントに見せようとすると、コードを渡すだけでは相手が実際の表示や動きを確認できません。

スクリーンショットでは静的な見た目しか伝わらず、リンクやレイアウト崩れの確認には不十分です。やはり、ブラウザで開いてそのまま触れる状態で渡すのが一番伝わります。

そのために必要なのは、Devinの出力を素早く公開URL化し、関係者だけが開ける形で共有する仕組みです。

ギガサイト便で確認用URLを発行する

ギガサイト便は、AI生成HTMLやZIPサイトを「認証付きの一時URL」で共有することに特化したサービスです。トップページにHTMLファイル、またはCSS/JS/画像を含むZIPをドロップすると、その場で共有URLが発行されます。会員登録なしでも公開できます。

発行されるURLは 〇〇.giga-site.com 形式のサブドメインで、HTTPSは自動、CDNのエッジ配信で表示も速いので、相手の環境を問わずそのまま開いてもらえます。

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

Devin（AIソフトウェアエンジニア）が生成したHTMLを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。

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

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

DevinのHTMLを共有する手順

実際の流れはシンプルです。出力ファイルを用意してドロップするだけで、確認用のURLが手に入ります。

1. Devinが生成したHTMLファイル、あるいはCSS/JS/画像を含むZIPを手元に用意する。
2. ギガサイト便のトップページに、そのファイルまたはZIPをドロップする。
3. 認証方式を「URLのみ / パスワード / メール認証 / 会社ドメイン認証」から選ぶ。
4. 公開期限を設定する。確認が終わったら自動で閲覧不可になるよう短めに区切るとよい。
5. 発行された 〇〇.giga-site.com のURLを、レビュー担当者やクライアントに送る。

レビュー中の差し替えとアクセス制御

Devinにフィードバックを返して再生成すると、HTMLは何度も更新されます。ギガサイト便は同じURLのままファイルを差し替えられるので、修正のたびにリンクを送り直す必要がありません。レビュアーは常に同じURLを開くだけで最新版を確認できます。

外部のクライアントに見せる場合は、パスワードやメール認証、会社ドメイン認証を併用すると安心です。一時公開ページには noindex が付いて検索結果には出ませんが、noindex はアクセス制御ではないため、関係者以外に見せたくないときは必ず認証を組み合わせてください。

誰がいつ見たかを確認したいときは、アクセスログを使えば反応の有無も把握できます。

確認用URLを残さない運用のすすめ

Devinのタスクは次々に進むため、過去の確認用URLが残り続けると、どれが最新版か分からなくなりがちです。ギガサイト便は公開期限が切れると自動的に閲覧できなくなるので、古い確認用URLが残りません。

なお、ギガサイト便は独自ドメインでの本番Webサイト運用ではなく「確認・レビュー・一時共有」に向いた位置づけです。Devinが作ったものを本番として継続運用するなら別のホスティングを使い、まず関係者に見せて確認・レビューしてもらう段階でギガサイト便を使うとすっきりします。