Zenn
🌊

ふりがな自動入力の検証

2021/07/22に公開
JavaScript
tech

始めに

UXの向上のため名前を入力した際にふりがなを自動で入力したいことがあると思います。調べた感じ以下の2つのライブラリが有名っぽい気がしたのでそれぞれについて検証してみました。

サンプルはcodesandboxで書きましたので、動作を確認したい方は触ってみてください。

各ライブラリの使い方

vanilla-autokana

こちらはjqueryのプラグインにあるautokanaをインスパイアして作られたもののようです。DOM要素を指定するだけで後は自動で変換されるので楽ですね。

import * as AutoKana from 'vanilla-autokana';

AutoKana.bind('#name', '#kana');

ふりがなをカタカナにする場合はオプションを渡すだけでできます。

AutoKana.bind('#name', '#kana', {
  katakana: true
});

historykana

こちらは入力履歴を事前に持っておいて、それを渡すことでふりがなを出力する流れになります。

import historykana from 'historykana';

const inputHistories = [];
const elName = document.getElementById('name');
const elKana = document.getElementById('kana');

elName.addEventListener('input', (event) => {
  const text = event.currentTarget.value;
  inputHistories.push(text);
  elKana.value = historykana(inputHistories);
});

ふりがなをカタカナにするのはライブラリではできないので出力されたふりがなをカタカナに変換します。

function hiraToKana(str) {
  return str.replace(/[\u3041-\u3096]/g, (match) => {
    const charCode = match.charCodeAt(0) + 0x60;
    return String.fromCharCode(charCode);
  });
}

elName.addEventListener('input', (event) => {
  const text = event.currentTarget.value;
  inputHistories.push(text);
  elKana.value = hiraToKana(historykana(inputHistories));
});

またこちらはSafariでは動かないという報告がされていましたが、これはIME確定時に入力テキストの内容が想定と違って適切にinputHistoriesに入力履歴を持てていないのが原因でした。
したがってその辺を修正すると動くようになります。

  import historykana from 'historykana';

  const inputHistories = [];
  const elName = document.getElementById('name');
  const elKana = document.getElementById('kana');
 
+ let beforeComposedText = null;
+ elHistoryName.addEventListener('compositionstart', () => {
+   beforeComposedText = elHistoryName.value;
+ });
+ elHistoryName.addEventListener('compositionend', () => {
+   beforeComposedText = null;
+ });

  elName.addEventListener('input', (event) => {
    const text = event.currentTarget.value;
+   // SafariだとIME確定時に、確定前の文字列が取得されてしまうので、その時はスキップする
+   if (beforeComposedText === text) {
+     return;
+   }
    
    inputHistories.push(text);
    elKana.value = historykana(inputHistories);
  });

こちらの方が入力履歴を持つため書いたり消したりした際にかな変換の追従ができていそうな気がするのですが、ひろしと入力しただけなのにしだけになったりちょっと動作が不安定そうに感じました。

まとめ

ライブラリ2つについて触ってみましたが、実装の手軽さとバグの面を考えるとvanilla-autokanaの方が良さそうかなと感じました。ふりがな自動入力を検討する際の参考にしていただけると幸いです。

参考記事

https://qiita.com/ryo511/items/d83e1d80830e36d183e0
https://qiita.com/idani/items/33d3b72bef136860f261

Discussion