09.08.13(木)
■[作ってみた]「らぼかへたん」:コーヒーメーカーの残量がfirefoxステータスバーに表示されるシステムを開発したよ
社内コーヒーメーカーの残量がいつも簡単にわかったら便利だよねということで、
残量がfirefoxのステータスバーに表示されるシステム「らぼかへたん」を作ってみました。
「らぼかへ」とは
チーム☆ラボに今年になって「らぼかへ」という社内カフェができました。
有志の人たちがおいしい豆を買って、ミルでひいて、コーヒーメーカーで淹れてくれた
コーヒーが、1杯60円で飲めるというシステムです。
おいしいコーヒーが安く飲めるということでなかなか賑わっています。
専用サイトやMLもありまして、コーヒーを入れた人が管理画面から豆の種類とかを
入力すると、「コーヒー淹れました!」というメールが流れるような仕組みもあります。
そして席が離れた人でも残量がわかるように、webcamで常時コーヒーメーカーを
確認できる機能がついていました。
「らぼかへ」サイト(以前のデザインをハメコミで復元) |
ただ、サイトにアクセスしてビデオで残量を確認するというのがめんどい人も結構
いるので、もっとサクッと残量がわかれば便利だよなーと前々から思ってまして、
そんな折にいいタイミングで社内ニートになる幸運が訪れたので勢いで工作しました。
作るものは「コーヒーメーカーの残量がリアルタイムにわかるシステム」です。
mixiにスゲェのがある
まずサーベイしたらmixiですごいの作ってる人がいるということがわかりました。
(mixi Engineers’ Blog » オンラインコーヒーメーカー「萌香たん」とはじめるドキドキ☆コーヒーブレイク)
これは衝撃!コーヒーメーカーの沸騰ランプを光センサで読み取るそうです。
センシングもエラーがなさそうで安定しそう。
マイコンとか使えていいなあ!Twitterに投稿ってのも王道とはいえおいしいなあ。
こうなるとハンパなものは作れないなあなど考えます。
センシングの方法
ここから具体的な製作です。
まずコーヒーの残量をどうセンシングするかですが、2つ案がありました。
- 重さを測定する
- webcamの画像処理でなんとかする
「重さ」はコーヒーメーカーの下に圧力センサを敷けばなんとかなりそうな事がわかり、
扱う情報も単純でかなり頑健なセンシングができると思いました。
しかし僕は回路とかマイコンとかさっぱりです。ここはArduinoでもトライしようか
とも考えましたが、道具類・センサ等を一式揃えると1万円近くかかりそうな見積りに
なったので、「数千円のコーヒーメーカーの測定器に一万円かけたら明らかに負けだろ」
と却下。とりあえずwebcamで頑張ることにしました。
「スリット測定法」失敗
問題はどうやってwebcamでコーヒーメーカーの残量を測定するかです。
はじめはコーヒーメーカー全体を撮影して、残量ごとのテンプレートやモデルを用意して
類似度計算とかでできるんじゃないかと思っていましたが、
照明条件が変わったり場所がずれたりしそうだし学習データ整理するのもめんどいし
類似度の尺度もわかんないなど不安要素が多すぎるのでこのアプローチはやめました。
そこで考えたのが下図の「スリット測定法」です。
細く隙間を空けた暗箱をコーヒーポットに接するように置き内部からカメラで撮影すれば
画像を二値化したときに隙間以外の部分とコーヒーの入っている部分は黒く、
コーヒーのない部分は周囲の明かりで白くなるはずなので、
白い部分の長さを測ればコーヒーの残量がわかるんじゃないかというアイデアです。
OpenCVで実験してみたところ、大まかには思い通りの感じになりそうなことが
わかりました。ただ「周囲の明るさによってかなり影響を受ける」問題が発覚。
日が差したりして周囲が明るいとスリットの白い部分はとても大きくなり、
周りに人がいたりして暗くなるととても小さくなってしまうため、
画像から長さや面積を測定してもあまり頑健ではないのです。
というわけで別の方法を考えました。
代替案「ホール測定法」
基本方針はそのままにして、光の部分の拡大・収縮の影響を受けにくく
なるようにと考えたのが下図の「ホール測定法」です。
この方法は縦に複数の穴が空いている暗箱の内部から撮影し、
二値化画像の白い丸の数を数えるというものです。
スリット測定法との本質的な違いは、観測量を、
変動しがちな連続量の「長さ」から離散量の「個数」に置き換えたことです。
これによって明るさの影響を吸収できるという考えです。
そのかわり無段階の測定はできず、何段階かのレベルでコーヒー残量を測定することに
なります。
この方法は簡単な実験でうまくいきそうだという事がわかり、これでいくことにしました。
ハードを作る
次にコーヒーメーカーに密着する暗箱を作りました。完成したのはこんなのです。
コーヒーメーカーと接する側面は密着できるように布になっています。
スリット部分は小さい穴が5つ空いています。(赤く光っているのはwebcam)
上からの写真。穴を撮影するwebcamはクリップで固定できるようになっています。
ボディーはドキュメントケースを切って作りました。
合体画像。
上の布を空けた画像。
ソフト作成
この暗箱にカメラをつけてコーヒーメーカーの横で測定プログラム作成です。
「ホール測定法」を使ったシステムの動作は以下です。
- 画像を撮影する
- ノイズをとるために平滑化する
- 白黒2値化する
- 白い領域の数をカウントする(0〜5)
- 残量レベル=5 - 白領域数
- 残量レベルを、apache公開ディレクトリのファイルに書き込む
- 1に戻る
4の領域数は画像処理では「ラベリング」というそうで、ライブラリも見つかったので、
これを使いました。画像の中で独立した領域をリストとして抽出できます。
これの数を数えればOKです。
ここで、たぶんカメラの問題と思いますが撮影画像の四隅に白いノイズが乗るので、
領域のうち画像の縁に隣接しているものはカウントしない処理を行っています。
5は実際には1秒ごとに残量レベルを測定し、10秒ずつ投票法で残量レベルを決めています。
Firefoxステータスバーに表示
インタフェース部分はなるべくノーアクションで自然に見られるのがいいと考えて、
Firefoxのステータスバーに常に表示されるアドオンにしました。
動作は、10秒ごとにサーバがapacheで公開している残量レベルファイルを読みにいき、
その残量レベルに対応する画像を表示する、というものです。
完成!
地味な動画撮りました。こんな風に動作します。
動画の中の、左のウィンドウはコーヒーメーカーの撮影で、
右上のウィンドウはシステムが撮影したホールの二値化画像(右回り90度回転!)、
右下がFirefoxのステータスバーのアイコンが(10秒程度遅れて!)変化する様子です。
コーヒー残量がかわると、ホールの数が変わり、
10秒ちょっと遅れてFirefoxのステータスバーアイコンも変わることがわかります。
製作はマル2日かかりました。コストはPCやwebcamはもともと「らぼかへ」にはあり、
箱のドキュメントケースも社内に落ちていたやつを使ったので、
黒い布と穴を空ける千枚通しの約500円でした。
「らぼかへ」サイトにも測定結果が反映されるようになりました。
課題もあります。
一番気になるのは「ポットの取っ手を特定の角度に向けて置かれると、
取っ手が黒いのでコーヒーがたくさん入っていると誤判定する」ことです。
デッドゾーンはそんなに大きくないんですがこれは悲しい。
なんとかしたいです。アイデア求む。
終わりに
実はこのシステム、ウケる人にはウケていましたが特に話題にはなっていませんでした。
それがこの間、「秋月パルス」などを手がけるkoress projectの おかじさん・
しがくさんにお会いし、これをお見せしたところ非常に気に入って頂きまして、
それをキッカケに社内でもちょい注目されるようになったり、
いつのまにか擬人化されて名前が「らぼかへたん」になったり、
pixivで描かれたり、ラボに見学に来た人に「いやー僕もちょっと描いてみました」とか
言われたりしまして嬉しい限りです。次のMakeにも出す予定になりました。
これからもプロ社内ニートを目指して頑張っていきたいです。
- 2106 http://bit.ly/WekhO
- 262 http://blog.kushii.net/archives/1118668.html
- 199 http://twitter.com/
- 148 http://twitter.com/yamaryoxxxx
- 115 http://www.google.co.jp/search?q=らぼかへたん&lr=lang_ja&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&client=firefox-a
- 93 http://koress.jp/2009/07/post_50.html
- 82 http://reader.livedoor.com/reader/
- 71 http://tech.rakuten.co.jp/rtc2009/jungle.html
- 68 http://www.google.co.jp/search?q=python+正規表現&lr=lang_ja&ie=utf-8&oe=utf-8&aq=t&rlz=1R1GGGL_ja___JP315&client=firefox-a
- 51 http://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla:ja:official&hs=Ent&q=秀丸マクロ twitter&btnG=検索&lr=lang_ja