AIが生成したHTMLは、チャット内のプレビューでは完成して見えても、そのまま共有リンクにしたときに素材やデータの保存処理まで動くとは限りません。
プレビューで分かるのは「ブラウザーがこのコードを描画できるか」です。共有時には、参照したファイルが含まれているか、データがそのブラウザーの外に存在するか、修正後も同じURLを使えるかを別途確認する必要があります。フレームワークやホスティングサービスに依存しない4つの確認点をまとめます。
1. index.htmlだけでなく、参照するファイルまで確認する
ローカルの画像やJavaScriptを参照するHTMLには、それらのファイルも必要です。例えば次の構成なら、フォルダごと公開します。
my-project/
index.html
assets/
cover.png
app.js
<img src="./assets/cover.png" alt="プロジェクトのカバー">
<script src="./assets/app.js"></script>
index.html を最上位に置き、相対パスを保ちます。file:///、C:\...、自分のPCにだけあるフォルダーへの参照が残っていないかも確認します。
生成物が src/ やビルドコマンドを前提にしている場合は、先にビルドして、その出力を公開します。フォルダー名を変えるだけではビルド済みファイルにはなりません。
2. localStorageの「保存」を共有データと混同しない
静的ページでも、計算、描画、操作への反応は実装できます。ただし、画面上の「保存」が何を意味するかはコードで判断します。
<label for="draft">下書き</label>
<textarea id="draft"></textarea>
<button id="save" type="button">このブラウザーに保存</button>
<script>
document.querySelector('#save').addEventListener('click', () => {
localStorage.setItem('draft', document.querySelector('#draft').value);
});
</script>
この例はバックエンドなしで動きますが、保存先はそのブラウザーの、そのオリジンに対応する領域です。ページ作者のPCや、共有相手の別端末へ自動送信されるわけではありません。だからボタンの文言も「チームへ送信」ではなく「このブラウザーに保存」にしています。
公開前に、各操作を「画面内で完結する」「同じブラウザーに状態を残す」「ほかの人とデータを共有する」に分けると、必要なサーバー側機能を判断しやすくなります。共有データには、保存先だけでなく認証、入力検証、アクセス制御も必要です。
3. localhostと秘密情報から、暗黙のバックエンドを探す
生成コードに次のような処理があると、開発中だけ動いて公開後に失敗することがあります。
fetch('http://localhost:3000/api/responses', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: 'example' }),
});
公開ページ内の localhost は、ページ作者ではなく訪問者自身のコンピューターを指します。また、HTTPSのページからHTTPのAPIを読み込む構成は、混在コンテンツとしてブラウザーにブロックされます。
実際のAPIが必要なら、静的フロントエンドとは別にAPIを公開し、HTTPSとCORSを設定します。CORSでオリジンを許可しても、認証やサーバー側の入力検証を省略できるわけではありません。
HTML、CSS、ブラウザーへ配信するJavaScriptに書いた内容は、受け取った人が読めます。非公開のAPIキー、管理者トークン、パスワード、個人情報は除去してください。静的ホスティングへHTMLをアップロードしても、ローカルAPIまで一緒に公開されるわけではありません。
4. 受け取る側で開き、修正時のURLまで決める
自分のログイン状態を引き継がない別ブラウザーとスマートフォンで、少なくとも次を確認します。
| 確認対象 | 期待する結果 |
|---|---|
| 画像・CSS・JavaScript | 作者のローカルファイルがなくても読み込める |
| ボタン・フォーム | 画面の説明と実際の動作が一致する |
| データの保存 | 保存先と、ほかの人から見える範囲が明確である |
| 公開範囲 | 秘密情報や実在するテストデータを含まない |
修正を重ねるページなら、次の版をどこへ置くかも決めます。内容を差し替えても同じURLを維持できれば、「final-v2」「final-v3」のリンクを送り直す必要がありません。そのためには、利用するホスティングで同じURLへの再アップロードが必要です。匿名の使い捨てリンクでは、この操作を提供していない場合があります。
動作例と公開手順
AIページのインタラクティブ例では、角度の操作によってグラデーションと表示中のCSSが変わります。Chromiumで角度が135°から136°へ変わることを確認し、隔離したテスト環境でテスト用HTMLをアップロードして、返されたURLから開けることも確かめました。各プロジェクトのブラウザーやAPIまで保証するものではありません。
AIが生成したHTMLページを共有する手順には、このチェックリストと、HTML・フォルダー・ZIPのアップロード入口を置いています。開発中のPlopinoでは、匿名アップロードは公開され、30日間保管されます。アカウントへ保存したページはMy Boardsから新しい版をアップロードでき、内容を更新してもURLは変わりません。配信するのは静的フロントエンドなので、APIやデータベースは別に用意します。
レビューを終える目安は、受け取った人がページを開き、「この操作はブラウザー内だけで完結するのか」「実際にどこへ保存されるのか」「次の版をどこで見るのか」を誤解なく判断できることです。