Embed Size (px)
Citation preview
それでもタブレットと付き合っていく方法facebook.com/bird.tomita
twitter : @bird_tomita
2016.03.16アルデバラン・アトリエ秋葉原ディスプレイ（タブレット）利用技術勉強会
とりあえず自己紹介• 富田 篤 (Bird Tomita)• ロボアプリパートナー• pepper アプリエンジニア…だと思われてる人どっちかといえば商品開発• Developer モデルオーナー• 代表作： pepper ホームラン競争• ura pepper challenge 2015
winter ベストコーディネート賞（もうアプリじゃない）
このタブレット邪魔じゃね？
タブレットのせいで。。。• pepper がしゃべるタブレット台に• ヘタするとしゃべらないタブレット台に• タブレットでゲームするだけ• 子供がタブレットガンガン叩きまくる• 子供の視線が顔ではなくタブレットに
表情認識とか使えねーじゃんか！！
３０秒でできる「タブレットを触らせずに広告やブランディングにも使う方法」
用意するもの• A4 用紙 パンフレット等• セロテープ
大体、いつからこんなのあるんだ〜！？
ほぼ最初からでした
これ取れないの？？
勇者 日経 Robotics
良い子は真似しない！
本当にタブレットは必要ですか？
プロトタイピング
pepper になってタブレット活用を考えてみよう
用意するもの• 人間二人以上（ pepper 役、ユーザー役）• タブレット（とりあえずコンテンツは不要）• （推奨）白いズボン・白いシャツ• （推奨）グレーのハイネック• （推奨）白い帽子・耳あて・雰囲気メガネ等
現場のみ
現場のみ
絶対あるからといって活用は「必須」ではない
まずは考えるところからはじめてみよう
本当にタブレットは必要ですか？
それでもタブレットと付き合っていく方法
細かい Tips はヘッドウォータースさんお願いします
よくあるご要望
「サイネージとかディスプレイ連動したい。イベントやプレゼンで画面をスクリーンに出したい。」
ディスプレイ連動は簡単• http://pepperのIP/apps/アプリID/
に Mac,PC,iPad,Android 等からアクセス• ブラウザ表示したデバイスを
Airplay,cast,HDMI 接続等でテレビや大型ディスプレイに表示してください。• これだけ！（ブラウザの比率が変わるので注意）• アニメーションなどの処理スピードの違いに注意
「タブレットからキーボードを使って名前とかを入力したい」
タブレットから文字入力• http://doc.aldebaran.com/2-1/naoqi/core/alt
abletservice-api.html
ALTabletService::showInputDialog()ALTabletService::showInputTextDialog()
実装済ボックスをロボットライブラリで公開中https://pepper.robo-lib.com/projects/user/bird_tomita
使いづらいわーー！！٩(๑`^´๑)۶
Android のキーボードを利用する場合は、漢字変換などが必要な場合のみにしてJavaScript で実装しましょう
「 Web の内容をタブレットに表示したい」
方法１タブレットの Wi-Fi を有効にしてそのままページを表示
pepper [0] ~ $ qicli call ALTabletService.configureWifi security ssid keytruepepper [0] ~ $ qicli call ALTabletService.getWifiStatus"CONNECTED"
CONNECTED までは数秒かかる tabletService = self.session().service("ALTabletService") tabletService.showWebview() tabletService.loadUrl(“http://www.softbank.jp/")
メリットWeb サービスがあればタブレットに表示できる
デメリットpepper との連携がほぼ無理
方法２JSON の API があれば
python で JSON を取得タブレットに渡してJavaScript で表示
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);});
メリットAPI があればだいたいなんでもできるデメリット
HTML 等も用意しないといけないので少々面倒
「画像表示をスムーズにしたい」
showImage ボックスは使わない使う場合は preLoadしてから show
showImage ボックスで画像を表示した場合、「表示が完了したか」が取れない。
[ 推奨 ]html の非表示域に画像を表示しておいてイベントでスクロールする。
html
<div id=“first”>最初の画面 1280x800</div>
<div id=“seconde”>次の画面 1280x800</div>
var second = $("#second").position(); $('body').scrollTop(second.top);
「タブレットのデバッグめんどい」
Event:ALTabletService/messageALTabletService/error
SignalsALTabletService/onConsoleMessage(const std:string& message)
Quita : Pepper のタブレットでのログメッセージ処理http://qiita.com/yacchin1205/items/2c442acf3c50dcd99b9a
そこにタブレットは必要ですか？
そこにタブレットは必要ですか？
そこにタブレットは必要ですか？
そこにタブレットは必要ですか？
こんな時にはタブレット• 人に考えてもらいたい情報・キーワードがある• 選択肢を少なくしたい• 言葉よりもビジュアルで伝えた方がいい• 演出として 結局は主にこれ。• 目の前の人に”だけ”情報を伝えたい。
「ホームラン競争」のアニメーション
使ってる画像は１枚（フリー素材から）
• 全てこの画像を「拡大」「縮小」「変形」「移動」して表現• class を追加削除して、 CSS を適用• 渡す class 名をランダムで切り替え• ボールは白い●の形にした DIV を移動
@-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%; } }
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"; } }
開発のほとんどはCSS アニメーションの調整に費やされました
pepper のタブレットではなくてAR でボールを描画したかったけどそこまでやるこたあないかと
本当にタブレットは必要ですか？
コミュニケーションのツールとしてタブレットをうまく使いましょう
