Warning
このドキュメントは古くなっています。改定: HiFi ホストされたリソースを使用するようになりました。
タブアプリ
このガイドは古くなりました。このコードは、概要通りに動作しない場合がありますので、更新されるまでは参考程度にご利用ください。詳細は API DOCS<https://apidocs.vircadia.dev/> を参照してください。
Vircadiaのタブレットアプリ(または「アプリ」)は、使いやすいユーザーインターフェイスで機能を公開するカスタマイズ可能なプログラムです。アプリでは、 JavaScript API <https://apidocs.vircadia.dev> から複雑なコードを取り出し、他の人が使えるようにコントロールを備えたウィンドウに簡素化することができます。
Note
カスタムアプリを作成するには、Web開発の基礎知識（HTML、CSS、JavaScript）と、当社のAPIを使いこなせることが必要です。
タブレット端末用アプリの作成手順は、以下の通りです。
-
タブレットとHUDにボタンを追加する
アプリをロードする
アプリを終了する
イベントを監視する
コードを実行する( create some gemstones <#create-gemstones> )
チュートリアル：宝石を交換するタブレットアプリを作成
このチュートリアルでは、上記の手順を経て、「Gemstone Magic Maker」というアプリを作成します。このシンプルなアプリでは、VRでカラフルな小さな宝石を産み出し、友達と共有することができます。
タブレットやHUDに表示させるアイコンを作成する
タブレットとHUDに表示するアイコンが2つ必要です。アプリがアクティブなときにアプリボタンに表示するSVGまたはPNG画像で、通常 <appName>-a.svg という名前にします。また、アプリが非アクティブなときに表示するもう一つの画像で通常 <appName>-i.svg という名前にします。
アイコンは以下の特性を推奨します。
Size: 50px × 50px
色：透明な背景に黒（アクティブアイコン用）、透明な背景に白（非アクティブアイコン用）
ファイルフォーマット：SVG または PNG
グラフィックデザインソフトウェアやその他のオンラインリソースを使用して、独自のアイコンを作成します。
HTMLとCSSでアプリのUIをデザインする
アプリのUIは、アプリの動作に関するテキストを提供し、ユーザーが操作方法を知っている馴染みのあるUI要素（ボタン、スクロールバー、リンクなど）を使用する必要があります。タブレットの画面サイズは480 x 720であるため、すべてのUIはこのスペースに収まるようにする必要があることに留意してください。
これから使い始めるあたなに役立つように、再利用できる クイック スタート HTML テンプレート <https://hifi-content.s3.amazonaws.com/faye/tablet-sample-app/quick_start_template.html> をまとめました。メイン メニュー画面と同じレイアウト、スタイル、フォントが含まれており、アプリ タイトルのヘッダー バーがあります。いくつかの簡単な変更を加えるだけで、数分でシンプルなアプリ UI を作成できます。
イベント ハンドラーを HTML ファイルに追加する
Tablet UIフレームワークは、EventBridgeという通信チャネルを提供しています。これにより、クライアントスクリプト (gemstoneApp.js) と Web アプリの JavaScript (gemstoneMagicMaker.html) の間で、イベントを送受信することができます。HTMLファイルの本文中の <script> </script> タグ内に以下のEventBridgeコードを記述して、ボタンのクリックを処理します:
function main() {
// Send an event to gemstoneApp.js when the page loads
// and is ready to get things rolling
console.log("document ready");
var readyEvent = {
"type": "ready",
};
// The event bridge handles events represented as a string the best.
// So we first create a JavaScript object, then convert to string
EventBridge.emitWebEvent(JSON.stringify(readyEvent));
// Send an event when user click on each of the gemstone buttons
$(".gemstone-button").click(function(){
console.log(this.value + " button click");
var clickEvent = {
"type": "click",
"data": this.value
};
EventBridge.emitWebEvent(JSON.stringify(clickEvent));
});
}
$(document).ready(main);
JavaScript ファイルを作成する
JavaScriptファイルには、アプリのコア機能がすべて含まれます。最低限、タブレットとHUDにボタンを追加し、アプリをロードし、アプリを適切に終了させ、イベントを待ち受けるコードを用意することが必要です。以下に、これらの各機能を実行するコードサンプルを示します。
タブレットと HUD にボタンを追加
AppUIモジュールを使って、アプリのボタンをタブレットやHUDに自動的に追加したり、ボタンのクリックハンドラを配備したりします：
(function () { // BEGIN LOCAL_SCOPE
var AppUi = Script.require('appUi');
var ui;
function startup() {
ui = new AppUi({
buttonName: "APP-NAME", // The name of your app
home: Script.resolvePath("app.html"), // The path to your app's UI
graphicsDirectory: Script.resolvePath("./") // The path to your button icons
});
}
startup();
}()); // END LOCAL_SCOPE
アプリの起動時の動作を決定する
もし、アプリが起動したときに何か特定の動作をさせたい場合は、AppUIモジュールの onOpened 関数を使ってください。例えば、以下のようになります。
サーバーにクエリを実行して応答を取得し、UI に何を表示するかを決定します
タブレットとは別に3Dインターフェースの表示を開始
表示モード（VR/Desktop）を決定し、UIに表示するものを変更する
(function () { // BEGIN LOCAL_SCOPE
var AppUi = Script.require('appUi');
function onOpened() {
console.log("hello world!");
}
var ui;
function startup() {
ui = new AppUi({
buttonName: "APP-NAME", // The name of your app
home: Script.resolvePath("app.html"), // The home screen of your app that appears when clicking the app button
graphicsDirectory: Script.resolvePath("./"), // Where your button icons are located
onOpened: onOpened // See the simple function above
});
}
startup();
}()); // END LOCAL_SCOPE
アプリを適切に終了する
AppUIモジュールは、アプリを確実に終了させます。しかし、アプリを閉じるときに何か他のことをしたい場合は、AppUIモジュールに組み込まれた onClosed 機能を使用することができます。例えば、以下のようなことが可能です：
3Dインターフェースの削除
セカンダリースクリプトの停止
(function () { // BEGIN LOCAL_SCOPE
var AppUi = Script.require('appUi');
function onOpened() {
console.log("hello world!");
}
function onClosed() {
console.log("hello world!");
}
var ui;
function startup() {
ui = new AppUi({
buttonName: "APP-NAME", // The name of your app
home: Script.resolvePath("app.html"), // The home screen of your app that appears when clicking the app button
graphicsDirectory: Script.resolvePath("./"), // Where your button icons are located
onOpened: onOpened // See the simple function above
onClosed: onClosed // See the simple function above
});
}
startup();
}()); // END LOCAL_SCOPE
イベントを監視する
上記のステップ3では、 イベントハンドラ <#add-event-handlers-to-your-files> をHTMLファイルに追加しました。次に、JavaScriptファイルに、イベントをリッスンするコードを追加する必要があります：
function onWebEventReceived(event) {
print("gemstoneApp.js received a web event: " + event);
}
tablet.webEventReceived.connect(onWebEventReceived);
宝石を作成する
最後のステップは、JavaScript ファイルの動作をコーディングすることです。この場合、Vircadia の JavaScript API を使用して宝石を作成します。各宝石はエンティティとして作成され、エンティティ名前空間を使用して宝石のプロパティを変更できます。
新しい宝石の位置を計算する
次のコードは、ユーザーのすぐ前に位置を示します：
// Helper function that gives us a position right in front of the user
function getPositionToCreateEntity() {
var direction = Quat.getFront(MyAvatar.orientation);
var distance = 0.3;
var position = Vec3.sum(MyAvatar.position, Vec3.multiply(direction, distance));
position.y += 0.5;
return position;
}
宝石のプロパティを設定し、追加する
宝石は、gemstoneApp.jsが各ボタンからのクリックイベントを受信したときに作成されます：
// Handle the events we're receiving from the web UI
function onWebEventReceived(event) {
print("gemstoneApp.js received a web event:" + event);
// Converts the event to a JavasScript Object
if (typeof event === "string") {
event = JSON.parse(event);
}
if (event.type === "click") {
// Define the entity properties of for each of the gemstone, then add it to the scene
var properties = {
"type": "Shape",
"position": getPositionToCreateEntity(),
"userData": "{\"grabbableKey\":{\"grabbable\":true}}"
};
if (event.data === "Emerald") {
properties.name = "Emerald";
properties.shape = "Dodecahedron";
properties.color = {
"blue": 122,
"green": 179,
"red": 16
};
properties.dimensions = {
"x": 0.20000000298023224,
"y": 0.26258927583694458,
"z": 0.20000000298023224
};
Entities.addEntity(properties);
} else if (event.data === "Ruby") {
properties.name = "Ruby";
properties.shape = "Octagon";
properties.color = {
"blue": 160,
"green": 52,
"red": 237
};
properties.dimensions = {
"x": 0.20000000298023224,
"y": 0.24431547522544861,
"z": 0.12547987699508667
};
Entities.addEntity(properties);
} else if (event.data === "Sapphire") {
properties.name = "Sapphire";
properties.shape = "Icosahedron";
properties.color = {
"blue": 255,
"green": 115,
"red": 102
};
properties.dimensions = {
"x": 0.160745769739151,
"y": 0.20000000298023224,
"z": 0.23340839147567749
};
Entities.addEntity(properties);
} else if (event.data === "Quartz") {
properties.name = "Quartz";
properties.shape = "Octahedron";
properties.color = {
"blue": 245,
"green": 142,
"red": 216
};
properties.dimensions = {
"x": 0.20000000298023224,
"y": 0.339866042137146,
"z": 0.20000000298023224
};
Entities.addEntity(properties);
}
}
}
おめでとうございます！Vircadiaでアプリを作成することに成功しました。作成したアプリを使用するには、Amazon S3、Google Cloud Storage、Microsoft Azureなどのクラウドプラットフォームにアプリをアップロードしてください。一度ホストされると、インストールして使用することができます。
Interfaceで、 Edit > Running Scripts を選択します。
「Load Scripts」から「From URL」をクリックし、ホストされている JavaScript ファイルへの URL を入力します。
タブレットやHUDのアプリアイコンをクリックすると、アプリが起動します。
関連項目
APIリファレンス：エンティティ <https://apidocs.vircadia.dev/Entities.html>
APIリファレンス：Quat <https://apidocs.vircadia.dev/Quat.html>
APIリファレンス：Vec3 <https://apidocs.vircadia.dev/Vec3.html>