アイディア操作をより自然に / TextField処理の難しさ – 開発日記(47)

2023/08/09

アイディアの操作感をどうするかは課題。

これまで単にTextFieldが並んでいて文字が直接入力出来る状態になっていた。しかしアイディアを選択したい場合など、常に文字入力状態だと違和感を感じることもあった。

デフォルトではアイディアを「表示モード」として、文字を入力するときに「編集モード」にした方が良いのではと思い始めている。

そこで、以前からやりたかった文字入力ではない「表示モード」の概念にトライしてみることに。但しまだ実装としては始まったばかり。

2023/08/10～8/12

騒音問題のnoteの執筆やお出かけなどで忙しく進捗無し。

その他、不具合をいくつか修正。

2023/08/13

アイディアのカーソル移動とフォーカスについての修正。

はじめはTextFieldのReadOnlyをOn/Offしてアイディアの編集可否を切り替えようとした。しかしカーソルの挙動（切り替えたときのカーソル点滅のタイミング変化）にどうしても納得がいかず断念。TextFieldのReadOnlyをOff→Onと切り替えてからフォーカス移動すると、カーソルの点滅がワンテンポ遅くなる。これがどうしても慣れず違和感を感じてしまう。

やむを得ず、TextFieldとは別にアイディア自体にもダミーのフォーカスを持たせて、それを切り替える形へと実装を変更した。

つまり普段はアイディアの見た目(Container)がフォーカスを持っており、編集モードに切り替えた瞬間にTextFieldに表示が切り替わりそこにフォーカスを変更するというもの。どんどん複雑になる……。

2023/08/15

アイディアのカーソル移動とフォーカスについての修正の続き。

2023/08/18

引き続きフォーカス関連の修正。

騒音問題のせいで、実装がはかどらない。

2023/08/19

引き続きアイディアのカーソル移動やフォーカス関連の修正。

アイディアの編集中（つまりTextFieldの状態で）Enterキーを押したときの処理に、これまでかなり苦しんだ。

TextFieldのonSubmittedイベントとonEditingCompleteとの違いが何かや、TextFieldをFocusで囲った場合のonKeyEventイベントとの関係性、そしてWebとPCで発生する挙動の違いなど、知らないことだらけでとてもとても苦戦した。それがようやくまともに動くようになってきた気がする。

なおidea Laneでは、onSubmitted だとその後に自身のフォーカスが消える処理が走ってしまったので、onEditingComplete を使っている。

キーボード操作の制御に加えてマウス操作と挙動を合わせるのも大変だが、だいぶ先に進んできた。

---

※本記事は当時の記録をもとに作成し、必要に応じて加筆・補足しています

記事の通りコツコツ作った、テキストベースの思考整理ツール「アイディア・レーン」最新版はこちら。