「ボタンのクリック」と「長押し」を判定する方法

PowerAppsでアプリを作成する際、「ボタンをクリックしたのか」「長押ししたのか」を条件分岐で判定したいケースがあります。本記事では、PowerAppsでクリックと長押しを判定する方法を解説します。

なぜクリックと長押しの判定が必要なのか？
ユーザー操作に応じて異なる処理を実行したい場合、クリックと長押しを区別することで、ボタン一つで完結できます。

PowerAppsでクリックと長押しを判定する方法
PowerAppsにはPressedプロパティがあります。これとタイマーを組み合わせることで、1つのボタンで複数の操作を実現できます。

やりたいこと

ボタンをクリック → 「クリック」と表示
ボタンを 1秒以上長押し → 「長押し」と表示

用意するもの

txtOutput：テキスト出力用
imgLoading：SVGでタイマーの進行を円で表示
btnHoldButton：クラシックボタン
timPressHoldTime：タイマーコントロール

※クラッシックボタンでないと動作しません。

各コントロールのプロパティ設定

txtOutput.Text

"出力： "&SampleText

imgLoading.Image

"data:image/svg+xml;utf8," & 
EncodeUrl(
    "<svg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'>
        <circle cx='60' cy='60' r='35' stroke='#ccc' stroke-width='25' fill='none'/>
        <circle cx='60' cy='60' r='35' stroke='#888' stroke-width='25' fill='none'
            stroke-dasharray='219.9' stroke-dashoffset='" & Text(219.9 * (1 - timPressHoldTime.Value/timPressHoldTime.Duration), "[$-en-US]0.0") & "'
            transform='rotate(-90 60 60)'/>
    </svg>"
)

txtOutput.Visible

timPressHoldTime.Value>100 //1秒以上長押しした場合に表示

btnHoldButton.OnSelect

If(!btnHoldButton.Pressed,
    Set(PressedTime,timPressHoldTime.Value);
    Reset(timPressHoldTime)
);
// 条件分岐部分
If(PressedTime >= timPressHoldTime.Duration,
    Set(SampleText,"長押し"),
    Set(SampleText,"クリック")
)

timPressHoldTime.Duration

1000 // 長押し期間

timPressHoldTime.Start

btnHoldButton.Pressed

まとめ

ボタン長押し / クリックでの分岐はボタンとタイマーで作成可能
以上！