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

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を使ってユーザのフォーム入力負担を軽減し、コンバージョン率アップを目指しましょう。

でわでわ

vanilla-autokanaの使い方

この記事が気に入ったら
いいね または フォローしてね!

シェアしてね

コメント

コメントする

目次