『Webブラウザエンジニアリング』第13-14章を読みました。
以下の書籍を13章と14章を読みました。
もうコードを詳しくトレースするのを諦めました。笑
1章から12章の感想については、以下で書いています。
- 『Webブラウザエンジニアリング』第1~3章を読みました。 | ジブンノート - silverbirder.github.io
- 『Webブラウザエンジニアリング』第4~6章を読みました。 | ジブンノート - silverbirder.github.io
- 『Webブラウザエンジニアリング』第7~8章を読みました。 | ジブンノート - silverbirder.github.io
- 『Webブラウザエンジニアリング』第9~10章を読みました。 | ジブンノート - silverbirder.github.io
- 『Webブラウザエンジニアリング』第11章を読みました。 | ジブンノート - silverbirder.github.io
- 『Webブラウザエンジニアリング』第12章を読みました。 | ジブンノート - silverbirder.github.io
CSSアニメーション
opacityを使ってフェードイン・アウトするアニメーション実装することがあります。
本章だと、そのアニメーションを実装してみます。
現時点での実装で、JavaScriptでopacityを0.1から0.999へ増やすフェードインのアニメーションを実装してみました。
すると、カクカクしたアニメーションになります。
ラスタリングとサーフェス合成、描画がそれぞれ遅いのです。
そこで、CPUからGPUに乗り換えます。
GPUは、単純計算を並列処理するのが得意です。
CPUの得意領域もありますが、実装を簡単にするため全てGPUで処理するように置き換えました。
これまで同様、キャッシュとダーティビットを駆使して、最適化を行なっていきます。
本書で、以下のページのリンクがありました。
Chromiumのレンダリングエンジンについての解説です。
イラスト付きで紹介されているので、一読してみると良いかもしれません。
アクセシビリティ
（ブラウザ視点だと）アクセシビリティとは、ユーザーがWebページとの対話方法を変更したりカスタマイズして、より使いやすくできること です。
状況によっては、ダークモードやズーム、キーボードショートカットが便利に感じる時があります。
ズーム
まずは、ズーム機能の実装をしました。
Ctrl+ や Ctrl- で、文字を拡大縮小する機能です。
それらのキー入力があれば、zoom 数値変数をincrement/decrementさせ、
その数値を係数にレイアウトの計算を使用します。
比較的、サクッと実装ができました。（12,13章が難解すぎたんだ...)
ちなみに、ズームはタブ（ページ）だけであり、クロームUIは対象外となります。
以下は、ズームの変化前後の画面です。
lorem ipsum
lorem ipsum という、出版やデザイナー向けのダミーテキストがあるようです。
名前は聞いたことありませんが、どこかで見たことがあるかもしれません。
ダークモード
ズームの次は、ダークモードの実装をしました。
Ctrl+dをトリガーに、ダークモードへ切り変えます。
こちらは、クロームとタブ（ページ）どちらも色を反転させます。
クロームの方が簡単なので、dark_mode 変数を定義してそれに応じて、背景色や文字色を変化させます。
タブの方が少し複雑です。
デフォルトの背景色や文字色なら、素直に反転すれば済みます。
よりカスタマイズする場合は、CSSのメディアクエリを実装します。
prefers-color-scheme です。
CSSParserを改造し、メディアクエリをパースできるように修正後、
prefers-color-scheme に従った色を設定するようになりました。
以下は、ライトモード・ダークモードの画面です。
キーボードナビゲーション
マウス操作ではなく、キーボード操作で移動できるようにしたいです。
クロームUIは比較的簡単です。
ズーム機能実装時と同じように、指定キーの組み合わせで機能を実現します。
新規タブ作成、タブ移動、ブラウザ終了などを実装しました。
次は、タブの中のキーボード移動です。
クリック可能な要素間をタブ移動できて、エンターキーでクリックをできるようにします。
そのためには、フォーカス実装を行います。
既にfocusプロパティは実装があったので、ボタンやリンクにフォーカスできるようにして、
フォーカス可能な要素一覧とフォーカス位置を使って、タブ移動できるようにします。
エンターキーによる操作は、リンク移動やボタン押下などがあるのでアクティブ化と呼びます。
さらに、tabindexを実装することで、タブ移動対象外にしたり、タブ順序を指定できるようにしました。
フォーカスが当たっているかどうか視覚的にわかりやすくするように、
フォーカスリングの実装も行いました。
画面外にある要素へのフォーカスをする場合は、スクロール移動も行います。
かなり、現在のブラウザの挙動に近しい実装ができてきました。
以下は、this is a link へタブ移動してフォーカスが当たっている画面です。
スクリーンリーダー
画面の文字を読み上げる、スクリーンリーダーを実装したいと思います。
文字の読み上げ機能は、gTTS を使って実現できます。
何を読み上げるかというと、画面の文字を上から下まで素直に読み上げれば良いと思うのですが、
それを表すデータ構造を保持していません。
DOMツリーやレイアウトツリーは保持していますが、読み上げに不要な情報が多いです。
（例えば、スタイリングのためのdivは不要です）
そこで、アクセシビリティツリーという、ロール情報などを保持するツリーを構築します。
HTMLの要素には、デフォルトのroleというのが存在するため、それらをツリー構造で保持するようにします。
roleに加えて、テキストも保持するようにします。
アクセシビリティツリーができると、スクリーンリーダーをするためのショートカットキーを作成して、
先ほど作成したアクセシビリティツリーを上から読み上げていきます。
これに加えて、フォーカス移動したら、フォーカス移動したことを読み上げる機能も実装します。
終わりに
アクセシビリティの章に、以下の文章が書かれていました。
アクセシビリティツールが一度構築されると、創造的な人々は設計者が予期しない状況でそのツールを活用する方法を見つけ出す
キーボードショートカットを実装することで、Webアプリの大量の注文処理を筋肉の記憶（マッスルメモリー）で活用すると書いていて、
ちょっとクスッとしました。
私も創造的な人になりたいです。。。
-
※ ログイン不要で投稿できます。
※ 同じブラウザから投稿を削除できます。
0
読み込み中...
関連する記事
タグ「書籍レビュー」の記事
以下の書籍を12章を読みました。 12章は難解でした。 https://www.oreilly.co.jp/books/9784814401574/ 1章から11章の感想については、以下で書いています。 『Webブラウザエンジニアリング』第
2026年04月03日
以下の書籍を11章を読みました。 11章はかなり奥が深いので、1つの章のみの感想になります。 https://www.oreilly.co.jp/books/9784814401574/ 1章から10章の感想については、以下で書いています。
2026年03月29日
以下の書籍を9章から10章まで読みました。 https://www.oreilly.co.jp/books/9784814401574/ 1章から8章の感想については、以下で書いています。 『Webブラウザエンジニアリング』第1~3章を読み
2026年03月27日