Trae（ByteDance）で作ったHTMLを共有する方法

TrAeの出力をすぐ見せたい場面

Trae（ByteDance）はAIエージェントやインライン補完を備えたIDEで、対話しながらHTMLやコンポーネントをまとめて生成できます。手元で書き上げる速度は速い一方、できた画面を関係者に見せる手段は別途必要になります。

ローカルで開いているだけでは相手に共有できず、かといって本番環境にデプロイするのは確認段階としては大げさです。レビューのたびに環境を用意・撤収するのは負担になります。

ギガサイト便は、こうした確認・レビュー用途に絞った一時共有に向いています。本番運用ではなく「作ったHTMLをすぐ見せる」ことに役割を限定すると使いやすくなります。

共有用にファイルをまとめる

Traeのワークスペースから、共有したいHTMLを取り出します。1枚で完結するならHTML単体、CSSやJS、画像が分かれているならそれらをまとめてZIPにします。

相対パスでの読み込みが多い構成では、必要なアセットが欠けると表示が崩れます。ZIPにまとめる前にブラウザで一度開き、リンク切れがないかを確認しておくと安心です。

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

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

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

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

ギガサイト便で共有URLを発行する手順

ファイルがそろったら、ギガサイト便にドロップして共有URLを発行します。HTTPSは自動で付き、CDNのエッジ配信で表示も速いので、相手の環境を問わず見てもらいやすくなります。

1. ギガサイト便のトップページを開く
2. Traeから取り出したHTML単体、またはZIPをドロップする
3. 〇〇.giga-site.com 形式の発行URLを確認する
4. 認証方式を選ぶ（URLのみ/パスワード/メール認証/会社ドメイン認証）
5. 公開期限を設定する（無料プランは最長7日）
6. カスタムスラッグやQRコードが必要なら設定して相手に渡す

レビューを安全に進めるための設定

社外を含むレビューでは、URLのみより認証付きが安全です。パスワードや、相手のメールにワンタイムコードを送るメール認証を使えば、URLが転送されても本人以外は開けません。

一時公開ページにはnoindexが付き検索には出ませんが、これはアクセス制御ではない点に注意してください。見せたくない相手をブロックしたいなら認証を併用します。

修正を反映しながら確認を回す

Traeで指摘を反映して書き直したら、ギガサイト便側は同じURLのままファイルを差し替えられます。リンクを送り直さずに中身だけ更新できるので、レビューのやり取りがスムーズです。

アクセスログで誰がいつ見たかを確認できるため、レビュー依頼に動きがあったかを把握できます。確認完了後は公開期限で自動的に閲覧不可になり、古いURLが残りません。