社内勉強会にて発表資料

1. 3D Touchについて

2. 今回
3D Touchを使うことになったので
使い方を調査した

3. 3D Touchとは
「画面を押し込む」機能
その押し込む強さでアクションを変えられる
参考:http://qiita.com/usagimaru/items/e4fb2ba8d8a7ae96b446
公式:https://developer.apple.com/jp/documentation/
UserExperience/Conceptual/Adopting3DTouchOniPhone/index.html

4. 3D Touchとは
アクションの種類
1. 感圧検知
2. Peek and Pop(チラ見とポップ)
3. クイックアクション
1 2 3

5. 3D Touch 対応機種
iPhone 6s以降
iOS9~

6. 感圧検知
・iOSプリインストールのメモアプリで
ブラシに使われている
→画像参照 押す強さでブラシの色の強弱が変わる
・UIViewControllerなら簡単に取得できる
・UITouchクラスのforceプロパティで押す強度が取得可能
CGFloatの値で
0.0〜UITouch.maximumPossibleForce(6.666667)まで

7. 感圧検知 コード例

8. ・ちなみに、WebViewとかsafariでもJavaScriptから取得できる
UIWebView / WKWebViewの場合はallowsLinkPreviewプロパティで非許可可能
↓JavaScriptコード
感圧検知 on Webview

9. ・弱押しでタップ先のプレビュー(Peek)をし、
押し込んでいくとポップアップしてその先が見れる(Pop)機能
・LINEだと未読のままメッセージ読める
と話題に
・UIViewControllerPreviewingDelegateで
イベント取得
Peek And Pop(チラ見とポップ)

10. ・LINEの場合の挙動見てみた
Peek And Pop(チラ見とポップ)
Peek Pop 通常時

11. 実装参考：http://qiita.com/takashings/items/ead3e9d935c2108d55a7
・Peek前の画面で
registerForPreviewingWithDelegate:sourceView:(Swift3ではregisterForPreviewing(with:,sourceView:))
としてUIViewControllerPreviewingDelegateを継承したインスタンス渡す
・Delegateメソッドで下記を実装
Peek開始時:previewingContext(_:viewControllerForLocation:) 次の画面を渡す
Pop時:previewingContext(_:commit:) 次の画面をshowメソッドで表示する
Peek And Pop(チラ見とポップ) 実装方法

12. デモ
Peek And Pop(チラ見とポップ) 実装方法

13. ・ホームのアイコンを3D Touchすると
出てくる簡易メニュー
簡単なウィジェット的なことをしたり、
アプリ内へのショートカットとして使える
ホーム画面におけるクイックアクション

14. ・メニューは4つまで
・テキスト2行まで
・iOS9.0:7種類、iOS9.1以上:30種類のデフォルトアイコン
・独自アイコンも可能
・入りきらないテキストは自動で省略記号（...）を追加される
ホーム画面におけるクイックアクション

15. ・使えるデフォルトアイコン一覧(iOS10.1までの現在) 最新は公式を参照
ホーム画面におけるクイックアクション

16. ・実装方法は、
静的に追加(info.plistに記述するだけ)
動的に追加(コードから生成)
の二つのやり方がある
・動的に追加する場合はアプリ起動後しか表示できない
ホーム画面におけるクイックアクション

17. ホーム画面におけるクイックアクション
・実装前に公式iOS ヒューマンインターフェイスガイドラインを一読することが望ましい
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/3DTouch.html#//apple_ref/doc/uid/TP
40006556-CH71-SW2

18. iOS ヒューマンインターフェイスガイドラインより抜粋
1. ユーザの関心が高く、付加価値の高いタスクに用いる。
2. アプリケーション全体のナビゲーションを簡易に実装する手段としては使わない。
3. ユーザが予期しない形で、ホーム画面に現れているクイックアクションを変更することは避ける。
4. ユーザに対する通知の手段としては使わない。
5. 簡潔な見出し（および場合によっては副見出し）とテンプレートアイコンを用意する。
ホーム画面におけるクイックアクション 実装

19. ・静的に実装する場合
→Info.plistにUIApplicationShortcutItemsキーの配列を定義する
こんな感じ→
ホーム画面におけるクイックアクション 実装
<key>UIApplicationShortcutItems</key>
<array>
<dict>
<key>UIApplicationShortcutItemIconType </key>
<string> UIApplicationShortcutIconTypePlay </string>
<key>UIApplicationShortcutItemTitle</key>
<string>Play</string>
<key>UIApplicationShortcutItemType</key>
<string>com.sample.myapp.play</string>
<key>UIApplicationShortcutItemUserInfo</key>
<dict>
<key>key1</key>
<string>value1</string>
</dict>
</dict>
</array>

20. ホーム画面におけるクイックアクション 実装
・UIApplicationShortcutItemIconTypeに追加したいアイコンを指定
・UIApplicationShortcutItemIconFileに独自アイコンのファイル名も指定可能
・タイトル、サブタイトル、アクション種別名、付与するデータ(Dictionary)も指定可能
参考:http://qiita.com/takecian/items/d417498cfe6c3b52c4bc

21. ・動的に実装する場合
先ほどのinfo.plistに指定したものと同じものをコードから指定するだけ
↓コード例
ホーム画面におけるクイックアクション 実装

22. デモ
ホーム画面におけるクイックアクション

23. ご静聴ありがとうございました
以上