iFrameとサニタイズの変更

2024年11月06日 11:06

現在、シート開発のためのコード・サニタイズの2つのシステムが含まれています：レガシーシステムとニューシステムです。

コード・サニタイゼーションの変更

シート開発では、コード・サニタイズが2つのシステムに分割され、変更の混乱なく選択できるようになった。

レガシーのサニタイズ・システムは、HTMLとCSSの両方のサニタイズに、より制限的なガイドラインを使用しています。

デフォルトでは、GitHubリポジトリにある既存のシートはすべてレガシー・システムにオプトインされています。これにより、シート作成者は自分のペースで新システムに移行することができ、レガシー・システム上の既存のシートは以前と同じように機能します。

新しい除菌システムを使用していて、レガシーに戻したい場合は、以下の手順に従ってください：

カスタム・シート・エディター
- ゲームの設定ページで、コードエディタの上にある "Legacy Sanitization "チェックボックスを選択してください。

HTML、CSS、Javascriptのオプションと制限について、コミュニティが素晴らしいWiki記事を用意しています（https://wiki.roll20.net/Building_Character_Sheets#Restrictions）。

新しいサニタイズ・システムでは、受信するCSSのサニタイズがなくなり、受信するHTMLに付加される制限やルールも大幅に緩和された。

デフォルトでは、私たちのレポ、カスタム・シート、カスタム・シートのサンドボックス・ゲームからの新しいシートはすべて、新しいシステムにオプトインされます！簡単だ！

レガシー・システムを使用していて、新システムにスワップしたい場合は、以下の手順に従ってください：

カスタム・シート・エディター
- ゲームの設定ページで、コードエディタの上にある "Legacy Sanitization "チェックボックスの選択を解除してください。

通常通りにHTMLとCSSを書き始める！私たちは、できるだけ従来の開発に近い経験をさせたいと考えている。クラス、id、ブレークポイント、アニメーションなど、ほとんどの項目が動作します。

しかし、現時点ではまだ考慮すべきいくつかの制限がある：

すべてのHTML要素や属性が利用できるわけではなく、まだいくつかの制限があります。
- 制限タグの例: link, video, iframe, meta
- 制限属性の例：自動再生、ダウンロード、クリック時

Javascriptはまだ制限されており、シートワーカー経由で利用する必要がある。
- シートワーカーについてはこちらをご覧ください： https://wiki.roll20.net/Sheetworkers
ロールテンプレートはレガシーなサニタイズシステムを使用するため、https://wiki.roll20.net/Building_Character_Sheets#Restrictions。

これは大変な作業のように思えるかもしれませんが、私たちは、これらの変更によって、より効率的で改善された方法でシートを開発できるようになることを望んでいます。

これは、新システムに変換するために行う可能性のあることの一般的な概要であるが、決してすべてを網羅しているわけではなく、あなた自身のプロセスやフローに依存するものである。

この新システムに移行する際、作業中のシートに追加するための素晴らしいヒントを考えてみよう：

より良いアクセシビリティ・サポート
- 我々は現在アリアタグ, セマンティックHTMLおよびその他のネイティブに提供される関数をサポートするようになりました。
- ここでは、この分野の表面をかすめるに過ぎない素晴らしい読み物をいくつか紹介しよう：

レスポンシブデザイン
- 近い将来、私たちのモバイルアプリがローンチされる予定ですが、そこでキャラクターシートを美しく見せたいのです！
- ブレークポイント、ID、新しいHTMLタグをサポートするようになりました。
- このトピックに関する素晴らしい記事をいくつか紹介しよう：

プリントスタイリング
- キャラクターシートを別ウィンドウで開き、ブラウザまたはデバイス固有の印刷機能を使用して印刷することができます。注意事項として、キャラクターシートのスタイルや一部のデータが欠落したり、影響を受けたりする可能性があります。
- 現在印刷メディア・クエリをサポートするようになりました。これにより、シート作成者は、ユーザが印刷を望む場合に特化したシート・スタイルを作成できるようになります。