はじめに
日本語のフォームでよく見かける「お名前（ふりがな）」の入力欄。
漢字の名前とは別に、読み仮名をわざわざ手打ちしていた方も多いかと思います。
Chrome では、autocomplete機能にふりがな（カタカナ・ひらがな）が対応しました！！
これにより、ユーザーは一度登録したプロフィールから、ふりがな欄へも自動入力できるようになります。
開発者側も、正しく HTML を実装するだけで対応できるので、本記事で実装方法をまとめます。
基本的な実装方法
Chrome はふりがな欄を以下の3つの要素を元に判定します。
優先度の高い順に紹介します。
① autocomplete 属性（最優先）
autocomplete 属性に標準値を指定することが最も確実な方法です。
ふりがな（姓名共通）
<label for="phonetic-full">セイメイ</label>
<input id="phonetic-full" name="full-name-phonetic" type="text" autocomplete="name" />
姓のふりがな
<label for="phonetic-family">セイ</label>
<input id="phonetic-family" name="family-name-phonetic" type="text" autocomplete="family-name" />
名のふりがな
<label for="phonetic-given">メイ</label>
<input id="phonetic-given" name="given-name-phonetic" type="text" autocomplete="given-name" />
注意：
autocompleteに標準以外の値（例：autocomplete="phonetic-name"など）を指定すると、ヒューリスティックが機能しなくなります。必ず標準値を使用してください。
② name 属性
autocomplete 属性を指定しない場合、フィールドの name 属性が参照されます。
以下のような値が有効として認識されます。
| 対象 | name 属性の例 |
|---|---|
| フルネーム | full-name-phonetic |
| 姓 | family-name-phonetic |
| 名 | given-name-phonetic |
<input name="family-name-phonetic" type="text" />
<input name="given-name-phonetic" type="text" />
③ ラベル
name 属性でも判別できない場合、最後の手段としてフィールドに紐づく <label> のテキストが参照されます。
<label for="phonetic-family">セイ（フリガナ）</label>
<input id="phonetic-family" type="text" />
カタカナ・ひらがなの判別ロジック
Chrome はふりがなをカタカナで入力するか、ひらがなで入力するかを ラベルのテキスト から自動判別されているようです。
- ラベルにカタカナが1文字以上含まれている場合
- → カタカナで自動入力
- それ以外
- → ひらがなで自動入力
<!-- カタカナで入力される例 -->
<label for="phonetic-family">セイ</label>
<input id="phonetic-family" name="family-name-phonetic" type="text" autocomplete="family-name" />
<!-- ひらがなで入力される例 -->
<label for="phonetic-family">せい</label>
<input id="phonetic-family" name="family-name-phonetic" type="text" autocomplete="family-name" />
フォームのデザインに合わせてラベルを調整するだけで、入力文字種を制御できます。
DevTools でデバッグする
実装が正しくできているか確認するには、Chrome DevTools の自動入力パネルを使います。
- DevTools を開く（F12 または右クリック → 検証）
- 「その他のツール」→「自動入力」 パネルを開く
- フォームの入力フィールドにフォーカスを当てる
- フィールドが
Alternative family nameやAlternative given nameとして分類されているか確認する
正しく分類されていれば、Chrome がふりがな欄として認識できています。
↓ 試してみてください！
See the Pen given-name by degudegu2510 | Qiita (@degudegu2510) on CodePen.
ユーザー側の設定
ユーザー側では chrome://settings/addresses でプロフィールにふりがなを保存できます。
また、姓名の分割精度を上げるために、ふりがなの間にハイフン（-）やカタカナ中黒（・）などの区切り文字を入れておくと、Chrome が正確に分割しやすくなります。
まとめ
Chrome の自動入力でふりがなに対応するためのポイントをまとめます。
-
autocomplete属性に標準値（name/family-name/given-name）を必ず指定する -
name属性にはfamily-name-phoneticのような形式を使う - ラベルにカタカナを含めるとカタカナで、そうでなければひらがなで自動入力される
- DevTools の「自動入力」パネルで正しく認識されているか確認できる
ユーザーの入力体験が向上するので、日本語対応フォームを持つサービスはぜひ対応してみてください！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。