ページでできること・できないこと
ページが動く隔離環境の仕様。利用できるブラウザ機能と、意図的に制限している機能。
ページは閲覧者のブラウザ上で、TrayPage アプリ本体から隔離された専用の sandbox 内で実行されます。これは共有相手のログインセッションやデータを、ページ内のスクリプトから守るための仕組みです。
自己完結した 1 枚の HTML 文書としてはほぼフルの表現力があります。一方で「外部との通信」「データの永続化」「他サービスの埋め込み」は意図的に制限しています。
なお、Markdown のページは TrayPage がサーバー側で HTML に変換して表示するため、この制限を意識する必要はほとんどありません。以下は主に HTML ページ向けの説明です。
できること
- JavaScript / CSS — インラインのスクリプトとスタイルはすべて動きます。
evalや WebAssembly も利用できます。 - CDN ライブラリ —
<script src="https://...">/<link href="https://...">で外部 CDN から読み込めます。Chart.js、Tailwind CSS（Play CDN）、Mermaid、D3 などがそのまま動きます。 - フォント・画像・動画・音声 — Google Fonts などの Web フォント、https で配信される画像・動画・音声、
data:/blob:URL。 - 描画とインタラクション — Canvas / SVG / WebGL、アニメーション、Web Worker（blob URL 経由）。
- リンク — ページ内のリンクは新しいタブで開きます。
- ダイアログとダウンロード —
alert/confirm/prompt、<a download>や blob URL によるファイル保存（「CSV でダウンロード」ボタンなど）。 - フォーム UI — 入力欄・選択肢・バリデーションは動きます。送信処理は JavaScript で行ってください（ネイティブ送信は後述のとおり不可）。
できないこと
| 機能 | 理由と代替 |
|---|---|
fetch / XHR / WebSocket での外部 API アクセス | 外部との双方向通信は遮断しています。表示したいデータはすべて HTML に埋め込んで投稿してください |
<iframe> での他サービス埋め込み（YouTube、Google Maps など） | 埋め込みは遮断しています。リンクとして貼れば新しいタブで開けます |
localStorage / sessionStorage / IndexedDB / Cookie | 隔離の仕組み上利用できず、アクセスすると例外になります。状態は JavaScript の変数として持ってください（リロードで消えます） |
<form> のネイティブ送信（action への送信） | 外部への送信経路になるため遮断しています。submit イベントを JavaScript で処理してください |
| カメラ・マイク・位置情報・通知 | 隔離された表示環境では利用できません |
ページを生成する AI への指示のヒント
AI にページを作らせるときは、次のような指示を加えると、上の制限を踏まえた HTML になります。
単一の自己完結した HTML ファイルとして出力してください。表示するデータはすべて HTML 内に埋め込み、fetch や外部 API は使わないでください。localStorage は使えないため、状態はメモリ上の変数で管理してください。CDN ライブラリ（script / link タグ）は利用できます。