【jQuery】フリガナの自動入力をしてくれるプラグインのご紹介!!

シュウ

今回は【jQuery】フリガナの自動入力をしてくれるプラグインのご紹介!!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
お名前(漢字)からフリガナを自動で出力するプラグインを求めてる方向けです。
今回はautoKana.jsについて解説しております。

今回は、お名前(漢字)からフリガナを自動で出力するプラグインについての解説になります。
「autoKana.js」になりますが、設置方法もとても簡単ですので、フォームと合わせて覚えましょう。

[記事の内容]

autoKanaについて

autoKanaとは、日本語入力した際に、自動でフリガナにしてくれるプラグインのことを示します。

注意するポイント！
※ただし、正確でない場合もあります。例) 山田 → ヤマになる場合もあります。
あくまで補助的な役割になりますので、導入するか検討してみてください。

まずは下記のサイトから「autoKana」をダウンロードしましょう。

●autokanaにアクセス: 1https://github.com/harisenbon/autokana

●「Code」ボタンをクリック: 2

●「Download ZIP」ボタンをクリック: 3

ファイルをダウンロードできたら、以下のファイルを指定します。
「js/〇〇〇〇」のjsはフォルダの名前になり、/(スラッシュ)は階層を示します。
階層を間違えると反映しないので注意が必要です。

<script type="text/javascript" src="js/jquery.autoKana.js"></script>

次に、jquery本体のプラグイン設置します。
今回は2つ目のパターンを採用して解説します。

● 1つ目は、ファイルをダウンロードして使用するパターン、
● 2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

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

必ず、jquery本体のプラグイン上、autoKanaを下に設置しましょう。
jqueryをダウンロードしたい方は、こちらのリンクから。

記述場所について

基本的にはhead内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】フリガナの自動入力.....</title>
<!--JS-->	
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.autoKana.js"></script>
</head>
<body>

　フォームが入ります。

</body>
</html>

お名前とフリガナについて

シンプルな方法になります。
※ただし、正確でない場合もあります。例) 山田 → ヤマになる場合もあります。
書き方は以下のようになります。

<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】フリガナの自動入力.....</title>
<!--JS--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.autoKana.js"></script>
<script type="text/javascript">
$(function() {
    $.fn.autoKana('input[name="name"] ', 'input[name="kana"]', {katakana:true});
});	
</script>
</head>
<body>

<form>
  <div>
   <label>お名前</label>
    <input type="text" name="name" placeholder="山田 太郎">
  </div>
  <div> 
   <label>お名前(フリガナ)</label>
   <input type="text" name="kana" placeholder="ヤマダ タロウ">
  </div>  
</form>

</body>
</html>

/*--一部省略しております--*/
label {display: block;}

input[type="text"] {
  width: 100%;
  padding: .5em;
  box-sizing: border-box;
  font-size: 1rem;
  border: solid 2px #cccccc;
  border-radius: 5px;
}

form div + div {margin-top: 1em;}

placeholder属性とは、入力欄に文字や値を薄く表示します、入力例などを表示するときに指定します。
placeholderで指定した文字や値は入力する際に、消えますので問題はありません。

「フリガナ」から「ふりがな」に変更したい場合は下記のように変更します。

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

変更点について、上記と違い、「katakana:true」を削除しました。
katakanaプロパティの初期値はfalseになり、ひらがなを自動入力してくれます。

autoKana.jsの注意点について

autoKana.jsを使用する上でいくつかの注意点があります。

注意するポイント！
● 例) 「山田 → ヤマ」になる場合もあります、あくまで補助的な役割として使いましょう。
● 英字(ローマ字)と記号は変換されません。
● コピー＆ペーストしたテキストはに変換されません。
● ひらがな、カタカナで入力し削除した場合は、ふりがな、フリガナ共に削除されるが、漢字に変換された場合は削除されない。

郵便番号から簡単に住所検索

【jQuery】郵便番号から簡単に住所検索プラグインのご紹介!!

ajaxzip3のダウンロードから設置までの流れを解説

type=”text”	【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!
select	【HTML】selectの使い方、プルダウンメニューを作成しよう!
output	【HTML】outputの使い方、計算結果を表示させよう!
fieldset	【HTML】fieldsetの使い方、フォーム入力欄をグループ化しよう!