※ 本記事は 2026/3/31 以前にNTTコノキューにて記載した記事になります

こんにちは、NTTコノキューの中矢です。業務ではUnity, C#と格闘しています。

本記事は、スマートフォンでタップやスワイプ、ピンチなどのジェスチャー操作をUnity上で簡単に実装できる「Lean Touch」の入門記事です。

Lean Touch：https://assetstore.unity.com/packages/tools/input-management/lean-touch-30111?locale=ja-JP&srsltid=AfmBOooIvGpdnqBerpYPNg1MS4JeHRBsuhWBL7uKlUw57mZlMWnpzEw2

この記事が少しでも、スマートフォンのジェスチャー処理に苦しんでいるUnityエンジニアの参考になれば幸いです。

スマートフォンのジェスチャー操作とLean Touch

近年、ARサービスにおいてARグラスが存在感を増してきましたが、まだまだスマートフォンアプリのARが主流です。とはいえスマホアプリ開発となると、タップ、ダブルタップ、スワイプ、ピンチイン/ピンチアウトなどのジェスチャー操作とは嫌でも付き合うことになります。

ここでジェスチャー処理を「Input.GetTouch」を使って実装しようとすると、タップとダブルタップの切り分けやピンチ操作などで、良い感じに地獄を見ることになります。

Input.GetTouch：https://docs.unity3d.com/6000.0/Documentation/ScriptReference/Input.GetTouch.html

Unityのジェスチャー操作で有名な無料アセットとしては「TouchScript」があります。このアセットを使えば、コンポーネントにスクリプトをアタッチして、少しコードを書けば簡単にジェスチャー操作を実装することができます。こちらは有名なだけあって、世の中にさまざまな記事があります。

TouchScript：https://assetstore.unity.com/packages/tools/input-management/touchscript-7394?locale=ja-JP&srsltid=AfmBOoppaUS8nOhgR-cgfhCWDtbTfiUjsn4DD8GOb09pMUfCnksRrPKs

しかし使い方を間違えると、uGUIのButtonやInputFieldが反応しなくなるといった事が稀に生じます。 uGUIのButtonと共存しないといけないが、不幸にもこの事象を引き当ててしまった暁には、TouchScriptで地獄を見ることになります。

その他に有名なジェスチャー操作実装の無料アセットとして「Lean Touch」があります。こちらもTouchScriptと同様にコンポーネントにスクリプトをアタッチすることで、タッチパネルにおける様々なジェスチャー操作を簡単に実装するアセットです。

Lean Touchは有名なアセットであるものの、意外にも日本語で書かれた記事が少ないため、本記事ではLean Touchの公式ドキュメントを頼りに、入門としてサンプルアプリを作ってみました。

Lean Touch公式ドキュメント：https://carloswilkes.com/Documentation/LeanTouch

サンプルで作ったアプリ

本記事でサンプルとして製作したAndroidアプリは以下です。

サンプルアプリでは、イラストをタップしてスワイプするとイラストが移動し、ピンチイン/ピンチアウト操作でイラストが拡大縮小します。そしてダブルタップでイラストの位置と大きさが元に戻ります。

環境

Windows 11
Unity 2022.3.50f1
Lean Touch 3.1.0

Unity SceneのセットアップとLean Touchの導入

まず、Unity上でAndroidへSwitch Platformを行い、下図のようにCanvasにImageを貼り付けます。イラストはユニティちゃんライセンスで配布されている「ユニティちゃんHD画像パック Vol.1」のものを利用しました。

ユニティちゃんHD画像パック Vol.1：https://unity-chan.com/download/releaseNote.php?id=UnityChanImagePackVol1

続いて、Asset StoreからLean TouchをImportし、メニューから、GameObject > Lean > Touchを選択することで、LeanTouchオブジェクトが生成されます。このオブジェクトがジェスチャー操作を最上階で管理します。

また、LeanTouchオブジェクトにアタッチされているLean Touchスクリプトの「Add Simulator」ボタンを押下すると、Unityエディタ上で、タップやピンチ操作などをマウスでシミュレートできるようになります。

ここで、Lean Touchスクリプトの「Gui Layers」の項目は、Lean Touchのタップ判定とは区別して処理したいUI（uGUIのButtonなど）のLayerを入力します。これにより、「UI」Layerのオブジェクトをタップしたときは、Lean Touchが反応しなくなり、正常にUIを操作できるようになります。

したがって、一番始めに追加したImageオブジェクトのLayerを「UI」から「Default」などのUI以外のLayerにしないと、ImageがLean Touchスクリプトで反応しないため、本記事では「Default」Layerに設定しました。

続いて、Imageオブジェクトに以下2つのLean Touch関連のスクリプトをアタッチします。

Lean Drag Translate：スワイプでオブジェクトを移動させる
Lean Pinchi Scale：ピンチ操作で拡大縮小させる

ここまでを行い、Unityを実行したりAndroidビルドすると、イラストをスワイプやピンチ操作で移動させたり、拡大縮小させたりすることができます。（Unityエディタ上では、マウス左クリックしながらドラッグするとスワイプ、左ctrl＋マウス左クリックしながらドラッグをするとピンチ操作になります）

しかし動かしてみると、イラストに触れてなくても移動させたり、拡大縮小できたりします。これでは微妙な操作感ですので、次はイラストに触れてる間だけ、移動や拡大縮小ができるようにします。

コンポーネントを組み合わせて理想のジェスチャー操作を作る

本記事では以下のジェスチャー操作を行うことを目指します。

イラストに触れている間にスワイプするとイラストの位置を動かせる
イラストに触れながらピンチ操作をするとイラストを拡大縮小できる
拡大縮小の上下限を設定する
画面上任意の場所でダブルタップを行うと、イラストの位置と大きさがリセットされる

まず、空のGameObjectを作り「Tap To Select」と名付け、そこに以下2つのコンポーネントをアタッチします。

Lean Finger Down
Lean Select By Finger

そしてLean Finger DownコンポーネントのOn FingerイベントにLean Select By FingerコンポーネントのLeanSelectByFinger.SelectScreenPositionを設定します。

続いて、Lean Select By FingerコンポーネントのDeselect With Fingersにチェックを入れます。

さらに動かしたい対象のImageオブジェクトにLean Selectable By Fingerコンポーネントをアタッチし、それをLean Drag TranslateコンポーネントとLean Pinch ScaleコンポーネントのRequired Selectableに設定します。

これによって、以下2つの要件は満たせます。

イラストに触れている間にスワイプするとイラストの位置を動かせる
イラストに触れながらピンチ操作をするとイラストを拡大縮小できる

続いて、ダブルタップを実装するために「Double Tap」という名の空のGameObjectに、Lean Finger Tapコンポーネントをアタッチし、Required Tap Countに2を設定します。

そして以下のImageTransformController.csを操作対象のImageオブジェクトにアタッチし、Image Transformに自オブジェクトのRectTransformを設定します。以下のコードをアタッチすることで、「拡大縮小の上下限を設定する」要件も満たせます。

using UnityEngine;

public class ImageTransformController : MonoBehaviour
{
    private readonly float maxScale = 1.5f;
    private readonly float minScale = 0.5f;
    
    [SerializeField] private RectTransform imageTransform;
    
    private Vector3 initialPosition;
    private Vector3 initialScale;

    private void Awake()
    {
        // リセット時の値を保持
        initialPosition = imageTransform.localPosition;
        initialScale = imageTransform.localScale;
    }

    private void Update()
    {
        // 画像の拡大縮小の最大、最小値の処理
        if (imageTransform.localScale.x < minScale)
        {
            imageTransform.localScale = Vector3.one * minScale;
        }
        else if (imageTransform.localScale.x > maxScale)
        {
            imageTransform.localScale = Vector3.one * maxScale;
        }
    }

    /// <summary>
    /// 画像のTransformをリセットする
    /// </summary>
    public void ResetTransform()
    {
        imageTransform.localPosition = initialPosition;
        imageTransform.localScale = initialScale;
    }
}

最後にDouble TapオブジェクトのLean Finger TapコンポーネントのOn FingerイベントにImageTransformController.ResetTransformを設定すれば、すべての要件を満たしたサンプルアプリの完成です。

まとめ

本記事では、Lean Touchの入門として、イラストをスワイプで移動、ピンチ操作で拡大縮小、ダブルタップで元に戻すサンプルアプリを実装しました。Lean Touchはほとんどコンポーネントを設定するだけで複雑なジェスチャー操作を実装できるため、ジェスチャー操作を簡単に実装したいときに検討してみると良さそうです。

本記事を足掛かりにし、Lean Touchの公式ドキュメントや、Lean Touchの豊富なExampleを参考にすると、より詳しくLean Touchを利用した複雑なジェスチャー操作を実装できるようになると思います。

補足

今回のサンプルではCameraのTagに「Main Camera」を設定しています。実際にアプリを開発するときは「Main Camera」タグを使わないCameraで画面を描画することもあると思います。そういったときは、Lean Touchの各種コンポーネントにCameraを設定することができますので、そこからRaycastを飛ばすカメラを設定できます。