Codestral（Mistral）で生成したHTMLを共有する方法

Codestralの出力はコードのまま返ってくる

CodestralはMistralのコード生成モデルで、API経由やエディタの補完機能を通じてHTMLやCSS、JavaScriptを出力します。複数言語に対応し、コードの穴埋めや一括生成が得意なため、UIの雛形作りにも使えます。

ただし返ってくるのはテキストとしてのコードで、描画された画面ではありません。チームや社外の協力者に「このマークアップで問題ないか」を確認してもらうには、ブラウザで開ける形にして渡すほうが伝わります。

API出力をHTMLファイルに整える

Codestralから受け取ったコードを、index.htmlとして保存します。API応答にはコードブロックの記号や説明が混ざることがあるので、純粋なHTML部分だけを取り出してください。

CSSやJavaScriptが別ファイルに分かれる構成なら、それぞれを保存して相対パスで読み込ませ、まとめてZIPに固めます。index.htmlを起点にしておけば、配布先でもそのまま表示されます。

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

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

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

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

社外レビュー用の一時URLを発行する手順

整えたファイルは、ドロップするだけで共有URLが発行されるサービスに渡せば、サーバーを用意せず社外にも見せられます。ここではギガサイト便を例に最短の流れを示します。

1. Codestralの出力からHTMLを取り出してindex.htmlに保存する
2. 別ファイルのCSS・JSがあれば相対パスでまとめてZIPにする
3. ギガサイト便のトップページにHTMLかZIPをドロップする
4. 発行された 〇〇.giga-site.com 形式のURLを確認する
5. 認証方式と公開期限を選んで社外の相手にURLを送る

社外に渡すときこそ認証を併用する

社外のレビュアーに見せる場合、誰でもURLを開ける状態だと意図しない相手に渡る恐れがあります。一時公開ページには検索結果に出ないようnoindexが付きますが、noindexはアクセス制御ではないため、メール認証やパスワードを併用して相手を限定してください。

特定のメールアドレスにワンタイムコードを送るメール認証を使えば、招待した相手だけが閲覧できます。公開期限を短めに設定しておけば、レビュー後に自動で閉じられます。

再生成しても同じURLを使い続ける

Codestralは条件を変えて何度も生成し直す使い方が向いています。共有後に出力を更新するたびにURLを送り直すのは煩雑なので、同じURLのままファイルを差し替えられる仕組みを使うと連絡の手間が減ります。

カスタムスラッグを設定しておけば、案件名がわかるURLにできて管理もしやすくなります。アクセスログで社外のレビュアーが確認済みかどうかも把握できます。