タブキーの設定

今回は、ノーツコンソーシアムの地区別研究会『大阪研究会』で日ごろからお世話になっている林 哲司さんが先日公開したコンテンツ『20231108_Coolで使いやすいNotesアプリデザイン講座V2』に関してです。

このコンテンツは、ノーツコンソーシアム主催の『新任担当者向けワークショップ』の１コマとして実施されているので、出会った方もいらっしゃるかと思います。どうすればノーツアプリが ”カッコよく” ”使いやすく” なるのかが、事例ととともにわかりやすく記載されています。デザインはセンスではなく技術であること、技術なら習得できますし、この資料を見ればそのポイントが効率よく吸収できます。しかもノーツでに実現方法つきです。

ノーツ開発者であれば一度は参照すべきコンテンツです。そして、デザインに関する様々な気づきがちりばめられていますので、ノーツ以外の開発でも役に立つ知識がたくさんあります。是非ともご一読ください。

私が作成するアプリはノーツ臭プンプンなので、これを参考に少しでも改善したいと思います。

ところで、このコンテンツを読んでいて、自身で意識したことがない機能について、解説されていました。フォーム - フィールドの並び順 に記載されている”タブキー送り”です。

よい機会ですので、検証してまとめます。

デフォルトの動作

せっかくなので、資料に倣ってフォームを作ってみました。第二形態（蒲田くん） は、プロパティボックスをうまく利用すれば簡単に実現できます。ノーツと親和性の高い”形態”と言えますね。最上級ではありませんが、効率よく Cool なデザインになるので、私は ”蒲田くん” 推しです。

さて、話を戻します。まず、何も設定しないデフォルトの動作の確認です。フォームをプリビューして動作を確認します。

１行目左のフィールドにカーソルが表示され、Tab キーを押すとその右、その次は２行目の左と移りました。デフォルトの状態では、配置したフィールドの左から右、上から下の順となりました。

タブ順の設定方法

タブの順序はフィールドのプロパティの［フィールド情報］タブの下部で設定します。初期値の 0 は設定されていない状態を表します。また、タブ順とは別にデフォルトフォーカスの設定もできます。

タブの位置に数値を設定すると、フィールドの左下にその番号が表示されます。この番号順にカーソルが移動すると仕組みになっています。次のように設定するとカーソルの移動は上から下になります。

なお、この機能は、番号の小さい順に移動しますので、連番である必要はありません。ただ、以下のように設定漏れがあるとカーソルは、Feild1 → Feild2 → Feild7 → Feild3 → Field4 と移動します。フィールドを追加した際には、設定漏れがないよう注意しましょう。