ふりがなをフォームに自動入力してくれるjavascriptプラグインjquery.autoKana.jsの設置方法

ECサイトやお問い合わせなどのフォームでフリガナの入力を求められことがあります。たいていは名前などの固有名詞を入力してからの入力になるのですが、その入力作業と連動して「フリガナ」が自動入力されたら便利ですよね！
ということで今回は、フォーム入力に連動してフリガナをjavascriptで自動入力してくれるjQueryプラグインjquery.autoKana.jsをご紹介します。　カタカナ、ひらがな、どちらでも変換できる便利なプラグインです、ぜひご確認ください。

jquery.autoKana.jsにできること苦手なこと
jquery.autoKana.jsの使い方

jquery.autoKana.jsにできること苦手なこと

実際に設置する前にjquery.autoKana.jsでできることできないことを確認しておいてた方がいいと思うのでご紹介します。

jquery.autoKana.jsは前文でも触れたように、名前などを入力する際に自動でフリガナを出力してくれるプラグインです。「名前」と「カナ」を入力する必要があるフォームなどに設置しておくと、「名前」フォームを入力している間に「カナ」のフォームにフリガナを自動で出力してくれるのでユーザビリティも高まります。
出力される文字に関しては、設置時にカタカナに変換するか、ひらがなに変換するかを選択することができます。

これだけ、見るととても便利なプラグインですが、苦手なこともあります。それは次のようなことです。

key入力を読み取ってフリガナを出力するしくみなので、コピー＆ペーストされたテキストはフリガナに変換されない。
一度入力したものを削除した場合、それがひらがなもしくはカタカナだった場合はフリガナも削除されるが、漢字に変換された場合は削除されない。
漢字などを実際の読み方とは違う読みで変換した場合そのままフリガナフィールドに反映されてしまう。（例えば従来「山道」と書いて「サンドウ」と読む場合でも、「ヤマミチ」と入力して漢字に変換してしまった場合、カタカナフィールドには「ヤマミチ」と出力される。）
一度入力した文字の前や間に文字を再度入力した場合、フリガナのフィールドでは、後方に配置されてしまう。（例えば「山川」と入力した後に「山海川」と変更した場合フリガナフィールドには「ヤマカワウミ」と出力される。）
英字・記号は出力されません。

「山道」の例は当然といえば当然でしょうか、でもまぁ、難読漢字などが含まれる名前の場合はこういった方法で入力することもあると思います。いづれにしてもメリット・デメリットがあるのでフリガナの自動入力はあくまでも補助的なものと考え、導入前によく検討しておくことをお勧めします。

jquery.autoKana.jsの使い方

ダウンロード

jquery.autoKana.jsは下記からダウンロードします。
GitHub
Codeから複数まとめてダウウンロードした場合jquery.autoKana.js以外にもファイルが含まれる場合がありますが、必要なのはjquery.autoKana.jsだけです。

ダウンロードしたら、jquery本体とともにhtmlに読み込みます。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1"></script>
<script type="text/javascript" src="jquery.autoKana.js"></script>

1 2	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1"></script> <script type="text/javascript" src="jquery.autoKana.js"></script>

設置方法

フォームのサンプルを用意しました。

<div>
<input type="text" name="sei" placeholder="姓"><input type="text" name="mei" placeholder="名" id="mei">
</div>
<div>
<input type="text" name="seikana" placeholder="セイ"><input type="text" name="meikana" placeholder="メイ" id="meikana">
</div>

<div>

</div>

<div>

</div>

「姓」に文字が入力がされると「セイ」に、「名」に入力されると「メイ」にそれぞれカタカナでフリガナが挿入されるフームを用意しました。Javascriptでこの作業をさせるのにはもちろん個々のフォームを判別するためのkeになる部分が必要になるわけですが。このサンプルでは「name=””」と「id=””」の2パターン用意しました。「名」、「メイ」にidを入れているのはそのためです。

Javascriptの設定

$(function() {
    $.fn.autoKana('input[name="sei"] ', 'input[name="seikana"]', {katakana:true});　//name属性で判別する場合
    $.fn.autoKana('#mei', '#meikana', {katakana:true});　//idで判別する場合
});

$(function() {

$.fn.autoKana('input[name="sei"] ', 'input[name="seikana"]', {katakana:true});　//name属性で判別する場合

$.fn.autoKana('#mei', '#meikana', {katakana:true});　//idで判別する場合

});　

上記をわかりやすく解説すると次のようになります。

$.fn.autoKana(‘入力元になるフォームの値’, ‘出力先になるフォームの値’, {katakana:true});

カナの自動出力箇所が複数になる場合は$.fn.autoKana( ～ ); の設定もその数分用意することになります。
katakana:trueの部分は、出力する文字をひらがな表記にするかカタカナ表記にするかを設定している部分になります。katakana:trueと設定すると、カタカナで出力されます。ひらがなで出力させたい場合はkatakana:falseとするかデフォルトがひらがななので ,{ katakana:true } の部分を記述しないでおくといった方法でも可能です。

設置デモサンプル

最後にサンプルを設置しておきますのでぜひ試してみてください。

ひらがな出力デモ

<div><input type="text" name="namae" placeholder="名前"></div>
<div><input type="text" name="namaekana" placeholder="ふりがな"></div>

1 2	<div><input type="text" name="namae" placeholder="名前"></div> <div><input type="text" name="namaekana" placeholder="ふりがな"></div>

$(function() {
    $.fn.autoKana('input[name="namae"]', 'input[name="namaekana"]');
});

$(function() {

$.fn.autoKana('input[name="namae"]', 'input[name="namaekana"]');

});