3D touch for iOS

3D#touch#for#iOS2015/09/16@TachibanaKaoru

自己紹介渋谷のVOYAGE'GROUPでiOSエンジニアをしています。Twi$er/Vainglory/:/@TachibanaKaoruBlog/:/h$p://www.toyship.org/

注意

今日の資料はAppleが一般に公開した資料をもとにしています。なお、この資料の内容サンプルコードや発表資料から類推したものであり、シミュレーターや実機での動作確認を行っていません。間違いを含む可能性があります。（実機入手後確認予定。）

What%is%3D%touch?Specifica(on

iOS9で導入された感圧機能を使った新しい機能対応端末はiPhone6S/iPhone6S,plus

一部の機能は9.1からとなりますが、9.0からすでに実装できる機能がほとんどです。

Pressure&Sensi*vity

タッチの圧力を判定してアプリの機能を拡張できます。例えばスケッチアプリであれば、圧力に応じて線を太くしたり、色を濃くしたりする実装をすることもできます。圧力の感知だけでなく、今タッチしているものがスタイラスか指かの判定も可能です。

Quick&Ac(ons

ホーム画面のアプリアイコンを押すことで、メニューを表示することができるようになりました。

Peek$and$Pop

次の画面を出すような画面で、画面遷移をする前に、次の画面をちらっと見ることができる機能。表示されたチラ見画面にメニューをつけたりすることもできます。

3D#Touch#の動作確認

なお、現時点では3D#touch関連の機能の動作確認はシミュレーターではできません。実際の動作は、対応端末が発売されるまで待ちましょう。

Pressure&Sensi*vityImplementa)on

Pressure&Sensi*vity

基本的には、UITouchクラスに追加されているforce(CGFLoat)

値を使ってアプリの機能に応じて実装します。また、UITouchのtype(UITouchType)から、touch処理がどこから行われているかの情報が取得できます。enum UITouchType : Int { case Direct case Indirect case Stylus}

Pressure&Sensi*vity

9.1ではさらにUITouchクラスに下記の要素などが追加される予定。+,al/tudeAngle:,CGFloat,{,get,}+,azimuthAngleInView(_,view:,UIView?),+>,CGFloat

スタイラスの圧力だけではなく、入力角度なども取得できるようになりそうです。

Quick&Ac(onsImplementa)on

Quick&Ac(ons

設定方法は下記の２種類あります。!"sta&c"quick"ac&ons"!"必ず表示される固定メニュー。"!"アプリのino.plistで定義!"dynamic"quick"ac&ons"!"ユーザーの状況などによって内容が変更できるメニュー。"!"コードで設定

Quick&Ac(onsメニューの表示順

表示数には上限数があり、info.plistに設定された*sta,c*ac,onsがまず表示されます。（上限数は現時点では明記されていない）sta,c*ac,onsを表示した後に表示数に余裕がある場合には、dynamic*ac,onsも表示されます。アプリの初回起動時前には、sta,c*ac,onsしか表示されません。

Quick&Ac(onsImplementa)on

dynamic(ac)onsの場合には、UIApplica)onShortcutItemオブジェクトを作成して、UIApplica)onに登録します7(localizedTitle7(localizedSub)tle7(type7(icon7(userInfo

Quick&Ac(onsアイコンについて

UIApplica)onShortcutItem3に設定できるアイコンはUIApplica)onShortcutIconとなっており、システムで用意されたアイコン、自分で用意するアイコン、連絡先アイコンのうちから選択可能です。（自分で用意する場合は35x35pointで、単色のみ使用可能）

Quick&Ac(ons実装例!(add!dynamic!ac*ons)

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { if let shortcutItems = application.shortcutItems where shortcutItems.isEmpty {

let shortcutPlay = UIMutableApplicationShortcutItem( type: "MyApp.MenuType001", localizedTitle: "Play", localizedSubtitle: "with this title", icon: UIApplicationShortcutIcon(type: .Play), userInfo: nil ) application.shortcutItems = [shortcutPlay] } ... }

Quick&Ac(ons実装例!(add!sta'c!ac'ons)

// info.plist <key>UIApplicationShortcutItems</key> <array> <dict> <key>UIApplicationShortcutItemIconType</key> <string>UIApplicationShortcutIconTypeSearch</string> <key>UIApplicationShortcutItemSubtitle</key> <string>shortcutSubtitle1</string> <key>UIApplicationShortcutItemTitle</key> <string>shortcutTitle1</string> <key>UIApplicationShortcutItemType</key> <string>$(PRODUCT_BUNDLE_IDENTIFIER).First</string> <key>UIApplicationShortcutItemUserInfo</key> <dict> <key>firstShorcutKey1</key> <string>firstShortcutKeyValue1</string> </dict> </dict> </array>

Quick&Ac(ons実装例!(ac%onsがよばれた時)

// in AppDelegate func application(application: UIApplication, performActionForShortcutItem shortcutItem: UIApplicationShortcutItem, completionHandler: Bool -> Void) {

guard ShortcutIdentifier(fullType: shortcutItem.type) != nil else { return false }

guard let shortCutType = shortcutItem.type as String? else { return false }

switch (shortCutType) { case "Menu1": // Menu1の処理 case "Menu2": // Menu2の処理 default: } }

Peek$and$PopImplementa)on

Peek$and$Pop

Peek$and$Popの流れ(1)特定のエリアを軽く押す(Peek)

(2)Peek画面が表示される（押すのをやめると元の画面に戻る）(3)さらに強く押す(Pop)とPeek画面が大きくなり、目的のview画面となる

Peek$and$Pop

Master'Detail形式のプロジェクトで実装する場合の標準的な流れ(1)$3Dtouchが使えるか確認し、どのviewがpeekの対象になるかを設定。同時にpeek処理のdelegateを設定。(2)$ユーザーがPeekジェスチャーに対して、peekの表示対象となるviewControllerの作成と、表示されるサイズ（高さのみ）を指定。(3)$ユーザーがPopジェスチャーに対して、peekで作成されたviewControllerの通常表示処理を行う。

Peek$and$Pop実装例!(1)!peekのviewを指定して、delegateを設定。

// MasterViewController override func viewDidLoad() {

super.viewDidLoad()

if traitCollection.forceTouchCapability == .Available { registerForPreviewingWithDelegate(self, sourceView: myview) } }

Peek$and$Pop実装例!(2)!Peekジェスチャーの実装

// MasterViewController func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {

let detailViewController = ...//表示したいviewControllerを生成する

//表示するPeek画面の高さを設定する detailViewController.preferredContentSize = CGSize(width: 0.0, height: 50.0)

//Peek画面が出る前にBlurしない領域を設定する previewingContext.sourceRect = myview.frame

return detailViewController }

Peek$and$Pop実装例!(3)!Popジェスチャーの実装

// MasterViewController func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {

//表示用のviewControllerはpeekの時に生成されているので、それを再利用する showViewController(viewControllerToCommit, sender: self) }

Peek$and$Pop

Peek時にAc&onMenuを追加することもできます。

Peek$and$Pop実装例!Ac$onMenuの追加

// DetailViewController override func previewActionItems() -> [UIPreviewActionItem] {

let actionMail = UIPreviewAction(title: "Send mail", style: .Default, handler:{item,viewcon in // send mail }) let actionDelete = UIPreviewAction(title: "Delete mail", style: .Destructive, handler:{item,viewcon in // delete mail })

return [actionMail,actionDelete] }

Peek$and$PopImplementa)on

UIWebViewやMKWebViewでは、リンク先をPeekする機能がすでに実装されていますが、デフォルトではoffになっています。allowsLinkPreviewをtrueにすると使えるようになります。

まとめ• 3D$touch機能は、まだ実機やシミュレーターでの動作確認はできませんが、実装は可能です。

• 実装自体はそれほど難しくはないので、是非試してみることをお勧めします。