Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

それでもタブレットと付き合っていく方法 公開版

3,620 views

Published on

pepperのタブレット活用について考えましょう。

Published in: Technology
  • Be the first to comment

それでもタブレットと付き合っていく方法 公開版

  1. 1. それでもタブレットと 付き合っていく方法 facebook.com/bird.tomita twitter : @bird_tomita 2016.03.16 アルデバラン・アトリエ秋葉原 ディスプレイ(タブレット)利用技術勉強会
  2. 2. とりあえず自己紹介 • 富田 篤 (Bird Tomita) • ロボアプリパートナー • pepperアプリエンジニア …だと思われてる人 どっちかといえば商品開発 • Developerモデルオーナー • 代表作:pepperホームラン競争 • ura pepper challenge 2015 winter ベストコーディネート賞(も うアプリじゃない)
  3. 3. このタブレット邪魔じゃね ?
  4. 4. タブレットのせいで。。。 • pepperがしゃべるタブレット台に • ヘタするとしゃべらないタブレット台に • タブレットでゲームするだけ • 子供がタブレットガンガン叩きまくる • 子供の視線が顔ではなくタブレットに
  5. 5. 表情認識とか 使えねーじゃんか!!
  6. 6. 30秒でできる 「タブレットを触らせずに 広告やブランディングにも 使う方法」
  7. 7. 用意するもの • A4用紙 パンフレット等 • セロテープ
  8. 8. 大体、いつからこんなの あるんだ〜!?
  9. 9. ほぼ最初からでした
  10. 10. これ取れないの??
  11. 11. 勇者 日経Robotics
  12. 12. 良い子は真似しない!
  13. 13. 本当にタブレットは 必要ですか?
  14. 14. プロトタイピング
  15. 15. pepperになって タブレット活用を 考えてみよう
  16. 16. 用意するもの • 人間二人以上(pepper役、ユーザー役) • タブレット(とりあえずコンテンツは不要) • (推奨)白いズボン・白いシャツ • (推奨)グレーのハイネック • (推奨)白い帽子・耳あて・雰囲気メガネ等
  17. 17. 現場のみ
  18. 18. 現場のみ
  19. 19. 絶対あるからといって 活用は「必須」ではない
  20. 20. まずは考えるところから はじめてみよう
  21. 21. 本当にタブレットは 必要ですか?
  22. 22. それでもタブレットと 付き合っていく方法
  23. 23. 細かいTipsは ヘッドウォータースさん お願いします
  24. 24. よくあるご要望
  25. 25. 「サイネージとか ディスプレイ連動したい。 イベントやプレゼンで 画面をスクリーンに出したい 。」
  26. 26. ディスプレイ連動は簡単 • http://pepperのIP/apps/アプリID/ にMac,PC,iPad,Android等からアクセス • ブラウザ表示したデバイスを Airplay,cast,HDMI接続等でテレビや 大型ディスプレイに表示してください。 • これだけ!(ブラウザの比率が変わるので注意) • アニメーションなどの処理スピードの違いに注意
  27. 27. 「タブレットから キーボードを使って 名前とかを入力したい」
  28. 28. タブレットから文字入力 • http://doc.aldebaran.com/2- 1/naoqi/core/altabletservice-api.html ALTabletService::showInputDialog() ALTabletService::showInputTextDialog() 実装済ボックスをロボットライブラリで公開中 https://pepper.robo- lib.com/projects/user/bird_tomita
  29. 29. 使いづらいわーー!! ٩(๑`^´๑)۶
  30. 30. Androidのキーボードを 利用する場合は、 漢字変換などが必要な 場合のみにして JavaScriptで実装しましょう
  31. 31. 「Webの内容を タブレットに表示したい 」
  32. 32. 方法1 タブレットのWi-Fiを 有効にしてそのまま ページを表示
  33. 33. pepper [0] ~ $ qicli call ALTabletService.configureWifi security ssid key true pepper [0] ~ $ qicli call ALTabletService.getWifiStatus "CONNECTED" CONNECTEDまでは数秒かかる tabletService = self.session().service("ALTabletService") tabletService.showWebview() tabletService.loadUrl(“http://www.softbank.jp/")
  34. 34. メリット Webサービスがあれば タブレットに表示できる デメリット pepperとの連携がほぼ無理
  35. 35. 方法2 JSONのAPIがあれば pythonでJSONを取得 タブレットに渡して JavaScriptで表示
  36. 36. python側 import requests res = requests.get('https://hogehoge.org/fugafuga.json) data = res.json() self.memory.raiseEvent("myapp/data", json.dumps(data).encode("utf-8")) JavaScript側 $.subscribeToALMemoryEvent("myapp/data", function (data) { data = JSON.parse(data); console.log(data); });
  37. 37. メリット APIがあれば だいたいなんでもできる デメリット HTML等も用意しないと いけないので少々面倒
  38. 38. 「画像表示を スムーズにしたい」
  39. 39. showImageボックスは 使わない 使う場合はpreLoad してからshow
  40. 40. showImageボックスで 画像を表示した場合、 「表示が完了したか」 が取れない。
  41. 41. [推奨]htmlの 非表示域に画像を表示 しておいてイベントで スクロールする。
  42. 42. html <div id=“first”> 最初の画面 1280x800 </div> <div id=“seconde”> 次の画面 1280x800 </div> var second = $("#second").position(); $('body').scrollTop(second.top);
  43. 43. 「タブレットの デバッグめんどい」
  44. 44. Event: ALTabletService/message ALTabletService/error Signals ALTabletService/onConsoleMessage(const std:string& message) Quita : Pepperのタブレットでのログメッセージ処理 http://qiita.com/yacchin1205/items/2c442acf3c50dcd99b 9a
  45. 45. そこにタブレットは 必要ですか?
  46. 46. そこにタブレットは 必要ですか?
  47. 47. そこにタブレットは 必要ですか?
  48. 48. そこにタブレットは 必要ですか?
  49. 49. こんな時にはタブレット • 人に考えてもらいたい情報・キーワードがある • 選択肢を少なくしたい • 言葉よりもビジュアルで伝えた方がいい • 演出として 結局は主にこれ。 • 目の前の人に”だけ”情報を伝えたい。
  50. 50. 「ホームラン競争」 のアニメーション
  51. 51. 使ってる画像は1枚 (フリー素材から)
  52. 52. • 全てこの画像を「拡大」「縮小」「変形」「移 動」して表現 • classを追加削除して、CSSを適用 • 渡すclass名をランダムで切り替え • ボールは白い●の形にしたDIVを移動
  53. 53. @-webkit-keyframes bgdiv0 { 10% { background-size: 400% 400%; background-position: center top; } 50% { background-size: 400% 400%; background-position: 50% 20%; } 100% { background-size: 400% 400%; background-position: 50% 10%; } }
  54. 54. function pitch(value) { var ball = document.getElementById("ball"); ball.style.visibility = "visible"; ball.style.webkitAnimationName = "ballpitch" + value; ball.style.webkitAnimationDuration = '3000ms'; ball.addEventListener('webkitAnimationEnd', animationEndHandler, false); function animationEndHandler() { this.style.webkitAnimationName = ''; this.removeEventListener('webkitAnimationEnd', animationEndHandler, false); this.style.visibility = "hidden"; } }
  55. 55. 開発のほとんどは CSSアニメーションの 調整に費やされました
  56. 56. pepperのタブレットではなくて ARでボールを描画したかった けどそこまでやるこたあないかと
  57. 57. 本当にタブレットは 必要ですか?
  58. 58. コミュニケーションの ツールとして タブレットをうまく使いましょう

×