「ミュータント HTML 侵入」の背後にあるヒント

10 月 17 日、私は devFest Nantes で「変異型 HTML の侵入」と題したワークショップを主催しました。

ワークショップには本来、参加者が参加する必要があるため、サポートとしてミニゲームを作成することにしました。これはオンラインで利用できる静的サイトであり、GitHub でオープンソース化されているため、改善することができます!

私が静的と言うときは、静的を意味します。リポジトリには、ローカルで動作するための基本的な HTTP サーバーを提供する役割を担うサーバーという単一の依存関係があり、サーバー自体には依存関係がありません。残りは HTML、CSS、JavaScript だけです。

そのおかげで基本に立ち返ることができ、効率が大幅に向上しました。しかし何よりも…たくさんのヒントやコツを発見してください!

ゲームの仕組み

ゲームを開始すると、まずキャラクターをカスタマイズします。このステップの唯一の目的は、レベルの視覚的な構造を発見し、選択した値がゲーム内のすべてのキャラクターにできるだけ早く適用されるようにすることです。鏡表現。

キャラクターを選択した後、トレーニング レベルでゲームの非常に単純な仕組みに慣れていきます。完成して提出するコードの一部はライブで実行され、ミュータントが徐々に侵入するエリアに影響を与えます。このコードは、ほとんどのレベルで mutationObserver に渡されるオプションですが、コールバック関数に含まれる場合もあります。

失敗または成功の場合は、モーダル ウィンドウで通知されます。このモーダル ウィンドウについて話しましょう!

の特徴

私は、2022 年の Paris Web で、その後 devFest Nantes で、「「良い HTML」を発見し、JS と CSS を保存する」というテーマ、 でこのことについて話しました。これは非常に興味深いものであり、最終的にはさまざまなコンポーネント ライブラリのすべてのモーダル ウィンドウ実装に取って代わるはずです。

ワークショップでは、いくつかの場所でそれを使用します。

1. ホーム画面にゲームルールを表示するには;
2. ミュータントの数が 100 を超えたときにレベルを中断します。
3. 機能しないコードを送信したときに失敗を通知するため;
4. 成功を通知するか、そうでない場合は、次のレベルに進むことができます。

開いた窓

ほとんどは、イベントに応じてプログラムによって開かれます。これ以上簡単なことはありません。

への参照を取得するだけです。 querySelector() または名前付きプロパティ アクセスによる識別子への参照を使用し、(MDN 上で) showModal() メソッドを呼び出します。

document.querySelector('dialog').showModal();

外部JavaScriptなし

ただし、不要なイベント リスナーの追加を避けるための例外が 1 つあります。ゲーム ルール ウィンドウは、HTML の onclick イベント ハンドラーを使用して呼び出されます。

<button type="button" onclick="rules.showModal()">Règles du jeu</button>
<dialog>



<h5>
  
  
  Aparté : la projection des identifiants HTML en objets globaux
</h5>

<p>Dans cet exemple, j’invoque l’ouverture de la fenêtre modale avec rules.showModal(), sans avoir défini la variable rules. Comment est-ce possible ? En résumé, tout élément porteur d’un attribut id devient mécaniquement une propriété globale de l’objet window, et devient donc accessible directement par son nom. C’est spécifié sous le joli nom de Named Access on Window Object (en anglais).</p>

<p>C’est drôlement pratique, non ? Figurez-vous que c’est aussi un vecteur d’attaque méconnu faisant partie d’un groupe sobrement intitulé DOM clobbering (en anglais). Je vous encourage à parcourir les recommandations de l’OWASP pour mitiger le DOM clobbering (en anglais).</p>

<h4>
  
  
  Accessibilité
</h4>

<p>La méthode showModal() permet d’ouvrir une fenêtre modale, pas une simple boîte de dialogue — en respectant les exigences en matière d’accessibilité : la focus est mécaniquement piégé dedans, la fermeture est possible avec la touche <kbd>Échap</kbd>, etc.</p>

<h3>
  
  
  L’arrière-plan
</h3>

<p>Une fois la fenêtre modale ouverte, on peut s’appliquer à la styler. Là où moult bibliothèques de composants imposent une </p>
<div> (voire plusieurs) pour servir d’arrière-plan à la fenêtre, la version native est livrée avec un pseudo-élément ::backdrop qui s’étend naturellement sur tout le viewport et est promue, avec la fenêtre modale, par-dessus le reste de la page dans ce qui est spécifié sous le nom de top layer.

<p>Vous n’avez plus qu’à lui appliquer une couleur, une opacité ou que sais-je encore. Dans le jeu, j’ai utilisé une propriété au nom évocateur de backdrop-filter pour appliquer un effet de flou grisé sur l’arrière-plan.<br>
</p>

<pre class="brush:php;toolbar:false">dialog::backdrop {
    backdrop-filter: grayscale(50%) blur(.25rem);
}

寸法

ゲームの表示モードをマスターしていないので、モーダル ウィンドウの幅に最新の CSS を少し使用して、幅が流動的になるようにしましたが、最小値と最大値は指定しました。

dialog {
    max-inline-size: clamp(50vw, 100%, 67.5rem);
}

max-inline-size プロパティは、フランス語の場合の max-width に対応する論理プロパティです。そして、clamp() 関数は小さな宝石であり、私のカンファレンスのスライド 27 で説明したように、値に基づいて CSS で擬似ブール値を取得するために、charts (英語) で多用しています。 CSS)」は、devFest Nantes 2023、TNT #24、DevQuest 2024 で開催されました。

ウィンドウを閉じる

Esc キーでモーダルを閉じる機能について説明しましたが、

要素との関連付けなど、ネイティブであることから他のスーパーパワーを引き出します。通常、モーダル ウィンドウではエントリに関連付けられたアクションを検証またはキャンセルできるため、これはごく自然なことです。

これが、ダイアログ値がフォーム送信メソッドに追加される理由です。 get や post などの HTTP メソッドではなく、HTML コンテキストに対応しており、親モーダル ウィンドウを直接閉じることができます。使い方はとても簡単です:

Et, pour revenir à du HTML à l’ancienne : saviez-vous qu’un bouton à l’autre bout du DOM peut soumettre un formulaire ? Il suffit de lui indiquer le formulaire à soumettre :

<button form="fermer">Fermer la fenêtre</button>

これで完成です。これは、識別子 close を使用してフォームを送信する送信タイプのボタンで、ボタン自体がダイアログ ウィンドウを閉じます。美しいですね。そして、この属性は (少なくとも) 2006 年に遡り、W3C Web Forms 仕様 (英語) ではその最初の草案は 2004 年に遡ります。

絵文字

このワークショップでは、邪悪な侵略者と装飾が必要でした。明らかに、イラストを手書きする時間も、ビジュアルを購入する手段もありません。インターネットで検索すると、私が探していたビジュアルの種類はトップダウン タイルセットと呼ばれるもので、これらの小さな設定やキャラクターは通常 8 ビットで、遠近感が潰れたものであることが分かりました。

8 ビットのビジュアルを見ることで、私は会議資料の古い習慣、つまりタイトルの最後に装飾的な絵文字を使用することにつながりました。くそー、でも確かにそうだよ！絵文字!

絵文字は素晴らしいです。これらは純粋にテキスト形式の Unicode ポイントであり、現在では Unicode の各バージョンに多数の新機能が追加されており、非常に多数です。順番に構成されたバリエーションもあります!

登場人物たち

私の意見では、Unicode シーケンスの最良の例は文字です。中立的な Nobody?男になれるのか？それとも女性ですか？男性性 ♂️ または女性性 ‍♀️ の Unicode ポイントを幅ゼロの結合子で区切って追加します。

消防士 ?‍? を取得するには、消防車 ?‍? を追加するだけです。人に? ！正直言って、それは素晴らしいことではないでしょうか？そして、性別や肌の色を追加することもできます。

パーソナライゼーション

したがって、最初のレベルでは、主人公の性別と肌の色をカスタマイズできます。

フォームはラジオ ボタンの 2 つのグループのみで構成されており、各グループには問題の Unicode ポイントに対応する値が含まれています。

document.querySelector('dialog').showModal();

それで終わりです。Firefox ユーザーは何もロードしませんが、他のユーザーはタイポグラフィをダウンロードして Firefox と同じものを表示します。次回からはより適切なブラウザを選択してください!

ウェブキット

トピックを準備するときによくあることですが、ブラウザーにいくつかの制限がありました。偶然にも、Safari と Epiphany のエンジンである WebKit には、Twemoji-COLR の色合いのバリエーションに問題があります。 Bugzilla (英語) でチケットを開くことができました。

JS を使用しない構文の強調表示

ゲームの仕組みでは、コードの一部が表示され (「ホール コード」を作成するため)、 からコードを入力します。および

コードの読み書きにとって、構文の強調表示は非常に実用的で楽しいものです。しかし、PrismJS (英語) やhighlight.js (英語) などのスクリプトをロードすることは、付加価値を考えると常に過剰に思えました。コードのブロックは最終的に DOM 内で解体されます。多かれ少なかれ読みやすいクラスを使用すると、構文上の役割に従ってテキストの各部分がスライスされます。まったく消化不良です。

しかし、ちょうど私がこのワークショップを準備していたときに、Heikki Lotvonen が驚くべき記事を公開しました: 構文強調表示が組み込まれたフォント (英語)。私の意見では、これは小さな革命です。OpenType の機能、特に COLR テーブルを利用したタイポグラフィです。 はもう不要です。読みやすくクリーンなコードに道を譲ってください!

OpenType 実装の詳細に興味がある場合は、この記事を読むことをお勧めします。私としては、@font-palette-values (MDN 上、英語) と override-colors プロパティ (MDN 上、英語) を使用して CSS で可能になるパレットのカスタマイズに重点を置きました。

ゲームでは次のようになります。カラー管理に CSS カスタム プロパティを利用しています。

document.querySelector('dialog').showModal();

結果は悪くないですよね?

これは純粋な段階的な改善です。ブラウザが COLR テーブル、@font-palette-values ルール、または override-colors プロパティをサポートしていない場合は、デフォルトの等幅のプレーン テキストが表示されるだけになります。

スペースインベーダー

私がとても楽しかった最後のポイントは、エイリアンのレベルです。エイリアンモンスターの絵文字？スペースインベーダーの船にとてもとてもよく似ています。侵略ゲームとしてはこれで十分です。

そこで、黒い背景、下にスクロールする侵略者のアニメーション、そして... スコアカウンターを参考にしたかったのです。

カウンター

CSS を長くやっている人なら、CSS カウンターについてすでに聞いたことがあるかもしれません。私たちのスコアは、存在するエイリアンの数に単純に対応します。

ただし、カウンターが 1 から始まり 100 まで上がった場合、元のゲームに 5 桁のカウンターがあったことを知っていれば、それはエレガントでも素敵な引用でもありません。幸いなことに、CSS では @counter-style を使用してカウンター スタイルをカスタマイズできます。

カウンター値の前に 0 を表示して 5 桁のカウンターを取得するには、次の宣言を使用します。

document.querySelector('dialog').showModal();

WebKit (再度)

ここでも WebKit には制限があります。DOM に要素を追加するときに CSS カウンターがインクリメントされません。 Bugzilla (英語) でこのチケットを開いたのは Karl Dubost でした。

色

スペースインベーダーを視覚的に引用するもう 1 つのハイライトは、明るい色です。使用されている絵文字にはオーバーロードできない色が付いているため、変更する必要があります。このテクニックは新しいものではありませんが、非常に便利です。CSS フィルターを蓄積して適切な色を実現します。

これは複雑な作業ですが、黒を 16 進コードに変換するフィルター ジェネレーターを提供してくれた Barrett Sonntag に感謝します (CodePen、英語)。唯一の制約は黒から始めることですが、これは最初にグレースケール(100%)、明るさ(0%)を適用することで簡単に解決できます。

<button type="button" onclick="rules.showModal()">Règles du jeu</button>
<dialog>



<h5>
  
  
  Aparté : la projection des identifiants HTML en objets globaux
</h5>

<p>Dans cet exemple, j’invoque l’ouverture de la fenêtre modale avec rules.showModal(), sans avoir défini la variable rules. Comment est-ce possible ? En résumé, tout élément porteur d’un attribut id devient mécaniquement une propriété globale de l’objet window, et devient donc accessible directement par son nom. C’est spécifié sous le joli nom de Named Access on Window Object (en anglais).</p>

<p>C’est drôlement pratique, non ? Figurez-vous que c’est aussi un vecteur d’attaque méconnu faisant partie d’un groupe sobrement intitulé DOM clobbering (en anglais). Je vous encourage à parcourir les recommandations de l’OWASP pour mitiger le DOM clobbering (en anglais).</p>

<h4>
  
  
  Accessibilité
</h4>

<p>La méthode showModal() permet d’ouvrir une fenêtre modale, pas une simple boîte de dialogue — en respectant les exigences en matière d’accessibilité : la focus est mécaniquement piégé dedans, la fermeture est possible avec la touche <kbd>Échap</kbd>, etc.</p>

<h3>
  
  
  L’arrière-plan
</h3>

<p>Une fois la fenêtre modale ouverte, on peut s’appliquer à la styler. Là où moult bibliothèques de composants imposent une </p>
<div> (voire plusieurs) pour servir d’arrière-plan à la fenêtre, la version native est livrée avec un pseudo-élément ::backdrop qui s’étend naturellement sur tout le viewport et est promue, avec la fenêtre modale, par-dessus le reste de la page dans ce qui est spécifié sous le nom de top layer.

<p>Vous n’avez plus qu’à lui appliquer une couleur, une opacité ou que sais-je encore. Dans le jeu, j’ai utilisé une propriété au nom évocateur de backdrop-filter pour appliquer un effet de flou grisé sur l’arrière-plan.<br>
</p>

<pre class="brush:php;toolbar:false">dialog::backdrop {
    backdrop-filter: grayscale(50%) blur(.25rem);
}

くどいですが、効果があります!

Webコンポーネント

そして、今のところ HTML と CSS についてしか話していないとは...詳しくは述べませんが、JavaScript の面では、Web を (少し楽しみすぎました)コンポーネント。要約すると:

• ＜変異体＞突然変異を表示し、その突然変異 (属性、属性値、内容、子孫などの変更) を管理するコンポーネントです。すべて不規則な間隔で、無秩序に行われます。
• フォーム機能を拡張して応答を標準化し、 に送信します。ウィンクの場合、応答をブロードキャストできるイベントのタイトルは voightkampff です。
• ＜遊び場＞は最も重要なコンポーネントです。侵入をトリガーし、voightkampff イベントを監視し、送信されたコードを実行して、(適切なモーダル ウィンドウを開くことによって) 評決を下します。

これらすべてにおいて、mutationObservers、間隔とタイマー、絵文字、ランダム値の生成を使ってたくさん遊んでみました。

結論

これらすべてに興味がある場合は、GitHub のゲーム リポジトリにアクセスして、そこでやりたいことを実行してみてください。

ゲームのプレイを開始したら、ゲームに添付されているスライドを参照してください。ゲームが進むにつれて、各ミュータントに独自のスライドがあることがわかります。答えは次のスライドに記載されているため、急いで先に進まないでください…

検査官を出動させてください!

---

この記事は、クリスマスに向けて Onepoint が公開する一連のテクノロジー記事「Advent of Tech 2024 Onepoint」の一部です。
Advent of Tech 2024 のすべての記事をご覧ください。