ボタン連打防止機能付き OnClick の拡張メソッド(R3・UniTask)

できること

　この記事を活用することで、R3(UniRx) を活用したボタンの連打防止機能を簡潔に記載することが可能です。

[SerializeField] Button normalButton;

// 通常(同期)のクリック処理
normalButton.OnClickExt(() => Debug.Log("通常ボタンクリック"), this, 2000);

　従来のボタン用の購読処理(OnClickAsObservable、ThrottleFirst、Subscribe、AddTo)を書かず、OnClickExt メソッド１つで代替しています。

　それでは順番に解説していきます。

はじめに

　Unity で Button を扱う際、ボタンの連打による意図しない多重実行を防ぐために、Reactive Extensions（R3 や UniRx）を使って以下のような記述をすることが多々あります。

(抜粋)

using R3;
using System;
using UnityEngine;
using UnityEngine.UI;

[SerializeField] private Button button;

button.OnClickAsObservable()
      .ThrottleFirst(TimeSpan.FromMilliseconds(1000))
      .Subscribe(_ => Debug.Log("Clicked"))
      .AddTo(this);

　このように、R3 を使えばボタンの連打対策は簡単に実装できますし、AddTo(this) による購読解除もスマートに行えます。
またボタンの購読処理においては、基本的にこの形での実装が多いと思います。

　ですが、実際の開発環境では

１．毎回 ThrottleFirst による連打防止対策を書くのが地味に面倒

２．非同期処理が絡むとさらに記述が伸びて複雑化

３．AddTo を忘れるとメモリリークの原因にもなる

４．複数人で作業した場合の処理の統一性

　こういった「同じ処理を毎回書く煩わしさ」からくる問題にも直面しがちです。

　そこで、これらの共通処理を拡張メソッドとしてまとめることで、
「使いやすく・シンプル・安全・再利用可能」な書き方を実現したのが、今回紹介する Button の拡張クラス(ButtonExtensions クラス)です。

　この記事では、そのクラスの実装内容と、実際の使い方について解説します。

　実際に使ってみると、処理の見通しが格段によくなり、UI 実装の速度と品質を両立できます。

実装のポイントと必要性

　Unity の標準課題として、Button.onClick.AddListener() は使い勝手がよくない（解除忘れ、連打問題、非同期処理との相性）という問題があります。
これらは R3(+ UniTask) を活用することで解決可能なのですが、今回はさらに一歩踏み込んで、「ボタン処理ごとに毎回同じ処理を記述しなければならない」部分を解決しようというのがポイントになります。

・ThrottleFirst により連打防止
・SubscribeAwait により非同期処理に対応
・拡張メソッド化 + AddTo(owner) で実装を簡潔に

ButtonExtensions クラス

　コード全文です。R3 ベースです。
もしも同名の拡張クラスがある場合には、namespace を活用したり、クラス名を変更して対応してください。

　作成したクラスは Editor 以外の通常のフォルダに配置してください。

ButtonExtensions.cs

using Cysharp.Threading.Tasks;
using Cysharp.Threading.Tasks.Linq;
using R3;
using System;
using UnityEngine;
using UnityEngine.UI;

public static class ButtonExtensions {

    /// <summary>
    /// OnClick の購読処理の拡張メソッド
    /// </summary>
    /// <param name="button"></param>
    /// <param name="onClick">ボタン押下時の処理</param>
    /// <param name="owner">AddTo に紐づけるコンポーネント</param>
    /// <param name="throttleTime">ボタンの再有効化までの待機時間。指定なければ1秒待機</param>
    /// <returns></returns>
    public static IDisposable OnClickExt(this Button button, Action onClick, Component owner, TimeSpan? throttleTime = null) {

        // ボタンの再有効化までの待機時間。引数指定がない場合には初期値(1秒)を設定
        TimeSpan time = throttleTime ?? TimeSpan.FromMilliseconds(1000);

        // 購読処理をまとめる
        IDisposable subscription = button.OnClickAsObservable()
            .ThrottleFirst(time)
            .Subscribe(_ => onClick?.Invoke());

        // AddTo 用の紐づけ対象を受け取る(主に this など)
        if (owner != null) {
            subscription.AddTo(owner);
        }

        return subscription;
    }

    /// <summary>
    /// OnClick の非同期型の購読処理の拡張メソッド
    /// </summary>
    /// <param name="button"></param>
    /// <param name="onClickAsync"></param>
    /// <param name="owner"></param>
    /// <param name="throttleTime"></param>
    /// <returns></returns>
    public static IDisposable OnClickExtAsync(this Button button, Func<UniTask> onClickAsync, Component owner, TimeSpan? throttleTime = null) {

        // ボタンの再有効化までの待機時間。引数指定がない場合には初期値(1秒)を設定
        TimeSpan time = throttleTime ?? TimeSpan.FromMilliseconds(1000);

        // 購読処理をまとめる
        IDisposable subscription = button.OnClickAsObservable()
            .ThrottleFirst(time)
            .SubscribeAwait(async (_, ct) => await onClickAsync());

        // AddTo 用の紐づけ対象を受け取る(主に this など。この情報が、上記の ct にも利用される)
        if (owner != null) {
            subscription.AddTo(owner);
        }

        return subscription;
    }
}

　拡張メソッドは同期処理用と非同期処理用の２種類あります(非同期処理は R3 の場合のみです。)
どちらも、一定時間ボタンを無効化（ThrottleFirst）して、意図しない連打を防ぎつつ、購読解除を AddTo で自動化する、一般的な連打防止の仕組みです。

　戻り値も同じ IDisposable ですので、処理の設定時に AddTo 以外でも任意のタイミングでの購読解除も可能です。

　また引数を用意して拡張性を高くしてありますので、下記のような特徴があります。

　・TimeSpan を初期値ありの引数にしているため、ボタンごとに ThrottleFirst 時間を調整可能。指定しなければ初期値(1秒)を利用

　・Component owner を null にすれば購読解除しない使い方も可能

　・今後、Interactable 無効化などの制御も追加しやすい構造

使用例

１．同期処理①

　サンプルコードです。記事の最初に提示したものと同じ内容です。
従来の OnClickAsObsevable、ThrottleFirst、Subscribe、AddTo を書かず、OnClickExt メソッド１つで代替しています。

using UnityEngine;
using UnityEngine.UI;

public class SampleUI : MonoBehaviour {

    [SerializeField] Button normalButton;

    void Start() {
        // 通常(同期)のクリック処理
        normalButton.OnClickExt(() => Debug.Log("通常ボタンクリック"), this, 2000);
    }
}

　ボタンの購読・連打防止機能・購読解除に必要な処理が１行で記述できているのがわかります。
また using R3; の宣言も不要です。

　第１引数は () => Debug.Log("通常ボタンクリック") の部分です。
最初の () => のラムダ式によるデリゲート部分は共通仕様です。常にこの形で処理を書いてください。
その後、ボタンを押した際に実行したい処理やメソッドを書きます。

　第２引数は this の部分です。これは AddTo として利用される Component の情報です。

　第３引数は 2000 の部分です。こちらは省略可能です。記載した場合のみ、ThrottleFirst の時間として指定されます。

　ボタンを押下した際に２つ以上の処理を実行したい場合には、下記のように｛｝で囲んでください(通常のデリゲート処理と同じです)。

        // 通常のクリック処理
        normalButton.OnClickExt(() => {
            Debug.Log("通常ボタンクリック_1");
            Debug.Log("通常ボタンクリック_2");
        },                                    // ここまでが第１引数              
        this);                                // 第３引数は省略可能

　非常にシンプルな形で、ボタンの購読処理を実装することができました。

　ボタンの購読処理については、このメソッドを利用する事で認識の共有化をしておくことにより、
複数人で作業する場合においても、すべてのボタンで漏れなく連打防止機能が自動的に実装されることもなり、安全性も高まります。

２．同期処理②

　AddTo のタイミングではなく、別のタイミングでの購読解除が必要なケースがあります。
その場合には、IDisposable を明示的に保持しておき、必要に応じて、用意しておいた Dispose メソッドで購読解除できるようにしておくことで対応可能です。

　またオブジェクトプールなどを利用している場合には OnDisable メソッドを用意しておくことで、
ゲームオブジェクトの破棄ではなく、非アクティブ状態での購読解除も実装できます。

using UnityEngine;
using UnityEngine.UI;
using System;

public class SampleButtonHandler : MonoBehaviour
{
    [SerializeField] private Button sampleButton;

    private IDisposable clickSubscription;

    void Start() {

        // 購読処理を戻り値を受け取って変数で保持。拡張メソッドを使って購読開始(第1引数の処理が1行分であっても { } で囲んでよい)
        clickSubscription = sampleButton.OnClickExt(() => {
            Debug.Log("Button Clicked!");
        }, this, TimeSpan.FromMilliseconds(1500));
    }

    public void Dispose() {

        // 手動で購読解除する場合（AddTo が使えない状況など）
        clickSubscription?.Dispose();
    }

    void OnDisable() {

        // 非アクティブ状態のタイミングで忘れず Dispose 呼び出し
        Dispose();
    }
}

　このように準備しておくことにより、様々な状況に対応した購読解除が可能になります。

３．非同期処理①

　ボタン押下時の処理を非同期処理で行いたい場合、R3 では SubscribeAwait メソッドが用意されているので対応が可能です。
そちらの拡張メソッドとして今回 OnClickExtAsync メソッドを用意してありますので、そちらで代替したケースです。

using UnityEngine;
using UnityEngine.UI;

public class SampleUIAsync : MonoBehaviour {

    [SerializeField] Button asyncButton;

    void Start() {

        // 非同期のクリック処理
        asyncButton.OnClickExtAsync(async (_, ct) => {
            await UniTask.Delay(1000);
            Debug.Log("非同期ボタンクリック完了");
        }, this);
    }
}

　なおこちらも、IDisposable 型の変数で保持しておくことで、任意のタイミングでの購読解除も可能です。

    private IDisposable clickSubscription;

    // Start メソッドなどで購読処理
　　clickSubscription = asyncButton.OnClickExtAsync(
    　　async (_, ct) => {
        　　await UniTask.Delay(3000, cancellationToken: ct);
    　　}, this);

　引数の書き方が同期処理とは異なりますので注意してください。

　この処理の場合、非同期処理のキャンセルが this と紐づいているので、
ボタンの購読解除と同時に、非同期処理のキャンセルも一緒に行われるようになります。

　やはりこちらの場合も AddTo メソッド以外のタイミングでの購読解除を行いたいケースがあります。
そのため Dispose メソッドを用意しておくことで、任意のタイミングでボタンの購読解除と同時に非同期処理のキャンセルが行えます。

    public void Dispose() {

        // 手動で購読解除する場合（AddTo が使えない状況など）
        clickSubscription?.Dispose();
    }

　ただし、非同期処理の場合には、ボタンの購読解除のタイミングではなくて、外部クラスの非同期処理のキャンセル処理と連動させたいケースもありますので、
次はそちらのケースでの対応方法を記述しておきます。

４．非同期処理②

　外部クラスの非同期処理のキャンセル処理と連動させたいケースです。

　まず最初に現在の ButtonExtentions クラスにある拡張メソッドのみでは対応ができませんので、処理の追加を行います。

　まず ButtonExtentions クラスに、次のメソッドを追加します。
これは OnClickExtAsync メソッドのオーバーロードで、引数に CancellationToken が追加されています。

ButtonExtentions.cs

public static IDisposable OnClickExtAsync(this Button button, Func<UniTask> onClickAsync, CancellationToken token, TimeSpan? throttleTime = null)
{
    TimeSpan time = throttleTime ?? TimeSpan.FromMilliseconds(1000);

    IDisposable subscription = button.OnClickAsObservable()
        .ThrottleFirst(time)
        .SubscribeAwait(async (_, _) => await onClickAsync(), token); // ← ここで外部の token を渡す

    return subscription;
}

　AddTo メソッドでの購読解除ではなく、引数で受け取った CancellationToken を利用して購読解除を行う形になっています。

　上記のメソッドを利用する形で、ほかの非同期処理のキャンセルのタイミングでの購読解除を実装できます。

　このサンプルコードではクラス内でキャンセルトークンを生成していますが、
こちらのキャンセルトークン情報を外部から受け取って引数に指定することで、そのキャンセルトークンと紐づくほかの処理と合わせて購読解除が行われます。

using UnityEngine;
using UnityEngine.UI;
using System;
using Cysharp.Threading.Tasks;
using System.Threading;

public class SampleButtonHandlerAsyncWithToken : MonoBehaviour, IDisposable
{
    [SerializeField] private Button sampleButton;

    private IDisposable clickSubscription;
    private CancellationTokenSource cts;      // 外部クラスからもらう形だが、今回はデバッグ用にここに記述

    // デバッグ用。実際には外部クラスで行う処理
    void Start() {

        cts = new CancellationTokenSource();

        SetupAsyncButton(cts.Token);
    }

    public void SetupAsyncButton(CancellationToken token) {

        clickSubscription = sampleButton.OnClickExtAsync(
            async () => {
                Debug.Log("Start async task...");
        
                try {
                    await UniTask.Delay(3000, cancellationToken: token);
                    Debug.Log("Async task finished.");
                } 
                catch (OperationCanceledException) {
                    Debug.Log("Async task was cancelled.");
                }
            },
            token);
    }

    public void Dispose()
    {
        clickSubscription?.Dispose();

        // ここは自クラス内でキャンセルトークンを生成している場合のみ記述する
        if (cts != null)
        {
            if (!cts.IsCancellationRequested)
            {
                cts.Cancel();
            }
            cts.Dispose();
            cts = null;
        }

        Debug.Log("Button subscription disposed manually.");
    }

    void OnDisable() {

        // 忘れず Dispose 呼び出し
        Dispose();
    }
}

　SubscribeAwait メソッドにより、onClickAsync() 内で使うキャンセルトークンが自前でコントロール可能になります。
こちらの場合、Unity ライフサイクルと切り離して制御できるため、より柔軟なボタンイベント管理ができます。

　使い分けとしては、以下のようになります。
「誰がキャンセルを管理するか？」によって、どちらのオーバーロードを使うかを切り替えるのが基本スタンスです。

メソッド形式	キャンセル対象	使用シーン	第1引数の書き方、第2引数の指定
OnClickExtAsync(Func<UniTask>, Component)	Unity ライフサイクルに連動	this などに紐づけたい場合	async (_, ct) => 処理, 第2引数には OnClickExtAsync メソッドの第2引数で届いている Component 変数(this など)
OnClickExtAsync(Func<UniTask>, CancellationToken)	外部制御されたトークンに連動	Dispose() や Cancel() による細かい制御をしたい場合	async () => 処理, 第2引数に CancellationToken 変数

　購読解除用の引数は、OnClickExtAsync メソッドの第2引数(Component 型か、CancellationToken 型)で指定した型が紐づきます。OnClickExtAsync メソッドが２つ用意されているのはそのためです。
よって、ライフサイクル(ゲームオブジェクト(クラス)の破棄)に紐づけることもできますし、ほかの非同期処理のキャンセルタイミングと一緒に解除することもできます。

目的	選ぶべき拡張メソッド	備考
Component のライフサイクル（破棄）に合わせてキャンセルしたい	OnClickExtAsync(this Button, Func<UniTask> onClickAsync, Component owner, ...)	AddTo(owner) により、自動的に CancellationToken が内部で渡される
外部から渡された CancellationToken のキャンセルタイミングに合わせたい	OnClickExtAsync(this Button, Func<UniTask> onClickAsync, CancellationToken token, ...)	自前の cts.Token や外部クラスのトークンなど、任意のトークンを手動で管理したいときに使う

　AddTo(owner) でキャンセルしたいなら (_, ct) を取る形式で内部トークンに委ねます。

　自前で CancellationTokenSource を管理したい場合や外部クラスから管理したい場合（例えば一連の UI 処理の中断など）には、外からトークンを渡すオーバーロードを使います。

　単純な非同期処理だけしたいには、「async () => 処理」のみで問題ありません。

おわりに

　このような小さな拡張メソッドでも、ボタンの実装効率と保守性を大きく改善できます。
同じ処理を繰り返し書いているなぁ、と感じることがあったら、こういった拡張メソッドを作成することも検討してみましょう。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

ボタン連打防止機能付き OnClick の拡張メソッド(R3・UniTask) - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school