こんにちは。河田です。
初投稿になります。これからよろしくお願いします。
さて、最初なので何を書こうと思ったのですが、最近奮闘している開発について書こうと思います。
Cordova+Metaioを使ってARアプリを動かす
今回行ってみたのが、CordovaにMetaio SDKを組み込んで、ARアプリを作成するというもの。
とりあえず、iOSで動かしてみよう。。。
環境
Xcode 6.3
Cordova 4.3.0
Metaio SDK 6.0.2
Metaio
Metaioの説明については、以下のURLに分かりやすく書いてあるので今回は省きます。
http://dev.classmethod.jp/smartphone/iphone/ios-metaio-1/
さて、、、どうするか。
こんなプラグインを発見。
【Metaio Cordova Plugin】
https://github.com/bostondv/metaio-sdk-cordova
でも、”supports up to SDK 5.5″と記載されている。
（試しに6.0でやってみたけどダメでした。）
iOSの64bit対応が、6.0以上じゃないと対応していないらしいので、とりあえず、このプラグインと、Metaio SDKに添付されているサンプルコードを参考に作成してみる。
準備
プロジェクトのplugins以下に、新しいプラグインを作成
[myproject]/
├── plugins/
│ ├── jp.example.metaio
│ ├── plugin.xml
│ ├── src/
│ │ └── ios/
│ │ ├── ARELViewController.h
│ │ ├── ARELViewController.mm
│ │ ├── MetaioPlugin.h
│ │ ├── MetaioPlugin.mm
│ │ └── ARELView.storyboard
│ └── www/
│ ├── MetaioCloudPlugin.bundle
│ └── poi.bundle
├── www/
: ├── index.html
├── js
├── css
├── img
├── arel/
│ └── arel.js
├── metaio
: ├── arelConfig.xml
├── tutorial.html
├── tutorial.css
└── Assets
├── logic.js
├── metaioman.md2
├── metaioman.png
├── radar.png
:
[myproject]/www/metaio以下にあるのは、サンプルに入っていた設定ファイルと素材（3Dデータやアプリ内で表示する画像）ファイルになります。
プラグインの設定
plugin.xmlを編集します。
frameworkが大量に書かれていますが、すべて必要なようです。
[plugin.xml]
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="jp.pilotz.cordova.metaio"
version="0.0.1">
<js-module src="www/metaio.js" name="metaio">
<clobbers target="metaio" />
</js-module>
<platform name="ios">
<!-- 読み込むファイル -->
<header-file src="src/ios/ARELView.h" />
<source-file src="src/ios/ARELView.mm" />
<header-file src="src/ios/MetaioPlugin.h" />
<source-file src="src/ios/MetaioPlugin.mm" />
<source-file src="src/ios/ARELView.storyboard" />
<resource-file src="www/poi.bundle" />
<resource-file src="www/MetaioCloudPlugin.bundle" />
<!-- 必要なframework -->
<framework src="libz.dylib" />
<framework src="libxml2.dylib" />
<framework src="QuartzCore.framework" />
<framework src="CFNetwork.framework" />
<framework src="AudioToolbox.framework" />
<framework src="OpenGLES.framework" />
<framework src="AVFoundation.framework" />
<framework src="Security.framework" />
<framework src="CoreMedia.framework" />
<framework src="CoreLocation.framework" />
<framework src="CoreMotion.framework" />
<framework src="CoreVideo.framework" />
<framework src="CoreImage.framework" />
<framework src="CoreGraphics.framework" />
<framework src="UIKit.framework" />
<framework src="GLKit.framework" />
<framework src="Foundation.framework" />
<framework src="MediaPlayer.framework" />
<framework src="EventKit.framework" />
<framework src="EventKitUI.framework" />
<framework src="WebKit.framework" />
<!-- 設定 -->
<config-file target="config.xml" parent="/*">
<feature name="Metaio">
<param name="ios-package" value="MetaioPlugin"/>
</feature>
</config-file>
<!-- Metaioのライセンスキーをここに書く -->
<config-file target="*-Info.plist" parent="MetaioLicenseString">
<string>[Metaio Signature]</string>
</config-file>
</platform>
</plugin>
プラグインの作成
MetaioPlugin
Cordovaからアクションを受け取った時に、一番最初に読み込まれるファイルが
- MetaioPlugin.h
- MetaioPlugin.mm
になります。
[MetaioPlugin.h]
#import <Cordova/CDV.h>
@interface MetaioPlugin : CDVPlugin<UIWebViewDelegate>
@property(nonatomic, strong) id CDVDelegate;
@end
[MetaioPlugin.mm]
#import <Cordova/CDVPluginResult.h>
#import <Cordova/CDVViewController.h>
#import <Cordova/CDVWebViewDelegate.h>
#import "MetaioPlugin.h"
#import "ARELView.h"
#import "MainViewController.h"
@interface MetaioPlugin ()
@property (nonatomic, strong) ARELView* metaio;
@end
@implementation MetaioPlugin
@synthesize metaio;
@synthesize CDVDelegate;
static UIViewController *mainView = nil;
MainViewController *controller;
- (void) open:(CDVInvokedUrlCommand*)command
{
CDVPluginResult* pluginResult = nil;
@try
{
// AREL configファイルの読み込み
NSString *configPath = @"www/metaio/gps/arelConfig.xml";
NSString *xmlFileName = [[configPath lastPathComponent] stringByDeletingPathExtension];
NSString *xmlPath = [configPath stringByDeletingLastPathComponent];
NSString* arelConfigFile = [NSString stringWithFormat:@"%@", xmlFileName];
NSString* arelDir = [NSString stringWithFormat:@"%@", xmlPath];
NSString* arelConfigFilePath = [[NSBundle mainBundle] pathForResource:arelConfigFile ofType:@"xml" inDirectory:arelDir];
// storyboardの読み込み
self.metaio = [[UIStoryboard storyboardWithName:@"ARELView" bundle:nil] instantiateInitialViewController];
self.metaio.arelFilePath = arelConfigFilePath;
self.metaio.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
[self.viewController presentViewController:metaio animated:YES completion:nil];
// 返却値のセット
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:nil];
}
@catch (NSException* exception)
{
// 返却値のセット（エラー）
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_JSON_EXCEPTION messageAsString:[exception reason]];
}
// 返却
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
@end
ここで行っているのが、Cordovaから”open”というアクションを受け取った際のアクションの設定になります。
アクションを受け取ると同時に、arelConfig.xmlのファイルパスを取得し、ARELViewに渡してViewを切り替えます。
最後に、以下で成功したことを返却しましょう。
[CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:nil];
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
ARELView
以下のファイルは、metaio SDKのサンプルのものを、ファイル名など調整しただけでOKでしたので省略します。
- ARELView.h
- ARELView.mm
- ARELView.storyboard
arelConfig.xml
今回は、LocationBaseARで作成してみました。
arelConfid.xmlには、読み込むオブジェクトやscale（拡大率）などをセットしておきます。
[arelConfig.xml]
<?xml version="1.0" encoding="UTF-8"?>
<results>
<trackingdata url="GPS" />
<arel>tutorial.html</arel>
<object id="1">
<assets3d>
<model>Assets/metaioman.md2</model>
<texture>Assets/metaioman.png</texture>
<transform>
<translation>
<x>0.0</x><y>0.0</y><z>0.0</z>
</translation>
<rotation type="eulerdeg">
<x>0.0</x><y>0.0</y><z>0.0</z>
</rotation>
<scale>
<x>5000.0</x><y>5000.0</y><z>5000.0</z>
</scale>
</transform>
<properties>
<coordinatesystemid>1</coordinatesystemid>
</properties>
</assets3d>
</object>
</results>
trackingDataのurl値には、『GPS』とセットします。
また、最初に読み込むファイルに、”tutorial.html”をセットします。
ARELを利用することで、3Dモデルを表示する際に、距離を加味した大きさで表示してくれるので、モデルのサイズが小さい且つ遠い場所に表示させた場合、見えなくなっていまします。
ということで、scaleは少し大きめに設定してみました。
[tutorial.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../arel/arel.js"></script>
<script type="text/javascript" src="Assets/logic.js"></script>
<link rel="stylesheet" type="text/css" href="tutorials.css">
<title>Tutorial Location Based AR</title>
</head>
<body>
</body>
</html>
tutorial.htmlから、arel.jsとlogic.jsを読み込みます。
[logic.js]
arel.sceneReady(function()
{
var munich = new arel.LLA(35.684425, 139.700266, 0, 0);
arel.Scene.getObject("1").setLocation(munich);
arel.Scene.getObject("1").setVisibility(true,false,true);
arel.Scene.getObject("1").setLLALimitsEnabled(true);
arel.Scene.setLLAObjectRenderingLimits(80, 2500);
});
logic.jsでは、表示させる座標やレンダリングの範囲を設定します。
シグネチャの発行
metaio Developer Portalにアクセスし、シグネチャを発行します。
【metaio Developer Portal】
http://dev.metaio.com/
『My Apps > App registration』でアプリ名とAPP Identiferを設定してください。
metaioSDK App registration
アプリを登録したら、一覧に表示されるのでクリックすると、ページ下部の『SDK Signatures』にSDLバージョンごとのシグネチャが表示されます。
metaioSDK SDK Signature
今回利用しているSDKは、6.0.2になるので、6.xのシグネチャをコピーします。
BasicとFreeの違いは、有料か無料の違いです。
無料版には、metaioのコピー画像が常に表示されてしまうので、表示させたくない場合は有料ライセンスを契約してください。
最後に、先ほどコピーしたシグネチャをplugin.xmlの『MetaioLicenseString』に記載します。
プラグイン側の調整はこれで終了になります。
iOS platformの作成
Cordovaにて、iOSのplatformを作成します。
先ほど作成したプラグインは、pluginsディレクトリに既に入っているので、platformを作成すると同時にインストールされます。
platformの作成方法は、以下一行で完了です。
cordoba platform add ios
SDKの読み込みとXcodeの設定
最後に、XcodeでSDKの追加と設定を行います。
以下のディレクトリに、xcodeprojが作成されているので、Xcodeで読み込みます。
[MyProject]/platforms/ios/
読み込んだら、以下で手動で『metaioSDK.framework』を読み込んでください。
BuildPhases > Link Binary With Libraries
Link Binary With Libraries
まだ、このままでは動きません。
次に、以下の項目を変更する必要があるようです。
Build Settings > Apple LLVM 6.1 – Language- C++
| C++ Language Dialect | GNU++14[-std=gnu++14] |
| C++ Standard Library | libc++ (LLVM C++ standard library with C++11 support) |
※Xcode6.3時点での設定です。
ビルドしてみる
これで、設定は終わりです。
ビルドしてみましょう！
今回、metaioが初めてでしたので、実は結構つまづきましたが、最後はキレイにコードがまとまりました。
次は、Androidで試してみようと思うので、機会があれば書こうと思います。
カッコイイ開発目指します！
