--- title: "Project HTML — ブラウザで見る成果物と公開リンク" description: "html/ディレクトリに置いた静的HTMLがそのままブラウザで見られる仕組み。ファイル構成のルール、上限、メンバー向けOpen HTMLと外部向けShare HTML（public URL・パスワード・期限）を示す。" --- # Project HTML — ブラウザで見る成果物と公開リンク Project HTMLは、agentが作った静的HTML一式をブラウザでそのまま見られるようにする仕組みである。プロトタイプ、ビジュアルレポート、デモの共有に使う。workspaceの `aachat/projects///html/` にファイルを置くだけで同期され、専用の同期コマンドはない。ファイルの作成・更新・削除は通常のファイル編集そのままである。 ## ファイル構成のルール - 入口は `html/index.html`。project作成時にハブとなる `index.html`（Pagesナビ付き）が自動生成されている。複数ページの成果は兄弟の `.html` を追加してハブからリンクし、単一のレポート・アプリなら `index.html` を丸ごと置き換える - CSS / JS / データファイルも `html/` 配下に置き、**相対パス**で参照する。単一ファイルである必要はない - 上限は **1ファイル5 MiB / 500ファイル / project合計50 MiB** - パスは相対のみ。先頭の`/`、`..`、先頭segmentが`__aachat` / `_aachat` / `_media`のpathは拒否される。これらはProject HTMLのdelivery / virtual endpoint用予約名である - 同じprojectのMediaはProject-rootの`./media/`、または公開済みのexact canonical URL（[media](/ja/docs/media)）で参照する。nested HTML / CSS / JavaScript / JSONでも意味は変わらない - Media pathの各segmentをUTF-8 bytesへ変換し、ASCII英数字と`-`、`.`、`_`、`~`だけをrawで残し、それ以外を大文字`%HH`へencodeする。例: `素材/hero #1.png` → `./media/%E7%B4%A0%E6%9D%90/hero%20%231.png` - Media referenceはUTF-8の`.html` / `.css` / `.js` / `.mjs` / `.json` sourceへcompleteなstatic tokenとして書く。comment、text、unused codeにあるexact tokenもdependencyになる - Service Worker / Web Worker / Shared Workerは使えない。HTMLにsecretやトークンを埋め込まない Project HTMLは`frame-ancestors 'none'` / `X-Frame-Options: DENY`によりiframe等への埋め込みを拒否し、camera / microphone / location / payment / USB等のdevice API、Worker、通常contentからのform送信も拒否する。content配信はGET / HEADのみ。例外として、password保護されたpublic shareの認証formだけは同じshare originへの限定POSTを受け付ける。HTMLへcredentialを埋め込まない。network requestはviewer browserの権限で実行される。 Project HTML内の通常JavaScriptは許可され、member previewでもpublic shareでも各viewerのbrowser上で実行される。delivery CSPは`script-src`と`connect-src`を定義していないため、scriptはviewer browserの規則に従ってnetwork requestを開始できる。生成HTMLは開く・共有する前に確認し、secretや特権credentialを埋め込まない。 ## HTML pageを見る（member向け） Project HTML catalogは、ブラウザで開くpageと補助fileを分けて表示する。 - **Pages** は各 `.html` をfilenameとpathで表示する。rowを選ぶと、そのpageをisolated originの新しいtabで開く - **Assets** はCSS、JavaScript、画像等の補助fileをまとめ、構成を確認するときまで折りたたむ - `Updated` はaachatが受理した最後のsource更新時刻であり、配信用snapshotのpublish時刻ではない sourceの同期と配信用snapshotのbuildは別の段階である。Page rowを開けるのはlatest buildが配信中のときだけ。更新後はrebuild pendingになり、成功して初めて新しいsnapshotへ切り替わる。rebuildが失敗した場合は以前の正常snapshotを配信し続けるが、catalogはそれをlatest sourceが入ったpageとして開かない。HTML catalogの状態とerrorを確認し、原因を直して再度syncする。 legacy `/_media/`、noncanonical encoding、unresolvedまたはnot-readyのMediaがある場合、source syncは拒否せずlatest buildがfailedになる。diagnosticのreferenceを修正するか、同じpathのMediaをreadyへpublishする。`/_aachat/media/...`、dependency ID、provider URL、signed URLはready snapshot用のgenerated delivery detailなのでsourceへ書かない。 ## 共有する — Share HTML（外部向けpublic URL） 外部の人にURLだけで見せたい場合は、project画面の **Share HTML** でpublic URLを発行する（Collaborator / Adminのみ）。 - public URLは **projectに1つだけ**。「Enable and copy」で有効化し、Copy / Extend / Password / Reset link / Stop sharingを管理できる - 期限付きで、**既定は7日、最大30日**。Extendで延長する - パスワード保護を任意で設定できる - URLの実体は共有用サブドメイン（`h.html.aachat.io` 形式）で、Reset link（rotate）すると旧URLは無効になる - agentはpublic URLを発行できない。公開の判断と操作は人間が行う ## 小さなレポートを作る active ProjectでCollaborator/Adminの編集権限を使い、執筆SessionはProjectをcoverageに持つ必要があります。`aachat up`稼働中に、次を`aachat/projects/acme/customer-research/html/report.html`へ保存します。Project pathは自分のものへ置き換え、併せて`html/report.css`を保存します。この例にbackendや外部scriptは不要です。 ```html Customer research

Customer research

Customers need a clear delivery date before ordering.

Next action

Confirm the proposed wording with the project owner.

``` `html/report.css`: ```css body { margin: 0; font: 1rem/1.6 system-ui, sans-serif; color: #172033; } main { max-width: 48rem; margin: auto; padding: 2rem; } summary { cursor: pointer; font-weight: 600; } ``` 既存の`html/index.html`ハブへ`Customer research`を追加し、他pageへのlinkを残します。単一レポートだけのProjectなら、レポート自体を`html/index.html`として保存できます。CSSはHTML fileからの相対pathなので、subdirectoryへ移す場合は参照も直します。 同期とlatest buildの成功後、**HTML → Pages → report.html**を開きます。見出し、中央に読みやすく配置された本文、選択すると開くNext actionが期待結果です。member閲覧のためにpublic shareを有効にする必要はありません。ready Mediaを表示する場合は前述のcanonical参照規則を使い、ローカル画像名だけでpublish済みと判断しません。 Project HTMLがhostするのは静的ファイルです。serverの起動、DB接続の用意、credential注入、閲覧者への作者のProject API権限付与は行いません。DB結果が必要なら静的data fileを用意し、共有前にその内容も確認します。 ## 更新・共有の失敗を確認する pageがない場合はProject path、編集権限、file上限、同期、catalog診断を確認します。pendingはsource受理から利用可能な新buildまでの途中です。failedなら指摘されたpathやMedia参照を直して再保存します。以前の正常snapshotが見えることは、新sourceが反映された証拠ではありません。 Share HTMLは選んだpageだけでなくProjectのbuild済みHTML面を公開します。有効化前に全file、data、script、Media依存先を確認します。その後の正常buildも共有先へ反映されます。public readerが開けない場合は、期限、password、reset/stop状態、Project状態、latest buildを確認します。Reset linkは旧URLを無効にし、Stop sharingは公開を停止しますが、相手が保存済みのコピーは回収しません。文書1件に範囲を絞る場合は[共有](/ja/docs/sharing)を参照してください。 ## 関連ページ - 成果物サーフェスの全体像（docs / media / html） — [projects](/ja/docs/projects) - 画像・動画・PDFの公開 — [media](/ja/docs/media) - WebUI上の操作の場所 — [webui](/ja/docs/webui)