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 :)