Windows10 と RaspberryPiで

MakerFaireTokyo に参加

1

Yuki AndoMicrosoft Student partners

自己紹介

2

• 安藤 祐貴 (@ycnyuki)• 0x13 歳 (19 歳 )• サレジオ工業高等専門学校• 所属• Microsoft Student Partner

• Focus• Web• Game Programming

What’s MSP?

3

• マイクロソフトが展開する学生向けパートナープログ

ラム

• MS 製品や技術の素晴らしさを学生に伝えていく

• 世界各国に存在

Agenda

4

• Maker Faire とは

• 作ったものについて

• 出展するまでの苦労

• 実際にあった 5 つの壁

• 出展当日！　起こってしまった問題

Attention

5

• 情報は 8/1 時点の物です

• 変わっている箇所があるかもしれません

• 主観で捉えている部分が多数あります

Maker Faire Tokyo 2015

6

- with Windows 10 IoT Core -

Maker Faire とは

7

• Maker ムーブメントのお祭り

• ユニークな発想

• 新しいテクノロジー

• これらを組み合わせてあっと驚く物を作ろう！

Maker Faire Tokyo 2015 HomePagehttp://makezine.jp/event/mft2015/

いきさつ

8

• MSP として MakerFaireTokyo の MS ブース出展

• Windows 10 IoT Core と Raspberry Pi 2 で作品を作

ろう

• MSP でチームを作って参加

• 私も一員として参加しました

• 6 月半ばから約 1 ヶ月半で制作

何を作ろうか

9

• ゲームのような楽しめる要素を含んでいる

• 誰でもわかりやすいように見た目の変化を多めに

• Windows 10 IoT Core と Raspberry Pi 2 を使う

こんなものになりました

10

「みんな」で「光」や「色」を使った体験を楽しむゲームガジェット

Colors of msp

11

• 帽子型ガジェットをかぶって霧吹き型ガジェットで撃

ちあう

• うまく狙うと帽子型ガジェットの色が変化！

展示を振り返る

12

展示を振り返る

13

• 大勢の方に見てもら

えた

• 実際に手にとっても

らえた

• 特にお子さんに人

気

完成品

14

• 霧吹き型ガジェット• ( 略称 : 霧吹き )

• 帽子型ガジェット• ( 略称 : 帽子 )

• データ &API サーバ• 霧吹きの初期設定ア

プリ• vvvv によるゲーム画

面• 結果が見れる Web

初期化アプリゲーム画面

霧吹き型ガジェット

15

• 使用ボード• Arduino pro mini

• 使用言語• Arduino 用 c/c++ 言語• c 言語の機能といくつかの c++ の機能を保持

• 主な役割• 帽子に向けて発射する赤外線の制御• 発射するデータの設定

Arduino HomePagehttps://www.arduino.cc/

帽子型ガジェット

16

• 使用ボード• Arduino pro mini• Raspberry Pi 2

• 使用言語• Arduino 用 c/c++ 言語• C#

RaspberryPi HomePagehttps://www.raspberrypi.org/

帽子型ガジェット

17

• Arduino pro mini の役割• 霧吹き型ガジェットの発射した赤外線の取得• 赤外線受信モジュールを使用

• Raspberry Pi 2 に取得したデータを渡す

RaspberryPi HomePagehttps://www.raspberrypi.org/

帽子型ガジェット

18

• Raspberry Pi 2 の役割• 帽子の光の色の制御• サーバへのデータ送信

RaspberryPi HomePagehttps://www.raspberrypi.org/

サーバ

19

• 使用したサービス• Azure Web Apps• Azure Blob Storage• Azure Storage Table

• 使用した言語• Python• Flask• Python 用の軽量なフレームワーク

Flask HomePagehttp://flask.pocoo.org/

サーバ

20

• 主な役割• 帽子から送られてくるデータを保持• ゲーム画面で必要なデータの提供• Web で表示するデータの提供

Microsoft Azure HomePagehttps://azure.microsoft.com/ja-jp/

初期設定アプリ

21

• 使用したボード• Arduino nano

• 使用した言語• Arduino 用 c/c++ 言語 • C#• Windows Presentation Foundation

初期設定アプリ

22

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

ゲーム画面

23

• 使用した言語• vvvv• ビジュアルプログラミング言語• 音や映像と連携して動く映像を作れる

• 主な役割• どの霧吹きがどの帽子を撃ったかを映像で表示• 各帽子が今現在何色なのかを表示

vvvv HomePagehttp://vvvv.org/

結果が見れる Web

24

• 使用した言語• HTML+CSS• D3.js• データを元に HTML ドキュメントを変更

• 主な役割• サーバのデータを使用し結果を見やすくする• 誰が何回撃たれているか etc

D3.js HomePagehttp://d3js.org/

言語・ボードがいっぱい

25

• 使用言語がバラバラ

• ボードごとに言語が決まっていた

• チームメンバーのスキルセット

• 現在の形になるまでに問題がたくさん発生

第 1 の課題

26

Arduino間の通信

Arduino間の通信

27

• 帽子と霧吹きの通信

• 霧吹きと初期化アプリとの

通信

初期化アプリゲーム画面

今回使用した仕組み

28

• 赤外線の点灯→消灯→再点灯を使用

• 点灯から再点灯までの時間によって値を定義する

• 再点灯まで 560μs なら 0 として扱う

• それ以外の時間の場合は 1 として扱う

• 受信側で時間を計測することで値を獲得する

• 取得した値は 0/1 の bit列として扱う

仕組みを使って

29

• 初期化アプリにつながっている Arduino から霧吹きへ

• 霧吹きの新しいデータを bit で表現し送信

• 霧吹きから帽子へ

• 霧吹きが持つデータを bit で表現し送信

• 帽子はデータを解釈し色の変更 , サーバへ送信

問題発生

30

• 複数の霧吹きがタイミングよく送信すると混線してし

まう

• 受信側 Arduino は常時受信待機状態

• どこまでが送信されたデータか判別出来ない

回避するために

31

• 固定長のパリティデータを送信データに付与した

• 今回は 30bit 分のパリティを用意

• 混線 , データの判別が問題なく出来るように

第 2 の課題

32

Raspberry 　 Pi 2 の赤外線送受信速度

当初の予定

33

シンプルな構成

実際にやってみると

34

何が起こったか

35

• Arduino の制御は μs単位で行える

• Raspberry Pi 2 の制御は 100ms程度の単位でしか行

えない

• 複数の霧吹きから赤外線が飛んでくると処理が追いつ

かない

• データが混ざってしまいどちらも取得できない

• 1 つ受信すると次の受信までに時間がかかる

打開策

36

Arduino を追加

どのようになったか

37

• 霧吹きの赤外線送信・帽子の赤外線受信の制御が変

わった

• どちらも μs単位で制御できるように

• 送受信処理が素早く行えるように

• 複数の霧吹きから赤外線が飛んできても処理出来る可

能性が向上

第 3 の課題

38

Universal Windows Apps によるシリアル通信

当初の予定

39Universal Windows Platform

シリアル通信

• 霧吹きが送信する値の初期化が必要

• PC の Universal Windows Platform(UWP)とシリアル接続した Arduino からデータを

送信

問題発生

40

• UWP ではシリアル通信についての API が提供されて

いない

• 方法はあるものの時間的猶予がない

初期化アプリを変更

41Windows Presentation Foundation

シリアル通信

シリアル通信が簡単に行える

Windows Presentation Foundation に変更

第 4 の課題

42

サーバのテーブル構成

元々のゲームの内容

43

• 元々は 1 回 30 分のゲームとして制作していた

• MSP が帽子をかぶり参加者が霧吹きを持つ

• 帽子を狙って参加者が霧吹きで MSP を撃つ

• 色を塗り替えた回数等で点数を競う

内容の変化

44

• ブースの都合上実行出来ないことが判明

• 30 分 1 回のゲームではなくゲームのデモをベースに

展示

データ管理方法の変更

45

• 元々の設計

• 各ゲームごとにデータを管理

• Web,vvvv に提供するデータもゲームごと

• 変更後の設計

• ゲームごとの管理を廃止

• 霧吹きと帽子ごとに管理するように

第 5 の課題

46

vvvv による visualize

Visualize の仕様

47

展示用 PC

Web vvvv

展示用 PC

起こった問題

48

• vvvv の動作が遅くなる

• サーバから取得したデータが多いと特に

• エフェクトが出ない

• エフェクトが溢れる

未解決

49

• エフェクトが止まる・溢れる現象

• ネットワークが不安定な場合に多い

• 溜まってしまったデータを一気に取得してしまう

為？

様々な問題

50

• 色々な問題と遭遇した

• なんとか完成！

• 頭を捻ったり

• ゴリ押ししたり

出展当日の問題①

51

回線が届かない

会場での回線は・・・

52

• 備え付けの有線回線は混雑のためか接続できず

• 自前のモバイルルータも接続できず

• 無線が非常に混み合っていた

回線がない

53

• 回線が必要な処理に致命的なダメージ

• 帽子からサーバへの通信

• サーバから Web,vvvv への通信

最終的には

54

• なんとか接続出来るようになった有線に接続

• ほぼ全ての機器を有線で無理やり

• 大量のハブに救われました

出展当日の問題②

55

展示用 PC の熱

会場の温度

56

• 夏なので非常に暑かった

• 大盛況のため会場内が非常に混雑していた

• 非常に高温

展示用 PC

57

• PC は 2台使用

• 初期化アプリ用

• Web,vvvv 用

• Web,vvvv 用が暑くなってしまった

• 冷却手段を用意していなかった

• vvvv の動作に更に悪影響

展示用 PC

出展当日の問題③

58

展示したガジェットの不具合

霧吹き型ガジェットに問題が

59

• 霧吹きは最終的に電池駆動に

• 電池の不用意な接触で火花が

• 応急処置はしたもののその後不調に

無事出展終了！

60

振り返って

61

• 問題も多く開発が難航することも多かった

• 出展当日もバタバタしていてあっという間に終わっ

てしまった

• チームで開発するということは非常に難しかった

厳しいこともあったけど

62

• 出来上がった時 , 展示仕切った時の感動は凄まじい

ものでした

• 問題を解決出来た時の喜びは最高でした

• “モノを作る”ことはやっぱり最高に楽しかったです

最後に

63

• 一緒に作り上げた MSP の皆さん

• このような機会を下さった岩永さん

• 聞いていただいた皆さん

ありがとうございました！