振り仮名を自動的に入れる

ウェブページのフォーム (「お問い合わせ」や「申し込み」など) に氏名を入力する際、振り仮名の入力を求められることがあります。先の記事「振り仮名のカタカナ入力」では、「ウェブフォームの振り仮名入力は、基本的にはひらがなにすべきではないか」と提言しましたが、さらに踏み込んで考えると、氏名 (漢字表記) の入力と同時に、振り仮名 (ひらがな) も自動的に入力されると、より便利と言えそうです。

以下、試しに実装してみました。




このインタラクションの優れているところは、「お名前」欄に入力すると「ふりがな」欄にも自動的に入力されることと、即座に「ふりがな」欄を修正できることです。最近は難しい読みかたのお名前も多く、必ずしも振り仮名の自動入力がスムーズに機能するとは限りませんが、それでも、振り仮名をゼロから入力するよりは部分的に変更できるほうが、ユーザーにとっては楽かなと思います。誤った内容のテキストボックスを部分的に編集させることで、かえって誤入力 (修正漏れ) を引き起こさないか、という意見もあるかもしれませんが、珍しいお名前の方は自覚的に注意深く読み仮名を確認するでしょうし、多くのユーザーにとっての利便性も併せて考えると、この手法は検討してみる価値がありそうです。

なお、上記の実装は、jQuery プラグインの「autoKana.js」を使わせていただいています。JavaScript が無効なユーザーエージェントの場合、単に振り仮名の自動入力が機能しなくなるだけという形になるので、プログレッシブエンハンスメントの考えかたにも沿っています。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加