ニュース

「Google Chrome」の自動入力機能で姓名のふりがなサポートが改善

Webサイトの制作側から名字と名前を分けてふりがな設定もできる

「Google Chrome」で日本語のふりがな名の自動入力サポートが改善

 Googleは4月15日(日本時間)、「Google Chrome」の自動入力機能を強化したと発表した。日本で使われる漢字とふりがなの両方の名前フィールドを自動で区別して入力できるようになっている。以前は漢字の氏名欄は自動入力できても、ふりがな欄は空欄のままになることが多かった。

 HTML標準ではふりがなに関する値が設定されていないが、「Google Chrome」の自動入力では、autocomplete属性、項目のlabel、フィールドのname属性の3つのシグナルに基づくヒューリスティックを使用して、ふりがなフィールドを識別するとしている。autocomplete属性は標準値以外の値を使用すると自動入力が正しく機能しないため、開発者はこの属性を欠落させるか、以下のように通常の名前の対応する値に設定する必要がある。

  • よみがな(氏名):autocomplete="name"
  • よみがな(姓):autocomplete="family-name"
  • 名(フリガナ):autocomplete="given-name"

 標準のautocomplete値は通常の名前と読み方の両方に適用されることから、「GoogleChrome」は『nameテキスト』と『<label>テキスト』を使用して区別する。「Google Chrome」がふりがなフィールドの識別に使用する有効な文字列と文字は以下の表の通り。

フィールドタイプ有効なフィールド名有効なフィールドlabel
フリガナ(フルネーム)full-name-phonetic セイメイ せいめいセイメイ・せいめい
よみがな(姓)family-name-phonetic セイ せいセイ・せい・姓ふりがな
よみがな(名)given-name-phonetic メイ 名ふりがなメイ・めい・名ふりがな
<form>
  <!-- Full phonetic name -->
  <label for="phonetic-full">セイメイ</label>
  <input id="phonetic-full" name="full-name-phonetic" type="text"/>

  <!-- Family phonetic name -->
  <label for="phonetic-family">セイ</label>
  <input id="phonetic-family" name="family-name-phonetic" type="text"/>

  <!-- Given phonetic name -->
  <label for="phonetic-given">メイ</label>
  <input id="phonetic-given" name="given-name-phonetic" type="text"/>
</form>

 カタカナやひらがなを自動で判別することも可能。フィールドのname属性ではなくlabelを調べて使用する仮名が決定される仕組み。カタカナが1文字以上含まれている場合はカタカナ入力になり、それ以外の場合はデフォルトでひらがなが使用される。

labelの例と使われる仮名の種類
フィールドのlabel仮名の種類
セイメイ(カタカナ)カタカナ
せいめい(ひらがな)ひらがな
Phonetic full name (English)ひらがな
セイメイせいめい(混合)カタカナ