[Flutter開発]FlutterとARKitを組み合わせてiPhoneのARアプリを作成してみる

はじめに

iPhoneでAR（拡張現実）を表示できるアプリを作ってみようと思う。
iOSでARアプリを作る場合はApple公式のARkitを使用するのが一般的だと思うが、このARkitをクロスプラットフォームアプリを作成できるFlutterで使えるようにしたい。

有り難いことに、FlutterでARkitを使用するための「arkit_flutter_plugin」というパッケージがpubで公開されており、さらにこのパッケージを使用したサンプルも公開されているので、まずはこのサンプルをiPhone上で動かすことを目標とする。

AndroidでARアプリを作成したい場合

[Flutter開発]FlutterとARCoreを組み合わせてAndroidのARアプリを作成してみる という記事も作成しているので、こちらを参考にしてほしい。

環境情報

開発環境

• MacOS Mojave 10.14.6
• Android Studio 3.5
• Flutter 1.10.3-pre.66
• arkit_plugin 0.2.1

端末環境

• iPhone7(Simulator) iOS 12.4
• iPhone7(実機) iOS 12.3.1

作成手順

新規のFlutterプロジェクトを作成

新規のFlutterプロジェクトを作成する。名前は「flutter_arkit_test_app」としてみた。

arkit_pluginのインストール

Flutterプロジェクトを作成できたら、pubspec.yamlを開いてarkit_pluginの記述を追加する。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  arkit_plugin: any #この行を追加

main.dartを開き、「Get Dependenceis」を押してarkit_pluginをインストールする。

コード0が表示されればインストールは成功。

main.dartの書き換え

main.dartを以下の内容に書き換える。

main.dart

import 'package:flutter/material.dart';
import 'package:arkit_plugin/arkit_plugin.dart';
import 'package:vector_math/vector_math_64.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ARKitController arkitController;

  @override
  void dispose() {
    arkitController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: const Text('ARKit in Flutter')),
      body: ARKitSceneView(onARKitViewCreated: onARKitViewCreated));

  void onARKitViewCreated(ARKitController arkitController) {
    this.arkitController = arkitController;
    final node = ARKitNode(
        geometry: ARKitSphere(radius: 0.1), position: Vector3(0, 0, -0.5));
    this.arkitController.add(node);
  }
}

/ios/Runner/Info.plist の書き換え

Android Studioで/ios/Runner/Info.plistを開き、以下の4行を追加する。

Info.plist

    <key>io.flutter.embedded_views_preview</key>
    <string>YES</string>
    <key>NSCameraUsageDescription</key>
    <string>Describe why your app needs AR here.</string>

※「Describe why your app needs AR here.」の部分は用途に応じて書き換えたほうが良いかもしれないが、とりあえずサンプルのままとしている。

実行してみる

iPhone7(Simulator)で実行してみた結果

なにやらデバイス周りのエラーが出ていてシミュレータでは素直に動いてくれない模様。
こういうときは実機のほうが早いので（特にiOSシミュレータでカメラ周りの機能を使う場合）、実機での動作確認に切り替える。

iPhone7(実機)で実行してみる

実機で実行しようとした場合でもエラーが出たが、このエラーはだいたい予想がつく。
Provisioning Profileが見つからないという内容だ。

Xcodeを起動し、Flutterプロジェクトの/ios/Runner/を開く。
RnnnerのSigningで、Termが指定されていない類のエラーが表示されていると思う。

TermにiPhoneと同一のAppleIDを指定してエラーが解消されることを確認する。

再度Flutterプロジェクトを実行し、サンプルをiPhone上で確認できれば成功。
カメラの映像上に3Dの球体がARで合成されて表示されるはずだ。

その他のサンプル

以下のGithubリポジトリをクローンし、exampleをAndroid Studioで開いてこれまでの流れと同様の手順で実行すれば、各種ARのサンプルを見ることができる。
ARKit Flutter Plugin

各種ARサンプルの概要はpub.devのarkit_flutter_pluginを参照。

サンプル実行時の注意点

サンプルのRnnnerも、そのままだと動かないので自分の環境に合わせて変更する必要がある。
まず「Bundle Identifier」は、自身のCompany domainに書き換える。（Flutterの新規プロジェクトを作成するときにデフォルトで表示されているCompany domainと同じでよい）
あと、Termでもエラーが出ていると思うので、ここもこれまでの手順と同様に自分のAppleIDに変更する。

まとめ

Provisioning Profileまわりのエラー以外は特に難しい問題もなく、意外とあっさりとサンプルを動かすことができた。
まだサンプルの内容を読み込めていなが、実装は通常のFlutterとDartの書き方に則っており、読み進めることや試しに改変してみることはやりやすそうだ。
このサンプルを足がかりに、次のステップはオリジナルのARアプリを作成してみたいと考えている。

参考URL

• pub.dev (arkit_flutter_plugin)
• Github (arkit_flutter_plugin)