Qitalk - PepperのTabletを扱いやすくするライブラリ #Pepper

PepperのTablet(qimessaging)を扱いやすくするライブラリを、GitHubに公開しました。

qimessagingをラップして、Viewの切り替えをサポートしたものになります。

依存ライブラリ

<script src="/lib/jquery/jquery.min.js"></script>
<script src="/libs/qimessaging/2/qimessaging.js"></script>
<script src="js/qitalk.js"></script>

インストール方法

bowerからインストールする

bower install qitalk

GitHubリポジトリから直接取得する

release
├── qitalk.js
└── qitalk.min.js

使い方

Qitalkを初期化

※ 利用するServiceはpreloadしておく必要があります。

<script>
Qitalk.init({
    // host: 'pepper1', pepper外からpepperとつなぐ場合はpepperのホストを指定
    root    : '#qitalk', // QitalkのView起点となる要素ID
    tplDir  : './tpl'    // テンプレートディレクトリのパス
    preload: {
        tpl: ['welcome'], // テンプレートファイルをpreloadします
        service: ['ALMemory', 'ALTextToSpeech', 'ALAudioPlayer'] // サービスをpreloadします。(必須)
    },
    handle: {
        start: function() {
            // preload処理終了後に通知
        },
        presented: function() {
            // 画面遷移後に通知
        }
    }
});
</script>
<div id="qitalk"></div>

Pepper/Tablet間のイベント通知

Pepper -> (Tablet)

/**
 * Qitalk.on(memoryName, callback, id);
 * 第三引数のIDはイベントの重複防止です。
 * 既に同じIDのイベントを監視している場合は無視されます。
 */
Qitalk.on('/Signal/Pepper/PresentView', function(tpl) {
    Qitalk.presentView(tpl);
}, 'PresentView');

(Tablet) -> Pepper

/**
 * Qitalk.send(memoryName, value);
 */
Qitalk.send("/Signal/Tablet/Touched", 1);

Qitalk.onしたイベントにシグナルを送る

Pepperからシグナルを送れない場合は、コンソールなどから送ることができます。

Qitalk.trigger('/Signal/Pepper/PresentView', 'welcome');

画面遷移

Pepperの場合、Pepper側からタブレットをメモリ経由で操作することが
多いため、シングルページが扱いやすいです。

ですが、シングルページの場合、1ファイルが大きくなりすぎてしまい可読性が落ちるため
Qitalkでは、シングルページで複数のHTMLを切り替える仕組みとしています。

デフォルトでは以下のディレクトリにあるtplファイルを読み込むようになっています

tplDir  : './tpl'

./tpl/welcome.tplを読み込む例です。

./tpl/welcome.tpl

<h1>Welcome!</h1>

main.js

Qitalk.presentView("welcome");

画面間の値の受け渡し

Qitalk.presentView(tplName, value)の第二引数に値を入れることで
次のViewに対して値を受け渡すことができます。

main.js

Qitalk.presentView("welcome", "hikouki!");

Qitalk.paramsで受け取る

./tpl/welcome.tpl

<script>
alert(Qitalk.params); // open alert hikouki!
</script>
<h1>Welcome!</h1>

Serviceを使う

Qitalk経由でServiceを使う場合は、preloadしておく必要があります。
Qitalk.proxy.<サービス名>でサービスを呼び出せます。

sayしてみる

Qitalk.proxy.ALTextToSpeech.say("hello");