それでもタブレットと付き合っていく方法 公開版
-
Upload
- -
Category
Technology
-
view
2.600 -
download
0
Transcript of それでもタブレットと付き合っていく方法 公開版
![Page 1: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/1.jpg)
それでもタブレットと付き合っていく方法facebook.com/bird.tomita
twitter : @bird_tomita
2016.03.16アルデバラン・アトリエ秋葉原ディスプレイ(タブレット)利用技術勉強会
![Page 2: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/2.jpg)
とりあえず自己紹介• 富田 篤 (Bird Tomita)• ロボアプリパートナー• pepper アプリエンジニア…だと思われてる人どっちかといえば商品開発• Developer モデルオーナー• 代表作: pepper ホームラン競争• ura pepper challenge 2015
winter ベストコーディネート賞(もうアプリじゃない)
![Page 3: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/3.jpg)
このタブレット邪魔じゃね?
![Page 4: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/4.jpg)
タブレットのせいで。。。• pepper がしゃべるタブレット台に• ヘタするとしゃべらないタブレット台に• タブレットでゲームするだけ• 子供がタブレットガンガン叩きまくる• 子供の視線が顔ではなくタブレットに
![Page 5: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/5.jpg)
![Page 6: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/6.jpg)
![Page 7: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/7.jpg)
![Page 8: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/8.jpg)
表情認識とか使えねーじゃんか!!
![Page 9: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/9.jpg)
30秒でできる「タブレットを触らせずに広告やブランディングにも使う方法」
![Page 10: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/10.jpg)
用意するもの• A4 用紙 パンフレット等• セロテープ
![Page 11: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/11.jpg)
![Page 12: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/12.jpg)
大体、いつからこんなのあるんだ〜!?
![Page 13: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/13.jpg)
![Page 14: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/14.jpg)
ほぼ最初からでした
![Page 15: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/15.jpg)
これ取れないの??
![Page 16: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/16.jpg)
![Page 17: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/17.jpg)
勇者 日経 Robotics
![Page 18: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/18.jpg)
![Page 19: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/19.jpg)
![Page 20: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/20.jpg)
良い子は真似しない!
![Page 21: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/21.jpg)
![Page 22: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/22.jpg)
本当にタブレットは必要ですか?
![Page 23: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/23.jpg)
プロトタイピング
![Page 24: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/24.jpg)
pepper になってタブレット活用を考えてみよう
![Page 25: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/25.jpg)
用意するもの• 人間二人以上( pepper 役、ユーザー役)• タブレット(とりあえずコンテンツは不要)• (推奨)白いズボン・白いシャツ• (推奨)グレーのハイネック• (推奨)白い帽子・耳あて・雰囲気メガネ等
![Page 26: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/26.jpg)
現場のみ
![Page 27: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/27.jpg)
現場のみ
![Page 28: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/28.jpg)
絶対あるからといって活用は「必須」ではない
![Page 29: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/29.jpg)
まずは考えるところからはじめてみよう
![Page 30: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/30.jpg)
本当にタブレットは必要ですか?
![Page 31: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/31.jpg)
それでもタブレットと付き合っていく方法
![Page 32: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/32.jpg)
細かい Tips はヘッドウォータースさんお願いします
![Page 33: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/33.jpg)
よくあるご要望
![Page 34: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/34.jpg)
「サイネージとかディスプレイ連動したい。イベントやプレゼンで画面をスクリーンに出したい。」
![Page 35: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/35.jpg)
ディスプレイ連動は簡単• http://pepperのIP/apps/アプリID/
に Mac,PC,iPad,Android 等からアクセス• ブラウザ表示したデバイスを
Airplay,cast,HDMI 接続等でテレビや大型ディスプレイに表示してください。• これだけ!(ブラウザの比率が変わるので注意)• アニメーションなどの処理スピードの違いに注意
![Page 36: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/36.jpg)
「タブレットからキーボードを使って名前とかを入力したい」
![Page 37: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/37.jpg)
タブレットから文字入力• 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
![Page 38: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/38.jpg)
![Page 39: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/39.jpg)
使いづらいわーー!!٩(๑`^´๑)۶
![Page 40: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/40.jpg)
Android のキーボードを利用する場合は、漢字変換などが必要な場合のみにしてJavaScript で実装しましょう
![Page 41: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/41.jpg)
![Page 42: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/42.jpg)
![Page 43: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/43.jpg)
「 Web の内容をタブレットに表示したい」
![Page 44: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/44.jpg)
方法1タブレットの Wi-Fi を有効にしてそのままページを表示
![Page 45: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/45.jpg)
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/")
![Page 46: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/46.jpg)
メリットWeb サービスがあればタブレットに表示できる
デメリットpepper との連携がほぼ無理
![Page 47: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/47.jpg)
方法2JSON の API があれば
python で JSON を取得タブレットに渡してJavaScript で表示
![Page 48: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/48.jpg)
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);});
![Page 49: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/49.jpg)
メリットAPI があればだいたいなんでもできるデメリット
HTML 等も用意しないといけないので少々面倒
![Page 50: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/50.jpg)
「画像表示をスムーズにしたい」
![Page 51: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/51.jpg)
showImage ボックスは使わない使う場合は preLoadしてから show
![Page 52: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/52.jpg)
showImage ボックスで画像を表示した場合、「表示が完了したか」が取れない。
![Page 53: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/53.jpg)
[ 推奨 ]html の非表示域に画像を表示しておいてイベントでスクロールする。
![Page 54: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/54.jpg)
html
<div id=“first”>最初の画面 1280x800</div>
<div id=“seconde”>次の画面 1280x800</div>
var second = $("#second").position(); $('body').scrollTop(second.top);
![Page 55: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/55.jpg)
「タブレットのデバッグめんどい」
![Page 56: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/56.jpg)
Event:ALTabletService/messageALTabletService/error
SignalsALTabletService/onConsoleMessage(const std:string& message)
Quita : Pepper のタブレットでのログメッセージ処理http://qiita.com/yacchin1205/items/2c442acf3c50dcd99b9a
![Page 57: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/57.jpg)
![Page 58: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/58.jpg)
そこにタブレットは必要ですか?
![Page 59: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/59.jpg)
![Page 60: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/60.jpg)
そこにタブレットは必要ですか?
![Page 61: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/61.jpg)
![Page 62: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/62.jpg)
そこにタブレットは必要ですか?
![Page 63: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/63.jpg)
![Page 64: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/64.jpg)
そこにタブレットは必要ですか?
![Page 65: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/65.jpg)
![Page 66: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/66.jpg)
![Page 67: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/67.jpg)
こんな時にはタブレット• 人に考えてもらいたい情報・キーワードがある• 選択肢を少なくしたい• 言葉よりもビジュアルで伝えた方がいい• 演出として 結局は主にこれ。• 目の前の人に”だけ”情報を伝えたい。
![Page 68: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/68.jpg)
「ホームラン競争」のアニメーション
![Page 69: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/69.jpg)
![Page 70: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/70.jpg)
![Page 71: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/71.jpg)
![Page 72: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/72.jpg)
使ってる画像は1枚(フリー素材から)
![Page 73: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/73.jpg)
![Page 74: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/74.jpg)
• 全てこの画像を「拡大」「縮小」「変形」「移動」して表現• class を追加削除して、 CSS を適用• 渡す class 名をランダムで切り替え• ボールは白い●の形にした DIV を移動
![Page 75: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/75.jpg)
@-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%; } }
![Page 76: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/76.jpg)
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"; } }
![Page 77: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/77.jpg)
開発のほとんどはCSS アニメーションの調整に費やされました
![Page 78: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/78.jpg)
pepper のタブレットではなくてAR でボールを描画したかったけどそこまでやるこたあないかと
![Page 79: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/79.jpg)
本当にタブレットは必要ですか?
![Page 80: それでもタブレットと付き合っていく方法 公開版](https://reader036.fdocument.pub/reader036/viewer/2022062316/58781e471a28aba12d8b5fd3/html5/thumbnails/80.jpg)
コミュニケーションのツールとしてタブレットをうまく使いましょう