Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Softbank Robotics Corp. 2015 All rights reserved.
ワークショップ#4                                            
                  ...
Softbank Robotics Corp. 2015 All rights reserved.
今⽇日のゴール
2
ゴール
ü  Choregraphe(PepperのSDK)を使って、Pepperのタブレットを使
ったロボアプリを作る
...
Softbank Robotics Corp. 2015 All rights reserved. 3
⾃自⼰己紹介
してみませんか?
※1⼈人1分
  ・お名前
  ・所属
  ・本⽇日の意気込み
      ・htmlに関する前提知識識など
Softbank Robotics Corp. 2015 All rights reserved.
配布物
4
•  本プレゼンテーション資料料
•  プロジェクト
-  quiz
-  show-‐‑‒app
-  simple-‐‑‒js
...
Softbank Robotics Corp. 2015 All rights reserved.
もくじ
l Pepperのタブレットって?
l タッチイベントの取得
l QiMessaging  JavaScript
l 簡単なHT...
Softbank Robotics Corp. 2015 All rights reserved. 6
Pepperの
タブレットって?
Softbank Robotics Corp. 2015 All rights reserved.
Pepperのタブレット
7
1707	
  
1067	
  
PepperのOS(NAOqi  OS)とは独
⽴立立したOS(Android...
Softbank Robotics Corp. 2015 All rights reserved.
NAOqiでのアプリケーション実⾏行行
8
SayやTimelineボックス
を使った今までのアプリ
Choregraphe上で
作成したプログ...
Softbank Robotics Corp. 2015 All rights reserved.
タブレットでの画像や動画の表⽰示
9
Softbank Robotics Corp. 2015 All rights reserved. 10
タッチイベントの取得
Softbank Robotics Corp. 2015 All rights reserved.
Tablet  Touchボックスの利利⽤用                            quiz
11
①  プロパティを開き、  ...
Softbank Robotics Corp. 2015 All rights reserved.
Judge  Rangeボックスの利利⽤用                                                   ...
Softbank Robotics Corp. 2015 All rights reserved. 13
クイズ
出題
タッチイベント
によって
出⼒力力を分岐
タブレットを使ったクイズを作ってみよう!                     ...
Softbank Robotics Corp. 2015 All rights reserved. 14
QiMessaging
JavaScript
Softbank Robotics Corp. 2015 All rights reserved.
QiMessaging  JavaScript
15
Softbank Robotics Corp. 2015 All rights reserved. 16
簡単なHTMLを
タブレットに表⽰示
Softbank Robotics Corp. 2015 All rights reserved.
簡単なHTMLをタブレットに表⽰示  ①                                        show-‐‑‒app
...
Softbank Robotics Corp. 2015 All rights reserved.
簡単なHTMLをタブレットに表⽰示  ②                                        show-‐‑‒app
...
Softbank Robotics Corp. 2015 All rights reserved. 19
簡単な
JavaScriptの実⾏行行
Softbank Robotics Corp. 2015 All rights reserved.
簡単なJavaScriptの実⾏行行  ①                                                   ...
Softbank Robotics Corp. 2015 All rights reserved.
簡単なJavaScriptの実⾏行行  ②                                                   ...
Softbank Robotics Corp. 2015 All rights reserved. 22
アプリケーション
との連携
Softbank Robotics Corp. 2015 All rights reserved.
タブレット→アプリケーション  ①              memory-‐‑‒from-‐‑‒tablet
23
①+ボタンから[ファイルを...
Softbank Robotics Corp. 2015 All rights reserved.
タブレット→アプリケーション  ②              memory-‐‑‒from-‐‑‒tablet
24
•  qimessagin...
Softbank Robotics Corp. 2015 All rights reserved.
タブレット→アプリケーション  ③              memory-‐‑‒from-‐‑‒tablet
25
•  「say  from...
Softbank Robotics Corp. 2015 All rights reserved.
アプリケーション→タブレット  ①                      memory-‐‑‒to-‐‑‒tablet
26
①+ボタンから...
Softbank Robotics Corp. 2015 All rights reserved.
アプリケーション→タブレット  ②                      memory-‐‑‒to-‐‑‒tablet
27
•  qime...
Próxima SlideShare
Cargando en…5
×

アトリエ秋葉原 Choregraphe WS#4

1.303 visualizaciones

Publicado el

アトリエ秋葉原で実施している開発体験ワークショップの資料となります。 (WS#4)
本資料の無断転載を禁じます。すべての著作権はソフトバンクロボティクス株式会社に帰属します。

Publicado en: Ingeniería
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

アトリエ秋葉原 Choregraphe WS#4

  1. 1. Softbank Robotics Corp. 2015 All rights reserved. ワークショップ#4                                                                  Choregraphe2.4 Softbank Robotics Atelier  Akihabara
  2. 2. Softbank Robotics Corp. 2015 All rights reserved. 今⽇日のゴール 2 ゴール ü  Choregraphe(PepperのSDK)を使って、Pepperのタブレットを使 ったロボアプリを作る 想定ユーザ ü  ワークショップ1、2を受講された⽅方 ü  タブレットを使ってよりリッチなアプリを作りたい⽅方
  3. 3. Softbank Robotics Corp. 2015 All rights reserved. 3 ⾃自⼰己紹介 してみませんか? ※1⼈人1分   ・お名前   ・所属   ・本⽇日の意気込み      ・htmlに関する前提知識識など
  4. 4. Softbank Robotics Corp. 2015 All rights reserved. 配布物 4 •  本プレゼンテーション資料料 •  プロジェクト -  quiz -  show-‐‑‒app -  simple-‐‑‒js -  memory-‐‑‒from-‐‑‒tablet -  memory-‐‑‒to-‐‑‒tablet
  5. 5. Softbank Robotics Corp. 2015 All rights reserved. もくじ l Pepperのタブレットって? l タッチイベントの取得 l QiMessaging  JavaScript l 簡単なHTMLをタブレットに表⽰示 l 簡単なJavaScriptの実⾏行行 l アプリケーションとの連携 5
  6. 6. Softbank Robotics Corp. 2015 All rights reserved. 6 Pepperの タブレットって?
  7. 7. Softbank Robotics Corp. 2015 All rights reserved. Pepperのタブレット 7 1707   1067   PepperのOS(NAOqi  OS)とは独 ⽴立立したOS(Android  OS)が動作し ている ① 画像・動画などをうつす ② JavaScriptなどを含むHTMLコ ンテンツを実⾏行行する ③ タッチイベントを取得する ことが可能 よりリッチなアプリを作るために はタブレットの開発が必須!
  8. 8. Softbank Robotics Corp. 2015 All rights reserved. NAOqiでのアプリケーション実⾏行行 8 SayやTimelineボックス を使った今までのアプリ Choregraphe上で 作成したプログラムを パッケージング ↓ Pepperにアップロード ↓ それぞれのボックスが NAOqi  APIにアクセス ↓ アプリを実⾏行行
  9. 9. Softbank Robotics Corp. 2015 All rights reserved. タブレットでの画像や動画の表⽰示 9
  10. 10. Softbank Robotics Corp. 2015 All rights reserved. 10 タッチイベントの取得
  11. 11. Softbank Robotics Corp. 2015 All rights reserved. Tablet  Touchボックスの利利⽤用                            quiz 11 ①  プロパティを開き、                         変数>Action「On  touch   down」に変更更 ②  アプリを実⾏行行する タブレットにタッチすると タッチした場所に応じた座標が出⼒力力 (Choregraphe標準ボックス)
  12. 12. Softbank Robotics Corp. 2015 All rights reserved. Judge  Rangeボックスの利利⽤用                                                                              quiz 12 ①  プロパティを開き、                 x、y座標の最⼩小値、最⼤大値を            それぞれ設定する ①  アプリを実⾏行行する タッチされた場所が 指定範囲内ならonRangeから 指定範囲外ならonStoppedから出⼒力力 (提供オリジナルボックス) onRange OnStopped
  13. 13. Softbank Robotics Corp. 2015 All rights reserved. 13 クイズ 出題 タッチイベント によって 出⼒力力を分岐 タブレットを使ったクイズを作ってみよう!                                      quiz 正解! 不不正解 終了了処理理
  14. 14. Softbank Robotics Corp. 2015 All rights reserved. 14 QiMessaging JavaScript
  15. 15. Softbank Robotics Corp. 2015 All rights reserved. QiMessaging  JavaScript 15
  16. 16. Softbank Robotics Corp. 2015 All rights reserved. 16 簡単なHTMLを タブレットに表⽰示
  17. 17. Softbank Robotics Corp. 2015 All rights reserved. 簡単なHTMLをタブレットに表⽰示  ①                                        show-‐‑‒app 17 ①プロジェクトファイルの +ボタン>[新規フォルダ…]を選択し、 名前を「html」として作成 ②+ボタン>[ファイルをインポート…]を選択し、        index.htmlをインポートする。        インポートしたファイルはhtml内に配置する。
  18. 18. Softbank Robotics Corp. 2015 All rights reserved. 簡単な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()
  19. 19. Softbank Robotics Corp. 2015 All rights reserved. 19 簡単な JavaScriptの実⾏行行
  20. 20. Softbank Robotics Corp. 2015 All rights reserved. 簡単なJavaScriptの実⾏行行  ①                                                                simple-‐‑‒js 20 ①+ボタン>[ファイルをインポート…]を選択し、   index.htmlをインポートする。   インポートしたファイルはhtml内に配置する。 ②Show  Appボックス を⽤用意する ③アプリを実⾏行行する
  21. 21. Softbank Robotics Corp. 2015 All rights reserved. 簡単な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|                });
  22. 22. Softbank Robotics Corp. 2015 All rights reserved. 22 アプリケーション との連携
  23. 23. Softbank Robotics Corp. 2015 All rights reserved. タブレット→アプリケーション  ①              memory-‐‑‒from-‐‑‒tablet 23 ①+ボタンから[ファイルをインポート…]を選択、 index.htmlをインポートする。(インポートした ファイルはhtml内に配置する) ②ALTabletService/messageという名前の メモリキーを追加し、Say  Textボックスと つなぐ
  24. 24. Softbank Robotics Corp. 2015 All rights reserved. タブレット→アプリケーション  ②              memory-‐‑‒from-‐‑‒tablet 24 •  qimessaging.jsの読み込み 7|<script  src="/libs/qimessaging/2/qimessaging.js"></script> •  QiSessionオブジェクトの初期化    9|var  session; 10|QiSession(  function(s){ 11|session  =  s; 12|)}; 15|session.service("ALMemory").then(function  (ALMemory)  { 16|console.log("ALMemory取得成功"); 17|ALMemory.raiseEvent("PepperQiMessaging/fromtablet",  "イベント発⽣生"); 18|              }); •  ボタンが押された際、sessionオブジェクトに対してservice関数を通じて ALMemoryへのアクセス⽤用オブジェクト要求
  25. 25. Softbank Robotics Corp. 2015 All rights reserved. タブレット→アプリケーション  ③              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> ※引数とは…     プログラム中で、関数に値を渡すパラメータ
  26. 26. Softbank Robotics Corp. 2015 All rights reserved. アプリケーション→タブレット  ①                      memory-‐‑‒to-‐‑‒tablet 26 ①+ボタンからファイルをインポート…を選択 し、index.htmlをインポートする(インポート したファイルはhtml内に配置する) ②下図のようにボックスを配置する ③イベントを発⽕火させるため、 Raise  Eventボックスの変数のkeyに「PepperQ totablet」を設定する
  27. 27. Softbank Robotics Corp. 2015 All rights reserved. アプリケーション→タブレット  ②                      memory-‐‑‒to-‐‑‒tablet 27 •  qimessaging.jsの読み込み 7|<script  src=“/libs/qimessaging/2/qimessaging.js"></script> •  QiSessionオブジェクトの作成    9|var  session; 10|QiSession(  function(s){ 11|session  =  s; 12|)}; •  ALMemory.subscriber関数によるイベント監視 26|ALMemory.subscriber("PepperQiMessaging/totablet").then(function(subscriber)  { 27|                        subscriber.signal.connect(toTabletHandler); 28|                    });

×