今回は【jQuery】フリガナの自動入力をしてくれるプラグインのご紹介!!
の解説になります!
こんな方に読んでほしい
- jQueryを学び始めた方へ
- お名前(漢字)からフリガナを自動で出力するプラグインを求めてる方向けです。
- 今回はautoKana.jsについて解説しております。
今回は、お名前(漢字)からフリガナを自動で出力するプラグインについての解説になります。
「autoKana.js」になりますが、設置方法もとても簡単ですので、フォームと合わせて覚えましょう。
autoKanaについて
autoKanaとは、日本語入力した際に、自動でフリガナにしてくれるプラグインのことを示します。
注意するポイント!
※ただし、正確でない場合もあります。例) 山田 → ヤマ になる場合もあります。
あくまで補助的な役割になりますので、導入するか検討してみてください。
まずは下記のサイトから「autoKana」をダウンロードしましょう。
ファイルをダウンロードできたら、以下のファイルを指定します。
「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を使用する上でいくつかの注意点があります。
注意するポイント!
● 例) 「山田 → ヤマ」 になる場合もあります、あくまで補助的な役割として使いましょう。
● 英字(ローマ字)と記号は変換されません。
● コピー&ペーストしたテキストはに変換されません。
● ひらがな、カタカナで入力し削除した場合は、ふりがな、フリガナ共に削除されるが、漢字に変換された場合は削除されない。
関連記事
郵便番号から簡単に住所検索
ajaxzip3のダウンロードから設置までの流れを解説
まとめ
今回はこれで以上です。
ファイルの設定から、構築までの流れの解説でした。
- POINT
- autoKanaとは、日本語入力した際に、自動でフリガナにしてくれるプラグインのことを示します。
- ※ただし、正確でない場合もあります。例) 山田 → ヤマ になる場合もあります。
あくまで補助的な役割になりますので、導入するか検討してみてください。 - 記述場所は、
head
内に指定するようにしましょう。 - autoKana.jsの注意点についても把握しておいてください。
- placeholder属性とは、入力欄に文字や値を薄く表示します。
スポンサーリンク

SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事