ITワクワク塾Swipe Actionとは？一覧の一件を横へ動かして操作する方法
参照したオンライン文書の版番号：未確認 Webのアクセシビリティ基準：WCAG 2.2
Swipe Actionは一覧の一件を横へ動かし、その項目に使える操作を示す仕組みです。一覧全体を更新するPull to Refreshとは対象が異なります。
Swipe Actionとは
AndroidのSwipeToDismissBoxが示すのは、項目を左右へ動かして更新または削除する例です。AppleのSwiftUIでは一覧行へswipeActionsを付けられます。左右に別の操作を割り当てる場合は、方向と結果を利用者に伝える設計が必要です。
操作を隠して画面をすっきり見せられる一方、初めて見る人は操作の存在に気づかない場合があります。各行のメニューにも同じ機能を置けば、見つけやすくなり、指を動かす操作が難しい場合にも使える設計です。
2つの画面例
左はタスクを右へ動かして完了にする例、右は受信箱の行を左へ動かして「あとで読む」を示す例です。架空の画面では動かした後に現れる領域へ動詞を表示し、色だけで意味を判断させないようにしました。
全幅まで動かすと直ちに実行する設計なら、意図しない操作にも備えます。SwiftUIのallowsFullSwipeは全幅スワイプで最初の操作を自動実行するかを決める設定です。削除のように結果が大きい操作は確認や取り消しの方法まで考えてください。
実例から見る設計の違い
Android Developersの公式動画では、同じ行を動かす方向によって「完了」と「削除」が切り替わります。この節の引用画像は出典元の著作物で、当サイトのCC BY 4.0の対象外です。
例1：右へ動かして完了
行を右へ動かす途中で青い背景と四角い印が現れます。行を離す前に結果を予告する形で、色だけに頼らず印でも意味を示す例です。
例2：左へ動かして削除
反対側へ動かすと赤い背景と削除の印が現れます。完了とは結果が異なるため、方向に加えて取り消しの方法も画面内で用意したい場面です。
AppleのswipeActionsでは、どちらの端から操作を出すかと、全幅まで動かした場合の振る舞いを指定する仕組みです。
WebではWCAG 2.2の「Pointer Gestures」に照らし、同じ機能をクリックやタップでも使えるようにします。
AIに画面を依頼するとき
タスクを右へ動かすと「完了」を表示し、指を離したときに完了状態へ変えてください。左へ動かす操作には削除を割り当てます。削除後は元に戻せるようにし、各行のメニューからも完了と削除を選べるようにしてください。