00:00:00今のインターネットには、もっと遊び心が必要だと思うんです。特にAIが
00:00:03ウェブサイトを一瞬で生成できるようになってからはなおさらです。
00:00:05ウェブをもっと楽しくするのが簡単だったらどうでしょう？こんなふうに。心配しないで、
00:00:09邪魔するつもりはありません。ただこのウェブサイトで少し遊んでいるだけです。見ての通り、
00:00:13下の方に私の目がたくさんありますね。それと、もし登録ボタンを押せるなら、
00:00:17あなたも押してみてください。
00:00:18その代わりに、サイトにもっと機能的かつ美しいインタラクションを求めているかもしれません。
00:00:22あるいは、登録解除するためにピンボールをプレイさせるような新しいダークパターンを試したいとか。あるいは、
00:00:27長い一日の仕事の後に、ビールを片手にコンピュータの前に座って、
00:00:30仮想のコンピュータの前にビールを持って座り、Twitterでも眺めたいなんてことも。そういったすべてが、
00:00:34「HTML in Canvas」という技術のおかげで可能になります。それについてお話ししましょう。
00:00:43これについては、Twitterのマット・ローゼンバーグのおかげで最近知りました。そして、
00:00:46その投稿を見てから、Twitterでは面白いデモが次々と登場する一週間が始まったようでした。
00:00:50ウェス・ボスもこれを試していて、とても楽しそうでした。それから、
00:00:54AAによるフィンガーガンのデモも見ました。そして、両方のデモが
00:00:58冒頭でお見せしたYouTubeのデモのインスピレーションになりました。ですから、紹介したデモのソースはすべて
00:01:02下の説明欄にリンクしておきますので、もっと見てみたい方はぜひチェックしてください。
00:01:05さて、「HTML in Canvas」とは何でしょうか？手短に言えば、
00:01:10WebGLや2Dキャンバスの中に、本物のインタラクティブなDOM要素を直接配置できるというものです。現時点ではまだ提案段階です。
00:01:15実際にChrome Canaryに試験機能として追加されました。だからこそ、最近こういったデモが
00:01:19たくさん登場しているのです。皆さんもChrome Canaryでフラグを有効にすれば試すことができます。
00:01:24次の疑問は「なぜ？」かもしれませんね。なぜなら、Canvasは素晴らしい
00:01:28UIやカスタマイズを実現できるからです。これまで見てきたような、
00:01:32CSSでは困難、あるいは不可能なこともあります。しかし、Canvasは複雑なテキストレイアウトやHTMLコンテンツを
00:01:38簡単にレンダリングすることはできません。内部で一から再構築する必要があるのです。そのため、Canvas
00:01:42ベースのコンテンツはアクセシビリティ、国際化、パフォーマンス、品質といった面で問題を抱えがちでした。
00:01:47そして、それらはHTMLによって大部分が解決されている課題です。つまり、HTML in Canvasは両方の
00:01:51いいとこ取りができる技術なのです。
00:01:52仕組みをお見せするために、実際に使ってみるデモを通してお話しします。私が持っているのは、
00:01:56AIが簡単に生成できるようになるずっと前に私が作った、ロンドンの地下鉄時刻表サイトです。
00:02:00この情報をThree.jsのシーン内に表示できたらクールだと思っていたんです。
00:02:02もちろんThree.jsでテキストを表示することは技術的に可能です。しかし、
00:02:08HTML in Canvasを使って、時刻表のHTML要素をそのままシーンの中に配置する方がずっと簡単です。
00:02:12ですから、ここのきかんしゃトーマスの画像の代わりに、HTMLを表示させたいと思います。まず最初の手順は、
00:02:16シーン内でレンダリングしたいHTMLを用意して、
00:02:20Canvasの中に配置することです。これが、先ほど見たボードを作り出しているHTMLです。
00:02:24これをCanvas自体の小要素（子要素）として配置します。現在、この
00:02:28要素はCanvasのフォールバック（代替）として機能しています。つまり、何らかの理由でCanvasが
00:02:32ブラウザで読み込めない場合、ユーザーは代わりにこの要素を見ることになります。
00:02:36それは私たちが望むものではありません。これを解決するために、HTML in Canvasでは
00:02:39Canvas要素に対して「layout-subtree」という属性を指定します。
00:02:44これにより、ブラウザはCanvasの小要素を実際のレイアウト参加要素として扱うようになります。
00:02:48つまり、アクセシビリティツリーに追加され、フォーカスを受け取れるようになります。しかし、
00:02:52画面上にはまだ描画されません。私のデモでも、
00:02:56まだ何も表示されていないのがわかります。要素はどこにも表示されませんが、
00:03:00要素を検証してホバーすると、技術的にはレンダリングされていることがわかります。
00:03:04ただ、透明になっているだけです。実際にCanvasに描画するためには、
00:03:08これをテクスチャに変換する必要があります。そうすれば、トーマスの画像の代わりに使うことができます。
00:03:12それが、まさにここにある関数で行っていることです。ほとんどはThree.jsの処理なので
00:03:15心配はいりません。最初の部分は単純にテクスチャを取得する処理で、
00:03:19現在はきかんしゃトーマスの画像です。そして、次の行で
00:03:22HTML in Canvasの「drawElementImage2D」という関数を使っています。
00:03:27少し複雑に見えますが、やっていることはThree.jsのテクスチャに
00:03:30要素を適用しているだけです。レンダリングの方法に関する情報を、
00:03:34カラースペースやGPUのための設定として提供していますが、あまり気にする必要はありません。
00:03:38そして、レンダリングしたいHTML要素も指定します。この場合は、
00:03:42「board」というIDの要素です。これは、document.getElementByIdを使って
00:03:45Canvas内に配置した要素を取得しているものです。これで
00:03:49デモに戻ると、画像の代わりに時刻表が表示され、ライブ更新されているのがわかります。
00:03:53時計も更新されていますし、時刻も変化していますね。これで、
00:03:57HTML要素を使いながら、Canvas上のテクスチャとして提供できるようになりました。要素を検証すると、
00:04:02ボードの要素が透明な状態でレンダリングされ続けているのがわかります。
00:04:06これは本質的に、その要素をスクリーンショットに撮って、
00:04:09テクスチャとして配置していると考えることができます。そのため、要素が再レンダリングされるたびに更新されます。
00:04:14これはHTML Canvasのペイントイベントによって行われており、
00:04:19Canvasの子要素の再レンダリングが検出されると更新がトリガーされます。
00:04:22また、requestAnimationFrameと同じように、再描画をリクエストすることも可能です。
00:04:26まだ少し混乱している場合は、GitHubの提案ドキュメントをチェックすることを強くお勧めします。
00:04:30情報やデモが豊富に載っています。正直なところ、私はThree.jsとWebGLを使う
00:04:34少し複雑なルートを選びましたが、最も基本的な例を見たければ、
00:04:38Canvasの中にフォーム要素などを入れるだけでいいんです。
00:04:42そして、それをCanvasに描画したい場合は、単に「context.drawElementImage」を呼び出し、
00:04:46フォーム要素と配置場所を指定するだけです。これが、
00:04:49HTML in Canvasの最もシンプルな形です。あと、本当に手短に
00:04:54こちらのデモもお見せしたいです。とても楽しいと思います。WebGPUと「copyElementImage」関数を
00:04:58使って、ゼリーのようなスライダーの下にdivを描画しています。面白いですよね。
00:05:02でも、本当にクールなのは、裏側ではまだinput要素が使われているということです。
00:05:07とてもクールなカスタム入力になっているだけです。これがHTML in Canvasが実現できる可能性です。
00:05:11ただし、提案ドキュメントでも改善しようとしている課題がいくつかあります。重要なのは
00:05:16やはりパフォーマンスです。今のところ少し不安定な部分があります。他にも、
00:05:19「drawElementImage」がDOMの状態より1フレーム遅れるといったバグもあります。
00:05:24視覚的なズレが生じてしまうんです。それに、Canvasの
00:05:28子要素にスクロールバーを入れようとすると、そのままクラッシュしてしまうそうです。ですが、これが試験的な機能である理由です。
00:05:32まさに彼らが求めているフィードバックです。また、HTML要素を
00:05:36レンダリングできるということは、JavaScriptを通じて通常得られる以上の情報が漏洩しないか、
00:05:40というプライバシーの懸念も指摘されています。そのため、
00:05:44システムカラー、テーマ、設定、スペルや文法のマーカー、
00:05:48閲覧済みリンク情報など、機密性の高い情報を除外するプライバシー保護ペイントリスクの措置がとられています。
00:05:52懸念されているのは、指紋採取（フィンガープリント）のための新たなデータ収集ポイントを増やしたくないという点でしょう。
00:05:56いずれにせよ、私はこれまで見てきたものが気に入っています。ぜひ実験段階を越えて普及してほしいです。
00:06:00皆さんがどう思うか非常に興味があります。ぜひ下のコメント欄で教えてください。
00:06:04チャンネル登録もお忘れなく。それでは、また次回お会いしましょう。
00:06:07登録を。それでは、いつものように次の動画でお会いしましょう。