サンプルとチュートリアル

以下に示すサンプルを見ると、Wikitude SDKによって提供される機能の概要がわかります。各サンプルは、サポートされているすべてのプラットフォームで変更せずに実行できます。

付属するそれぞれのサンプルは以下のように構成されています。

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フォルダーにあります。

セットアップ

ネイティブコード(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"}) 。