eHagaki Web Component Playground
eHagaki Web Componentを実際に作成して、公開API・イベント・設定・投稿内容・テーマ変更を確認できる操作ページです。
動作を確認する
作成したeHagaki Web Componentをここで操作できます。公開APIによる設定や投稿内容、テーマ変更の結果が表示されます。
設定と公開APIを試す
Web Componentの作成・削除・設定変更・イベントを実際に試せます。API名や技術的な結果も確認できます。
読み込むモジュールとファイルの場所
通常は、ページを開いたときに標準のモジュールを自動で読み込みます。別のモジュールを試す場合はURL末尾に ?manual=1 を付け、URLを編集してから「作成して表示（Create / Mount）」を押してください。手動モードでは、作成操作をするまで読み込みません。moduleUrl などのqueryだけで別モジュールを自動実行することはありません。
外部モジュールはこのページと同じJavaScript権限で動作します。関連ファイルのURLには実行可能なモジュールやworkerも含まれるため、信頼できるURLだけを指定してください。asset-baseは作成・再作成時にelementへ設定されます。読み込み後は別モジュールへ切り替えられないため、試す場合はページを再読み込みしてください。
Componentを作成・削除・再作成
Componentの作成、削除、再作成という基本的なライフサイクル操作を確認できます。削除後は、新しいComponentを作成できます。
初期設定と作成後の設定変更
Create / Mount時は、ここで指定した値を初期設定として適用します。作成後に値を変更した場合は、「設定を適用」を押すと、Componentを再作成せずに反映できます。
Web Componentは、このページと同じWindow realm / originで動作します。ローカル秘密鍵（nsec）の入力・保存・復元には対応しません。ログインには、秘密鍵自体を入力しないNIP-07（ページの window.nostr）またはNIP-46を利用してください。
投稿内容・返信・引用を指定
入力したNIP-19 note1... / nevent1... を、iframe protocolではなく直接 element.setContext(...) に渡します。channelのpayloadには reference と任意の relays/name/about/picture を指定できます。
iframeとの違い
Web Componentが常に安全という意味ではありません。host JavaScriptから秘密情報を隔離したい場合はiframeを使ってください。
| 項目 | iframe | Web Component |
|---|---|---|
| 分離方法 / API | originを分け、postMessage protocolとhandshakeで通信 | 同じWindow realmでmethod/property/CustomEventを使い、elementを作成・削除・再作成 |
| 認証 | parent-client auth/RPCやローカルnsecを利用可能 | parent-client auth/RPCとローカルnsecは使用しない。NIP-07はhostのwindow.nostrを直接利用し、NIP-46はeHagaki UIを利用 |
| データの保存 | storage/IndexedDBを親ページに委ねられる | localStorageは ehagaki.web-component.v1: namespace、IndexedDBはhost originの eHagakiDB |
| 更新 / 見た目 | iframeのreloadまたはpostMessage | setSettings()/setContext()、CSS Custom Properties |
| 安全な範囲 | iframeとは別のoriginとして分離可能 | trusted hostのみ正式サポート。hostは同じrealmのコードやstorageを確認可能 |
HTTP / WebSocket / Service Worker
- HTTP requestはhost Service Workerが観測可能です。
- Nostr relayはWebSocketです。Service Workerのfetch interceptionはrelay interceptionの証拠ではありません。
- host
window.WebSocketwrapperについてbrowser-level proofは現在未完了です。今回relay interceptor fixture/APIは追加していません。
テーマを変更する
テーマのプリセット、accent / base color、個別のCSS Custom Propertiesを変更し、表示中のComponentへの反映を確認できます。
テーマのプリセット
Componentを表示中なら、プリセットを選んだ直後に反映されます。
色を自由に指定
Accent / Baseは強制、default Accent / Baseは内部ユーザー設定より弱いdefaultです。空欄は未指定です。手入力値は「テーマカラーを適用」で反映されます。
詳細設定
個別tokenを指定すると、指定した項目だけを上書きします。空欄はeHagakiデフォルトです。
Accent / Baseはsurface生成に使われます。利用可能なCSS Custom Propertiesは Web Componentのガイド を参照してください。
イベントログ
公開APIやComponentの状態変化で発生したeventを確認できます。秘密情報・署名要求payload・raw Errorは表示せず、安全なsummaryだけを記録します。