読者です 読者をやめる 読者になる 読者になる

アプリを新次元に導く3D Touch | try! Swift Tokyo 2017 #tryswiftconf Day1-4 聞き起こし

try! Swift Tokyo 2017

twitter.com

In this talk, we’ll learn about what the 3D Touch APIs have to offer and best practices for using them. We’ll see what is provided out of the box and what customizations were added in iOS10. Throughout the talk, we’ll explore some cool examples of how to add 3D Touch support to your apps today.

この講演では3DタッチAPIで何ができるか?そして3DタッチAPIを使うベストプラクティスを学びます。元々どのような機能があり、iOS10でどのようなカスタマイズが加えられたかを見ていきます。クールな事例を通してあなたのアプリを3Dタッチに対応させる方法を探っていきましょう。

アプリを新次元に導く3D Touch

f:id:niwatako:20170302121036j:plain

f:id:niwatako:20170302121042j:plain

3D touchの概要となぜそれが素晴らしいのかというお話をします。

今日はツアーという形でこれらを見ていきたいと思います。

そしてAPIをみていきたいと思います。最後にAPIのDeepダイブをしていきます。

f:id:niwatako:20170302121128j:plain

皆さん3Dtouchはご存知だと思いますがiPhone6s以降搭載されました。 ユーザーが画面に圧力をかけたことを検知できます。 Appleは開発に5年を費やしました。だからこそ自分のアプリに採用したいですね。

ユーザーがアプリの機能にずっと早くたどり着けるようになります。従来のやり方をしなくて良いように方法を提供しています。3D touchは簡単にアクセスできる手法になっています。

もう一つのモチベーションとしてAppStoreでのフィーチャーもあります。

f:id:niwatako:20170302121254j:plain

f:id:niwatako:20170302121255j:plain

f:id:niwatako:20170302121307j:plain

シンプルに利用できます。

f:id:niwatako:20170302121334j:plain

3D touch の統合は実際にアプリを作りながらみていくのが良いと思います。デモアプリです。外国で役に立つフレーズを紹介します。

アプリを開くと日常の場面が表示されます。

f:id:niwatako:20170302121353j:plain

これを念頭にHomeScreenQuickアクションをみます。

最大4つ追加できます。ユーザーが価値を見出すものを優先的に表示すると良いでしょう。

静的アクションと、一つの動的アクションを用意しています。at cafeです。あとで説明します。

f:id:niwatako:20170302121544j:plain

静的クイックアクションはコンパイル時に作成され、インストールすると利用できます。Info.plistに入れておきます。

f:id:niwatako:20170302121544j:plain

上の二つは必須です。上は識別子、したはタイトル。

f:id:niwatako:20170302121636j:plain

ダイナミックなアクション

f:id:niwatako:20170302121703j:plain

このフィーチャーをユーザーが使ったことがなければ表示されません。 先ほどと同じような定義をします。

喫茶店に行くという操作をするとショートカットのArrayに入れておく。 そうするとアクションが見えるようになる。

クイックアクションをタップした時にこのようなコードが実行されることになる。

f:id:niwatako:20170302121756j:plain

今度はWidget

f:id:niwatako:20170302121842j:plain

活用するために3D touchを利用します

二つのディスプレイモードがある。通常コンパクトモードが表示されます。

次にピーク&ポップ

f:id:niwatako:20170302121947j:plain

3D touchでプレビューできる。

f:id:niwatako:20170302121948j:plain

そのまま遷移したり

f:id:niwatako:20170302121950j:plain

そのためにはユーザーが3D touchを利用できるか確認する必要がある。

f:id:niwatako:20170302122024j:plain

あるいは設定で3D touchをOffにしている場合がある。

ViewControllerでなら、ランタイムにチェックをします。

f:id:niwatako:20170302122049j:plain

ViewDidLoadでチェックすると言いでしょう。

確認したあと、アップデートをリッスンする必要があります。プロパティが変化する必要があるからです。使っている途中に設定が変更される場合があるからです。

f:id:niwatako:20170302122112j:plain

古い機能で互換性のある機能があるかを確認してみます。ロングプレスで似たようなUIを提供できます。

f:id:niwatako:20170302122156j:plain

f:id:niwatako:20170302122243j:plain

Peek & Popの利用には、Delegateに準拠します。

f:id:niwatako:20170302122244j:plain

コミットはユーザーが押し込んで遷移する時に呼ばれる。

ごく短時間で対応できます

f:id:niwatako:20170302122346j:plain

実際に押している圧力で調整したいときはどうしたら良いでしょう

iOS10からの提供でどのくらい強くタッチしているのかを0-10の数値で取得できます。

タップすると発話してくれるような機能で、押し込み具合で読み上げ速度を調節します。

f:id:niwatako:20170302122509j:plain

f:id:niwatako:20170302122511j:plain

f:id:niwatako:20170302122512j:plain

f:id:niwatako:20170302122536j:plain

f:id:niwatako:20170302122545j:plain

トランジションプログレスに合わせて再生速度を調節できます。指を上げたら再生ボタンを無くし、ポーズ状態に遷移します。

デリゲートを実装することでかなり簡単に早くユーザーに付加価値を提供することができます。

f:id:niwatako:20170302122658j:plain

3D touchを通知に対して行うとより多くのコンテンツを表示できます。

ユーザーの注目を瞬間的に引き付ける方法です。

ユーザーの場所を特定できるようにしています。喫茶店の横を歩いた時に、コーヒーを注文したいですか?という通知を表示して、押し込むと、コーヒーを注文するフレーズが表示されます。

f:id:niwatako:20170302122740j:plain

f:id:niwatako:20170302122742j:plain

フレームワークをインポートしてExtensionを作成します。

f:id:niwatako:20170302122844j:plain

一つだけ、DidRecieveを実装します。

f:id:niwatako:20170302122909j:plain

通知のUserInfoDictionaryの情報を表示すべきです。

フレーズ、日本語と英語の対訳を取り出します。

f:id:niwatako:20170302123014j:plain

f:id:niwatako:20170302123021j:plain

ツイッターでフォローしていただければコードサンプルをツイートします。

Q&A

テストに関しての質問ですが、自動テストを3D touchで行うことは出来るでしょうか

実はこれはとてもいい質問で、テストに関しては私は専門ではない、あまり良く考えていないですが、コードサンプルをご覧頂いて、また私の方でも検討してみたいと思います。

3D touchは後方互換性を確保しているが、何らかのラッパーみたいなものは考えていますか?

じつは使ったことはないですが、サードパーティーライブラリでオープンソースのものが有りますので利用できると思います。

みんなの反応

もっと反応を見る

togetter.com

気に入った記事は はてなブックマーク

はてなブックマークアプリiOS開発チームから来ました!はてなブックマークにはSwift特集があります!良い記事を見逃さないように、ご利用ください!

http://b.hatena.ne.jp/hotentry/it/Swift

そして良い記事があったらはてなブックマークでブックマークしましょう!

try! Swift の記事で盛り上がると嬉しいです!