ChatGPT CanvasのHTMLはそのままだと共有しづらい
ChatGPTのCanvasは、対話しながらHTMLやコードを編集できる機能です。プレビューで動きを確認できるので作っている本人は完成形を把握できますが、その状態を第三者に見せるとなると意外と手間がかかります。
よくあるのが、コードをコピーして相手に渡す方法です。しかし受け取った側はファイルとして保存し、ブラウザで開く操作が必要になります。非エンジニアの相手にこれを求めると、「どう開けばいいか分からない」と止まってしまいがちです。
もう一つの落とし穴が、画像やCSS、JavaScriptを含むケースです。HTMLファイル単体を送っても、関連ファイルへのパスが切れていると、相手の画面ではレイアウトが崩れたり画像が出なかったりします。「自分の環境では見えているのに相手には見えない」が起きやすいのはこのためです。
共有方法の選択肢を整理する
Canvasの成果物を相手に届ける方法はいくつかあります。それぞれ向き不向きがあるため、まずは整理しておきましょう。
コードをそのまま渡すのは最も手軽ですが、相手に開く手間がかかり、見た目の確認には不向きです。一方、URLとして見せられれば、相手はリンクをタップするだけで完成形を確認できます。
- コードを貼り付けて渡す: 手軽だが相手に開く操作を求める
- ファイルやZIPを送る: 画像やCSSのパスが切れて崩れやすい
- スクリーンショットを送る: 操作や動きは伝わらない
- 共有URLとして公開する: 相手はリンクを開くだけで完成形を確認できる
AI生成HTMLを共有する前の安全チェック
ChatGPT Canvasの成果物を共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
画像やCSSを含むときはZIPでまとめて公開する
Canvasの成果物が画像・CSS・JavaScriptを伴う場合は、HTMLとそれらの関連ファイルを一つのフォルダにまとめ、ZIPにして公開するのが確実です。フォルダ構成を保ったまま扱えるので、ファイル間のパスが崩れず、相手の画面でも作った通りに表示されます。
ここで一つ前提を押さえておきましょう。Canvasから書き出したHTMLは静的なページとして公開されます。PHPのようなサーバー側の処理は動かないため、画面に見えるHTML・CSS・JavaScriptで完結している成果物を共有する用途に向いています。
共有URLとして公開できるサービスを使えば、サーバーを用意したりデプロイ設定をしたりする必要はありません。ファイルをアップロードするだけで、相手に渡せるURLが手に入ります。
共有URLを発行する手順
ここでは、ファイルをアップロードして共有URLを発行する具体的な流れを説明します。例として「ギガサイト便」を使う場合の手順を示します。HTML単体でも、関連ファイルをまとめたZIPでも同じ流れで公開できます。
- Canvasの成果物をHTMLファイルとして書き出す
- 画像やCSSがある場合は一つのフォルダにまとめてZIPにする
- トップページにファイルをドロップしてアップロードする
- 発行された共有URLをコピーして相手に送る
- 必要に応じてアカウントを作り、認証方式や公開期限を設定する
見せたい相手だけに見せる設定
社外秘の提案や公開前のデザインを共有するときは、誰でも見られる状態は避けたいものです。共有URLには閲覧範囲を絞る仕組みがあり、相手に応じて使い分けられます。
リンクを知っている人だけに見せるなら「URLのみ」、特定の相手に限定するなら「パスワード認証」や、指定したメール宛のワンタイムで本人確認をする「メール認証」が使えます。社内レビューのように同じ会社の人だけに見せたい場合は、メールドメインで絞る「会社ドメイン認証」が便利です。
あわせて知っておきたいのが、公開の管理に役立つ機能です。フィードバックを反映して作り直したときも、同じURLのままファイルを差し替えられるので、リンクを送り直す必要がありません。期限を設けておけば、期限切れで自動的に閲覧できなくなります。
- URLのみ: リンクを知っていれば誰でも閲覧
- パスワード認証: パスワードを知る人だけ閲覧
- メール認証: 指定したメール宛のワンタイムで本人確認
- 会社ドメイン認証: 指定したメールドメインの人だけ閲覧
公開前に中身を確認しておく
AIが生成したコードには、本人が意図しない要素が紛れ込むことがあります。たとえばAPIキーらしき文字列や、外部のスクリプトに依存する記述などです。公開する前に、何が含まれているかを把握しておくと安心です。
アップロード時にセキュリティスキャンが走り、こうした兆候を検出して警告してくれる仕組みがあります。検出されても内容を理解したうえで公開を選べるので、過剰に止められることはありません。
なお、一時公開のページには検索エンジンに載りにくくするnoindexが付きます。ただしnoindexは検索結果に出にくくする設定であって、アクセスを制御するものではありません。見せる相手を限定したいときは、前の章で触れた認証方式をあわせて使うのが確実です。Canvasで作ったものを安心して相手に届けたいときは、こうした仕組みをひと通り確認しておくとよいでしょう。
よくある質問
ChatGPT CanvasのHTMLを相手に共有するにはどうすればいいですか？
最も手軽なのは、書き出したHTMLを共有URLとして公開する方法です。相手はリンクを開くだけで完成形を確認できるため、コードを渡して開いてもらう手間がかかりません。画像やCSSを含む場合は、関連ファイルをまとめてZIPで公開すると表示が崩れません。
Canvasの成果物を送ると画像が表示されないのはなぜですか？
HTMLファイル単体を送ると、画像やCSSへのパスが切れてしまうことが原因です。HTMLと関連ファイルを一つのフォルダにまとめてZIPにし、構成を保ったまま公開すれば、相手の画面でも作った通りに表示されます。
特定の人だけにCanvasの成果物を見せることはできますか？
はい。共有URLにパスワード認証やメール認証を設定すれば、見せたい相手だけに限定できます。同じ会社の人にだけ見せたい場合は、メールドメインで絞る会社ドメイン認証も使えます。
ChatGPTで作ったページにサーバー側の処理を入れて公開できますか？
共有URLとして公開されるのは静的なページです。HTML・CSS・JavaScriptで完結する成果物は問題なく公開できますが、PHPなどのサーバー側の処理は動きません。フォームの受信保存といった処理は別の手段を検討してください。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。