SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

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

こんな方に読んでほしい

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

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

autoKanaについて

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を使用する上でいくつかの注意点があります。

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

関連記事

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

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

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

まとめ

今回はこれで以上です。
ファイルの設定から、構築までの流れの解説でした。

POINT
  • autoKanaとは、日本語入力した際に、自動でフリガナにしてくれるプラグインのことを示します。
  • ※ただし、正確でない場合もあります。例) 山田 → ヤマ になる場合もあります。
    あくまで補助的な役割になりますので、導入するか検討してみてください。
  • 記述場所は、head内に指定するようにしましょう。
  • autoKana.jsの注意点についても把握しておいてください。
  • placeholder属性とは、入力欄に文字や値を薄く表示します。
スポンサーリンク

SHU

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

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top