こんにちは、8月からnanapiに入社しました koogawa です。現在は「アンサー」というiOSアプリを開発しております。

さて皆さん、iPhone 6sの「3D Touch」はもう試されたでしょうか？iPhoneの画面を少し深めに押すことでショートカットメニューを表示したり、メールをプレビューできるあの機能です。

アンサーのiOSアプリも早速この機能に対応し、より高速に各機能へアクセスできるようにしました。今回はその実装方法や、実装するにあたって気付いた点などを紹介させて頂きます。

実装した機能

ホーム画面でアンサーのアイコンを3D Touchすると「クイックアクション」メニューが開き、そこからマイページ、参加中のスポット一覧画面、スポット投稿画面を直接開くことができます。

実装方法

アイコンの準備

まずはクイックアクションメニューに表示するアイコンを選びます。予めシステムで用意されたアイコンを使うこともできますが、今回はオリジナルのアイコンを用意しました。

すべてのデバイスに対応できるよう、ベクター形式で作成しています。（Designed by shizuc）

アイコンに使用できる画像の仕様は次の通りです。

35×35 pointであること
単色であること

アップルからアイコンのテンプレートも公開されています。

コードの実装

クイックアクションの実装方法には、予めメニューに表示する項目を設定しておく Static Quick Actions と、コード上で動的に割り当てる Dynamic Quick Actions の二通りの方法があります。

アンサーアプリの場合は、あらかじめメニューに表示する内容が決まっていたので、前者を選択しました。

メニューの項目を定義

クイックアクションメニューに表示する項目を Info.plist に定義します。

<key>UIApplicationShortcutItems</key>
    <array>
        <dict>
            <key>UIApplicationShortcutItemIconFile</key>
            <string>icon_touch_post</string>
            <key>UIApplicationShortcutItemTitle</key>
            <string>スポット投稿</string>
            <key>UIApplicationShortcutItemType</key>
            <string>Post</string>
        </dict>
        <dict>
            <key>UIApplicationShortcutItemIconFile</key>
            <string>icon_touch_talk</string>
            <key>UIApplicationShortcutItemTitle</key>
            <string>参加中</string>
            <key>UIApplicationShortcutItemType</key>
            <string>Participated</string>
        </dict>
        <dict>
            <key>UIApplicationShortcutItemIconFile</key>
            <string>icon_touch_mypage</string>
            <key>UIApplicationShortcutItemTitle</key>
            <string>マイページ</string>
            <key>UIApplicationShortcutItemType</key>
            <string>MyPage</string>
        </dict>
    </array>

それぞれのキーの意味は次の通りです。

UIApplicationShortcutItemIconFile – アイコンに使用する画像のファイル名
UIApplicationShortcutItemTitle – メニューに表示するタイトル
UIApplicationShortcutItemType – メニューのタイプ（詳しくは後述）

これらの項目を追加した時点で、ホーム画面のアプリアイコンを3D Touchするとクイックアクションメニューが表示されるようになります。ただ、これだけだとメニューを選択しても何も起こらないので、次は画面を表示する処理を実装していきます。

起動時に呼ばれるデリゲートメソッド

ユーザーがクイックアクションメニューを選択し、アプリが起動すると、application:performActionForShortcutItem:completionHandler: メソッドが呼ばれます。この中に必要な処理を実装していきます。

func application(application: UIApplication, performActionForShortcutItem shortcutItem: UIApplicationShortcutItem, completionHandler: Bool -> Void) {
    guard let shortcutType = shortcutItem.type as String? else { return }

    // shortcutType によって処理を振り分け

    completionHandler(handledShortCutItem)
}

shortcutItem.type には Info.plist で定義した UIApplicationShortcutItemType の値がセットされています。この値を元に、どのメニューが選択されたのかを判別すると良いでしょう。

ここでポイントなのは、このデリゲートメソッドはアプリがバックグラウンドに残っていた場合でも呼ばれる、ということです。例えばモーダル画面が開かれていた状態でバックグラウンドにいた場合の画面遷移はどうするか？（モーダルを閉じてしまって問題ないのか？）などはしっかり設計しておいたほうが良いでしょう。

処理が完了したら、処理結果（Bool）を completionHandler に伝えます。

クイックアクションの実装については、Apple Developer サイトのサンプルコードも大変参考になります。

実装して気付いたこと

3D Touchはシミュレータでテストできない

まず、開発側の感想として、3D Touchをシミュレータでテストできないのが不便でした。3D Touchのテストをするためには、iPhone 6s または iPhone 6s Plus の実機が必須になります。

Apple Watch シミュレータで Force Touch のテストができるように、今後 3D Touch のテストもできるようになるといいですね。

3D Touchは意外と難しい？

3D Touch機能を実装後、社内のメンバーに使ってもらったのですが、うまく「深押し」ができないメンバーが多いことに気付きました。特に爪が長い人にとっては「指の腹を使って画面を強く押す」操作が難しいようです。

このことから、3D Touchを利用した機能はあくまで補助的なものと位置付け、全く使用しなくてもアプリが機能するように設計する事が必要だと感じました。

まとめ

以上、3D Touchの実装方法や、実装するにあたって気づいた点を紹介させて頂きました。この記事が何かの参考になれば幸いです。

nanapiでは、スマートフォンアプリを作りたいエンジニアさんを大募集中です！私達と一緒に働いてみませんか？

株式会社nanapi エンジニア採用サイト

アンサーの iOS アプリを 3D Touch 対応した話