キーボードで入力しやすいWeb画面をノーコードツールForguncyで作ってみよう
営業実績の入力や在庫の入出庫記録といった日々データ入力が必要な業務アプリは入力項目も多いので、キーボードで操作ができると現場の入力効率が上がります。ノーコードツールでもキーボード入力を助ける機能を実装できればユーザーが使いやすい入力画面を現場に提供することができます。
ForguncyはWebアプリをノーコードで作成できるツールですが、Windowsアプリでよく実装されているEnterキーで次の入力エリアを編集状態にする（フォーカス移動）する動作をForguncyでも実現できます。そこで今回は、Forguncyで作成したアプリの入力項目を、Enterキーでフォーカス移動する設定方法について記述します。
オプション設定
まずは、Forguncy６の「ファイル」タブをクリックし、「オプション」-「アプリケーション設定」を選択してください。
この中にある、「フォーカス遷移のモード」で「エンターキーでのフォーカス遷移を有効にする」にチェックを入れます。
これで準備完了です。
ページ設定
編集したいページをナビゲーションウィンドウから選択して開いた後、右ペイン下部の「ページ設定」タブをクリックしてください。次の設定ができます。
・名前：ページの名前を設定します
・タイトル：ページのタイトルを設定します
・マスターページ名：作成済みのマスターページをページに適用します
・モバイルページ名：モバイルデバイスからこのページにアクセスした際に
表示するモバイルページを指定します
・行数：ページの行数を指定します
・列数：ページの列数を指定します。
・スタートページに設定：このページをスタートページに設定します
・ページロード時のコマンド：ページがロードされた際に実行するコマンド
を指定します
・ページストレッチモード：実行時のブラウザに応じてページが伸縮します
・カスタムJavaScript：このページで実行するJavaScriptファイルを指定しま
す
・フォーカス移動の順序：カーソルの移動順序を設定します
（モバイルページではフォーカス移動の順序の設定はできません。）
フォーカス移動の順序設定
Forguncyではテキストボックスやチェックボックスなどの入力や選択をするセル型を、マウスをクリックすることなくTABキーでフォーカス移動させることができます。
フォーカス移動の順序は、規定では「自動」設定になっていて、上のセルが優先、同じ行では左のセルが優先されます。
試しに、いくつかのセル型を並べてみました。
実行し、TABキーを押してみます。
TABキーを押すごとに①から⑨へフォーカスが移動し、①に戻りました。
次にF5キーなどで、ブラウザをリフレッシュしてページを更新し、再度Enterキーを押してみます。
Enterキーを押してもフォーカスが現れません。
スタートはTABキーを押します。
フォーカスがテキストボックスにセットされたところで、Enterキーを押してみます。
Enterキーを押すごとに①から⑧へフォーカスが移動し、⑧のボタンでコマンド設定してあったページ2への遷移が実行されました。
Enterキーを押すと、フォーカスを移動するだけでなく、ボタンのクリックも行うことがわかります。
そこで、ページからボタンを削除します。
実行し、TABキーでフォーカスをテキストボックスにセットしてから、Enterキーを押していきます。
Enterキーを押すごとに①から⑧へフォーカス移動し、①に戻りました。
TABキーではラジオグループは項目①にしかセットされませんでしたが、Enterキーは各項目を移動しました。
また、TABキーではアドレスバーにもフォーカスが移動しましたが、Enterキーではアドレスバーには移動しませんでした。
これを「マニュアル設定」に設定すると、フォーカス順序を自由に変更することができます。
変更前の順序を見ると、TABキーが移動した順と同じであるのがわかります。
フォーカス順序を次のように変更してみました。
同様に実行し、TABキーとEnterキーそれぞれのフォーカス移動順序を確認すると、
ラジオグループとアドレスバー部分に違いがあることは変わりませんが、
どちらもマニュアル設定どおりにフォーカスが移動しました。
TABキーの場合
Enterキーの場合
まとめ
TABキーだけでなく、Enterキーでもフォーカスを移動させるためには、オプション設定が必要です。
TABキーでもEnterキーでもフォーカスを移動したら、そのまま入力や、方向キーを使ってデータの選択を変更することができます。
もちろんShiftキーを同時に押せば、逆順にフォーカス移動が可能です。
多くのプログラミングツールでは、Enterキーによるフォーカス移動のためにコードを記述しますが、
Forguncyでは特別な設定も必要なく、ノーコードで実現可能です。
ただし、ボタンやハイパーリンクなどの入力・選択項目でないセル型には、フォーカスがセットされた後に、コマンド処理がされるので注意が必要です。
是非、使い勝手の良いアプリケーションにするために、活用してみてください。
参照：https://docs.forguncy.com/v6/#pageoperation(right%20pane).html#i-body-content
（グレープシティ Forguncy６オンラインヘルプ）
この記事が気に入ったらサポートをしてみませんか？