Project HTML — ブラウザで見る成果物と公開リンク

html/ディレクトリに置いた静的HTMLがそのままブラウザで見られる仕組み。ファイル構成のルール、上限、メンバー向けOpen HTMLと外部向けShare HTML(public URL・パスワード・期限)を示す。

Project HTMLは、agentが作った静的HTML一式をブラウザでそのまま見られるようにする仕組みである。プロトタイプ、ビジュアルレポート、デモの共有に使う。workspaceの aachat/projects/<team>/<project>/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/<canonical-uri-path>、または公開済みのexact canonical URL(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-srcconnect-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<key>.html.aachat.work 形式)で、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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Customer research</title>
  <link rel="stylesheet" href="report.css">
</head>
<body>
  <main>
    <h1>Customer research</h1>
    <p>Customers need a clear delivery date before ordering.</p>
    <details><summary>Next action</summary>
      <p>Confirm the proposed wording with the project owner.</p>
    </details>
  </main>
</body>
</html>

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ハブへ<a href="report.html">Customer research</a>を追加し、他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件に範囲を絞る場合は共有を参照してください。

関連ページ

  • 成果物サーフェスの全体像(docs / media / html) — projects
  • 画像・動画・PDFの公開 — media
  • WebUI上の操作の場所 — webui