JavaScript/jQuery

【jQuery】AutoKanaを使ってふりがなを自動で入力しよう!

あきぞらです。

ホームページやアプリを作っていて、フォームを実装することがよくあると思います。

そんなとき、自動でフリガナを入力してくれるプラグインがあります。

これによって、ユーザの負担を減らすことができます。

今回は、そのプラグインを紹介していきます。

ふりがなを自動で入力してくれるautokana

ふりがなを自動で入力してくれるのが、autoKanaというプラグインです。

Githubはこちら

さっそく実装する方法を紹介します。

まずはjQueryとautokanaのダウンロード

まずはjQueryが使える状態にします。

jQueryのダウンロードと読み込み

こちらからjQueryをダウンロードします。

今回は「Download the compressed, production jQuery 3.5.1」を選びます。

リンクを右クリックして、

「名前を付けてリンク先を保存」を選ぶとファイルを保存できます。

これを適当な場所に配置してあげます。

そして、jQueryが使えるように、HTMLのヘッダータグのなかで読み込みます。

<head>
...
<!-- ファイルを配置したパスを指定して読みこませる -->
<script src="./jquery-3.5.1.min.js"></script>
...
</head>

autokanaのダウンロードと読み込み

autokanaをダウンロードします。

こちらからダウンロードできます。

ダウンロードしたらjquery.autoKana.jsを適当な場所に配置し、読み込ませます。

<head>
  ...
  <!-- ファイルを配置したパスを指定して読みこませる -->
  <script src="./jquery-3.5.1.min.js"></script>
  <script src="./jquery.autoKana.js" language="javascript" type="text/javascript" defer></script>
  ...
</head>

セレクタを利用して、自動入力する要素を指定する

autokanaを使っていきます。

例えば、以下のようなHTMLがあったとします。

漢字を入力するinput要素と、かな入力を行うinput要素があります。

<input id="name" type="text" placeholder="ここに氏名を入力してください">
<input id="kana" type="text" placeholder="ここにふりがなを入力してください">

この入力項目に対して、氏名を入力したときに、

ふりがなも自動で入力されるように実装してみます。

$(document).ready(function($){
  try {    
    $.fn.autoKana('#name', '#kana', {
      katakana : false
    });
  } catch (error) {
    console.log(error);
  }
});

idで要素を取得します。

$.fn.autoKanaの部分で、セレクタを使って入力元の要素と自動入力させる要素を指定します。

今回で言うと、#name#kanaの部分です。

また、katakana : false の部分で、ふりがなをひらがなにするようにしています。

katakana : trueと指定することで、カタカナで入力することもできます。

これでフォーム入力のユーザビリティをあげることができますね!

では、また。

-JavaScript/jQuery

Copyright© あきぞらてっく , 2025 All Rights Reserved Powered by AFFINGER5.