フォーム入力を楽にするフリガナ自動入力
ECサイトで買い物や問い合わせ、会員登録などのフォーム入力をする際に、「フリガナ」の入力が必要になる場合があります。
出来るだけフォーム入力の手間をなくし、離脱率を減らすよう工夫が必要ですが、今回はフォーム入力をした際に名前の漢字に合わせたフリガナを自動で入力するjQueryプラグインをご紹介します。
名前を入力すればフリガナを自動入力できるjquery.autoKana.js
実装にはjquery.autoKana.jsというプラグインを使用します。
ダウンロードは以下より。
GitHub – harisenbon/autokana: Library for automatically rendering Furigana for inputted Japanese Text
設置方法は以下の通りです。
①jQueryライブラリを読み込み
まずはjqueryライブラリを読み込みます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
（GoogleのCDN利用する場合）
③jquery.autokana.jsを読み込み
上記のGithubからjquery.autoKana.jsをダウンロードして、サイト内にファイルを設置します。
②フォームのHTMLを確認し、セレクタを指定
フリガナ自動入力を設置するページ（カートページ、会員登録ページ）で設置したjquery.autoKana.jsファイルを読み込みます。
カートページや会員登録ページのHTMLはカートシステムで出力されるので、HTMLのコードを確認してinputタグをセレクタを指定する必要があります。
IDで指定できない場合でも、nameなどの属性でも指定が可能です。ひらがな、カタカナを選択することもできます。
$(function() {
$.fn.autoKana('xxxxx', 'yyyyy', {
katakana : true //true：カタカナ、false：ひらがな（デフォルト）
});
});
xxxxxに漢字を入力するinputを指定、yyyyyにフリガナを入力するinputを指定します
上記の方法で実装したのが下記でもサイトとなります。
デモサイト（フリガナ自動入力デモ）
※「お名前」に名前を入力すると「お名前(フリガナ)」にフリガナが自動的に入力されます。
モバイルではフォーム入力の手間を省くことが重要
スマートフォン、タブレットなどのモバイル端末ではフォーム入力がしづらいため、特に入力の手間を少なくすることが離脱率を下げることにつながり、結果ECサイトの売上にもつながります。
使用しているショッピングカートの標準機能としては提供されていない場合でも、今回ご紹介した手順で設置することも可能ですので是非お試しください。
