一覧に戻る

Titaniumモジュールのセットアップ

2017.06.15Titaniumモジュール

Titaniumモジュールのセットアップ(Android)

このトピックでは、Titaniumモジュールのセットアップ方法について示します。

ArchitectView

Wikitude SDKでは、「ArchitectView」と呼ばれるWebビューを拡張したUIコンポーネントを提供します。ArchitectViewでは標準のWebビューでは実装できない、AR体験をレンダリングできます。

ArchitectView用のコンテンツは、JavaScriptとHTMLを使用して開発されます。ArchitectView用の*.htmlおよび*.jsファイルは、Titanium用の*.jsファイルと異なります。

Titaniumモジュールのセットアップ

TitaniumプロジェクトにてWikitude Titaniumモジュールを使用するには、ダウンロードページからWikitude Titaniumモジュールをダウンロードします。

使用方法の詳細については、AppceleratorのサイトにあるTitaniumモジュールの使用方法(英語)をご参照ください。モジュールがプロジェクトに追加された後、プロジェクトのモジュール構成にTitaniumモジュールがリストされていることをご確認ください。

サンプルアプリの使用方法

Wikitude Titaniumモジュールを使用したサンプルアプリが提供されています。このサンプルアプリはGitHubでホストされています。このサンプルアプリは、Wikitude Titaniumモジュールと共にARchitectViewの使用方法を確認できます。

サンプルアプリのビルド方法

  1. GitHubからサンプルアプリをクローンまたはダウンロードして、zipファイルを解凍します。

  2. 新しいワークスペースを作成します。

  3. 新規作成されたワークスペースにて「プロジェクトのインポート」を選択します。

  4. すべてのオプションから「既存のモバイルプロジェクト」を選択します。

  5. 手順1で解凍したファイルに含まれるWikitudeTitaniumSampleを選択します。

    アプリを起動する時にGUIDが生成されるので、警告が表示されます。

  6. ダウンロードページからTitaniumモジュールをダウンロードしてzipファイルを解凍します。

  7. プロジェクトのルートディレクトリにmodulesフォルダをコピーします。

  8. 任意のプラットフォームでプロジェクトを実行します。

JavaScriptインタフェース

ARchitect Worldを作成してロードするには、ARchitectWindow.jsファイルを使用します。ARchitectWindow.jsの使用方法については、サンプルアプリをご参照ください。AR.platform.sendJSONObject({foo:"bar"})を使用してTitaniumとARchitectのJavaScriptをやり取りし、ARchitectWindow.jsのonJSONObjectReceivedメソッドをカスタマイズできます。 こうすることで、カスタムイベントを処理するために、WikitudeのARchitectWindowのJSONオブジェクトとして引数をTitaniumプロジェクトに渡すことができます。

ARchitect Worldとその他のアプリで使用されるJavaScriptファイルは分けて管理することを推奨します。そうすることにより、AR体験に必要なインターフェイスロジック、およびTitaniumアプリに必要な一般的なユーザーインターフェースロジックの処理がシンプルになります。

アプリのリソースフォルダまたは任意のWeb URLからWikitude SDKで開発されたARchitect Worldをロードすることができます。

arview.architectWorldUri = yourfile.htmlコマンドを使用して、TitaniumプロジェクトのリソースフォルダからResources/android/assets/yourfile.htmlをロードすることも、arview.architectWorldUri = http://yourdomain/yourfile.htmlというように、リモートURLからARchitect Worldをロードすることもできます。

ロケーション設定

サンプルアプリは、ユーザのロケーション設定にTitaniumのロケーションプロバイダを使用します。ロケーション精度をカスタマイズおよび更新するには、ArchitectWindow.jsのthis.locationListenerとaddEventListener('resume|pause|destroy')をご参照ください。