Comm Tech Festival にて使用した資料です

1. Windows10とRaspberryPiで
MakerFaireTokyoに参加
1
Yuki Ando
Microsoft Student partners

2. 自己紹介
2
• 安藤 祐貴 (@ycnyuki)
• 0x13歳(19歳)
• サレジオ工業高等専門学校
• 所属
• Microsoft Student Partner
• Focus
• Web
• Game Programming

3. What’s MSP?
3
• マイクロソフトが展開する学生向けパートナープログラム
• MS製品や技術の素晴らしさを学生に伝えていく
• 世界各国に存在

4. Agenda
4
• Maker Faire とは
• 作ったものについて
• 出展するまでの苦労
• 実際にあった5つの壁
• 出展当日！ 起こってしまった問題

5. Attention
5
• 情報は8/1時点の物です
• 変わっている箇所があるかもしれません
• 主観で捉えている部分が多数あります

6. Maker Faire Tokyo 2015
6
- with Windows 10 IoT Core -

7. Maker Faireとは
7
• Makerムーブメントのお祭り
• ユニークな発想
• 新しいテクノロジー
• これらを組み合わせてあっと驚く物を作ろう！
Maker Faire Tokyo 2015 HomePage
http://makezine.jp/event/mft2015/

8. いきさつ
8
• MSPとしてMakerFaireTokyoのMSブース出展
• Windows 10 IoT CoreとRaspberry Pi 2で作品を作ろう
• MSPでチームを作って参加
• 私も一員として参加しました
• 6月半ばから約1ヶ月半で制作

9. 何を作ろうか
9
• ゲームのような楽しめる要素を含んでいる
• 誰でもわかりやすいように見た目の変化を多めに
• Windows 10 IoT Core とRaspberry Pi 2を使う

10. こんなものになりました
10
「みんな」で「光」や「色」を使った
体験を楽しむゲームガジェット

11. Colors of msp
11
• 帽子型ガジェットをかぶって霧吹き型ガジェットで撃ちあう
• うまく狙うと帽子型ガジェットの色が変化！

12. 展示を振り返る
12

13. 展示を振り返る
13
• 大勢の方に見てもらえた
• 実際に手にとってもらえた
• 特にお子さんに人気

14. 完成品
14
• 霧吹き型ガジェット
• (略称:霧吹き)
• 帽子型ガジェット
• (略称:帽子)
• データ&APIサーバ
• 霧吹きの初期設定アプリ
• vvvvによるゲーム画面
• 結果が見れるWeb初期化アプリ
ゲーム画面

15. 霧吹き型ガジェット
15
• 使用ボード
• Arduino pro mini
• 使用言語
• Arduino用 c/c++言語
• c言語の機能といくつかのc++の機能を保持
• 主な役割
• 帽子に向けて発射する赤外線の制御
• 発射するデータの設定
Arduino HomePage
https://www.arduino.cc/

16. 帽子型ガジェット
16
• 使用ボード
• Arduino pro mini
• Raspberry Pi 2
• 使用言語
• Arduino用 c/c++言語
• C#
RaspberryPi HomePage
https://www.raspberrypi.org/

17. 帽子型ガジェット
17
• Arduino pro miniの役割
• 霧吹き型ガジェットの発射した赤外線の取得
• 赤外線受信モジュールを使用
• Raspberry Pi 2に取得したデータを渡す
RaspberryPi HomePage
https://www.raspberrypi.org/

18. 帽子型ガジェット
18
• Raspberry Pi 2の役割
• 帽子の光の色の制御
• サーバへのデータ送信
RaspberryPi HomePage
https://www.raspberrypi.org/

19. サーバ
19
• 使用したサービス
• Azure Web Apps
• Azure Blob Storage
• Azure Storage Table
• 使用した言語
• Python
• Flask
• Python用の軽量なフレームワーク
Flask HomePage
http://flask.pocoo.org/

20. サーバ
20
• 主な役割
• 帽子から送られてくるデータを保持
• ゲーム画面で必要なデータの提供
• Webで表示するデータの提供
Microsoft Azure HomePage
https://azure.microsoft.com/ja-jp/

21. 初期設定アプリ
21
• 使用したボード
• Arduino nano
• 使用した言語
• Arduino用 c/c++言語
• C#
• Windows Presentation Foundation

22. 初期設定アプリ
22
• 主な役割
• 霧吹き型ガジェットの初期化
• 霧吹き認識用のIDを設定
• 霧吹きの色を設定

23. ゲーム画面
23
• 使用した言語
• vvvv
• ビジュアルプログラミング言語
• 音や映像と連携して動く映像を作れる
• 主な役割
• どの霧吹きがどの帽子を撃ったかを映像で表示
• 各帽子が今現在何色なのかを表示
vvvv HomePage
http://vvvv.org/

24. 結果が見れるWeb
24
• 使用した言語
• HTML+CSS
• D3.js
• データを元にHTMLドキュメントを変更
• 主な役割
• サーバのデータを使用し結果を見やすくする
• 誰が何回撃たれているか etc
D3.js HomePage
http://d3js.org/

25. 言語・ボードがいっぱい
25
• 使用言語がバラバラ
• ボードごとに言語が決まっていた
• チームメンバーのスキルセット
• 現在の形になるまでに問題がたくさん発生

26. 第1の課題
26
Arduino間の通信

27. Arduino間の通信
27
• 帽子と霧吹きの通信
• 霧吹きと初期化アプリとの通信
初期化アプリ
ゲーム画面

28. 今回使用した仕組み
28
• 赤外線の点灯→消灯→再点灯を使用
• 点灯から再点灯までの時間によって値を定義する
• 再点灯まで560μsなら0として扱う
• それ以外の時間の場合は1として扱う
• 受信側で時間を計測することで値を獲得する
• 取得した値は0/1のbit列として扱う

29. 仕組みを使って
29
• 初期化アプリにつながっているArduinoから霧吹きへ
• 霧吹きの新しいデータをbitで表現し送信
• 霧吹きから帽子へ
• 霧吹きが持つデータをbitで表現し送信
• 帽子はデータを解釈し色の変更,サーバへ送信

30. 問題発生
30
• 複数の霧吹きがタイミングよく送信すると混線してしまう
• 受信側Arduinoは常時受信待機状態
• どこまでが送信されたデータか判別出来ない

31. 回避するために
31
• 固定長のパリティデータを送信データに付与した
• 今回は30bit分のパリティを用意
• 混線,データの判別が問題なく出来るように

32. 第2の課題
32
Raspberry Pi 2の赤外線送受信速度

33. 当初の予定
33
シンプルな構成

34. 実際にやってみると
34

35. 何が起こったか
35
• Arduinoの制御はμs単位で行える
• Raspberry Pi 2の制御は100ms程度の単位でしか行えない
• 複数の霧吹きから赤外線が飛んでくると処理が追いつかない
• データが混ざってしまいどちらも取得できない
• 1つ受信すると次の受信までに時間がかかる

36. 打開策
36
Arduinoを追加

37. どのようになったか
37
• 霧吹きの赤外線送信・帽子の赤外線受信の制御が変わった
• どちらもμs単位で制御できるように
• 送受信処理が素早く行えるように
• 複数の霧吹きから赤外線が飛んできても処理出来る可能性が
向上

38. 第3の課題
38
Universal Windows Appsによるシリアル通信

39. 当初の予定
39
Universal Windows Platform
シリアル通信
• 霧吹きが送信する値の初期化が必要
• PCのUniversal Windows Platform(UWP)と
シリアル接続したArduinoからデータを送信

40. 問題発生
40
• UWPではシリアル通信についてのAPIが提供されていない
• 方法はあるものの時間的猶予がない

41. 初期化アプリを変更
41
Windows Presentation Foundation
シリアル通信
シリアル通信が簡単に行える
Windows Presentation Foundationに変更

42. 第4の課題
42
サーバのテーブル構成

43. 元々のゲームの内容
43
• 元々は1回30分のゲームとして制作していた
• MSPが帽子をかぶり参加者が霧吹きを持つ
• 帽子を狙って参加者が霧吹きでMSPを撃つ
• 色を塗り替えた回数等で点数を競う

44. 内容の変化
44
• ブースの都合上実行出来ないことが判明
• 30分1回のゲームではなくゲームのデモをベースに展示

45. データ管理方法の変更
45
• 元々の設計
• 各ゲームごとにデータを管理
• Web,vvvvに提供するデータもゲームごと
• 変更後の設計
• ゲームごとの管理を廃止
• 霧吹きと帽子ごとに管理するように

46. 第5の課題
46
vvvvによるvisualize

47. Visualizeの仕様
47
展示用PC
Web vvvv
展示用PC

48. 起こった問題
48
• vvvvの動作が遅くなる
• サーバから取得したデータが多いと特に
• エフェクトが出ない
• エフェクトが溢れる

49. 未解決
49
• エフェクトが止まる・溢れる現象
• ネットワークが不安定な場合に多い
• 溜まってしまったデータを一気に取得してしまう為？

50. 様々な問題
50
• 色々な問題と遭遇した
• なんとか完成！
• 頭を捻ったり
• ゴリ押ししたり

51. 出展当日の問題①
51
回線が届かない

52. 会場での回線は・・・
52
• 備え付けの有線回線は混雑のためか接続できず
• 自前のモバイルルータも接続できず
• 無線が非常に混み合っていた

53. 回線がない
53
• 回線が必要な処理に致命的なダメージ
• 帽子からサーバへの通信
• サーバからWeb,vvvvへの通信

54. 最終的には
54
• なんとか接続出来るようになった有線に接続
• ほぼ全ての機器を有線で無理やり
• 大量のハブに救われました

55. 出展当日の問題②
55
展示用PCの熱

56. 会場の温度
56
• 夏なので非常に暑かった
• 大盛況のため会場内が非常に混雑していた
• 非常に高温

57. 展示用PC
57
• PCは2台使用
• 初期化アプリ用
• Web,vvvv用
• Web,vvvv用が暑くなってしまった
• 冷却手段を用意していなかった
• vvvvの動作に更に悪影響
展示用PC

58. 出展当日の問題③
58
展示したガジェットの不具合

59. 霧吹き型ガジェットに問題が
59
• 霧吹きは最終的に電池駆動に
• 電池の不用意な接触で火花が
• 応急処置はしたもののその後不調に

60. 無事出展終了！
60

61. 振り返って
61
• 問題も多く開発が難航することも多かった
• 出展当日もバタバタしていてあっという間に終わってしまった
• チームで開発するということは非常に難しかった

62. 厳しいこともあったけど
62
• 出来上がった時,展示仕切った時の感動は凄まじいものでした
• 問題を解決出来た時の喜びは最高でした
• “モノを作る”ことはやっぱり最高に楽しかったです

63. 最後に
63
• 一緒に作り上げたMSPの皆さん
• このような機会を下さった岩永さん
• 聞いていただいた皆さん
ありがとうございました！