ARKitとマイクロインタラクション

今回は、コードの話ではなく、僕がこの１年間のARKit開発で培ったARKitとマイクロインタラクションの知見についての記事を書きたいと思います。

# マイクロインタラクションとは

>ユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのこと
https://webdesign-trends.net/entry/7583

僕も前にこの本を読みました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">オライリーのマイクロインタラクションを読んでいく。<a href="https://t.co/sMXyZcLoSg">https://t.co/sMXyZcLoSg</a></p>&mdash; K-BOY@ARエンジニア (@kboy_silvergym) <a href="https://twitter.com/kboy_silvergym/status/1036956422280339456?ref_src=twsrc%5Etfw">2018年9月4日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Web上だと[マイクロインタラクションを考える上で重要な４つの要素 | UX MILK](https://uxmilk.jp/57155)がよくまとまっています。

マイクロインタラクションは、前述の本で、「トリガー」、「ルール」、「フィードバック」、「ループ＆モード」の４つの要素で表現されています。ARアプリはこの中でも特に「フィードバック」が大事だと思います。**なぜなら大抵の人にとってARは新しく、何が起こっているか分かりにくいからです。**

ユーザーの動作に対して適切な「フィードバック」を与えて、何が現在起こっているのかを伝えるためにマイクロインタラクションが必要です。

# ARKitと相性の良いフィードバック

私がこの１年開発する中でARKitと相性が良いと思ったフィードバックについて紹介します。

- **触覚フィードバック**
- **バイブレーション**
- **音声**
- **カメラレンズとしてのスマホ画面の描画**

これらは全て[ペチャバト](https://itunes.apple.com/jp/app/id1444974380?mt=8)に含まれています。一つずつ説明していきましょう。

## 触覚フィードバック

iOSでは、iOS10から[UIFeedbackGenerator](https://developer.apple.com/documentation/uikit/uifeedbackgenerator)が使えます。コリっとiPhoneから反応が帰ってくるやつです。デバイスはiPhone6sから対応してます。(ARKitと同じ)

- **UIImpactFeedbackGenerator**
- **UINotificationFeedbackGenerator**
- **UISelectionFeedbackGenerator**

の３種類があってそれぞれ使い所が異なります。ARKitで使うのは前者の２つが多いでしょう。

```swift
let feedback = UIImpactFeedbackGenerator()
feedback.prepare() // viewDidLoadとかで事前に行う

// 必要なところで
feedback.impactOccurred()
```

このUIFeedbackGeneratorを使うタイミングですが、ペチャバトの場合は

- 画像マーカーを読み取った時
- 球を当てた時

に触覚フィードバックをいれています。

**画像マーカー**については、画像を読み取るときはスマホを顔から遠ざけるのもあって、触覚で伝えるのが一番最適だなと思ってます。

**球を当てた時**については、ペチャバトは身体を動かしながらプレイするので、球当たったかどうかは視覚的には非常に分かりにくいんですが、触覚フィードバックを入れることで当たったことが少し伝わりやすくなると思います。(それでも夢中になると気づかないけど)

## バイブレーション

先ほどのUIFeedbackGeneratorとは別で、どの端末でもできるのが**バイブレーション**です。

乱用はできませんが、ここぞという時に使うと効果的だと思います。

```swift
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)
```

![GIFイメージ-FDAD321402F0-1.gif](https://qiita-image-store.s3.amazonaws.com/0/111366/5ea95da9-bdf6-65ff-7b99-d43f2a62abb5.gif)

ペチャバトでは、

- バトルのスタート
- 球を当てられた時

のみバイブレーションを使ってフィードバックを与えています。ユーザーの端末がマナーモードであろうが確実にフィードバックが強く与えられるので、**気づいてほしいイベントに対して使う**のはかなり効果的かなと思います。

## 音声

音声の再生の実装はシンプルです。

```swift
import AVFoundation

var player: AVAudioPlayer?

func play(){
    guard let sound = NSDataAsset(name: "music") else {
        return
    }
    player = try? AVAudioPlayer(data: sound.data)
    player?.play()
}
```

あとは、タイミングですが、ペチャバトの場合は

- 球を当てた時
- 球を当てられた時

にしっかり効果音をいれています。

触覚と同様に、当たったかどうかは視覚的に分かりにくいですが、音声と触覚を合わせて伝わりやすくなればと思い実装しています。また、ゲームはやはり音による没入感がでかいですからね。

ただ音声の欠点としては、マナーモードだと出せないことです。その意味で触覚とバイブレーションの方が確実かなと思います。

## カメラレンズとしてのスマホ画面の描画

最後に、**スマホARならではではないか**と思うのがこのフィードバックです。

![file.gif](https://qiita-image-store.s3.amazonaws.com/0/111366/b0cfb281-ae83-7d30-036c-7965cb34457c.gif)

自分に対して当たってきた球をスマホのスクリーン上にはじけさせるような描画をしています。

実際には3D空間上で、的のNodeと球のNodeに当たり判定が発生しただけですが、**ユーザーから見れば、球はスマホに向かって飛んできている**わけで、そこに当たって弾けたらスマホのレンズに広がるというのは没入感を与えるフィードバックになっているのではないかなと思います。

# まとめ
- マイクロインタラクションは「トリガー」、「ルール」、「フィードバック」、「ループ＆モード」の４つの要素で表現される。
- ARKitにおける「フィードバック」に着目した。
- 触覚、バイブレーション、音声、カメラスクリーンという４つのフィードバックの知見を共有した。