完全に理解する Storyboard & UIKit (Day 21): Gesture Recognizerによるタッチ処理

UIButtonは「タップ（クリック）」しか検知できません。しかし、スマートフォンならではの直感的な操作といえば、画像を二本指で拡大する「ピンチ」、画面を横に払う「スワイプ」、アイコンを移動させる「ドラッグ（パン）」などです。

これら複雑なタッチイベントを簡単に検知し、UIViewに処理を行わせるための強力なクラス群が UIGestureRecognizer です。

1. UIGestureRecognizer の種類

iOSが標準で提供している主なジェスチャー認識クラスは以下の通りです。基本的にはこれらをつなぎ合わせて使います。

• UITapGestureRecognizer: タップ（1回、またはダブルタップ等）。
• UISwipeGestureRecognizer: スワイプ（上下左右にサッと払う動作）。
• UIPanGestureRecognizer: パン（押したまま指を引きずる動作。ドラッグ）。
• UIPinchGestureRecognizer: ピンチ（二本指でつまむ・広げる動作。拡大縮小）。
• UIRotationGestureRecognizer: ローテーション（二本指で回転させる動作）。
• UILongPressGestureRecognizer: ロングプレス（長押し）。

2. StoryboardでGestureを設定する

Storyboard（Interface Builder）を使うと、ジェスチャーの追加もドラッグ＆ドロップで視覚的に行えます。

1. 対象ビューの準備:

   • ジェスチャーを追加したいビュー（例えば UIImageView）を選択します。
   • Attributes Inspector (⌥⌘4) を開き、User Interaction Enabled のチェックボックスを必ずONにしてください。
   • ※ UIView はデフォルトでONですが、UIImageView や UILabel はデフォルトでOFF（タッチを無視する）になっているため、これがないとジェスチャーが絶対に動かずハマる原因になります。

2. ジェスチャーの追加:

   • ライブラリパネル（⇧⌘L）を開き、Tap Gesture Recognizer などを検索します。
   • 見つけたら、対象のビュー（UIImageView等）の上に直接ドラッグ＆ドロップします。
   • すると、キャンバス上部のView Controllerのアイコン群（黄色い丸などの並び）に、ジェスチャーのアイコンが追加されます。

3. コードへの接続 (IBAction):

   • キャンバス上部に追加されたジェスチャーアイコンから、ViewControllerのSwiftコードへ Control+ドラッグ し、Action として接続します。

swift
@IBAction func imageTapped(_ sender: UITapGestureRecognizer) { // 型がUITapGestureRecognizerになる
    print("画像がタップされました！")
}

3. コードでGestureを設定する

動的に生成したビューに対するジェスチャー追加や、Storyboardを使わない場合はコードで実装します。（実際にはこちらの方がよく使われます）。

swift
@IBOutlet weak var myBoxView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()

    // 1. ジェスチャーのインスタンスを作成（発動時に呼ぶメソッドを #selector で指定）
    let swipeGesture = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipe(_:)))

    // 2. ジェスチャーのプロパティを設定（例: 右方向へのスワイプとする）
    swipeGesture.direction = .right

    // 3. 対象のビューにジェスチャーを追加する
    myBoxView.addGestureRecognizer(swipeGesture)

    // 忘れずに！（UIViewはデフォルトtrueですが念の為）
    myBoxView.isUserInteractionEnabled = true
}

// ジェスチャー発動時に呼ばれるメソッド (@objc が必須です)
@objc func handleSwipe(_ sender: UISwipeGestureRecognizer) {
    if sender.direction == .right {
        print("右にスワイプされました")

        // Day 20の知識を使って、スワイプされたら色を変えながら右に飛ばすアニメーション
        UIView.animate(withDuration: 0.3) {
            self.myBoxView.frame.origin.x += 200
            self.myBoxView.alpha = 0
        }
    }
}

4. PanGestureでViewをドラッグ移動させる

UIPanGestureRecognizer を使うと、指の動きに合わせて View をドラッグ移動させる処理が簡単に書けます。

swift
@objc func handlePan(_ sender: UIPanGestureRecognizer) {
    // 1. 動かされている対象のビューを取得
    guard let targetView = sender.view else { return }

    // 2. タッチ開始位置からの移動量（translation）を取得する
    let translation = sender.translation(in: self.view)

    // 3. 中心座標（center）に移動量を足して、ビューを動かす
    targetView.center = CGPoint(x: targetView.center.x + translation.x,
                                y: targetView.center.y + translation.y)

    // 4. 移動量をゼロにリセットする（超重要：これをしないと移動量が無限に加算され加速していく）
    sender.setTranslation(.zero, in: self.view)

    // ドラッグが終わった時（指を離した時）の処理
    if sender.state == .ended {
        print("ドラッグ終了位置: \(targetView.center)")
    }
}

📝 今日のまとめ

• 様々なタッチ操作を検知するには UIGestureRecognizer のサブクラスを使用する。
• UIImageViewやUILabelに使用する場合は、必ず Is User Interaction Enabled をONにする 。
• UITapGesture はクリック、UISwipeGesture は弾く操作、UIPanGesture はドラッグ操作。
• ジェスチャー発動時のメソッドには @objc をつけ、sender から状態（.state）や移動量を取得する。

ユーザーのタッチ入力を完全に自在に操れるようになりました。 明日の Day 22 では、ユーザーに重要な情報を伝えたり、選択を迫ったりする際に多用されるポップアップUI、UIAlertController（アラートとアクションシート）の実装方法を学びます。