CompositionEventを利用してフリガナを取得する(その1)

モダンブラウザであれば、Compositionイベントを利用することが出来る事を知ったので、これを利用する事にした。
Compositionイベントは、IME入力が始まるとcompositionstartイベントが発火し、IME入力中はcompositionupdateイベントが、IMEが確定するとcompositionendイベントがそれぞれ発火すると言うもの。

autokana.jsは対象のテキストボックスにフォーカスが当たるとsetIntervalでテキストボックスの値を調べるという手法だが、モダンブラウザに限定してしまえば、compositionイベントを利用する方が良いように思った。
また値のチェックでフリガナ(と言うかルビ)を取得した文字列以外を正規表現で削除した結果をフリガナ(と言うかルビ)とする、と言う手法は利用させて頂く事にした。

さて、composition系のイベントだが、現在動作確認しているIEでは下記の問題が発生する事を確認し、それを回避するコードが必要になる。

1. Enter以外の方法でIMEを確定した場合、compositionendが発火しない

例えば「やまだ」と入力してスペースキーなどで変換候補を出した後にEnterを押下せずに「たろう」と続けて入力した場合である。

2.Windows 8.1のIEと標準のMS-IMEの組み合わせでIME入力中に入力中のテキストボックスをクリックしてもIMEが確定しない。

Windows8のIE10と標準のMS-IMEだったり、Windows 8.1のIE11とgoogle日本語入力だったりすると、この操作を行った場合はIMEが確定するが、上記の組み合わせの場合のみ以下の現象が発生する。
要は一旦は確定したのに、また未確定状態に戻ってしまうのである。

具体的には やまだたろう と入力してIME未確定状態で入力中のテキストボックスをクリックすると

compositionendが発火 ← これはOK
compositionstartが発火 ← ここからが余計な挙動
compositionupdateが発火

そしてcompositionstartイベントで取得出来るIME入力文字列として やまだたろう が取得出来る。
(通常の入力でいきなり複数文字が取得出来ることは無い)

また、choromeの54.0.xでは、compositionupdateイベントでは入力中の文字列が取得出来るのだが、最新バージョンの55.0.x にアップデートしたところ正常に動作しなくなった。。。orz

具体的な挙動は、例えば 山田太郎 と入力する場合、54.0.xでは
ｙ
や
やｍ
やま
やまｄ
やまだ
山田
ｔ
た
たｒ
たろ
たろう
太郎
とcompositionupdateで取得出来るが、55.0.xでは
ｙ
や
ｍ
ま
ｄ
だ
山田
ｔ
た
ｒ
ろ
う
太郎
と取得するようになってしまった。
恐らくバグだと思うのでchromeの55.0.xには対応しない方針で。(^_^;) (2017/1/3 対応しました)
上記の挙動はOpera 42.0でも同様だったことを確認。(2017/1/5)

あと全角SP入力での挙動が各ブラウザでまちまちなので、ここでまとめておく。(2017/1/5)

ブラウザ	compositionstart	compositionupdate	compositionend
Firefox 50.1	○	○	○
IE 11	○	×	○
Edge	○	×	○
Chrome 55.0	×	×	×
Opera 42.0	×	×	×
Safari 5.1.2	×	×	○
Safari 10.0.2	×	×	×

そもそもcomposotionupdateイベントは入力による発火なのか変換による発火なのかを判別するフラグがあっても良いと思うのだが。(^_^;)