ITワクワク塾Pull to Refreshとは？一覧を引いて更新するUIパターン
参照したオンライン文書の版番号：未確認 Webのアクセシビリティ基準：WCAG 2.2
Pull to Refreshは一覧の先頭から下へ引き、内容を取り直す操作です。指を離した後に何が起きるかを決めておくと、見た目だけの更新表示を避けられます。
Pull to Refreshとは
スマートフォンで一覧を読み終えた人が画面を開いたまま新しい情報を確かめたいときに使います。AndroidのPullToRefreshBoxは下へ引く操作、更新中かどうかの状態、更新を始める処理を組み合わせる例です。AppleのSwiftUIでも、一覧にrefreshable(action:)を付けて非同期の更新処理を定義できます。
大切なのは引いた距離に応じた表示と、実際にデータを取り直す処理を分けることです。取得が終わるまで更新中を示し、成功したら内容を差し替えます。失敗時には再試行できる表示が必要です。
2つの画面例
下の図はこのサイトで作った架空の画面です。左の読書リストは一覧の上に更新の進行を示し、右の予定表は更新日時と「更新」を並べています。どちらも、一覧の先頭から下へ引くと同じ再取得処理を呼ぶ想定です。
右のように画面上にも更新手段を置くと、指を下へ動かす操作を使えない人も同じ機能を利用できます。Webでジェスチャーを実装する場合、WCAG 2.2の「Pointer Gestures」も確認してください。
実例から見る設計の違い
Android Developersの公式動画から、一覧の上端に進行を示す表示の強さが違う、更新中の場面を2つ選びました。この節の引用画像は出典元の著作物で、当サイトのCC BY 4.0の対象外です。
例1：標準の更新表示
項目の一覧を下へ引くと、上端に小さな進行表示が現れます。内容を覆わず、何の処理が進んでいるかを一覧との位置関係で伝える例です。
例2：色を変えた更新表示
同じ操作でも、更新表示の背景色と線の色を画面に合わせて調整できます。見た目を変えるときも、更新中の状態と実際の再取得処理を結び付ける点は同じです。
Appleのrefreshable(action:)も、一覧へ非同期の更新処理を付ける形を示す資料です。
設計時には一覧の先頭以外で引いた場合、同時に何度も引いた場合、取得に失敗した場合を決めます。自動更新もある画面なら、手動での更新と競合させず、取得の状態を1つにまとめると分かりやすいでしょう。
AIに画面を依頼するとき
読書リストの先頭を下へ引くと、最新の本を取得してください。取得中は上端に進行を示し、完了後は一覧と更新日時を変えてください。失敗したら失敗の理由と再試行を表示します。画面上の「更新」からも同じ処理を実行できるようにしてください。