iOS17から始める感触フィードバック実装

iOS17から始める感触フィードバック実装 SansanモバイルエンジニアLT会 yoshitaka

yoshitaka iOS エンジニア コネヒト：出産育児系のQAアプリ ママリ 趣味：パデル 経験：スペインの田舎町にて0歳児の専業育児

話すこと • HIGで感触フィードバックを理解する • iOS17以降での感触フィードバック実装方法

Human Interface Guideline https://developer.apple.com/jp/design/human-interface-guidelines/playing-haptics

• https://developer.apple.com/jp/design/human-interface-guidelines/playing-haptics

感触フィードバックのベストプラクティス ・触覚フィードバックの使い方には一貫性を持たせる。 ・触覚フィードバックは、アプリのほかのフィードバックを補完する形で使用する。 ・触覚フィードバックは多用しすぎないようにする。 ・触覚フィードバックの提供によって、別のユーザ体験が影響を受ける可能性があることを認識する。

触覚フィードバックのある標準UIコンポーネント ・Toggle、DatePicker ・List のPull-to-Refresh

感触フィードバックの種類 ・noti cation：タスクやアクションの結果を表現する ・成功（success） ・警告（warning） ・エラー（error） ・impact：物質的なメタファーによって視覚的な体験を補完したい場合に使用する ・ライト（light） ・ミディアム（medium） ・ヘビー（heavy） ・硬い（rigid） ・柔らかい（soft） ・selection：UI要素の値が変化したことを表現する fi ・選択（selection）: UI要素の値が変化したことを知らせる

感触フィードバックの種類 fi https://developer.apple.com/jp/design/human-interface-guidelines/playing-haptics#Noti cation

感触フィードバックの実装方法 • init → prepare(optional) → trigger → release(optional) var feedbackGenerator : UISelectionFeedbackGenerator? = nil @IBAction func gestureHandler(_ sender: UIPanGestureRecognizer) { switch(sender.state) { case .began: // Instantiate a new generator. feedbackGenerator = UISelectionFeedbackGenerator() // Prepare the generator when the gesture begins. feedbackGenerator?.prepare() case .changed: // Check to see if the selection has changed... if myCustomHasSelectionChangedMethod(translationPoint: sender.translation(in: view)) { // Trigger selection feedback. feedbackGenerator?.selectionChanged() // Keep the generator in a prepared state. feedbackGenerator?.prepare() } case .cancelled, .ended, .failed: // Release the current generator. feedbackGenerator = nil default: // Do Nothing. break }}

iOS17以降での感触フィードバック実装方法 https://developer.apple.com/documentation/swiftui/view/sensoryfeedback(̲:trigger:condition:)

iOS17以降での感触フィードバック実装方法 struct MyView: View { @State private var showAccessory = false var body: some View { ContentView() .sensoryFeedback(.selection, trigger: showAccessory) .onLongPressGesture { showAccessory.toggle() } if showAccessory { AccessoryView() } } }

iOS17以降での感触フィードバック実装方法 struct MyView: View { @State private var phase = Phase.inactive var body: some View { ContentView(phase: $phase) .sensoryFeedback(.selection, trigger: phase) { old, new in old == .inactive || new == .expanded } } enum Phase { case inactive case preparing case active case expanded } }

まとめ • 感触フィードバックの乱用は気をつけましょう • 標準コンポーネントにも感触フィードバックは実装されている • iOS17以降では感触フィードバックの実装が簡単になりました

参考 • https://developer.apple.com/documentation/swiftui/view/ sensoryfeedback(̲:trigger:) • https://developer.apple.com/documentation/uikit/ uifeedbackgenerator#2555399

• https://developer.apple.com/documentation/swiftui/view/sensoryfeedback(_:trigger:)
• https://developer.apple.com/documentation/uikit/uifeedbackgenerator#2555399

ご清聴ありがとうございました