第36回Creators MeetUp の登壇資料です。 「デバイスネタをデモする時の便利実装とか注意点とかあれこれ」 ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・シルエットデザインhttp://kage-design.com/ ・human pictogram 2.0http://pictogram2.com/

1. 第36回Creators MeetUp
デバイスネタをデモする時の便利実装
とか注意点とかあれこれ
ワンフットシーバス 田中正吾

2. 私の話はスライドを後ほど共有します。
話す内容に注力いただいて大丈夫です！

3. 自己紹介

4. 田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を
中心にインタラクティブコンテンツを主に行い
現在に至る。
最近は、JavaScriptやHTML5アニメーション、
スマートフォン演出制作のワークフロー改善に
関わったりしていました。
デジタルサイネージやアプリ制作もやります。

5. あとウォンバットが好きでして、
WEB技術を駆使して毎日情報集めてます

6. デバイスネタとは

7. ここでのデバイスネタは私が以前LTデモした
WEBとデバイスを連携するデバイスネタ

8. ここでのデバイスネタは私が以前LTデモした
WEBとデバイスを連携するデバイスネタ

9. ここでのデバイスネタは私が以前LTデモした
WEBとデバイスを連携するデバイスネタ

10. ここでのデバイスネタは私が以前LTデモした
WEBとデバイスを連携するデバイスネタ
NodeJSの
司令塔サーバー

11. スライドだけでLTをするよりも
いくらか注意することがあったので話します！

12. スライドLTとのちがい

13. そう。スライドLTは機器が少ない。
スライド

14. デバイスのデモLTは
スライドに加えてデバイス加わる
スライド
デバイス
デモ
スライド

15. 人間の手は右手と左手しかありませんよね

16. 登壇時に壇上テーブルに持っていくものが
多くなりスタート時に手間取りやすいので注意
（いっぺんに壇上へ運ぶカゴとかよさそう）

17. いよいよデバイス操作してデモ
デバイス
デモ

18. デバイス操作は片手で操作がしにくいので
マイク持つとデバイス操作しにくい問題が生じる
（猫ならぬウォンバットの手も借りたい）
デバイス
デモ

19. もちろんデバイス操作に集中すると
マイクを離してしまう問題もありえるので注意
（マイクムーブや操作助手があったほうがいい）
（そのときはしょうがなので声を張りましょう）
デバイス
デモ

20. デバイスデモはネットワークからむので
通信環境がだいじ！
スライド
デバイス
デモ
スライド

21. 技術境界が多くなりわらわらと
「うまくいくか懸念ポイント」が増える
スライド
デバイス
デモ
スライド

22. デバイスで利用する通信は
Wi-Fi/LTEを使用しますが・・・

23. デバイスで利用する通信はWifiなどですが
現場の通信環境は必ずしも通信安定してない
（参加者がみんなでつないじゃうとか）

24. Wifi接続時に追加ログインがあると
場合によってはデバイスから
ログインできないこともあった

25. 自前LTEテザリングとかなり安心オススメ！
（できれば独立したLETモバイルルータで）

26. しかし自分のスマホでのテザリングは
電話かかってくる無情に切断されるので注意！
（実際そんなことがありました）

27. 安心感が増す対話的な便利実装
（裏コンソール画面）

28. デバイスネタは登壇直前に
ちゃんと動いているかが正直わかりにくい

29. バグった時もUSBを抜いて再起動とか
乱暴なことになりがち

30. 本番画面とは別に動作確認できる
裏コンソール画面があると安心感UP！

31. 無線通信はやはり不安なので
LT登壇待ちまで、ちょいちょいと
LED点滅でチェックすると、かなりホッとする。

32. 遠隔シャットダウンや遠隔再起動は
調子悪くなったときの、いざというとき便利

33. なるべく細かくログが出るようにするのも
バグ回避の一助になります

34. デバイス起動時自動で通信確立させて手順削減。
通信成功時にLED点滅もかなりよい。
（デバイスとも対話的であると安心感UP）
つながりましたよ！

35. ダメな時の安全策を考えておこう

36. ここまでお伝えした注意点や便利実装でも
完全に防ぎきれない時もある
スライド
デバイス
デモ
スライド

37. 「そんなこともあろうかと」

38. それも考慮して安全策を準備しておこう

39. デモがうまくいかなくても
ちゃんと伝わる配慮としての「動作動画」
スライド
デバイス
デモ
スライド

40. デモ前にデモで何が起こるかを説明。
成功でも失敗でも話がつながりやすくしたり。

41. 音が出るネタの場合は
音が出なくても分かる画面ようにしたり。

42. WEB制作での情報の見せ方に
近いところがかなりあります！

43. ➔まとめ
◆デバイスデモは機器が多くなるので考慮し
て進行し、手が自由になるよう心がけまし
ょう。
◆技術境界が多くなりWEB表示だけよりは大
変。実装は念入りに。

44. ➔まとめ
◆デバイスとリアルタイムに対話的にチェッ
クできるようにして安心感を高めましょう。
◆失敗した時にも伝えたい事が伝わるように
「そんなこともあろうかと」安全策をいく
つか講じておきましょう。

45. 今日はデバイスデモがなくて安心！
スライド

46. けれど、デバイスデモとスライドが伝わると
相乗効果で楽しいので今年も挑戦していきたい！
スライド
デバイス
デモ
スライド

47. ご清聴いただきまして
ありがとうございました！