CodeIQ MAGAZINECodeIQ MAGAZINE

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

2017.04.10 Category:勉強会・イベント Tag: , , ,

  • 21
  • このエントリーをはてなブックマークに追加

Web技術でセンサーやアクチュエーターなどを直接制御できる組み込みボード「CHIRIMEN」を使ってユニークな作品づくりに挑戦する「Web×IoTメイカーズハッカソン」が開催されました。
3月18~19日の2日間にわたり、熱い戦いが繰り広げられたハッカソンの様子をレポートします!
by こだまひでゆき

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

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

ブラウザといえば「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に搭載されたブラウザから電子工作で使う部品をさまざまに組み合わせて直接制御しつつ、実際にさまざまなアイディアを具現化してみる取り組みとなります。

CHIRIMENについて

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

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

会場は元印刷工場の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

  • 21
  • このエントリーをはてなブックマークに追加

■関連記事

Webブラウザ技術で、直接モノを制御する!「Web×IoT メイカーズハッカソン」【2日目】... 2日目開始 翌日3月19日の朝。目黒は2日目も良い天気に恵まれました。本当によかった! 1日目の様子を振り返る ▲いよいよ最終日。目黒駅から会場に向かう途中に渡る目黒川の様子 この日のハックは10:00から。14:30からの成果発表までの4時間半が各チームに残された時間です。 ただ見学...
非エンジニアがハッカソンに出るモチベーション、チームビルディングについて考えてみた... なぜ、ハッカソンに参加するのか 私の本業はクリエーターのためのポートフォリオ作成サイトCOLET(コレット)を開発しているちょっと変わった事業相談が大好きな行政書士です。 ハッカソンに出るモチベーションやチームビルディングが、エンジニア以外のごくごく一般人の参加者によってあまり書かれることはなか...
食品をプリントする!?オランダTNOのフード3Dプリントへの取り組み... TNOっては? フード3Dプリントに早くから取り組んでいる機関として、オランダの「TNO: the Netherlands Organization for Applied Scientific Research」がある。 TNOは3Dプリント技術の研究開発や産業ベースでの展開を行っている研究機...
聖夜のアイデアソン -Pepper Loves LINE BOT-... LINE BOT AWARDSとは 「LINE BOT AWARDS」とは、LINEのchatbot開発促進及びユーザーへの普及を目的に開催するAwards。個人・法人問わず誰でも参加可能なAwardsで、応募〆切は2月22日です。 ▲▲LINE株式会社 ビジネスプラットフォーム事業室 戦略企画...
RESASのデータから地方創生を考える「RESAS-APIハッカソン」開催レポート... RESASのデータから地方創生を考える熱い2日間 RESAS(リーサス)=Regional Economy and Society Analyzing Systemは、人口急減・超高齢化に歯止めをかけ、日本全体の活力を上げることを目的に、地方自治体が自らの現状と課題、強みと弱み等を把握し、その特性...
最高賞金1000万円!LINE・砂金信一郎氏に聞いた「LINE BOT AWARDS」の全容と狙い─... LINE・砂金信一郎氏がプロデュースするビッグイベント これまでサービスを提供する企業がユーザーと密接な関係を結ぶためには、スマホアプリを提供してユーザーに使ってもらうというのが一つの方法だった。 しかし、アプリ開発には手間がかかるだけでなく、一度はダウンロードしてみたユーザーも、毎日それを使う...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ