HighFidelityのTablet UI Frameworkを使う
この記事は、セカンドライフ技術系アドベントカレンダー2017向けの記事です。
前回ちょろっと触れましたが、HightFidelityでHUDみたいなUIを作るには、Tablet UI Frameworkというのを使います。今回はこのフレームワークで出来ることを見ていきます。
Webページを表示する
Tabletオブジェクトの、gotoWebScreen関数を使うと、指定したWebページを表示できます。
(function() { // クリックイベント this.clickDownOnEntity = function(entityID, mouseEvent) { // Tabletオブジェクトを取得 var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system"); // このブログを表示 tablet.gotoWebScreen("http://sabro.hatenablog.com/"); }; })
モバイル用のページが表示されるみたいです。
上のスクリプトではTabletオブジェクトを唐突に取得しています。このオブジェクトの定義がないかHighFidelityのインストールディレクトリのJSファイルを色々検索して調べてみたのですが、定義されてる箇所が見つかりませんでした。とりあえず、Tablet UI Frameworkを使用するときのおまじないみたいなものと思っておくことにします。
なお、Webページ以外にもQt向けの宣言型UI言語、QMLの表示にも対応しているみたいですが、今回はそこまで試せませんでした( ̄□  ̄ ||
デフォルトのメニューを拡張する
HighFidelityの世界にログインすると、デフォルトでこんなメニューが表示されます。これは公式で用意されているメニューなわけですが、Tablet UI Frameworkを使えばここに自分の機能を追加することが出来ます。
具体的にはTabletオブジェクトのaddButton関数でメニューUIにボタンを追加し、そのボタンのクリックイベントを定義してやればOKです。スクリプト終了時にはボタンを削除する処理も忘れずに入れておきます。ここでは、ボタンを押すとGoogle検索を呼び出すだけのGoogleボタンを作ってみます。
(function() { // Tabletオブジェクトを取得 var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system"); // デフォルトのメニューにボタンを追加、ボタンの文言はGoogleを指定 // iconプロパティを設定すれば独自のアイコンの表示も可能だがここでは省略 var button = tablet.addButton({ text: "Google" }); // メニューのボタンを押した際に呼び出す関数、ここではGoogle検索を表示 function onClicked() { tablet.gotoWebScreen("https://www.google.co.jp/"); } // メニューボタンクリックイベントと関数を接続する button.clicked.connect(onClicked); // スクリプト終了時に呼び出す関数 function cleanup() { tablet.removeButton(button); } // スクリプト終了イベントと関数を接続する Script.scriptEnding.connect(cleanup); }());
作ったスクリプトはインターフェーススクリプトとして読み込みます。メニューの拡張みたいにクライアントから接続している間だけ有効にしたい機能はインターフェーススクリプトとして使用するのがベストです。作ったスクリプトにtablet-test.jsと名前をつけてディスクから読み込みます。
メニューにGoogleボタンが追加されました。
押すとGoogle検索画面が表示されます。
終了処理を仕込んであるのでスクリプトを✕ボタンで停止するとボタンもメニューから消えます。
一通り見てきましたが、公式のメニューを自分で拡張できるのが面白いですね。この拡張性の高さがHighFidelityの魅力でもあります( ̄∇  ̄ )