動的ボタン作成

違和感のあるボタン動作

開発した作品を使用してもらった時にたまに言われるのがこんなこと

「あれ?このボタン押すと戻るんだ・・・」

どういうことかというと、

レコード移動ボタン

上図の次のボタン押したらどんな動作を期待しますか?
例えば、数字が1、2、3とあって、現在2の位置にいるとします。次のボタンを押したら、どうでしょう?

ほとんどの方が3に移動するのを期待するのではないでしょうか。
ひらがななら「あ」の次は「い」がこないとなんだかもやもやします。


というのも、人は無意識のうちにすすむのに気持ちの良い方向があります。それは左から右です。エクセルの表も左からA、B、C… となっていますね。

そのような記事が下にもあります。

話を元に戻します。
よく違和感があると言われるのは単ページの場合です。
例えば、下図のように毎日データを入力する台帳です。
使い勝手を考えて、開いた時に一番上に最近のデータが来る様に日付を降順にしています。

ここで、sn11のデータをクリックして詳細ページに飛んだとします。

ここで、次のボタンをクリックすると違和感が生まれます。頭の中では次のを押すと+1がインクリメントするイメージができています。つまり、ここでは4月11日の記事を期待しているのですが・・・
実際にクリックして表示されるのは、4月9日の記事になります。
これが、「あれ?」と違和感を生みます。

実際に表示されるのは1日前の記事。進むボタンを押したのに戻った感じ

解決法

この違和感は例で示した通り、降順から単ページになったときに起こることがほとんどです。

次へボタンをクリックして進むのでハッピー
次へボタンをクリックしてもどるのでもやもやする

いくつか解決方法はあると思います。今回は以下のようにして解決を試みます

降順ソートされている場合には、次へボタンをクリックするとデータをひとつ前へ戻る設定にします。

フラグ判定用のフィールドを作る

フラグ判定用のフィールドを作る

このフィールドに昇順なのか降順なのかを仕込ませます。

仕込ませる方法はスクリプトで設定です。今回はオープニング時に[des]という文字をフィールド設定で入れます。こういう判定には0 or 1 のようにすることが常なのですが、今回はわかりやすくするため文字列でいきます。

次へボタンのスクリプト

次へボタンに割り当てるスクリプト

以上で終了です。もし昇順にすることがあればスクリプト中に「ソート順反映」フィールドの値を書き換える一文を記述しておけば良いです。

別のソート条件設定スクリプト

こんな感じです。メンテナンス性を考えるとキーワードはdesやacdのようなものは変数にしておいたほうがよいですね。

完成動画

この記事を書いた人

やんたか

大学病院に勤務する臨床工学技士。
FileMakerをこよなく愛する。
FileMaker選手権で臨床工学技士として初の銅賞受賞
院内で開発したアプリでDX化をすすめる。多くの人にFileMakerの良さを知って欲しいとおもいこのブログを書く。

Webデザイナー、JS、React、Vueなども好き。