MonacaでWikitudeを使ってARアプリを作ってみた

こんにちは、伊藤です!!

Wikitudeというツールを使えば、monacaでもARアプリが作れます。

今回はその作成方法をご紹介したいと思います!

1. ターゲットの設定ファイルを生成する

今回はこれらの画像を対象物として登録します。

cute_tiger cute_cow

まずは、ライセンスキーを下記URLを参考に取得してください。

https://wikitude.grapecity.com/procedure/trial

次に、ターゲットを作成します。

下記URLから行います。

https://targetmanager.wikitude.com/projects/

ログインして、プロジェクトの追加をクリックしてください。

targetmanager-wikitude-com-projects-586e13509615ff1747605e1fipad-3

ターゲットの追加モーダルが現れるので、ターゲットにしたい画像をアップロードします。 

targetmanager-wikitude-com-projects-586e13509615ff1747605e1fipad-2

アップロードが完了したら、WTCボタンをクリックしてください。

生成ボタンをクリックしてください。

targetmanager-wikitude-com-projects-586e13509615ff1747605e1f-ipad-3 targetmanager-wikitude-com-projects-586e13509615ff1747605e1f-ipad-4

指定したメールアドレスに下記メールが届くので、WTCファイルをダウンロードしてください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-05-18-49-40

2. アプリの作成

先程作成したターゲットをカメラでかざすと、下のうさぎの画像を表示させるようにしたいと思います。

img_2756

Monacaで最小限のプロジェクトを指定して新規プロジェクトを作成してください。

https://ja.monaca.io/

次に、プラグインをインストールします。

Wikitude/wikitude-cordova-pluginにてZipファイルでダウンロードし、Monacaの管理画面でアップロードします。

ide-monaca-mobi-project-586e1acb8034514c67d37868-_ga1-186503649-935953543-1473813910ipad-4

index.htmlに下記を追記してください。

<script>
    document.addEventListener('deviceready', function() {

      // --- Wikitude Plugin ---
      var loadARchitectWorld = function(architectWorld) {
        var wikitudePlugin = window.cordova.require('com.wikitude.phonegap.WikitudePlugin.WikitudePlugin');
        wikitudePlugin.isDeviceSupported(function(){
            wikitudePlugin.loadARchitectWorld(function successFn() {
              }, function errorFn(error) {
                alert('Loading AR web view failed: ' + error);
              },
              architectWorld.path, architectWorld.requiredFeatures, architectWorld.startupConfiguration
            );
          }, function(errorMessage) {
            alert(errorMessage);
          },
          architectWorld.requiredFeatures
        );
      };

      // --- End Wikitude Plugin ---
      loadARchitectWorld({path:'www/ar.html',requiredFeatures:['2d_tracking'],startupConfiguration:{camera_position:'back'},requiredExtension:'ObtainPoiDataFromApplicationModel'});
    }, false);
  </script>

次に、ar.htmlをwww直下に作成します。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="architect://architect.js"></script>
    <script>
      var World = {
        loaded: false,

        init: function initFn() {
          this.createOverlays();
        },

        createOverlays: function createOverlaysFn() {
          // 背景画像
          var tracker = new AR.ClientTracker("tracker.wtc");
          //表示される画像
          var imgOne = new AR.ImageResource("cute_rabbit.png");
          //表示される画像の位置
          var overlayOne = new AR.ImageDrawable(imgOne, 1, {
            offsetX: -0.15,
            offsetY: 0
          });
          new AR.Trackable2DObject(tracker, "*", {
            drawables: {
              cam: overlayOne
            }
          });
        }
      };

      World.init();
    </script>
  </head>
  <body>
  </body>
</html>

下記ファイルをwww直下にアップロードしてください。

  • tracker.wtc(先程生成したファイル)
  • cute_rabbit.png(表示したい画像)

3. Wikitudeプラグインの編集

次に plugins/com.wikitude.phonegap.WikitudePlugin/www/WikitudePlugin.js を開いて、

this._sdkKey = "YOUR LICENSE HERE";

上記、YOUR LICENSE HEREの部分に取得したライセンスキーを入力してください。

4. ビルドする

これで準備ができました。

monacaでビルドして、端末にインストールしてください。

すると、下の画像のように可愛いウサギが表示されるかと思います♪

photo_17-01-06-10-15-49-953

このように簡単にmonacaでARアプリが作成出来るので、みなさんも試してみてください!

Monacaアプリのお問い合わせ

お問い合わせはこちら

コメントを残す

メールアドレスが公開されることはありません。