ARKitで笑顔トラッキングアプリを作る方法【初心者向けステップ解説】

ARKitは一見とっつきにくく感じられますが、iOSアプリ開発の基本的な経験があれば、それほど難しいものではありません。

私は「手を動かして学ぶ」タイプなので、ARKitに慣れるために簡単なアプリをいくつか作って遊んでいます。この記事では、シンプルな顔トラッキングアプリを作る過程で学んだことをまとめました。

内容は以下の3つのパートに分かれています。

1. 初期設定 → まずはカメラの権限を取得し、デバイスがARKitに対応しているかを確認します。
2. 笑顔トラッキング → ARKitを使って笑顔の検出を開始します。おそらく、これが一番知りたい部分でしょう。
3. ユーザーインターフェース → 笑顔に反応するUIをアプリに追加します。

なお、執筆時点ではXcodeシミュレータはフロントカメラに対応していません。そのため、アプリを実行するには実機が必要です。また、TrueDepthカメラ搭載のデバイス(iPhone X以降なら問題ありません)も必要になります。

最後に、「コピペ部」の仲間のために、すべてのコードをGithubで公開しています。

初期設定

まずXcodeを開き、「SmileTracker」(名前は任意)という新しいプロジェクトを作成しましょう。

顔トラッキングに入る前に、次の2つの作業を行う必要があります。

1. デバイスがARKitに対応していることを確認する
2. デバイスのカメラへのアクセス許可を取得する

新規プロジェクトでViewController.swiftを開きます。ファイル上部のimport UIKitの下に、import ARKitという行を追加してください。これで、Appleが用意してくれた便利な機能を使って、顔トラッキングを簡単に実装できるようになります。

次に、viewDidLoad内に以下のコードを追加します。

guard ARFaceTrackingConfiguration.isSupported else {
    fatalError("Device does not support face tracking")
}

ARFaceTrackingConfiguration.isSupportedはブール値で、アプリを実行するデバイスが顔トラッキングに対応していればtrue、非対応ならfalseを返します。ここでは、対応していない場合はfatal errorでアプリをクラッシュさせるようにしています。

続いて、カメラの使用許可を取得しましょう。guard文の下に、以下のコードをviewDidLoad内に追加します。

AVCaptureDevice.requestAccess(for: AVMediaType.video) { granted in
   if (granted) {
      Dispatch.main.sync {
          // この関数は後ほど実装します
          self.setupSmileTracker()      
      }
   } else {      
      fatalError("User did not grant camera permission!")   
   }
}

ここでは、デバイスに対してカメラの権限をリクエストしています。ユーザーが許可すれば、笑顔トラッキングをセットアップする関数が実行されます(エラー表示が出ても心配いりません。この関数はすぐ後で実装します)。

関数をDispatch.main.syncで囲んでいるのは、この中でUI要素を追加するためです。UIの操作はメインスレッドで行う必要があります。

さらに、Info.plistにCamera Usage Descriptionを追加する必要があります。Info.plistを開き、新しい行を追加してください(最終行を選択してenterキーを押すことで追加できます)。

作成した行のKey列にPrivacy — Camera Usage Descriptionを入力し、Type列がStringになっていることを確認します。Value列は空欄のままでも構いませんし、カメラをどのように使うのかをユーザーに説明するメッセージを記載してもよいでしょう。

すると、Info.plistは次のような状態になります。

ここまでの段階でアプリをテストしたい場合は、setupSmileTracker()を呼び出している行をコメントアウトしてください。後で忘れずに元に戻しましょう。

この時点でアプリを実行すると、カメラの権限を有効にするかどうかを尋ねるポップアップが表示されるはずです。「いいえ」を選択した場合、アプリを実行するには設定画面から権限を有効にする必要があります。

アプリがクラッシュした場合は、コンソールに表示された2種類のエラーメッセージを確認して、原因を特定しましょう。

笑顔トラッキング

ViewController.swiftを開き、ViewControllerクラスの先頭に以下の変数を追加します。

class ViewController: UIViewController {   
   let sceneView = ARSCNView()
   
   override func viewDidLoad() {...}
}

ARSCNViewには、iPhoneがAR体験を制御するためのARSessionが組み込まれています。今回は、このsceneViewのARSessionを使って、フロントカメラ経由でユーザーの顔を解析します。

viewDidLoadの下に、次の関数を追加してください。

func setupSmileTracker() {   
   let configuration = ARFaceTrackingConfiguration()   
   sceneView.session.run(configuration)   
   sceneView.delegate = self   
   view.addSubview(sceneView)
}

ここでは、顔トラッキングを処理するためのconfigurationを作成し、それを使ってsceneViewのARSessionを実行しています。

その後、sceneViewのdelegateをselfに設定し、ビューに追加します。

すると、ViewControllerがARSCNViewDelegateに準拠していないため、Xcodeがエラーを警告してくるはずです。ファイル上部のViewController宣言箇所に移動し、以下のように書き換えましょう。

class ViewController: ViewController, ARSCNViewDelegate {   
   ...
}

次に、ViewControllerクラス内のsetupSmileTrackerに、このARSCNViewDelegate関数を追加します。

func renderer(_renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {
   ...
}

rendererはシーンが更新されるたびに実行され、ユーザーの顔に対応するARAnchorを受け取ることができます。

顔トラッキング体験を簡単に作れるように、ARFacetrackingConfigurationでセッションを実行すると、Appleが自動的にARFaceAnchorを作成してセッションに追加してくれます。このARFaceAnchorは、ARAnchorとしてrendererに渡されます。

rendererに以下のコードを追加しましょう。

func renderer(_renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {   
   // 1      
   guard let faceAnchor = anchor as? ARFaceAnchor else { return }
   
   // 2   
   let leftSmileValue = faceAnchor.blendshapes[.mouthSmileLeft] as! CGFloat
   let rightSmileValue = faceAnchor.blendShapes[.mouthSmileRight] as! CGFloat
   
   // 3
   print(leftSmileValue, rightSmileValue)
}

この関数の中では多くのことが行われているので、手順に番号を振りました(Ray Wenderlichスタイルです)。

ステップ1では、ARAnchorをARFaceAnchorに変換し、faceAnchor変数に代入しています。

ARFaceAnchorには、トラッキングしている顔の現在の位置や向き、トポロジー、そして表情に関する情報が含まれています。

ARFaceAnchorは、表情に関する情報をblendShapesという変数に格納しています。blendShapesは、さまざまな顔の特徴に対応する係数を保存する辞書です。興味があれば、Appleのドキュメントで顔の特徴の全リストを確認することをおすすめします(ヒント:しかめっ面の検出を追加したい場合も、ここに方法があります)。

ステップ2では、faceAnchor.blendShapesを使い、キーmouthSmileLeftとmouthSmileRightから、ユーザーの口の左側と右側がどれだけ笑っているかに対応するCGFloat値を取得しています。

最後にステップ3では、2つの値を出力して、正しく動作しているかを確認できるようにしています。

この時点で、あなたのアプリは以下のことができるようになっているはずです。

• ユーザーからカメラと顔トラッキングの権限を取得する
• ARKitを使ってユーザーの表情をトラッキングする
• 口の左右それぞれの笑顔度合いをコンソールに出力する

かなり進捗しましたね。ここで一度、すべてが正常に動作しているか確認しておきましょう。

アプリを初めて起動すると、カメラの権限を許可するかどうか尋ねられるので、必ず「はい」を選択してください。

その後、真っ白な画面に遷移しますが、しばらくすると(多少の遅延がある場合があります)、コンソールにCGFloatの値が出力され始めるはずです。

スマホに向かって笑いかけてみてください。出力される値が上がっていくのがわかるはずです。笑えば笑うほど、数値が大きくなります。

正常に動作していれば、おめでとうございます!エラーが発生している場合は、デバイスが顔トラッキングに対応しているか、カメラの権限が有効になっているかを再確認してください。最初からこの記事に沿って進めていれば、どちらの場合もコンソールにエラーが出力されるはずです。

ユーザーインターフェース

顔のトラッキングができたので、今度は笑顔に反応するUIを作りましょう。

まず、smileLabelという新しいUILabelを、sceneViewの直下にあるファイル先頭付近に追加します。

class ViewController: UIViewController {   
   let sceneView = ARSCNView()      
   let smileLabel = UILabel()
   
   ...
}

これが、ユーザーの表情に反応するビューになります。

setupSmileTracker関数の末尾に、以下のコードを追加してください。

smileLabel.text = "?"smileLabel.font = UIFont.systemFont(ofSize: 150) 

view.addSubview(smileLabel)

// 制約を設定
smileLabel.translatesAutoresizingMaskIntoConstraints = false
smileLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
smileLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

ここでは、smileLabelに基本的なUIプロパティを設定し、画面中央に配置されるよう制約を加えています。この状態でアプリを実行すると、画面中央に巨大な絵文字が表示されるはずです。

絵文字が表示されたら、ViewControllerに次の関数を追加しましょう。

func handleSmile(leftValue: CGFloat, rightValue: CGFloat) {
   let smileValue = (leftValue + rightValue)/2.0
   switch smileValue {      
   	  case _ where smileValue > 0.5:         
      	 smileLabel.text = "?"      
      case _ where smileValue > 0.2:         
         smileLabel.text = "?"      
      default:         
         smileLabel.text = "?"      
   }
} 

この関数は、ユーザーがカメラに向かってどれだけ笑っているかに応じて、smileLabelの絵文字を切り替えます。smileValueは、ARFaceAnchorから得られた左右の笑顔値の平均を計算したものです(とても科学的ですね、わかっています)。

この値をswitch文に渡すことで、ユーザーが笑うほど絵文字が嬉しそうな表情に変わります。

最後に、renderer関数に戻り、末尾に以下のコードを追加して、左右の笑顔値をhandleSmileに渡しましょう。

DispatchQueue.main.async {   
   self.handleSmile(leftValue: leftSmileValue, rightValue: rightSmileValue)
}

ここでもDispatchQueueを使用しています。UIの変更はメインスレッドで行う必要があるからです。

アプリを実行すると、笑顔の度合いに応じて絵文字が変化するようになったのが確認できるはずです。

下のGIFでは、カメラ映像と一緒に絵文字が動作する様子がわかるよう、私の顔も写しています。

あなたのアプリにはカメラ映像は表示されませんが、ARSCNView(sceneView)をスーパービューに追加してサイズを指定すれば、表示させることができます。

まとめ

この記事が、ARKitを使ったアプリ開発を始めるきっかけになれば幸いです。

さらにこのアプリを発展させたい方は、前述のトラッキング可能な顔の特徴リストをチェックしてみてください。しかめっ面の検出に拡張するヒントも残してあります。

自分で作った面白いプロジェクトがあれば、ぜひコメントで教えてください。私自身もまだ学び始めたばかりなので、より複雑なアプリを見られるのが楽しみです。

このアプリのコードはすべてGithubに公開しています。フィードバックや質問をお待ちしています。読んでいただきありがとうございました。良い開発ライフを!

最後まで読んでいただきありがとうございます!この記事が気に入ったら、Twitterでフォローしてください。執筆中の記事や近況について投稿しています。