プロンプトとスコープ
日本語の仮名、繁体字中国語の注音符号（Zhuyin）、ピンイン（Pinyin）向けのコンテンツコンポーネントを設計してください。rubyマークアップをどのように構造化し、多層注釈をサポートし、検索とコピーを処理し、CSS Rubyが利用できない場合にフォールバックし、スクリーンリーダーのリスクを評価しますか？
W3Cは2026年6月4日にHTML Ruby Markup Extensions Candidate Recommendation Snapshotを公開しました。これはHTMLのruby構造を改訂し、rbとrtcを適合要素として復帰させ、ベース（親文字）、注釈、コンテナ、および複数の注釈レベルのセマンティック単位を定義しています。これは翻訳コンポーネントではなく、スクリーンリーダーのすべての読み上げ戦略を確定するものでもありません。セマンティックマークアップ、レイアウト、支援技術の動作を分離して考える必要があります。
面接官が評価するポイント
面接官は、構造化されたベースと注釈のペアリング、インターリーブ（interleaved）マークアップと表形式（tabular）マークアップの間の論理的な選択、および発音を画像に埋め込むのではなくCSS Ruby Layoutを使用することを重視します。言語属性、検索とコピー、rpのフォールバック、SSR／ハイドレーションの一貫性、XSSの安全性、スクリーンリーダーテストの限界について網羅してください。
回答前に確認すべき質問
- コンテンツソースはベースと注釈のペアを提供しますか、それともコンポーネントがそれらを分割して生成する必要がありますか？
- 1つのベースに、注音とピンインを併記するなど、複数の言語または注釈レベルを持たせることは可能ですか？
- Rubyレイアウトが利用できない場合、プロダクトはインラインで括弧を表示すべきですか、注釈を非表示にすべきですか、それとも生の構造を維持すべきですか？
- 検索、クリップボードへのコピー、音声読み上げ（TTS）はそれぞれ何を保持すべきですか？
- ユーザーによるコンテンツ投稿は可能ですか？また、どのHTML要素、属性、URL、CSPルールが許可されていますか？
30秒の回答フレームワーク
「ベース範囲、注釈範囲、言語、表示ポリシーをモデル化し、セマンティックなruby、rb、rt、rtc、rpを出力します。インターリーブマークアップは単純なペアを処理し、明示的なコンテナや表形式マークアップは暗黙のペアリングに頼ることなく複数文字および多層注釈を処理します。CSSがRubyの位置とフォールバックスタイルを制御し、Rubyレイアウトが利用できない場合はrpが表示可能なインラインコンテンツを提供します。検索とコピーはプロダクトのセマンティクスに従い、実ブラウザでテストします。スクリーンリーダーの出力は仕様で保証されたものと見なすのではなく実機テストします。ユーザーコンテンツはレンダリング前にサニタイズします。」
ステップバイステップの詳細解説
1. 注釈データモデルを定義する
各セグメントには、ベース範囲、1つ以上の注釈範囲、言語タグ、および表示ポリシーが含まれます。日本語は仮名、繁体字中国語は注音またはラテン文字のピンインを使用する場合があります。1つのベースが複数のrtcレベルを持つことができますが、デフォルトのレベルは明示的である必要があります。セグメンテーションルールがコンポーネント全体に分散しないよう、モデルとレンダリングを分離してください。
2. セマンティックマークアップを選択する
rubyは全体コンテナ、rbはベース単位、rtは注釈テキスト、rtcは注釈コンテナ、rpはフォールバック表示です。単純なケースでは暗黙のベース単位を使用できますが、複雑な複数文字のペアリングでは明示的なrbを使用して、DOM、コピー動作、レイアウトの予測可能性を維持する必要があります。
3. 複数文字および多層ペアリングを処理する
インターリーブマークアップは、単純な1対1の注釈に適しています。表形式マークアップは、複数のrb単位に続いてそれらに対応するrt単位をリストするため、複合語や多層的な読みをより適切に表現できます。連続するrt要素はrtcでグループ化し、各言語層にlangを設定します。検索、コピー、支援技術が確実に認識できないため、CSS擬似要素に実際の発音を配置してはなりません。
<ruby lang="zh-TW">
<rb>美</rb><rtc><rt>ㄇㄟˇ</rt></rtc>
<rtc lang="zh-Latn"><rt>měi</rt></rtc>
</ruby>4. プログレッシブなレイアウト向上のためにCSSを使用する
HTMLは構造を提供し、CSS Ruby Annotation Layoutがruby-position、フォントサイズ、行の高さ、配置を制御します。デフォルトでは、注釈がベースを覆い隠さないようにし、テキストの拡大を許可する必要があります。Rubyレイアウトが利用できない場合、rpで括弧やその他のインラインの手がかりを表示できます。display: noneですべての注釈テキストを非表示にしてはいけません。
5. 検索、コピー、抽出を設計する
仕様書では検索やコピーのインタラクションについて議論されていますが、実装には実ブラウザでのテストが依然として必要です。コピーに対象としてベースを含めるか、ベース＋注釈を含めるか、構造化エクスポートを含めるかを定義します。検索は、注釈によってDOMが分断されても単語を見失うことなく、ベースと注釈の両方を見つけられる必要があります。サーバーのインデックスには構造化フィールドを保存できます。クライアントがレンダリングされたHTMLに対して正規表現を用いてペアを推測すべきではありません。
6. 支援技術と国際化を評価する
ルビは子供、非母国語話者、読字に困難を抱える人々を支援できますが、スクリーンリーダーは異なるヒューリスティクスを使用する場合があります。正確なlang値を設定し、意味のあるテキスト順序を維持し、スクリーンリーダー、キーボードナビゲーション、ズーム、ハイコントラストをテストします。仕様がテキスト読み上げを完全に解決すると主張せず、既知の差異とフォールバックを文書化してください。
7. セキュリティ、パフォーマンス、互換性を検証する
要素と属性のホワイトリストを使用して、ユーザーから提供されたベースと注釈をサニタイズします。スクリプト、イベント属性、危険なURLは拒否します。SSRとハイドレーションは、注釈のちらつきやテキストの並び順の乱れを防ぐために、同じペアリングアルゴリズムを共有する必要があります。長いドキュメントには構造化ノードとインクリメンタルレンダリングを使用し、安全でないHTMLではなくデータモデルをキャッシュし、WPTとブラウザマトリックスでテストします。
高品質な回答サンプル
セマンティックなrubyマークアップを出力する前に、ベース範囲、注釈レベル、言語、表示ポリシーをモデル化します。単純なペアにはインターリーブ構造を使用できます。複数文字や多層の注釈には明示的なrbとrtcを使用し、各言語レイヤーにlangを設定します。CSS Ruby Layoutが位置、サイズ、行の高さを制御し、Rubyレイアウトが利用できない場合はrpがインラインのフォールバックを提供します。コピーはデフォルトでベーステキストを対象とし、検索はベースと注釈の両方をインデックス化し、正確な動作は実ブラウザでテストします。支援技術による音声読み上げはこの仕様によって完全に統一されているわけではないため、スクリーンリーダー、キーボード、ズーム、ハイコントラストをテストし、差異を文書化します。入力はサニタイズされ、SSRとクライアントは単一のデータモデルとペアリングアルゴリズムを使用し、WPTとブラウザマトリックスで構造、レイアウト、検索、コピー、セキュリティを検証します。
よくある間違い
- CSS擬似要素のみで発音を表示する → 検索や支援技術がテキストを見失う → セマンティックなRubyマークアップを使用する。
- すべての文字をインターリーブノードとしてハードコードする → 複合語や多層の読みが脆くなる → 構造化ペアリングと
rtcを使用する。 rpを必須の可視約物として扱う → サポートされているブラウザでコンテンツが重複表示される → フォールバック表示でのみ表示する。langを無視する → 音声読み上げやフォント選択が誤ったものになる → ベース層と注釈層に正確にタグを付ける。- スクリーンリーダーで同一の読み上げ順序を保証すると約束する → 仕様は完全なTTS動作を定義していない → デバイスでテストし、差異を文書化する。
- ユーザーのHTMLを直接レンダリングする → スクリプト注入が可能になる → 要素、属性、URLをサニタイズする。
フォローアップの質問と回答
暗黙的なベースの代わりにrbを使用すべきなのはどのような場合ですか？
暗黙的なベースは、単純な単一層の注釈に適しています。複合語、表形式マークアップ、またはペアリング、コピー、デバッグのために安定したDOMを必要とするアプリケーションには、明示的なrbを使用します。
1つのベースに仮名とローマ字表記がある場合はどうしますか？
複数のrtcレイヤーまたは明示的な注釈コンテナを使用し、それぞれにlangを設定します。プロダクト側でデフォルトのレイヤーと切り替えポリシーを選択する必要があり、CSSがセマンティクスを決定すべきではありません。
Rubyレイアウトが利用できない場合のフォールバックは何ですか？
テキスト構造を維持し、rpを使用して括弧やインライン区切り文字を表示することで、ベースと注釈の可読性を保ちます。コンテンツを非表示にしたり、選択不可能な画像に置き換えたりしないでください。
コピー動作はどのように定義しますか？
プロダクトの目的に応じてベース、ベース＋注釈、または構造化エクスポートを選択し、Chromium、Firefox、Safari、モバイルでテストします。DOM順が必ずしもユーザーの意図した文字列になるとは限りません。
注釈のアクセシビリティが維持されていることをどのように示しますか？
注釈なし、単一層、多層、フォールバックの各モードにおいて、言語タグ、フォーカス順序、ズーム、キーボード操作、スクリーンリーダーの出力を確認します。支援技術に関する既知の差異を公開します。