サンプルとチュートリアル
以下に示すサンプルを見ると、Wikitude SDKによって提供される機能の概要がわかります。各サンプルは、サポートされているすべてのプラットフォームで変更せずに実行できます。
付属するそれぞれのサンプルは以下のように構成されています。
index.html
: AR体験の入口。js/*
: 必要なJavaScriptファイルが含まれます。css/*
: 必要なCSSスタイルシートが含まれます。assets/*
: 画像、3Dモデル、ターゲットコレクションが含まれます。
js/
フォルダーでは、メインのJavaScriptファイルはそのサンプルにちなんだ名前になっています(たとえば、Image RecognitionサンプルのJavaScriptコードはjs/clientrecognition.js
ファイルに含まれています)。サンプルの説明で言及されているコードは、特に指定のないかぎり、このファイルにあります。
ARCHITECT.JSライブラリのインクルード
Wikitude SDKのJavaScript APIを使用するにはarchitect.js
というWikitudeのJavaScriptライブラリを追加する必要があります。Include ステートメントは提供されたサンプルのすべてのindex.html
に含まれ、次のようになります。実際のファイルは実行時にWikitude SDKによって渡すので、ファイルをダウンロードするときに404 - Not found
というエラーを表示してもかまいません。Wikitude SDKがリモートでこのファイルをロードしている場合でも、インターネットに接続せずにローカルのみで置き換えられます。
<script src="https://www.wikitude.com/libs/architect.js"></script>
Wikitude SDK 5.3以前のバージョンでのarchitect.js
Wikitude SDK 5.3以前のバージョンではInclude ステートメントはarchitect://
というカスタムプロトコルハンドラで構成されましたが、これはiOSのATS (App Transport Security)に対応していませんでした。ATSの仕様に準拠したいのなら、Wikitude SDK 5.3以降のバージョンを使用する必要があります。詳細については、このセクションを参照してください。
<script src="architect://architect.js"></script>
GitHub上のサンプル
AR体験のコードにざっと目を通したい方のために、サンプルのソースコード全体がGitHubに公開されています。
Android SDKのサンプル
このセクションではSDK Examples
アプリケーションについて詳しく説明し、Wikitude SDKの主要な機能とその使用方法を紹介します。このアプリケーションはSDKバンドルの一部であり、サポートされているすべてのAndroidデバイスですぐに実行できるAndroid Studioプロジェクトです。
メモ: OpenGLの制限により、Wikitude SDKアプリケーションをAndroidエミュレーターで実行することはできません。
セットアップガイドに従ってサンプルアプリケーションをデバイスにインストールし、サンプルリストをスクロールします。
プロジェクトのassets
フォルダーには、さまざまなARchitect Worldの実装が含まれています。ネイティブのAndroidアクティビティの実装はsrc
フォルダーにあります。
セットアップ
- Android Studioを介して最新のAndroid SDKとAndroid NDK(オプション)をダウンロードします。
- メインメニューから
[Open an existing Android Studio project]
を選択してインポートウィザードを開きます。 - ファイルシステム上の
SDKExamples
プロジェクトフォルダーに移動します。 [Choose]
をクリックしてインポートを開始します。- メニューバーから
[Android Studio]
->[Preferences...]
->[Appearance & Behavior]
->[System Settings]
->[Android SDK]
に移動します。 [SDK Platforms]
のリストで最新のSDK(16以上)がインストールされていることを確認します。- プロジェクトフォルダーを右クリックし、
[Open Module Settings]
を選択します。 -
[Properties]
と[Flavors]
では適切なバージョンが選択されていることを確認します。 -
ハードウェアおよびソフトウェア要件(「サポートされているデバイス」を参照)をすべて満たしたAndroidデバイスを使用し、システム設定で位置情報サービスを有効にします。
[設定]
->[アプリケーション]
->[開発者向けオプション]
に進み、[USBデバッグ]
をオンにします。- デバイスをUSBで接続します。
- メニューバーから
Run -> Run 'wikitude-sdk-samples'
を選択します。 - これでサンプルアプリケーションがデバイスにインストールされます。
ネイティブコード(Java)/JavaScript間通信
これらのサンプルは主に、AndroidアクティビティにARchitect Worldをロードする方法を具体的に示します。ARに関係するものはすべて、提供されたHTML/JavaScriptファイルに記述されています。
ロジックは純粋なHTMLとJavaScriptで実装することを強く推奨しますが、場合によっては、ネイティブコードとARchitect WorldのJavaScript間でやり取りすることが合理的であるケースがあります。
たとえば、POIデータをネイティブコードからJavaScriptに渡すケースが考えられます。サンプルではnewData(json)
という名前のメソッドをJavaScriptで定義し、architectView.callJavascript(newData('" + poiDataAsJson +")')
メソッドをネイティブコードで呼び出して、値を適切に渡します。JSON形式は、移動量、メタデータ、POIなどの情報を一括してJavaScriptに渡す最速の方法です。AndroidでJSONを作成するにはいくつかの方法があります。
場合によっては、マーカーやボタンなどの拡張オブジェクトをクリックしたときに別の画面を開くなど、Androidのネイティブコードで何らかの処理を実行したいことがあります。これを実現するには、AndroidアクティビティでarchitectView.addArchitectJavaScriptInterfaceListener()
を使用してArchitectJavaScriptInterfaceListener
を追加する必要があります。どのAR.platform.sendJSONObject呼び出しでも、
リスナー内でイベントが発生します(例:AR.platform.sendJSONObject({foo:"bar"}) 。