サクッとARkitでミニチュアキズナアイを現実世界に召喚させる

#はい、どうもー！！
Unite Tokyo 2018にも登場した、最近話題のバーチャルユーチューバー、キズナアイを現実世界に召喚させたい！！！
って思いで、メモがてら記事を書きました
#実装環境
MacOS 10.13.4
IOS 11.4 (beta)
Xcode 9.4 (beta)
blender 2.79
#手順
キズナアイのモデルをswiftで読み込めるように変換してから、実装します

#環境構築
(xcode,blender)のダウンロードは省略します

①
まずは、キズナアイのモデルをダウンロードしましょう！
https://kizunaai.com/download-page/
解凍してどっかに置いてください！

②
ウェブサイトやファイルを見て気づいた方もいるかもしれませんが、キズナアイのモデルの形式はPMXです
ってことで、ブレンダーでPMXを開けるようにする必要があります

https://github.com/sugiany/blender_mmd_tools
こちらからBlenderのMMDのアドオンをダウンロードしましょう（zipダウンロードで構いません）
どっかに保存しておいてください

次にBlenderにアドオンをぶち込みます
のblenderを右クリックしてパッケージの内容を表示してください
![スクリーンショット 2018-05-11 21.29.58.png](https://qiita-image-store.s3.amazonaws.com/0/113524/0732a895-fcd1-6b95-5124-47b39fcaac97.png)
そこから、Contents -> Resources -> 2.79(著者の環境では) -> scripts -> addonsに移動します
今さっきダウンロードしたMMDアドオンをフォルダ（解凍した中のmmd_tools)ごと入れます
![スクリーンショット 2018-05-11 22.44.13.png](https://qiita-image-store.s3.amazonaws.com/0/113524/9f8796c6-fb94-2fda-9785-ce90ca950f97.png)

完了したらBlenderを起動しましょう！
Blenderは日本語設定で解説します（やり方は各自ggりでお願いします）

左上から
ファイル -> ユーザ設定を開きます。
その中のアドオンタブを開いて、mmdで検索し、チェックを入れて有効化します

![スクリーンショット 2018-05-11 22.48.35.png](https://qiita-image-store.s3.amazonaws.com/0/113524/c107f72c-ec0a-ac23-1bee-7bdcea80380e.png)
作業が終わったらこのウィンドウは閉じて構いません

#実装
まず初期画面ではいらないオブジェクトがあります。全部消しましょう（右クリックでそれぞれ選択して、Xキーを押す）

全部消えたら、左側にmmd_toolsというタブがあると思うので選択します！（下図①）
そして、import modelから、今さっきダウンロードしたモデルを読み込みます(下図②)
![スクリーンショット 2018-05-11 22.54.15.png](https://qiita-image-store.s3.amazonaws.com/0/113524/7f56bd01-84ee-6bf8-0550-ea14be0fc930.png)

Downloads/KizunaAI_ver1.01/KizunaAI_ver1.01/kizunaai/kizunaai.pmxを読み込みます（読み込みボタンは赤枠）
![スクリーンショット 2018-05-11 22.58.14.png](https://qiita-image-store.s3.amazonaws.com/0/113524/9e9db963-7119-4ba2-eac3-dbe4a86bcc4b.png)

テクスチャを適用した姿で見るために左下の白いまるポチからマテリアルを選択します。
色が乗りました。**世界一可愛いキズナアイちゃんです！！！**
(目がなくても大丈夫です）
![スクリーンショット 2018-05-11 23.00.30.png](https://qiita-image-store.s3.amazonaws.com/0/113524/c0036440-1979-a10c-adda-c6671366ed1d.png)

とりあえずここでBlenderは放置してXcodeのプロジェクトを作りましょう

Augmented Reality App を選択したください
project nameとかは適当にしましょう
![スクリーンショット 2018-05-11 23.04.32.png](https://qiita-image-store.s3.amazonaws.com/0/113524/f87fe58b-bca0-e62d-54a0-30a63eb97bd4.png)


Blenderに戻って、ファイル -> エクスポート -> Colladaを選択します
XcodeプロジェクトファイルのAssets.xcassets下にCOLLADAのエクスポートをします
なおエクスポートする時の設定は**絶対に**以下のようにしてください
ファイル名は任意のもので構いません。
![スクリーンショット 2018-05-11 23.13.56.png](https://qiita-image-store.s3.amazonaws.com/0/113524/3edf7f48-6c9c-e0aa-89b4-21eab8a92397.png)

Xcodeに戻って、

```swift:ViewController.swift
let scene = SCNScene(named: "art.scnassets/ship.scn")!
```
を

```swift:ViewController.swift
let scene = SCNScene(named: "art.scnassets/kizunaai.dae")!
```
みたいに書き出したファイル名にします
これで実行するとキズナアイちゃんがリアリワールドに現れます！！！（部屋を晒したくないので画像ありません！すいません！）

#ミニチュアに
完成し、実行したら
***あれ？？？キズナアイちゃんでかくね？？？？***
となると思います。（上を向いちゃだめですよ！！）
そうです、サイズがおかしいですし宙に浮いてます
```ViewController.swift```を編集しましょう。

今さっき編集したここらへん
![スクリーンショット 2018-05-11 23.22.45.png](https://qiita-image-store.s3.amazonaws.com/0/113524/de267b58-91f9-7992-7230-d2d99641d1f1.png)
を以下のように編集します。

```swift:ViewController.swift
let scene = SCNScene(named: "art.scnassets/kizunaai.dae")!
scene.rootNode.name = "ai"
scene.rootNode.scale = SCNVector3(0.05, 0.05, 0.05)
sceneView.scene.rootNode.addChildNode(scene.rootNode)
//sceneView.scene = scene <----コメントアウトしてください
```
そして```ViewController.swift```内に以下のコードを追記します。

```swift:ViewController.swift
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        
        let results = sceneView.hitTest(
            sceneView.center,
            types: .estimatedHorizontalPlane
        )
        
        if let result = results.first {
            self.sceneView.scene.rootNode.childNode(withName: "ai", recursively: false)?.position = SCNVector3(
                result.worldTransform.columns.3.x,
                result.worldTransform.columns.3.y,
                result.worldTransform.columns.3.z
            )
        }
    }
```

これで、実行！！！！！して！！！！！！！!召喚したい場所をタップすると！！！
***かわえええええええええええ***
<img width="375" alt="IMG_5043.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/113524/e9e3847c-bd81-8db2-9774-4ea6ccc06125.png">
<img width="375" alt="IMG_5042.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/113524/cf81de52-4fdb-54c7-8c8c-11b3d7eef899.png">
<img width="375" alt="IMG_5041.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/113524/4229f9ea-a95c-3357-896a-4d86b1e19618.png">

#終わりに
ってことで、見事に自己満足を達成させました
次はモーションを付けたいです！！！
またねーー！

```swift:ViewController.swift
import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()
        sceneView.delegate = self
        sceneView.showsStatistics = true
        let scene = SCNScene(named: "art.scnassets/kizunaai.dae")!
        scene.rootNode.name = "ai"
        scene.rootNode.scale = SCNVector3(0.05, 0.05, 0.05)
        sceneView.scene.rootNode.addChildNode(scene.rootNode)
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        let configuration = ARWorldTrackingConfiguration()
        sceneView.session.run(configuration)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        sceneView.session.pause()
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let results = sceneView.hitTest(
            sceneView.center,
            types: .estimatedHorizontalPlane
        )
        if let result = results.first {
            self.sceneView.scene.rootNode.childNode(withName: "ai", recursively: false)?.position = SCNVector3(
                result.worldTransform.columns.3.x,
                result.worldTransform.columns.3.y,
                result.worldTransform.columns.3.z
            )
        }
    }
}
```