<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="1" class="code-line">この記事は下にあるような簡単なコードで試した上でのものです。私が知らない事情が他にあるかもしれない。</p>
</div></aside>
<p data-line="4" class="code-line">この記事は、ユーザーの操作にどう対応するかを決める <code>GestureMask</code> を観測する。</p>
<h2 id="%E7%92%B0%E5%A2%83" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h2>
<p data-line="8" class="code-line">Sequoia 15.1<br>
Xcode 16.1</p>
<p data-line="11" class="code-line">シミュレータ</p>
<ul data-line="13" class="code-line">
<li data-line="13" class="code-line">iPhone13 iOS15.5</li>
<li data-line="14" class="code-line">iPhone14 iOS16.4</li>
<li data-line="15" class="code-line">iPhone15 iOS17.5</li>
<li data-line="16" class="code-line">iPhone16 iOS18.1</li>
</ul>
<h2 id="%E8%A6%B3%E6%B8%AC%E3%82%B3%E3%83%BC%E3%83%89" data-line="18" class="code-line">
<a class="header-anchor-link" href="#%E8%A6%B3%E6%B8%AC%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> 観測コード</h2>
<div class="code-block-container"><pre><code class="code-line" data-line="20">import SwiftUI

struct A: View {
    var body: some View {
        VStack {
            B()
            Text("Hello, world!")
        }
        .gesture(TapGesture().onEnded({ _ in
            print("A")
        }), including: .gesture) //⭐️ここを切り替える
    }
}

struct B: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            
        }
        .gesture(TapGesture().onEnded({ _ in
            print("B")
        }))
    }
}
</code></pre></div><p data-line="50" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/ca2d5499673d-20241108.png" loading="lazy" class="md-img"></p>
<h2 id="%E5%8F%8D%E5%BF%9C%E3%82%92%E8%A6%B3%E6%B8%AC%E3%81%99%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D" data-line="52" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%8D%E5%BF%9C%E3%82%92%E8%A6%B3%E6%B8%AC%E3%81%99%E3%82%8B%E3%81%A8%E3%81%93%E3%82%8D" aria-hidden="true"></a> 反応を観測するところ</h2>
<p data-line="54" class="code-line"><code>including:</code> の引数を切り替えて</p>
<ul data-line="56" class="code-line">
<li data-line="56" class="code-line">Bのエリア内</li>
<li data-line="57" class="code-line">Aのエリア内、かつ、Bのエリア外</li>
</ul>
<p data-line="59" class="code-line">を観測する。</p>
<p data-line="61" class="code-line">反応がありえるところは表にすると</p>
<table data-line="63" class="code-line">
<thead data-line="63" class="code-line">
<tr data-line="63" class="code-line">
<th></th>
<th>子(B)のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="65" class="code-line">
<tr data-line="65" class="code-line">
<td>親が反応</td>
<td>★</td>
<td>★</td>
</tr>
<tr data-line="66" class="code-line">
<td>子が反応</td>
<td>★</td>
<td>-</td>
</tr>
</tbody>
</table>
<p data-line="68" class="code-line">となる。</p>
<h2 id=".all" data-line="70" class="code-line">
<a class="header-anchor-link" href="#.all" aria-hidden="true"></a> .all</h2>
<blockquote data-line="72" class="code-line">
<p data-line="72" class="code-line">Enable both the added gesture as well as all other gestures on the view and its subviews.</p>
</blockquote>
<table data-line="74" class="code-line">
<thead data-line="74" class="code-line">
<tr data-line="74" class="code-line">
<th></th>
<th>子(B)のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="76" class="code-line">
<tr data-line="76" class="code-line">
<td>親が反応</td>
<td>-</td>
<td>○</td>
</tr>
<tr data-line="77" class="code-line">
<td>子が反応</td>
<td>○</td>
<td>-</td>
</tr>
</tbody>
</table>
<h2 id=".gesture" data-line="79" class="code-line">
<a class="header-anchor-link" href="#.gesture" aria-hidden="true"></a> .gesture</h2>
<blockquote data-line="81" class="code-line">
<p data-line="81" class="code-line">Enable the added gesture but disable all gestures in the subview hierarchy.</p>
</blockquote>
<h3 id="ios15.5-ios16.4-ios17.5" data-line="83" class="code-line">
<a class="header-anchor-link" href="#ios15.5-ios16.4-ios17.5" aria-hidden="true"></a> iOS15.5 iOS16.4 iOS17.5</h3>
<table data-line="85" class="code-line">
<thead data-line="85" class="code-line">
<tr data-line="85" class="code-line">
<th></th>
<th>子(B)のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="87" class="code-line">
<tr data-line="87" class="code-line">
<td>親が反応</td>
<td>○</td>
<td>○</td>
</tr>
<tr data-line="88" class="code-line">
<td>子が反応</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="ios18.1" data-line="90" class="code-line">
<a class="header-anchor-link" href="#ios18.1" aria-hidden="true"></a> iOS18.1</h3>
<table data-line="92" class="code-line">
<thead data-line="92" class="code-line">
<tr data-line="92" class="code-line">
<th></th>
<th>子(B)のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="94" class="code-line">
<tr data-line="94" class="code-line">
<td>親が反応</td>
<td>-</td>
<td>○</td>
</tr>
<tr data-line="95" class="code-line">
<td>子が反応</td>
<td>○</td>
<td>-</td>
</tr>
</tbody>
</table>
<h2 id=".subviews" data-line="97" class="code-line">
<a class="header-anchor-link" href="#.subviews" aria-hidden="true"></a> .subviews</h2>
<blockquote data-line="99" class="code-line">
<p data-line="99" class="code-line">Enable all gestures in the subview hierarchy but disable the added gesture.</p>
</blockquote>
<table data-line="101" class="code-line">
<thead data-line="101" class="code-line">
<tr data-line="101" class="code-line">
<th></th>
<th>子(B)のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="103" class="code-line">
<tr data-line="103" class="code-line">
<td>親が反応</td>
<td>-</td>
<td>-</td>
</tr>
<tr data-line="104" class="code-line">
<td>子が反応</td>
<td>○</td>
<td>-</td>
</tr>
</tbody>
</table>
<h2 id=".none" data-line="106" class="code-line">
<a class="header-anchor-link" href="#.none" aria-hidden="true"></a> .none</h2>
<blockquote data-line="108" class="code-line">
<p data-line="108" class="code-line">Disable all gestures in the subview hierarchy, including the added gesture.</p>
</blockquote>
<h3 id="ios15.5-ios16.4-ios17.5-1" data-line="110" class="code-line">
<a class="header-anchor-link" href="#ios15.5-ios16.4-ios17.5-1" aria-hidden="true"></a> iOS15.5 iOS16.4 iOS17.5</h3>
<table data-line="112" class="code-line">
<thead data-line="112" class="code-line">
<tr data-line="112" class="code-line">
<th></th>
<th>子(B)のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="114" class="code-line">
<tr data-line="114" class="code-line">
<td>親が反応</td>
<td>-</td>
<td>-</td>
</tr>
<tr data-line="115" class="code-line">
<td>子が反応</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="ios18.1-1" data-line="117" class="code-line">
<a class="header-anchor-link" href="#ios18.1-1" aria-hidden="true"></a> iOS18.1</h3>
<table data-line="119" class="code-line">
<thead data-line="119" class="code-line">
<tr data-line="119" class="code-line">
<th></th>
<th>子(B)のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="121" class="code-line">
<tr data-line="121" class="code-line">
<td>親が反応</td>
<td>-</td>
<td>-</td>
</tr>
<tr data-line="122" class="code-line">
<td>子が反応</td>
<td>○</td>
<td>-</td>
</tr>
</tbody>
</table>
<h2 id="%E6%84%9F%E6%83%B3" data-line="124" class="code-line">
<a class="header-anchor-link" href="#%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 感想</h2>
<p data-line="126" class="code-line">説明の文章と違うなという印象があります。今後も変更されるかもしれません。</p>
<h2 id="%E5%8B%9D%E6%89%8B%E3%81%AA%E4%BA%88%E6%83%B3" data-line="128" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%9D%E6%89%8B%E3%81%AA%E4%BA%88%E6%83%B3" aria-hidden="true"></a> 勝手な予想</h2>
<p data-line="130" class="code-line">勝手な予想ですが、5つあるといいかも</p>
<h3 id=".all-1" data-line="132" class="code-line">
<a class="header-anchor-link" href="#.all-1" aria-hidden="true"></a> .all</h3>
<table data-line="134" class="code-line">
<thead data-line="134" class="code-line">
<tr data-line="134" class="code-line">
<th></th>
<th>子のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="136" class="code-line">
<tr data-line="136" class="code-line">
<td>親が反応</td>
<td>○</td>
<td>○</td>
</tr>
<tr data-line="137" class="code-line">
<td>子が反応</td>
<td>○</td>
<td>-</td>
</tr>
</tbody>
</table>
<p data-line="139" class="code-line">不自然にならないように注意。<br>
親と子の反応の内容の性質が違うときなどに必要になることがあるかも。</p>
<h3 id="%E8%A6%AA%E7%B7%8F%E5%8F%96%E3%82%8A" data-line="142" class="code-line">
<a class="header-anchor-link" href="#%E8%A6%AA%E7%B7%8F%E5%8F%96%E3%82%8A" aria-hidden="true"></a> 親総取り</h3>
<table data-line="144" class="code-line">
<thead data-line="144" class="code-line">
<tr data-line="144" class="code-line">
<th></th>
<th>子のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="146" class="code-line">
<tr data-line="146" class="code-line">
<td>親が反応</td>
<td>○</td>
<td>○</td>
</tr>
<tr data-line="147" class="code-line">
<td>子が反応</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<p data-line="149" class="code-line">子は無効にして親が総取り。</p>
<h3 id="subview%E5%84%AA%E5%85%88" data-line="151" class="code-line">
<a class="header-anchor-link" href="#subview%E5%84%AA%E5%85%88" aria-hidden="true"></a> subview優先</h3>
<table data-line="153" class="code-line">
<thead data-line="153" class="code-line">
<tr data-line="153" class="code-line">
<th></th>
<th>子のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="155" class="code-line">
<tr data-line="155" class="code-line">
<td>親が反応</td>
<td>-</td>
<td>○</td>
</tr>
<tr data-line="156" class="code-line">
<td>子が反応</td>
<td>○</td>
<td>-</td>
</tr>
</tbody>
</table>
<p data-line="158" class="code-line">子の操作が重要なので優先する。親はその他のエリアで反応する。</p>
<h3 id="subview%E3%81%AE%E3%81%BF" data-line="160" class="code-line">
<a class="header-anchor-link" href="#subview%E3%81%AE%E3%81%BF" aria-hidden="true"></a> subviewのみ</h3>
<table data-line="162" class="code-line">
<thead data-line="162" class="code-line">
<tr data-line="162" class="code-line">
<th></th>
<th>子のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="164" class="code-line">
<tr data-line="164" class="code-line">
<td>親が反応</td>
<td>-</td>
<td>-</td>
</tr>
<tr data-line="165" class="code-line">
<td>子が反応</td>
<td>○</td>
<td>-</td>
</tr>
</tbody>
</table>
<p data-line="167" class="code-line">親は無効にする。が子の操作は必要不可欠。<br>
親のジェスチャーは定義しておくが、状況によって親のジェスチャーを無効にするときにこれに切り替える。</p>
<h3 id=".none-1" data-line="170" class="code-line">
<a class="header-anchor-link" href="#.none-1" aria-hidden="true"></a> .none</h3>
<table data-line="172" class="code-line">
<thead data-line="172" class="code-line">
<tr data-line="172" class="code-line">
<th></th>
<th>子のエリア</th>
<th>子のエリアの外</th>
</tr>
</thead>
<tbody data-line="174" class="code-line">
<tr data-line="174" class="code-line">
<td>親が反応</td>
<td>-</td>
<td>-</td>
</tr>
<tr data-line="175" class="code-line">
<td>子が反応</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<p data-line="177" class="code-line">状況によってエリア全体を無効にするときにこれに切り替える。</p>
<h2 id="%E8%A1%8C%E5%8B%95" data-line="179" class="code-line">
<a class="header-anchor-link" href="#%E8%A1%8C%E5%8B%95" aria-hidden="true"></a> 行動</h2>
<p data-line="181" class="code-line">昨年、フィードバックアシスタントでAppleに5パターン案を提案しました。</p>


【SwiftUI】GestureMask 観測隊

Discussion