今更だけどbosyuにハッシュタグを作ったのは私だ
僕だけではないんですけどね。
タイトルは釣りですね。
と言うことで、つくったよ〜〜っていうのを今更報告するともに、どう動いているかとか、困ったわこれ。っていうのをまとめていこうと思います。
これね！
あ、めろたんです。
アイキャッチのリスはリスです。
岐阜県にいます。
みなさんも是非行ってみてください。
今回は、主にフロントエンドで「やっぱつれえわ」となったところを書いていこうかな〜と思います！
バックエンド編はまた別で書かれるはず(はず)
文字変換のつらさ
日本語っていうのは文字を入力した後に文字を変換して、漢字にしたりカタカナにしたりするわけなんですけども、皆さん変換するときに決定！ということでEnterを押しますよね？
変換するときとかにスペースを押したりしますよね？
今回入れたハッシュタグ機能はエンターかスペースでハッシュタグを確定するとう挙動になっています。
そのため単純に「スペースかエンターが押されたから登録するやでｗ」ってやると、「フロントエンド」って入れようとすると「ふろんとえんど」ってハッシュタグが確定してしまうんですね。
なんか江戸っぽいですね(偏見)
ここでさあ困ったぞ！となったわけですね。
この「ふろんとえんど」って文字の入力をするときに inputEvent というのが発火します。
こいつに isComposing というのがあります。
これでユーザがIMEで未確定文字を入力しているのかどうかを知ることができるんですね。
ではそれを使ってやろうと思ったところ。
Safari、IE、Edgeでは実装されていませんでした😇
SAYONARA！
ハッシュタグを確定するところでうまく出来ないかなぁと考えていたところ、
確定は keydown で検知しているので、 KeyboardEventを見てみたところ、
これにも isComposing がありました。
しかも Safari で実装されている 😂 (IEは無視しましょう)
なんでｗｗｗ
となりながらこれをうまく活用するぞ！となりました！
実際に実装して試したところ、
うまく動きませんでした 😇
変換完了時のエンターで isComposing が false となってしまい、そのままハッシュタグが確定！となってしまっていました…。
こいつをうまく回避するために、 InputEvent にある inputType をみて変換完了時のエンターかどうかを確認するようにしました。
変換完了時のエンターは inputType が insertFromComposition になっています。
変換完了したから insert するぞ〜ってことですね。
なのでこのときのエンター（このときに発火する keydown イベントのエンター）は無視するような実装をしました！
そしたらいい感じなったのでいい感じじゃ〜んと思って、
iPhone の Safari で動作確認したら、変なふうになってました 😇
iPhone の Safari では変換中にエンター(というか確定)を押しても何故か keydown イベントが発火しないということに気づきました。
発火するはずの keydown イベントが発火しないため、次のエンターが無視されてしまうというふうになっていました 😇
謎ですね。
これをうまく回避する方法が一切思い浮かばず、
inputType が insertFromComposition の場合は、10ms以内の keydown イベントを無視するようにしました 😇
なんだこれ…。となっているので、コードコメントが訳わからないことが書いてあってなかなか愉快です。
とまあこんな感じでフロントエンドでクソ辛い部分はこんな感じでした…。
まとめ
こんなかんじでハッシュタグのところはつらい実装になっています！
「こうしたほうがいいじゃろ〜〜！」や、コードのみならず「ここの入力のデザインはこうしたほうが絶対に良い」とかありましたら
でご意見・ご要望をbosyuしておりますので！なんなりとよろしくおねがいします！
この記事が気に入ったらサポートをしてみませんか？