フォームでフリガナを自動入力 vanilla-autokanaの使い方

Webフォームで氏名や住所のフリガナ入力を求められたらどうしますか？私は画面に唾を吐きかけて思いつく限りの悪態をつくことにしています。面倒ですよね。あーあ、フリガナを自動入力してくれたらなぁ。

この記事では、Webフォームでフリガナを自動入力してくれるJavaScriptライブラリvanilla-autokanaの使い方を解説します。

vanilla-autokanaとは

フォームのフリガナ自動入力ライブラリで最も有名なのはjquery.autoKanaですね。ただしこれはjQueryが必須です。

jQueryなしでも動作するライブラリとして開発されたのがこのvanilla-autokanaです。jquery.autokanaにインスパイアされて作られたものです。いや、オマージュと言ったほうがいいのかもしれません（どっちでもいい）。

動作サンプル

氏名の欄に入力してみてください。フリガナが自動入力されましたね。マーヴェラス！

vanilla-autokanaのインストール

vanilla-autokanaは npm, GitHub, CDN のいずれかの方法でインストールできます。

npmでインストール

npmでインストールする場合は、以下のコマンドを実行します。

npm i vanilla-autokana

GitHubからダウンロード

GitHubからダウンロードすることもできます。

下記のリンクへ飛んで、緑色の「Code」ボタンをクリック、「Download ZIP」をクリックです。

CDNを使う

下記のCDNを使うこともできます。

vanilla-autokanaの使い方

vanilla-autokanaを使うときの基本的なコードは次のようになります。

<script src="https://cdn.jsdelivr.net/npm/vanilla-autokana/dist/autokana.min.js" defer></script>

<form>
  <label>氏名</label>
  <input type="text" id="name">

  <label>氏名フリガナ</label>
  <input type="text" id="furigana">
</form>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    AutoKana.bind('#name', '#furigana', { katakana: true });
  });
</script>

コードの解説

ライブラリの読み込み

1行目で、ライブラリを読み込んでいます。defer属性を追加して、JSファイルの読み込みがHTMLのパースを邪魔しないようにします。

上記の例ではCDNを使っています。npmやGitHubからダウンロードした場合は、dist/autokana.jsを読み込みましょう。

<!-- npm -->
<script src="./node_modules/vanilla-autokana/dist/autokana.js" defer></script>

<!-- GitHub -->
<script src="./vanilla-autokana-master/dist/autokana.js" defer></script>

idの指定

5行目と8行目、氏名の入力欄とフリガナの出力欄に任意のidを指定します。

自動入力処理

11〜15行目はフリガナの自動入力をするためのJapaScriptのコードです。

AutoKana.bind()メソッドの第1引数に氏名入力欄のid、第2引数にフリガナ出力欄のidを指定します。

第3引数を{ katakana: true }にするとフリガナの出力がカタカナになり、{ katakana: false }にするとひらがなになります。省略するとひらがなになります。

複数の入出力欄がある場合

フォーム内で複数のフリガナ自動入力をしたいときは、次のようにします。

<form>
  <label>氏名</label>
  <input type="text" id="sei">
  <input type="text" id="mei">

  <label>氏名フリガナ</label>
  <input type="text" id="sei_kana">
  <input type="text" id="mei_kana">
</form>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    AutoKana.bind('#sei', '#sei_kana', { katakana: true });
    AutoKana.bind('#mei', '#mei_kana', { katakana: true });
  });
</script>

ES Modulesとしてimportする方法

vanilla-autokanaはES Modulesとしてimportすることができます。下記はCDNを使う場合の例です。

<script type="module">
  import AutoKana from 'https://cdn.jsdelivr.net/npm/vanilla-autokana/+esm';
  AutoKana.bind('#name', '#furigana', { katakana: true });
</script>

さいごに

たった数行のコードで導入できるフリガナ自動入力ライブラリのvanilla-autokanaについて解説しました。

vanilla-autokanaを使ってユーザのフォーム入力負担を軽減し、コンバージョン率アップを目指しましょう。

でわでわ