【OutSystems】【オペミス対策】長押しでしか反応しないボタンを作ろう(Mobile)

ババーンと推参!
連載再開ミスターEです。

今回はナレッジ君で開発部内で共有されていた
長押しでしか反応しないボタンを作ろう(Mobile)についてご説明したいと思います!

ナレッジ君へ共有して頂いたのは前回も紹介した

グミ大好きSさん

1.はじめに

ユーザ誤操作防止のためのUI設計のアプローチは色々考えられます。
・権限のあるユーザ以外は、表示制御で操作できなくする(最小権限の原則、フールプルーフ)
・視認性が高く、明確な内容の説明文やラベルを操作部につける(フールプルーフ)
・確認ダイアログを挟む(フールプルーフ)
・誤操作後、操作結果を元に戻す機能を提供する(フェイルセーフ)
    etc…

今回は、アプローチの一つとして、指定秒数ホールドしないと押下できないようなボタンを作ります。
※モバイル限定。

2.作成手順

①Containerを使い、ボタンを作る
理由は、OnClickアクションは今回使わず、ButtonだとOnClick未設定にできないためやりにくいからです。
内側にラベルも入れましょう。btnクラスなどを付与したりしてボタンのような見た目に整えます。


②TouchHandlerアクションの記述
OnTouchStartの場合と、OnTouchStartの場合で動きを変えたいため、Boolean型Inputを設定。
以下のようなJSを実行するようにします。


③OnTouchStart/OnTouchEndに②のアクションを設定

Container>Events>OnTouchStartとOnTouchEndを設定し、②で作ったクライアントアクションを設定します。

ここまででロジック面はあらかた実装完了です。

④ボタンの表示制御
押している間だけボタンのラベルが変わり、Spinnerアイコンが出るようにしたいので、
ボタンContainer内でIFを噛ませ、TimeoutIdが0か0以外かで表示制御しています。

3.実装サンプル

  • URLをコピーしました!
目次