ガジェット通信 GetNews

見たことのないものを見に行こう

Webブラウザ技術で、直接モノを制御する!「Web×IoT メイカーズハッカソン」【1日目】

DATE:
  • ガジェット通信 GetNewsを≫

ハッカソンのテーマは「ブラウザからのハードウェア直接制御」

今回のハッカソンでは、「ハードウェアの制御をブラウザー技術だけでコントロールした作品づくり」というテーマが設定されました。

ブラウザといえば「PCやスマホからWebサイトを閲覧するためのもの」というイメージがあります。あまりハードウェアの制御に利用するイメージないもの。今回はどういったことを目指したのでしょうか?

実は私たちが普段使っているブラウザには、ハードウエアを制御する機能も少しづつ実装がすすめられています。

例えば、Web Bluetooth API (Draft)。これは、ブラウザからBluetooth 4.0規格をサポートした機器との通信、制御をサポートするものです。

また、Web MIDI API (Draft)は、主に電子楽器等で利用されているMIDIをブラウザで扱えるようにしたもの。


Web MIDI APIを使ってブラウザから外部機器を制御する

これらの機能は仕様のDraftが提案され、一部のブラウザで先行実装されている段階ですが、こうした機能を利用することで「ブラウザが動くPCやスマホ」と、「Bluetooth機器」や「MIDI楽器」などを連携させたWebアプリが作れるようになりました。

CHIRIMENボードでは、こうした流れをさらに進め、 Web GPIO API (Draft)Web I2C API (Draft) という、BluetoothやMIDIより更に低いレイヤーのAPIを実装しています。

これによりセンサーやアクチュエータといった電子部品ショップで購入可能な部品を直接ブラウザから制御することができます。ブラウザで制御するハードウエアが電子工作で作れるようになるのです。


Web GPIO APIやWeb I2C APIを使って直接ハードウェアを制御したロボットを作るイメージ

今回のハッカソンは、CHIRIMENに搭載されたブラウザから電子工作で使う部品をさまざまに組み合わせて直接制御しつつ、実際にさまざまなアイディアを具現化してみる取り組みとなります。
Web GPIO API (Draft)
Web I2C API (Draft)

CHIRIMENについて

CHIRIMENボードは全ての参加チームに貸し出されました。

CHIRIMENはボードコンピューターとその上で動作するソフトウェアや Web GPIO API、Web I2C APIといった低レベル API が含まれており、日本で誕生した CHIRIMEN Open Hardware コミュニティによりオープンソースで開発が進められている開発環境です。


CHIRIMEN Open Hardware プロジェクト Webサイト

会場は元印刷工場のImpact Hub Tokyo

さて、今回会場となったのは東京目黒にある「Impact Hab Tokyo」さん。

元印刷工場を利用した建物は、非常に味わい深い外観。一見「入り口どこ?」という隠れ家的な佇まいも心地よいスペースです。

会場入り口

内装も綺麗にリノベーションしているというより、ところどころ打ちっ放し感のある味のある仕上げで「モノづくり」のイマジネーションをかき立てます。今回のハッカソンのように仲間とイノベーションを創出する場にピッタリ。

最近イケてるIT企業のマストアイテムとも言われる「卓球台」も多数配備

カフェのような内装!と思ったら本物のカフェ。今回はカフェの一角もハッカソンに提供

オープニング!

まずは、実行委員会高木氏の挨拶でイベントスタート。特にプレゼンコーナーも設置せず、各チームの机の隙間を使って和やかな雰囲気ではじまりました。

イベント開始の挨拶

今回のハッカソンは、ブラウザから現在標準化を検討中のWeb APIを使ってハードウエアを制御するという取り組みになります。ハッカソン終了後に標準化やCHIRIMENボードに対するフィードバックが欲しいとの説明もありました。

この流れを受け、W3C慶応の芦村氏も登場。Webの標準化団体W3Cの活動についての紹介。

Web標準化の進め方について熱く語る芦村氏

さらに、FlashAir Developersの米澤氏からはFlashAirの説明も。

米澤氏はハッカソン参加者にCHIRIMENとFlashAirを簡単に接続・連携させるための基板を提供しました。

米澤氏による非常に芸の細かいスライドでのFlashAirの紹介

ハックの様子(1日目)

今回のハッカソンではチーム単位での応募だったこともあり、チームビルディングの時間はありません。いきなり各チームの机に分かれた状態でのスタートとなりました。

さー開始だ!まずは部品やCHIRIMENの確認!

作戦会議!

部品や工具貸し出しコーナーで物色中。。。

一気に集中モードに入るチームも


ハンダ付けハンダ付け…

会場にはスイッチサイエンスエイドステーションもオープン。センサーなどの販売も行われていました。

いろいろ部品あるヨー!



各チームの机では、もくもくとハック…

チューターがヘルプする場面も

途中、たこ焼きの差し入れによるブレイクタイム!    



タコ焼ききた!

切れないワイヤーストリッパーと格闘中の様子

熱い議論

このような感じで、あっという間に初日終了です。

ギリギリまでハックするチームが多い中、2日目に備えて早めに秋葉原へ買い出しに向かうチームもありました。

ハック中のQAは全チームでリアルタイムに共有

ハッカソンにはサポーターとしてCHIRIMENに詳しいチューター陣も参加していました。

こうしたチュータと参加者のやりとりは、Webツールを経由して、リアルタイムに他のチームにも共有されていました。やりとりされていた内容をいくつか紹介します。

Q: GPIOがうまく動かない(I2Cと同時使用)

A: polyfillが入っているか?htmlから読み込めているかを確認
→ navigator.mozGpio.getValue(…).then is not a functionというエラーが発生
→ read()を使用したときに問題が発生、onchangeを使用することで動作することが確認できた
!!!! web gpio polyfill の read関数にバグが含まれている可能性があります !!!!

… 途中略 …

テストが十分でないですが、readメソッドを使用するサンプルを作りました。
polyfillのworker.gpio.jsを修正する必要がありました。
https://github.com/chirimen-oh/examples/tree/forCMN2015-1_B2GOS-20170301/readGpioValue
変更箇所は
https://github.com/chirimen-oh/examples/blob/forCMN2015-1_B2GOS-20170301/readGpioValue/js/worker.gpio.js#L88

Q:GPIOの書き込みをするときに、一瞬値が0になる(LEDが消える)

A:GPIOの書き込み処理の部分でexport(“out”)を毎回していたために、一瞬GPIOの値が初期化されていたと思われる。
GPIO port Objectのexport処理は(入力/出力を変えない限り)一度で良い。
同様にnavigator.requestGPIOAccessも初回だけでよい

Q: CHIRIMENのAudioは使えるか?

A: 入力は使えません。
出力は、使えます。
・HDMI出力であれば ディスプレイのスピーカーから出力されます。
・CHIRIMENのアナログAudio出力ポートも同時に出力されています。この場合、汎用端子の中のAudio出力ピン(L/R,GND)にジャック・アンプ、スピーカーなどを接続してください。

Q:サーボモータが動かない

A:https://github.com/chirimen-oh/examples/blob/forCMN2015-1_B2GOS-20170301/i2c-PCA9685/js/main.js
こちらのサンプルを使う場合、サーボモータの角度の制御をする前にinitメソッドによってサーボモータの設定を行う必要があります。

CHIRIMENの使い方から、Web I2C API、Web GPIO APIなどの使い方、電子部品の接続(ハンダ付け!)の方法まで、非常にさまざまな質問が飛び交っていました。

この中にはなんと、Web GPIO APIのPolyfillのバグが発見され修正されるという一幕も!

⇒【2日目】全12チームのハックの様子と作品紹介

こだま ひでゆき (a.k.a. D.F.Mac.)
携帯電話キャリア関連企業でエンジニアとして働きながら、「Web Music Developers JP」や「CHIRIMEN Open Hardware」などのコミュニティで雑なDIY担当として暗躍中。「Webアプリだ!」と称してワケのワカラナイモノを作るのがすき。代表作はフィジカルWebアプリ「ちーん」、「CheenRimen」「缶たたき機」など。
twitter: @tadfmac

カテゴリー : デジタル・IT タグ :
CodeIQ MAGAZINEの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。