MonacaでWikitudeプラグインを使ってARアプリを作る方法
「MonacaでWikitudeプラグインを使ってARアプリを作る」https://ja.onsen.io/blog/monaca-with-wikitude/ に従って,monaca でwikitudeプラグインを使ってARアプリを作っているのですが、
Androidで確認したところ以下のエラーが発生し、処理がいきません。
Uncaught ReferenceError: wikitudePlugin is not defined www/js/index.js:13
また、ソース類は以下のようになっております。
【plugin.xml】
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="com.wikitude.phonegap.WikitudePlugin"
version="5.3.0">
<name>Augmented Reality - Wikitude SDK Plugin</name>
<author>Wikitude GmbH</author>
<keywords>AR,augmented reality,Wikitude,image recognition,cloud recognition</keywords>
<description>
The Wikitude PhoneGap Plugin enables developers to embed an augmented reality view into their PhoneGap project. You can create a fully featured app with advanced augmented reality features, including image recognition, purely using HTML, CSS and JavaScript.
</description>
<repo>https://github.com/Wikitude/wikitude-phonegap.git</repo>
<license>(c) 2016 Wikitude GmbH - see License.md for details of the license</license>
<engines>
<engine name="cordova" version=">=3.0.0" />
</engines>
<!-- copy WikitudePlugin wrapper file into www-folder -->
<js-module src="www/WikitudePlugin.js" name="WikitudePlugin">
<clobbers target="WikitudePlugin" />
</js-module>
<!-- android -->
<platform name="android">
<!-- declare implementation of WikitudePlugin -->
<source-file src="src/android/WikitudePlugin.java" target-dir="src/com/wikitude/phonegap" />
<!-- copy build extras, necessary for wikitude.aar -->
<source-file src="src/android/libs/build-extras.gradle" target-dir="." />
<!-- add permissions and requirements -->
<config-file target="AndroidManifest.xml" parent="/manifest">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_GPS" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:glEsVersion="0x00020000" android:required="true" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.location" android:required="true" />
<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="true" />
<uses-feature android:name="android.hardware.sensor.compass" android:required="true" />
</config-file>
<!-- adds MediaPlayerActivity, required for startVideo feature-->
<config-file target="AndroidManifest.xml" parent="/manifest/application">
<activity android:name="com.wikitude.tools.activities.MediaPlayerActivity" android:screenOrientation="landscape">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
</config-file>
<!-- copy wikitude sdk -->
<source-file src="src/android/libs/wikitudesdk.aar" target-dir="libs/" />
<!-- adds WikitudePlugin in project's config.xml -->
<config-file target="res/xml/config.xml" parent="/*">
<feature name="WikitudePlugin">
<param name="android-package" value="com.wikitude.phonegap.WikitudePlugin"/>
</feature>
</config-file>
<!-- visible after installation -->
<info>
Have fun using world's first AR plugin for PhoneGap. Visit http://www.wikitude.com/developer/documentation/phonegap for detailed documentation for the plugin.
Make sure that you enter your Wikitude SDK trial license key in `WikitudePlugin.js` line 12. If you havent bought a license please visit http://www.wikitude.com/store.
If you want to contribute to the open source project, please visit us at github, http://github.com/Wikitude
</info>
</platform>
<!-- iOS -->
<platform name="ios">
<!-- WikitudePlugin Source -->
<header-file src="src/ios/WTWikitudePlugin.h" />
<source-file src="src/ios/WTWikitudePlugin.m" />
<header-file src="src/ios/WTARViewController.h" />
<source-file src="src/ios/WTARViewController.m" />
<header-file src="src/ios/WikitudeSDK.h" />
<header-file src="src/ios/WTArchitectView.h" />
<header-file src="src/ios/WTNavigation.h" />
<header-file src="src/ios/WTStartupConfiguration.h" />
<header-file src="src/ios/WTArchitectViewDebugDelegate.h" />
<header-file src="src/ios/WTWikitudeTypes.h" />
<source-file src="src/ios/libWikitudeSDK.a" framework="true" />
<source-file src="src/ios/libWikitudeSDK-simulator.a" framework="true" />
<!-- Additional WikitudePlugin libraries and frameworks -->
<framework src="Accelerate.framework" />
<framework src="AssetsLibrary.framework" />
<framework src="AVFoundation.framework" />
<framework src="CFNetwork.framework" />
<framework src="CoreGraphics.framework" />
<framework src="CoreLocation.framework" />
<framework src="CoreMedia.framework" />
<framework src="CoreMotion.framework" />
<framework src="CoreText.framework" />
<framework src="CoreVideo.framework" />
<framework src="Foundation.framework" />
<framework src="MediaPlayer.framework" />
<framework src="OpenGLES.framework" />
<framework src="QuartzCore.framework" />
<framework src="Security.framework" />
<framework src="SystemConfiguration.framework" />
<framework src="UIKit.framework" />
<framework src="libc++.dylib" />
<framework src="libz.dylib" />
<!-- Adopts project's config.xml to include the WikitudePlugin and domain white-lists -->
<config-file target="config.xml" parent="/*">
<feature name="WikitudePlugin">
<param name="ios-package" value="WTWikitudePlugin"/>
</feature>
</config-file>
<!-- visible after installation -->
<info>
Have fun using world's first AR plugin for PhoneGap. Visit http://www.wikitude.com/developer/documentation/phonegap for detailed documentation for the plugin.
Make sure that you enter your Wikitude SDK trial license key in `WikitudePlugin.js` line 53. If you havent bought a license please visit http://www.wikitude.com/store.
If you want to contribute to the open source project, please visit us at github, http://github.com/Wikitude
</info>
</platform>
【index.html】
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
</script>
</head>
<body>
<br />
This is a template for Monaca app.
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
【index.js】
var app = {
// 初期化
initialize: function() {
this.bindEvents();
},
// イベントの設定
bindEvents: function() {
document.addEventListener('deviceready', app.onDeviceReady, false);
},
// 準備完了になったら呼ばれます
onDeviceReady: function() {
wikitudePlugin.isDeviceSupported(
app.onDeviceSupported,
app.onDeviceNotSupported,
[ "2d_tracking"]
);
},
// ARをサポートしている場合に実行
onDeviceSupported: function() {
wikitudePlugin.loadARchitectWorld(
app.onARExperienceLoadedSuccessful,
app.onARExperienceLoadError,
"www/ar.html",
[ "2d_tracking"],
{"camera_position": "back"}
);
},
// デバイスがサポートしていない場合
onDeviceNotSupported: function(errorMessage) {
alert(errorMessage);
},
// ARを読み込んだ場合のコールバック
onARExperienceLoadedSuccessful: function(loadedURL) {
},
// ARを読み込めなかった場合のエラーコールバック
onARExperienceLoadError: function(errorMessage) {
alert('Loading AR web view failed: ' + errorMessage);
}
};
app.initialize();
【www/ar.html】
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
<title></title>
<script src="architect://architect.js"></script>
<script type="text/javascript" src="js/ade.js"></script>
<link rel="stylesheet" href="css/default.css">
</head>
<body>
<script type="text/javascript" src="js/ar.js"></script>
</body>
</html>
【www/ar.html】
var World = {
loaded: false,
// 初期化処理
init: function initFn() {
this.createOverlays();
},
// オーバーレイ表示する指定
createOverlays: function createOverlaysFn() {
this.tracker = new AR.ClientTracker("assets/magazine.wtc");
var imgOne = new AR.ImageResource("assets/imageOne.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
offsetX: -0.15,
offsetY: 0
});
var pageOne = new AR.Trackable2DObject(this.tracker, "*", {
drawables: {
cam: overlayOne
}
});
}
};
World.init();
お手数おかけいたしますが、
この問題を解決する方法をお教えください、よろしくお願いいたします。