Google Julesで生成したHTMLを共有URLで見せる方法

Julesの成果物を共有したい場面

Julesは非同期型のエージェントで、依頼したタスクをバックグラウンドで進め、コードの変更や生成物を返してくれます。フロントエンドのページやプロトタイプを作らせると、HTMLやCSS、JSがまとめて出力されることがあります。

出力されたページを確認するには、本来ならローカルで開いたり、リポジトリを取り込んでビルドする必要があります。しかしレビューする側が開発環境を持っていない場合、これは大きなハードルになります。

完成したページの見た目や動きだけを確認してほしいなら、ブラウザで開くだけのURLを渡すのがもっとも手軽です。

生成物をまとめる

Julesが返したHTMLが単一ファイルなら、そのまま扱えます。CSSや画像、JSが分かれている場合は、相対パスを保ったままフォルダごとZIPにまとめておくと、リンク切れなく表示できます。

外部CDNから読み込むスタイルやスクリプトはそのまま動きますが、ローカル参照のアセットはZIPに含める必要があります。共有前に、必要なファイルがそろっているかを確認しておきましょう。

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

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

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

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

共有URLを発行する手順

ギガサイト便を使って、Julesの成果物を共有URL化する基本的な流れは次のとおりです。

会員登録なしでも公開できるため、Julesから受け取ったファイルさえあればすぐに着手できます。HTTPSは自動で付き、CDNのエッジ配信で表示も速くなります。

1. Julesの出力からHTML単体、またはアセットを含むフォルダをZIPにまとめる
2. ギガサイト便のトップページにそのファイルをドロップする
3. 発行された〇〇.giga-site.com形式の共有URLを受け取る
4. 必要に応じて認証方式（URLのみ・パスワード・メール認証・会社ドメイン認証）を選ぶ
5. 公開期限を設定し、URLをレビュー担当者に送る

認証と期限で渡し先を絞る

社外を含む不特定の相手に見せたくない場合は、認証を併用すると安心です。ギガサイト便ではURLのみ、パスワード、メール認証（ワンタイムコード）、会社ドメイン認証から選べます。社内レビューなら会社ドメイン認証、社外のクライアントには発行したパスワードを伝える、といった使い分けができます。

一時公開ページにはnoindexが付き検索結果には出ません。ただしnoindexはアクセス制御ではないため、関係者以外に見せたくないときは認証を組み合わせるのが確実です。公開期限を設定しておけば、レビュー期間が過ぎたページは自動的に閲覧できなくなります。

修正を反映しながらレビューを回す

Julesに修正を依頼して新しいHTMLが返ってきたら、同じURLのままファイルを差し替えられます。リンクを送り直す必要がないため、レビュー担当者は同じブックマークから最新版を確認できます。

誰がいつ見たかはアクセスログで把握でき、QRコードを使えば実機での確認依頼もスムーズです。非同期で進むJulesの反復に、確認の往復を軽くする共有手段を合わせると、レビューのテンポが上がります。