それでもタブレットと付き合っていく方法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 でボールを描画したかったけどそこまでやるこたあないかと

本当にタブレットは必要ですか？

コミュニケーションのツールとしてタブレットをうまく使いましょう