2015年10月3日に開催された ohotech 特盛#13 にて紹介いたしました、「スマホで操作するカメラ付きWi-Fiラジコンカー ― C#とラズパイとWebアプリの技術で作っちゃおう! ―」のスライドを、一般公開用に再編集したものです。

1. スマホで操作する
カメラ付きWi-Fiラジコンカー
― C#とラズパイとWebアプリの技術で作っちゃおう! ―

2. 今晩の宿「ホテルニューおはる」¥3,600

3. #ohotech
ハッシュタグ#ohotechでツイートはじめ、
facebook やブログなどへの投稿OKです

4. 最近は TypeScript をたくさん書いてます

5. 皆さんの興味分野は何ですか?
SignalYN http://j.mp/1JG1DWJ

6. Goal
このセッションで伝えたいこと

7. 私の年1回の学習発表会です
• 私がどんなことをどの程度成し遂げたかをわ
かってもらえたら目標達成です 
• さらに何かひとつでも
「あれやってみようかな」
「これ面白そう」
と共感を得られることがあれば、仲間が増えた
ような気がして嬉しいですね!

8. 昨年のOhotechで学んだ成果
投げ銭 as a Service http://j.mp/1GknH9h

9. で、今年の作品 =「スマホで操作す
るカメラ付きWi-Fiラジコンカー」
• C#とラズパイとWebアプリの技術で作っちゃ
います。
※今回は「特盛」なので、玄人向けということで、「ラズパイとはなんぞや?」
「C#とは?」といった説明はスライドからは割愛させていただきます。

10. Let’s try it!
試してみよう!

11. SSID ohotech13a
http://192.168.43.200/

12. Why do you made it?
制作の動機

13. OLYMPUS AIR A01 を見たのがきっかけ

14. ラズパイ使えば、同じようなの作れるんじゃね?

15. これを...

16. こうじゃ。

17. 勉強会コミュニティ & 宿泊イベント
Code in 定山渓温泉

18. ...の集合写真を撮るのに使おう!

19. と思ったら、クロージングどたばたして
忘れてしまった...orz
☁
☁

20. How does it work?
仕組みの解説

21. HTTP 通信
Raspberry Pi Model B+
Spec ARM 700MHz / 512MB RAM
OS Linux Distribution “Raspbian”
Runtime mono
HTTP Server XSP3
Application ASP.NET MVC3 / C#
Wi-Fiで直接通信
• スマホの Web ブラウザで操作
• Webカメラで撮影した画像を1fpsで表示
USB 接続
Webカメラ
モータードライバ x 3
モーター x 3基
GPIO
USB 接続 Wi-Fiドングル
構成

22. GPIOのピンの電圧On/Offは簡単
• ラズパイの GPIO のピンは「ファイル」とし
て読み書きできる
• なので、HTTP 要求に応じて所定の「ファイ
ル」に書き込む Web アプリをラズパイ上で動
かせば、それはすなわち、GPIO のピンの電圧
を On/Off する Web アプリになる

23. ファイルの読み書きなのでシェル
コマンドでもできる
$ echo 25 > /sys/class/gpio/export
$ echo out > /sys/class/gpio/gpio/25/direction
$ echo 1 > /sys/class/gpio/gpio/25/value

24. 模型組み立てのほうが、よっぽど大変

25. Web アプリは C# で書きました
• ラズパイでも C# 製の Web アプリが動きます
• 「sudo apt-get install mono-complete」っ
てやっておけば、実行環境の準備はOK!
• xsp3 っていうコマンドで ASP.NET な Web
サーバーを起動できたり
※厳密には mono を構成する全ては要らないんだろうけど、面倒なので mono-complete!

26. なぜ C#?
• 単に自分がC#に慣れてるから
• もし皆さんが似たようなことやるとしても、
Python、Ruby、Node.js、etc... 好きな言
語・処理系でできる程度には簡単なアプリです

27. Visual Studioで開発は超快適♪
• Windows 上でビルドした .exe や .dll を、そ
のままラズパイに送り込めば動きます
• C#、というか .NET 製な .exe や .dll は、IL
(中間言語) を収録しているので、同じバイナ
リファイルが Windows 上でもラズパイ上で
も動く
※ただしカメラへのアクセス方法とか、GPIOのデバイスファイルのパス
とかはWinとラズパイとでは違うので、#if～#endif のプリプロセッ
サでコンパイル仕分けたり、若干の互換レイヤーを書いたり、は必要。

28. カメラは USB 接続
• ラズパイはUSB接続機器が使えるのが楽ちん。
• NFC (Felica) の読み書きとか、GPS とか、色々使える
• カメラでの画像撮影は、Linux 系では鉄板な
fswebcamコマンドを実行することで実現
※画像はストリーミングじゃなくて、オレオレ実装なポーリン
グで毎秒1フレームで更新してます。ここだけ複数スレッドが
交錯するため、同期処理がちょっと凝った作りにしてます。

29. HTML側は jQueryでゴリゴリ
• AngularJS 等、MV* なライブラリは未使用
• 但し JavaScript を生で書かずに TypeScript
使用。
• TypeScript に慣れたので...

30. 実はこの手のアプリは初めてではないです

31. まずは実証実験 http://j.mp/1KTAWiZ
LED点灯/消灯と、押ボタンのOn/Off状態をリアルタ
イムで表示する、Webアプリの実装。

32. 次にクリスマスツリー http://j.mp/1MJikFe
こどもたち向け。スマホのブラウザから、点灯させる
LED の色が指定できる。

33. Build INSIDERに寄稿 http://j.mp/signalr-rbpi

34. ということで、

35. ドォーン!
どやっ!

36. ソースコードは GitHub にあります
https://github.com/codejp/code2015-cameracar

37. 完!
Happy Coding :)

38. One more thing.

39. USB 接続
USB 接続 Wi-Fiドングル
カメラ
Wi-Fi
プロセッサ
GPIO
ラズパイ、GPIOを介して実世界
に作用するのは面白いのですが...
• 配線やパッケージングが厄介。
• 追加の部品も多く、結果として安く済まない。
ケース
電源用MicroUSBケーブル
バッテリー

40. ここで、皆さんお持ちのスマホを見てみましょう。

41. カメラ
Wi-Fi
バッテリー、配線込み
プロセッサ
ケーシング済み

42. カメラ
Wi-Fi
バッテリー、配線込み
プロセッサ
ケーシング済み
GPIO がないだけ で、
ほかは完璧じゃないッスか!

43. スマホの画面を白黒明滅させるのを、
光学センサで読み取れば、
GPIO の OUT 相当が実現できるのでは!?

44. Let’s try it!
試してみよう!

45. SignalR 使う。
http://www.slideshare.net/jsakamoto/osc13-do

46. SSID ohotech13a
http://192.168.43.210/ http://192.168.43.210/controller.html
白・黒の窓の開閉が制御される側 窓の開閉切替を指示する側

47. LED
フォトダイ
オード
白/黒が開閉する
SignalRなWebア
プリをブラウザで
開いている

48. LEDが光った!
ブラウザの表示コンテ
ンツが白くなったら、
この明かりにフォトダ
イオードが反応して...
動画 https://youtu.be/bqUF-Atn8y4

49. カメラ
Wi-Fi
バッテリー、配線込み
プロセッサ
ケーシング済み
GPIO の Out は達成!

50. Learn, Practice, Share.
Happy Coding :)