ChoregrapheのボックスからタブレットHTMLのJavaScriptを実行する

8890 ワード
Pepper Choregraphe NAOqi JavaScript JavaScript テキストリンク

すでにexecuteJSについて書かれている方がいましたら、二番煎じとなっています。
ご了承ください。

NAOqi APIsを眺めていたら、ALTabletServiceの中にexecuteJSというメソッドがありました。
触って見たところ、ChoregrapheアプリからTabletのHTMLに対してJavaScriptを実行するというものでした。

適当なサンプルと共に、使い方を紹介します。

環境

Choregraphe 2.4.3.28
MacBook Pro Retina 13-inch Early 2015

使い方

Choregrapheを起動しているPCが、ネットワークと実機のPepperに接続されていることを前提とします。
また、ShowAppボックスを使い、index.htmlを表示した上で操作することとします。
index.htmlのソースコードは適当なものを用意してください。

  1. ShowAppボックスの配置とhtmlディレクトリを作成
  2. index.htmlをhtml直下にドラッグ&ドロップ
  3. ShowAppのボックスを右クリックして一覧から「ボックスのスクリプトを編集」を選択
  4. ボックスのスクリプトを以下の内容に書き換える
  5. アプリを再生
class MyClass(GeneratedClass):

    def __init__(self):
        GeneratedClass.__init__(self)

    def onLoad(self):
        self.isRunning = False
        self.frameManager = None
        try:
            self.frameManager = ALProxy("ALFrameManager")
        except Exception as e:
            self.logger.error(e)

    def onUnload(self):
        self.isRunning = False

    def _getTabletService(self):
        tabletService = None
        try:
            tabletService = self.session().service("ALTabletService")
        except Exception as e:
            self.logger.error(e)
        return tabletService

    def onInput_onStart(self):
        if self.isRunning:
            return # already running, nothing to do
        self.isRunning = True
        # We create TabletService here in order to avoid
        # problems with connections and disconnections of the tablet during the life of the application
        tabletService = self._getTabletService()
        appName = self.packageUid()
        state = False
        if appName:
            if tabletService:
                if tabletService.loadApplication(appName):
                    self.logger.info("Successfully set application: %s" % appName)
                    tabletService.showWebview()

                    ### 新規追加
                    # timeモジュールを読み込む
                    import time
                    # 実行するスクリプトの定義
                    script = '''
                    document.body.style.transform = "scale(2)";
                    '''
                    # htmlのが表示されるまで処理を遅延
                    time.sleep(3)
                    # スクリプトを実行
                    tabletService.executeJS(script)

                    ### ここまで

                    state = True
                else:
                    self.logger.warning("Got tablet service, but failed to set application: %s" % appName)
            else:
                self.logger.warning("Couldn't find tablet service, so can't set application: %s" % appName)
        if state:
            self.onSuccess()
        else:
            self.onFailure()

タブレットの表示が変わったことが確認できましたでしょうか。
変わらなかった場合には、47行目のtime.sleepの数字を大きくして見てください。

おわりに

今回は、ChoregrapheアプリからPepperのタブレットHTMLに対してJavaScriptを実行する方法を紹介しました。
これは「すでに表示されている内容に関してスクリプトを実行」するので、jQueryのようなフレームワークやライブラリを使っている場合にもそれを使ったスクリプトを実行することができます。(たとえば、Pepperに喋ったらタブレットHTMLの要素にクリックイベントを発生させる)

これは個人的な考えではありますが、タブレットはアプリの中心になりやすい存在だと思います。
タブレットベースにしたアプリケーション開発から脱却し、Choregrapheアプリベースにするには今回のexecuteJSを使う機会があるかと思います。

スクリプトの内容は文字列ですので、Pepperで生成された文字列(会話で聞き取った内容など)をメモリイベントを使わずにタブレットに表示することもできます。

疑問、間違い、指摘等ありましたら、コメントにてお願い致します。