アトリエ秋葉原 Choregraphe WS#4

Softbank Robotics Corp. 2015 All rights reserved.
ワークショップ#4
Choregraphe2.4
Softbank Robotics
Atelier Akihabara

今⽇日のゴール
2
ゴール
ü  Choregraphe（PepperのSDK）を使って、Pepperのタブレットを使
ったロボアプリを作る
想定ユーザ
ü  ワークショップ１、２を受講された⽅方
ü  タブレットを使ってよりリッチなアプリを作りたい⽅方

Softbank Robotics Corp. 2015 All rights reserved. 3
⾃自⼰己紹介
してみませんか？
※１⼈人１分
　・お名前
　・所属
　・本⽇日の意気込み
・htmlに関する前提知識識など

配布物
4
•  本プレゼンテーション資料料
•  プロジェクト
-  quiz
-  show-‐‑‒app
-  simple-‐‑‒js
-  memory-‐‑‒from-‐‑‒tablet
-  memory-‐‑‒to-‐‑‒tablet

もくじ
l Pepperのタブレットって？
l タッチイベントの取得
l QiMessaging JavaScript
l 簡単なHTMLをタブレットに表⽰示
l 簡単なJavaScriptの実⾏行行
l アプリケーションとの連携
5

Pepperの
タブレットって？

Pepperのタブレット
7
1707

1067

PepperのOS(NAOqi OS)とは独
⽴立立したOS(Android OS)が動作し
ている
① 画像・動画などをうつす
② JavaScriptなどを含むHTMLコ
ンテンツを実⾏行行する
③ タッチイベントを取得する
ことが可能
よりリッチなアプリを作るために
はタブレットの開発が必須！

NAOqiでのアプリケーション実⾏行行
8
SayやTimelineボックス
を使った今までのアプリ
Choregraphe上で
作成したプログラムを
パッケージング
↓
Pepperにアップロード
↓
それぞれのボックスが
NAOqi APIにアクセス
↓
アプリを実⾏行行

タブレットでの画像や動画の表⽰示
9

タッチイベントの取得

Tablet Touchボックスの利利⽤用　　　　　　　　　　　　 quiz
11
①  プロパティを開き、　　　　　
　変数＞Action「On touch
down」に変更更
② アプリを実⾏行行する
タブレットにタッチすると
タッチした場所に応じた座標が出⼒力力
(Choregraphe標準ボックス)

Judge Rangeボックスの利利⽤用 quiz
12
①  プロパティを開き、　　　　　
　 x、y座標の最⼩小値、最⼤大値を　
それぞれ設定する
①  アプリを実⾏行行する
タッチされた場所が
指定範囲内ならonRangeから
指定範囲外ならonStoppedから出⼒力力
(提供オリジナルボックス)
onRange
OnStopped

クイズ
出題
タッチイベント
によって
出⼒力力を分岐
タブレットを使ったクイズを作ってみよう！ quiz
正解！
不不正解
終了了処理理

QiMessaging
JavaScript

QiMessaging JavaScript
15

簡単なHTMLを
タブレットに表⽰示

簡単なHTMLをタブレットに表⽰示　① show-‐‑‒app
17
①プロジェクトファイルの
＋ボタン>[新規フォルダ…]を選択し、
名前を「html」として作成
②＋ボタン>[ファイルをインポート…]を選択し、
index.htmlをインポートする。
インポートしたファイルはhtml内に配置する。

簡単なHTMLをタブレットに表⽰示　② show-‐‑‒app
18
③Show Appボックス
を⽤用意する
④アプリを実⾏行行する
ご⾃自⾝身のhtmlを表⽰示させたい場合,
保存する際の⽂文字コードはUTF-‐‑‒8を指定し
てください。
(デフォルトではIndex.htmlのみ表⽰示する)
任意の名前のhtmlを表⽰示したい場合は
Show imageボックスのプログラムを
以下のように変更更。
41|tabletService.showImage(url)
#以下のように変更更
41|tabletService.loadUrl(url)
42|tabletService.showWebview()

簡単な
JavaScriptの実⾏行行

簡単なJavaScriptの実⾏行行　① simple-‐‑‒js
20
①＋ボタン>[ファイルをインポート…]を選択し、
　index.htmlをインポートする。
　インポートしたファイルはhtml内に配置する。
②Show Appボックス
を⽤用意する
③アプリを実⾏行行する

簡単なJavaScriptの実⾏行行　② simple-‐‑‒js
21
•  qimessaging.jsの読み込み
7|<script src="/libs/qimessaging/2/qimessaging.js"></script>
•  QiSessionオブジェクトの作成
9|var session;
10|QiSession( function(s){
11|session = s;
12|)};
•  QiSessionからのALTextToSpeech取得、tts.say呼び出し
15|session.service("ALTextToSpeech").done(function (tts) {
16| tts.say("こんにちは");
17| });

アプリケーション
との連携

タブレット→アプリケーション　① memory-‐‑‒from-‐‑‒tablet
23
①＋ボタンから[ファイルをインポート…]を選択、
index.htmlをインポートする。(インポートした
ファイルはhtml内に配置する)
②ALTabletService/messageという名前の
メモリキーを追加し、Say Textボックスと
つなぐ

タブレット→アプリケーション　② memory-‐‑‒from-‐‑‒tablet
24
7|<script src="/libs/qimessaging/2/qimessaging.js"></script>
•  QiSessionオブジェクトの初期化
9|var session;
11|session = s;
12|)};
15|session.service("ALMemory").then(function (ALMemory) {
16|console.log("ALMemory取得成功");
17|ALMemory.raiseEvent("PepperQiMessaging/fromtablet", "イベント発⽣生");
18| });
•  ボタンが押された際、sessionオブジェクトに対してservice関数を通じて
ALMemoryへのアクセス⽤用オブジェクト要求

タブレット→アプリケーション　③ memory-‐‑‒from-‐‑‒tablet
25
•  「say from JS」ボタンクリックからserviceを通じて直接発話
22|session.service("ALTextToSpeech").then(function (tts) {
23| tts.say("APIを使って発話");
24| });
•  「hello world」ボタンクリックからタグ要素内の引数で指定⽂文字列列を発話
27|function sayWithParam(text) {
28| session.service("ALTextToSpeech").then(function (tts) {
29| tts.say(text);
30| });
43|<button style=“font-‐‑‒size: 6em” type=“button”
onclick="sayWithParam('こんにちは');">こんにちは</button>
※引数とは…
プログラム中で、関数に値を渡すパラメータ

アプリケーション→タブレット　① memory-‐‑‒to-‐‑‒tablet
26
①＋ボタンからファイルをインポート…を選択
し、index.htmlをインポートする(インポート
したファイルはhtml内に配置する)
②下図のようにボックスを配置する
③イベントを発⽕火させるため、
Raise Eventボックスの変数のkeyに「PepperQ
totablet」を設定する

アプリケーション→タブレット　② memory-‐‑‒to-‐‑‒tablet
27
7|<script src=“/libs/qimessaging/2/qimessaging.js"></script>
•  QiSessionオブジェクトの作成
9|var session;
11|session = s;
12|)};
•  ALMemory.subscriber関数によるイベント監視
26|ALMemory.subscriber("PepperQiMessaging/totablet").then(function(subscriber) {
27| subscriber.signal.connect(toTabletHandler);
28| });

アトリエ秋葉原 Choregraphe WS#4

Recommandé

Recommandé

Contenu connexe

Similaire à アトリエ秋葉原 Choregraphe WS#4

Similaire à アトリエ秋葉原 Choregraphe WS#4 (20)

アトリエ秋葉原 Choregraphe WS#4