タッチ操作用とキーボード・マウス操作用のUIを1つのコンポーネントに統合し、操作方法に応じて振る舞いを切り替える
1つのコンポーネントにタッチ操作とマウス操作、両方のインタラクションを実装する
特にエディタ内に出てくるUIと、サイドバーや上のバーの中のメニューはそうしているshokai.icon
2022年7月〜9月ごろ
この時点ではUserAgentやwindow.ontouchstartの有無などで判別し、コンポーネントを出し分けていた
デバイス判別してコンポーネント出し分けたほうがシンプルじゃん、という考え
2023年9月ごろから
パソコン用のエディタは完全に削除した
指でタッチもできるし、マウスポインタでクリックもできる
スクリーンキーボードで入力できるし、物理キーボードでも入力できる
さらに、UserAgentやwindow.ontouchstartの有無などでデバイス判別してコンポーネントを出し分けるのもなるべくやめるようにした
理由
最近はタッチ操作とトラックパッド・キーボード操作の両方ができるデバイスが多い為
画面がデカいWindowsなのにタッチ操作できる
タッチ操作するタブレットとしても、ノートPCとしても扱える
同上
設計指針
全ての環境に対して、1つのコンポーネントを表示する
clickやmousedownイベントの中で、このclickはタッチ由来か、マウス由来なのか判別する
必要であればclick、mousedown、touchstartなどのイベントをぜんぶ実装する
技術要素
UIの出し分け
タッチ操作もマウス操作も1つのReactコンポーネントで受け入れる
気合でがんばる
上の方法で十分シンプルに実装できている
PointerEventはfocus event等では発火しない
text areaにfocusを入れる操作を、指とマウスどちらでやったかを取得したいケースがある
PointerEventにはclickに相当するイベントが存在しない
pointerdownした座標を覚えておいて、あまり動かしたりpointeroutしたりせずに、pointerupした、とかでclickを自前で判別する必要がある