NRIネットコム Blog

NRIネットコム社員が様々な視点で、日々の気づきやナレッジを発信するメディアです

トップ > Technology > ジェスチャー操作が広がる！WatchOS 11の新機能Double Tap API

ジェスチャー操作が広がる！WatchOS 11の新機能Double Tap API

最新WatchOS 11の魅力—特に注目のDouble Tap APIについて、機能から実装方法まで詳しくご紹介します。

Technology Technology - SwiftUI お役立ち情報

はじめに

初めまして、8月にキャリア採用でNRIネットコムに入社した石本です。

これまでiOSとAndroidアプリの開発を主に行ってきており、Apple Watchのアプリの開発経験もあるためネットコムブログでは珍しそうな(?)WatchOSの開発に関する記事を書いてみようと思います。 Apple Watchの記事を書いてるのに僕はApple Watchを持っていません。ほしい...

　

Apple Watchの最新OSであるWatchOS 11が2024年9月16日にリリースされました。

睡眠時無呼吸症候群通知機能やVitalsアプリ等の色々な新機能がありますが、

その中でも特に「Double Tap API」がApple Watchらしい面白い機能だと思ったので調べてみました。

Double Tap APIとは

ひとことでいうと「親指と人差し指を2回ぶつける動作でアプリを操作する機能」です。

Apple Watchを長く使っている方は、それ前からあったような...と思うかもしれません。

実際に親指と人差し指を2回ぶつける動作(以下ダブルタップと呼びます)は、2021年からApple Watchで使用することができていました。 AssistiveTouchと呼ばれる機能です。

ただ今回のDouble Tap APIは、従来のジェスチャー機能と比べてより汎用的に、使いやすく、そして何より開発者視点で見たときにとても魅力的になった機能です。

従来の機能と比較しての機能や、開発時の実装方法などについて紹介していきます。

AssistiveTouchとの違い

従来のジェスチャーを利用した機能としてAssistiveTouchがあります。

AssistiveTouchは2021年秋にリリースされたWatchOS 8から追加された機能です。 Apple Watchの設定アプリ→アクセシビリティから設定できる機能で、タップ(親指と人差し指を1回ぶつける動作)・ダブルタップ・クレンチ(手をパーからグーに握る動作)・ダブルクレンチ(クレンチを2回)のジェスチャーを検知しApple Watchを操作できます。

しかし、これはあくまでもアクセシビリティ向上のための機能の一種であることから、できる操作は画面タップの代わりとして使えるところまでです。

タップで選択中の項目を切り替えてクレンチで選択して画面タップの代わりにする、みたいな感じです。

　

私がAssistiveTouchを初めて使ってみたときに感じたことは、「結局画面見ながらじゃないと使いにくいなぁ」でした。

AssistiveTouchをオンにしても、結局は現在選択中の画面や項目はどれなのかということを画面を見て確認しながら操作しないといけないためです。

画面を見ることに集中はできる(時計をつけてる腕を上げれる)状態かつ反対の手だけは埋まってる、という状況では便利ですが、とても限定的です。

　

しかし今回のDouble Tap APIはダブルタップしか検知できないとはいえ、アプリが開かれていれば画面を見ずともジェスチャーだけで操作することができます。

アプリに使い慣れた後なら、指を動かすだけで操作が可能になります。

さらにDouble Tap APIは画面項目を操作するわけではなく、アプリとしてジェスチャー時の動作を実装しておくため、アプリの実装次第で音楽の再生やアラームの設定、解除など、幅広い動作を実行することができます。

つまり、Apple Watchの画面を介すことなく直感的にジェスチャー操作を行えることが、AssistiveTocuchとDouble Tap APIの一番の違いかと思います。

　

またWatchOS 10.1の頃より、これに似た機能がApple Watch Series 9とApple Watch Ultra 2の機種でのみ実装されていましたが、今回のDouble Tap APIはOSの機能であるため、WatchOS 11に対応していれば全ての機種で利用できることも魅力です。

実装方法

実装はとても簡単でダブルタップをした際に実行したい処理のボタンに.handGestureShortcut(.primaryAction)を書くだけ！

ボタンに設定すれば、ダブルタップをすることで設定したボタンの画面タップ時の動作が実行されるようになります。

実装例

具体例としては以下のようになります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            /// ジェスチャーボタン
            Button(action: {
                print("Tapped GestureButton")
            }, label: {
                Text("ジェスチャーボタン")
            }).handGestureShortcut(.primaryAction)
        }
    }
}

これは最もシンプルな実装例となっており、画面に表示されているボタンをタップすることでログを出力する画面です。

このButtonに.handGestureShortcut(.primaryAction)をつけることで、ボタンの画面タップだけでなくダブルタップでもログ出力をすることが可能になります。

isEnabledでジェスチャー検知の有効状態を切り替え可能

.handGestureShortcut( )の第２引数のisEnabledにBoolを設定することで、ジェスチャー検知時にアクションを実行するかどうかを指定できます。(デフォルトはtrue)

表示中の画面のボタンが認識される

複数の画面でそれぞれ.handGestureShortcut( )を設定した場合は現在表示中の画面で設定されているアクションが実行されます。

import SwiftUI

struct FirstView: View {
    var body: some View {
        NavigationStack {
            Text("画面1")
            NavigationLink("画面2へ遷移") {
                SecondView()
            }
            /// ジェスチャーボタン1
            Button(action: {
                print("Tapped GestureButton1")
            }, label: {
                Text("ジェスチャーボタン1")
            }).handGestureShortcut(.primaryAction)
        }
    }
}

struct SecondView: View {
    var body: some View {
        NavigationStack {
            Text("画面2")
            /// ジェスチャーボタン2
            Button(action: {
                print("Tapped GestureButton2")
            }, label: {
                Text("ジェスチャーボタン2")
            }).handGestureShortcut(.primaryAction)
        }
    }
}

上記のようなコードの場合、FirstView表示中にダブルタップをするとジェスチャーボタン1が、SecondView表示中にダブルタップをするとジェスチャーボタン2のアクションが実行されます。

SimulatorでのDoubleTapApiの実行の仕方

先ほどのgif画像のように、Simulatorでアプリ起動後に左上のメニュー→Device→Double Tapを選択することで、ジェスチャーの検知をSimulator上で行うことができます。僕のような実機を持ってないエンジニアでも簡単に開発できちゃいます。

同じ画面内の複数のViewに対して設定してはいけない

例えば、以下のようなコードで同一の画面に複数のDouble Tap APIを設定するのはAppleから非推奨とされており、複数のDouble Tap APIを設定しても同時にアクションが発生するわけではなく、いずれか1つしか発生しませんでした。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            /// ジェスチャーボタン1
            Button(action: {
                print("Tapped GestureButton1")
            }, label: {
                Text("ジェスチャーボタン1")
            }).handGestureShortcut(.primaryAction)
            
            /// ジェスチャーボタン2
            Button(action: {
                print("Tapped GestureButton2")
            }, label: {
                Text("ジェスチャーボタン2")
            // 同一画面内で2つ以上のhandGestureShortcut()は非推奨
            // どちらか片方のアクションしか動作しない
            }).handGestureShortcut(.primaryAction)
        }
    }
}

もしどうしても1つの画面で複数のジェスチャー検知時の動作を実装したい場合は、isEnabledで有効状態を管理するようにするべきでしょう。

さいごに

Double Tap APIの機能や実装方法についてまとめてみました。

Double Tap APIを利用することでどんな動作でもダブルタップをトリガーに実行することができるようになりました！

実装もとても簡単なため、これからのApple Watchアプリ開発では、アプリの最も主要な動作をダブルタップで実行できることを前提としたデザインが主流になるかもしれません。

　

また、現在のDouble Tap APIは名前の通りダブルタップしか検知できず、登録可能な動作も1画面に対して1つのみになっています。 AssistiveTouchではダブルタップ動作だけでなく、タップやクレンチも検知できます。今後これらのジェスチャーもDouble Tap APIとして利用可能になれば、複数の動作をアプリに登録することができるようになり、よりハンズフリーで画面の必要のない直感的なApple Watchアプリが作れるようになるかもしれません。

参考文献

watchOS 11の新機能 - WWDC24 - ビデオ - Apple Developer

watchOS 11 - Apple Developer

handGestureShortcut(_:isEnabled:) | Apple Developer Documentation

執筆者: 石本夏野 iOSアプリ開発が主なフロントエンドエンジニア 現在はAWS勉強中...