VR法人HIKKY Advent Calendar 2025

Vket Cloudで簡単にテキスト入力ギミックを実装する

Last updated at 2025-12-11Posted at 2025-12-11

こんにちわ
普段VketCloudのエンジン部分のネットワーク層周りの開発や、いろいろ案件の仕様調整などしてるかせかいです。
今回は、Vket Cloudバージョン16.3でコッソリ追加された汎用テキスト入力ダイアログ呼び出しJavaScript関数
hel_ui_open_input_dialog()の紹介をします。
SDKマニュアルへの記述に先んじて実装Tipsとして公開する形となりました。

これまでテキスト入力ギミックを実装するとなると、

CanvasJSONでダイアログを作成
HeliScriptから呼び出し…

とまぁ、かなり手間でした。
しかもスマホだとズレたり、WebXRモードだとinput要素が見えなかったり、大変。
なので「システムで入力ダイアログを作ろう」という運びになりました。

仕様

 hel_ui_open_input_dialog = (
  callbackConfirmed: (value: string) => void,
  callbackCanceled: () => void,
  options: {
    title?: string;
    value?: string;
    placeholder?: string;
  }

💻 hel_ui_open_input_dialog 関数の引数説明

この関数は、ユーザーからのテキスト入力を促すダイアログを開くためのものです。引数は以下の通りです。

引数名	型	説明
callbackConfirmed	(value: string) => void	ユーザーが入力を確定した際に呼び出されるコールバック関数です。入力された値が value (string) として渡されます。
callbackCanceled	() => void	ユーザーがダイアログをキャンセルした際に呼び出されるコールバック関数です。引数はありません。
options	{ title, value, placeholder}	ダイアログの表示に関するオプション設定を含むオブジェクトです。

options オブジェクトの詳細

プロパティ名	型	説明
title	string (Optional)	ダイアログのタイトルとして表示される文字列です。省略可能です。
value	string (Optional)	ダイアログの入力フィールドに初期値として設定される文字列です。省略可能です。
placeholder	string (Optional)	入力フィールドが空の場合に表示されるプレースホルダーの文字列です。省略可能です。

HeliScriptでexternを使って呼び出すだすことで、下図のようなダイアログを呼び出せます。

使い方

まずは単純に「こう書く」サンプル。
このスクリプトがアタッチされたItemがロードするとコンストラクタからテキスト入力ダイアログを呼び出し、入力結果をログに出力します。

// コールバック関数の型定義
delegate void _fStringCallback(string);
delegate void _fVoidCallback();

// 汎用テキスト入力ダイアログを呼び出す外部関数を宣言
extern {
    void hel_ui_open_input_dialog(_fStringCallback, _fVoidCallback);
}

component Hoge
{
    public Hoge()
    {
        // 雑な例として、コンポーネントが読み込まれたら入力ダイアログが呼び出される
        // オプション定義
        JsVal inputOption = new JsVal() {
            "title": "入力タイトルテスト",
            "placeholder": "なんでもいいよ"
        };
        // 必要なら現在値も追加（JsVal型に後から追加する場合はこう書く）
        inputOption.AddPropertyByVal("value", makeJsStrFrom("げんざいち"));

        hel_ui_open_input_dialog(_OnConfirmedCallback, _OnConfirmedCallback, inputOption);
    }

    public void _OnConfirmedCallback(string result)
    {
        hsSystemWriteLine("Input Confirmed: %s" % result);
    }
    public void _OnConfirmedCallback()
    {
        hsSystemWriteLine("Input Canceled");    
    }
    
}

実装サンプル

次は実例で実際にワールドのギミックとして実装してみましょう
まずはシンプルな「ボタンを押したら扉が開く」ワールドをつくり、
その後「ボタンを押したらテキスト入力ダイアログを表示し、あいことばを入れて開く」ようにしてみます

準備

まずはシンプルに「ボタンを押したらドアが開く」ワールドを作ります

Sceneの構成はこんなかんじ

※少し解説すると、ItemDoorだけHeliScriptから座標操作できる「ヒエラルキー右クリック＞VketCloudSDK＞3Dアイテム＞VKC Cubeを作成」でItemオブジェクト(.heoはで組み込みのCube)として作ってます。

HeliScriptは下記のように書いて、デフォルトで用意されていたWolrdフィールドにアタッチします

component LockDoorMain
{
    Item _itemMain;
    Item _itemDoor;

    public LockDoorMain()
    {
        // HeliScriptをアタッチした自身(World Field)を取得
        _itemMain = hsItemGetSelf();
        // 扉として開けたいアイテムの取得
        _itemDoor = hsItemGetOwnScene("ItemDoor");
    }

    public bool OnClickNode(int NodeIndex){
        string nodeName = _itemMain.GetNodeNameByIndex(NodeIndex);
        // オレンジのボタンを押した判定
        if (nodeName == "Button") {
            OpenDoor();
        }
        return true;
    }

    // 扉を開ける
    public void OpenDoor(){
        Vector3 newPos = makeVector3(1.8f, 0.0f, 0.0f);
        _itemDoor.SetPos(newPos);
    }
}

こんな感じでオレンジのボタン(cubeノード)をクリックすると扉が開くようになりました

`hel_ui_open_input_dialog()`を組み込む

前項で作ったワールドに「ボタンを押したらテキスト入力ダイアログを表示し、あいことばを入れて開く」ギミックを追加します。

まずは判定結果をプレーヤに通知できるよう「ヒエラルキー右クリック＞VketCloudSDK＞2Dアイテム＞VKC Text Planeを作成」でテキストItemを追加し、StatusTextと任意の名前を付けておきます。

そして最初の方に解説した使い方に倣ってHeliScriptを改修して…

// コールバック関数の型定義
delegate void _fStringCallback(string);
delegate void _fVoidCallback();

extern {
    void hel_ui_open_input_dialog(_fStringCallback, _fVoidCallback, JsVal);
}


component LockDoorMain
{
    Item _itemMain;
    Item _itemDoor;
    Item _itemStatusText;

    public LockDoorMain()
    {
        _itemMain = hsItemGetSelf();
        _itemDoor = hsItemGetOwnScene("ItemDoor");
        _itemStatusText = hsItemGetOwnScene("StatusText");
    }

    public bool OnClickNode(int NodeIndex){
        string nodeName = _itemMain.GetNodeNameByIndex(NodeIndex);
        hsSystemWriteLine("ClickedNode: %s" % nodeName);
        if (nodeName == "Button") {
            promptInputPassword();
        }
        return true;
    }

    public void promptInputPassword()
    {
        JsVal inputOption = new JsVal() {
            "title": "あいことば を ひらがなで 入力してね",
            "placeholder": "ヒント：腕が10本ある"
        };
        hel_ui_open_input_dialog(_OnConfirmedCallback, _OnCancelCallback, inputOption);
    }
    public void OpenDoor(){
        Vector3 newPos = makeVector3(1.8f, 0.0f, 0.0f);
        _itemDoor.SetPos(newPos);
    }

    // 入力完了コールバック
    public void _OnConfirmedCallback(string result) 
    {
        // 入力文字を判定
        if (result == "いか") {
            _itemStatusText.WriteTextPlane("正解！");
            OpenDoor();
        } else {
            _itemStatusText.WriteTextPlane("ハズレ！%sじゃないよ" % result);
        }
    }
    // 入力キャンセルコールバック
    public void _OnCancelCallback() 
    {
        _itemStatusText.WriteTextPlane("入力キャンセル");
    }
}