12周年記念パーティ開催! 2024/5/10(金) 19:00

Web技術のこれからを覗く Webとハードウェアのこれから

JavaScriptでは、Webブラウザの中でのみならず、ブラウザを通してハードウェアを制御する試みも出てきました。今回はdotstudioの菅原のびすけ氏をお招きし、現在、そしてミライを語っていただきました。

発行

  • 中村 享介
  • 小山田 晃浩
  • 外村 奈津子
  • 坂巻 翔大郎
  • 丸山 陽子
  • 杉浦 有右嗣
Web技術のこれからを覗く シリーズの記事一覧

はじめに

今回お招きしたのは、dotstudio株式会社(ドットスタジオ)のCEO 菅原のびすけ氏(@n0bisuke)です。のびすけ氏は、2014年にLIG INC.に入社、IoT関連に興味を持ち、「IoT縛りの勉強会! IoTLT」などの勉強会を主催してきました。その後、IoT事業に集中するために独立し、2016年7月にdotstudioを設立しています。

菅原のびすけ氏

今回の記事では、のびすけ氏とピクセルグリッドのフロントエンド・エンジニアが、JavaScriptとハードウェアのこれからについて考えました。

JavaScriptでハードウェアを制御するAPI

——今日はどうぞよろしくお願いします。さっそくですが、JavaScript、つまりWebブラウザからハードウェアを制御するためのAPI全般というのは、今どのような状況なんでしょうか。

のびすけ:まず、JavaScriptという言語でできることの流れをざっくり追っていくと、昔はJavaScriptはWebブラウザだけのものだったんですよね。でも、そこそこ前に、Node.jsなどが登場してサーバーサイドでも動くようになったり、Titanium MobileやPhoneGap(Cordova)を使ったスマートフォンアプリ開発や、Electronによるデスクトップアプリなんかも作れるようになってきました。そして、最近はJavaScriptでも、低レベルなAPIをいじれるようになってきて、ハードウェアの制御もできるようになってきたわけです。

——できることが、ブラウザの枠を超えてきた、ということでしょうか。

のびすけ:そうですね。そんな中で、JavaScriptからのハードウェアの制御としては、Web GPIO APIWeb I2C APIというAPI*が、今W3Cのドラフトとして進んでいます。これはそもそも、日本から発信されているんですよね。

*注:Web GPIO APIとWeb I2C API

Web GPIO APIとWeb I2C APIはBROWSERS AND ROBOTICS COMMUNITY GROUPというグループで議論を行いながら、仕様書の作成が進められています。

ハードウェアAPIを試すマイコンボード

——なるほど、APIの整備は少しずつ進んできているんですね。となると、今度は対応できるハードウェアは、ということになりそうですが。

のびすけ:まずはパソコンにマイコンボードをつないで、それにそれぞれセンサーを刺したりします。そのマイコンボードを、JavaScriptによって制御ができるわけです。マイコンボードにもいろいろな種類があるんですが、僕が今おもしろいと思っているのが、この「CHIRIMEN」(チリメン)。Web GPIO APIとWeb I2C APIも、これで試すことができます。

——これは……このボードの名前がCHIRIMEN、ですか?

のびすけ:CHIRIMENはこのハードウェアの名前でもあり、コミュニティの名前でもありますね。CHIRIMEN Open Hardwareというオープンソースプロジェクトです。Mozilla界隈の人が元となって運営しているプロジェクトで、オープンソースハードウェアになっています。設計図なども公開されていているので、あとは工場に発注するスキルさえあれば、だれでもこれを使ったデバイスが作れるというわけです。

CHIRIMEN Open Hardwareプロジェクト

Mozilla Japanから生まれたプロジェクトで、「さまざまなモノがネットワークで繋がっていく未来の社会において、“Webのあるべき姿”を考え、作り上げていくことを目的」としています。WoT(Web of Things)デバイスの開発環境としてBoot to Gecko(B2G)搭載の小型ボードコンピュータCHIRIMENの開発も進めています。

小山田:こういったデバイスって、日本にはあまり入ってきていないですよね。わりと最近ですか?

のびすけ:そうですね。実は日本では法律的な部分でハードウェアがなかなか作れなかったりするんです。よく言われるのは電波法ですね。たとえば、Tessel(テッセル)というNode.jsベースのJavaScript環境で動くマイコンボードがあるんですが、これはスタンドアローンでWi-Fi接続できて、電源はUSBから取れます。

このTesselの1が出たときに、国内では少し盛り上がったんですよね。でも、1万円ぐらいしてちょっと高いなと。それでもうちょっと安くなればということで2に期待していたんですけど、海外で2が出てもなかなか日本に入ってこない。それはWi-Fiが搭載されているので、おそらく電波法*の関係なんだろうなあと。

*注:電波法

日本では、日本国内で利用される無線機器は日本の技術基準を満たしている必要があります。そのため、海外から持ち込んだWi-Fi端末などを利用する場合は「技術基準適合マーク」が付されている必要があります。こういった、電波の公平かつ能率的な利用を確保するための法律が「電波法」です。次の総務省のサイトに詳しく掲載されています。

小山田:Tesselは拡張できるんですよね。

のびすけ:そうです。センサーは、ブロックみたいなモジュールなんですよ。パズルのように組み立てて、拡張できます。たとえば気温のセンサーモジュールを足して、npm installで気温拡張のモジュールをNode.js側も入れてあげると、その機能が使えるようになるんです。

小山田:ハードウェアとソフトウェアがモジュールになっているんですね。

のびすけ:そうそう、そうなんです。そこがすごくおもしろいなあと。それぞれの機能がnpmで管理されていて、それに対応したモジュールが別売りであるという。

ハードウェアも一つのプラットフォーム

——どのあたりのエンジニアの方が盛り上がっているんでしょうか。

のびすけ:やっぱりNode.js界隈かなあって気がしますね。これは海外に行ってきた人から聞いた話ですが、海外のNode.jsやっている人たちってWebサーバー立てるとかそういったことにはもう飽きていて、だいたいハードウェアを使って何かやっている、というのが去年ぐらいからで、それが今年になっても同じように続いているって聞きますね。

彼らから見ると、ハードウェアもプラットフォームの一つという考え方をしている気がします。Node.jsで制御できそうだし、それならやってみたい、というモチベーションが高まってきた。その流れと、IoTというワードが盛り上がっているというのがリンクしているのかなあと思っていて。

——JavaScriptで、ということなんですね。

のびすけ:サーバーサイドの言語って、よっぽど限定的な使い方以外は、わりと何でもいいんじゃないかな、ということはあると思うんですよね。Python好きだったらPythonを使えばいいし、Ruby好きならRubyを使えばいいし。でも、ブラウザ側って、やっぱりJavaScriptじゃないですか。そこがやっぱり、でかいのかなと思っています。ブラウザ側はJavaScriptで書くわけだから、だったら両方JSで書いたほうが楽だよね、っていうかんじですよね。

坂巻:そう、JavaScriptで動くのはすごくラク。僕も開発合宿でデバイス操作を試したことがあったんですけど、ほんと大変でした。

のびすけ:どんなことを試したんですか?

坂巻:以前の開発合宿で、Arduino UnoMicroViewを使って、物理ボタンを押したら自分のTwitterのタイムラインの最新のツイートをお気に入りに入れるものを作ったり、Wiiのヌンチャクを使ってブラウザ上のページを操作するものを作ったりしました。

開発の際に、C++風のArduino言語を書く必要があるのですが、慣れない言語にとまどいながら開発していました。慣れているJavaScriptですべて開発できれば楽でした……。

——Node.jsで動かすというのは、すでに試みているコミュニティがあるんですか?

のびすけ:はい、NodeBotsっていう、JavaScriptでハードウェアを動かそうというコミュニティがあります。別にNode.jsに絞っているわけじゃなくて、フロントのJavaScriptなら全然いいよ、というスタンスです。

実践、Node.jsで「Lチカ」

のびすけ:じゃあ、ちょっと今試してみますか? Lチカ*をやってみましょうか。

中村:りぃさん(杉浦)、お願いできる(笑)?

のびすけ:では、このArduino(アルディーノ)というマイコンボードを、Node.jsのライブラリJohnny-Fiveで動かしてみましょう。ArduinoをMacにつないで、ArduinoとLEDをつなげます。

*注:Lチカ

マイコンボードを使った工作では、LEDをチカチカさせる、いわゆる「Lチカ」というのははじめの一歩。プログラミング学習で言えば「Hello World!」と表示させるような感覚だそうです。

中村:これ、つないだら即認識するもんなんですか?

のびすけ:再起動が必要な場合もあるかもしれないです。……まず、npm installでJohonny-Fiveをインストールしますね。

npm install johnny-five

杉浦:ええっと、コードはJohonny-Fiveのサイトにある、Hello Worldのコードをコピペするといいですかね。

var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

  // Create a standard `led` component instance
  var led = new five.Led(13);

  // "blink" the led in 500ms
  // on-off phase periods
  led.blink(500);
});

のびすけ:そうです、そうです。これは13番ピンにどうのこうのする、というコードですね。たとえば、13のところを9に変えてみてください。

杉浦:ここのvar led = new five.Led(13);のところですね。

のびすけ:それで、こっちのボード側もLEDを9番ピンに……。で、ボード側は、マイナスとプラスを繋いであげると、電流はマイナスからプラスに流れて一周するわけです。そうすると……。

杉浦:点滅しましたね。

中村:配線を間違って、壊れたりはしないんですか?

のびすけ:あります、あります。友達がArduino、焦がしていましたね。ショートしたようです。最初ってみんなわからないからびびりながらやるから大丈夫なんですけど、慣れてくるとあります(笑)。

中村:このへんだろうって適当に刺したら、煙が出たりするわけですね(笑)。

のびすけ:そうです(笑)。コードのled.blink(500);で点滅の速さを変えているので、ここを変えてあげると、速くなったり、遅くなったりします。

Johnny-Fiveはコードを見てもわかりやすかなと思いますね。コードの中にboard.onというところがあるんですけど、あれがそもそものボードに対してのアクセスの準備ができたよ、というものなんです。board.onのコールバックの中にすべてを書いていくというスタイルなんですよ。

小山田:わかりやすい。

のびすけ:そうなんですよね。でも逆に、サンプルコードだけを見ているとコールバック地獄感が出てくるわけですが(笑)。

中村:Webの人は慣れているから大丈夫です(笑)。それくらいは。

——ほかにも、APIの規格は出てきているんですか。

のびすけ:少しユースケースが違ってくるんですけど、WebUSB APIと、省電力のBluetooth Low Energyを扱えるWeb BluetoothといったAPIがあって、個人的にはこれが実用的になってくると、もっとIoT関連も熱くなるんだろうなというところですね。どちらもまだブラウザやデバイスに制限があるんですが。今、プレビュー版ぐらいなかんじです。

IoTの話になってくると、いかに電力消費を抑えるかということは重要なんです。Wi-Fiのチップだと、けっこう消費電力がでかいらしいんですね。では、どういった形で通信させるのかとなると、省電力のBluetooth Low Energyを使うのが主流になってくるんじゃないかなあと。

JavaScriptで制御の背景

のびすけ:Webブラウザからハードウェアを制御するっていうのが盛り上がってきたのは、ここ2、3年というところですが、最初にブラウザからいじろうと思った人は、すごいなと思いますね(笑)。

中村:でも、GoogleやMozillaはOSを作っていたので、そうするとOSとしてはハードウェア制御も含めて全部一通りできないといけないでしょ、というのはあると思いますね。 Firefox OSだって、テレビに入っているし。そうするとBluetoothなんかも使いたくなるでしょうしね。

テレビとOS

パナソニックのビエラでは、Firefox OSを搭載し、独自の操作感を持ったUIを実現しています。また、ソニーのブラビアでは、Androidを使ったテレビ向けプラットフォームAndroid TVを採用し、シャープではAQUOSに接続して利用するネットプレーヤー「AQUOSココロビジョンプレーヤー」にAndroid TVを採用しています。

のびすけ:そういった背景はあるんでしょうね。そもそも、パソコンのブラウザだけじゃなくなってきた。プラットフォームの拡張という。

中村:ブラウザをプラットフォームに、みたいなことをし始めたら、ハードウェア制御も必要になってきたんですよ。

Webサービスとハードウェア販売の違い

——さて、これからJavaScriptでハードウェア、というのは製品化されたりするんでしょうか。

のびすけ:全体的に言えるんですけど、まだどれもプロトタイピングモードみたいなかんじで、WebブラウザのJavaScript APIからハードウェアセンサーとかを動かすというのを試したいという段階なんですよね、今は。商品とか量産するところのデバイスに組み込むかというと、そうではなくて一歩、いや、もっと手前なんですよ。

たとえば、この部屋の温度を測ってWebに持っていくみたいなものをスタンドアローンで作るとしますよね。温度センサーで値を取って、定期的にサーバーに飛ばすみたいなものを作ればいいので、1日もかからずにできると思います。でも、それを製品化するとなると、実際問題、じゃあ電源どうするのとか、あとはサイズどうするのとか、いろいろ考えなくてはいけない問題が出てくるわけです。まあ、温度を定期的に送るぐらいならいいかもしれないけど。

僕らがこれまでやってきたWebサービスって、エンジニアがコード書いてグローバルな世界に置いてしまえば、まあ最悪ユーザーに届けることはできますよね。

——言ってしまえば、サイトを公開してしまえばいいわけですよね。

のびすけ:でも、ハードウェアって、エンジニアの仕事だけじゃなく、量産するときにどの工場にするかとか、量産が終わってもどの流通網に載せるとか、どの店舗に置いてもらうかとか、売れるようになるまでにいろんな人が関わってくるというのがあって。

坂巻:Webと比べものにならないくらい、関わる人も多いですよね。

「ハードウェアを作って売るというのは、感覚が違うんだなと思います」(のびすけ)

新しいアイディアが生まれる可能性

小山田:とはいえ、Web側の僕らでも誰でも、まず気軽に試せるというのがおもしろいですよね。

のびすけ:そうですね、今そこの過渡期というか。これまでは「何ができるのか知りたい」という時期で、だんだん「何ができるかやってみよう」というタイミングになってきたんじゃないかな。そういった意味で、CHIRIMENみたいなボードというのは、教育用とか学習用として有用ですよね。

こういうデバイスが出てくることによって、Webの世界の人たちがこっち側(IoT)に入っていける可能性が出てきているし、実際入っていっている。その中でいろいろできそうですよね。

今までハードウェア側の人って、なかなかWebにナレッジを出すみたいな文化はなかったんですよね。どっちかというと、企業に属していて、それが企業秘密みたいな。外に知見を出すというのは、競合がいる中で、リスクでしかない。でも、Webの人たちってそうじゃないから、ビジネス的な観点ではそこはよくないかもしれないけど(笑)。

小山田:そうですよねえ(笑)。なんでもかんでも共有しちゃう。

のびすけ:でも、そういうWebの考え方の人たちが入っていくと、ちょっと変わっていくような気がして。たとえば、センサーパーツにはデータシートが添付されていて、そのセンサーの仕様が確認できます。そういうドキュメントには、普通馴染みがないじゃないですか。しかも共通な規格ってなくて、パーツの会社ごとに書き方が違う。

*注:データシート

電子部品の取り扱い説明書のようなもの。部品の仕様が書かれていますが、仕様書の共通フォーマットはなく、メーカーごとに書式が異なります。電子部品の販売サイトではPDFフォーマットで公開されていることが多いです。次のリンクはArduino Uno Rev 3の搭載マイコンのページです。

中村:昔のパーツメーカーは、そういった対応でも「わかるだろ」的なところがありましたよね。

のびすけ:そうなんです。でも、Webの人たちが始めようとすると、そういうときに、「このセンサーのデータシート読み方わからないよね。もっと共通化されたやり方で書いてくれよ」みたいなことになっていく。ここ1、2年で、Web系のエンジニアの人のブログに「この線はこれだから、Arduinoだったらここにつなごう」というのを書いている人が出てきたりとか。それに、だんだんとセンサー類の仕様もオープンになってきていて。

「敷居は下がってきているし、おもしろい時代な気がしますね」(のびすけ)

小山田のびすけさんが新しく作られた会社でも、こういった情報を含めたIoT関連の製品を発信しているんですよね。

のびすけ:そうですね。IoTをやるときの、「まずはじめに何を買えばいいのかわからない」を解消したいと思って、ブログなどで詳しいチュートリアルも発信しています。

坂巻:僕も、自分でこういうデバイス操作を試したときは、すごい調べて……ずーっと調べていて。ちょいちょい情報はあるんだけど、電子工作の知見とかを元にしなくちゃ、情報がない。考える、わからない、また調べる、の繰り返しでしたね。たとえば、スイッチとか、ボタンを押されたというのを検知するのがすごくめんどくさくて、ライブラリかなんか探してやりました。標準ではないんですよね。

のびすけ:スイッチ、初見だとなにがなんだかわからないですよねえ。でもスイッチって、ボタンを押したということからなにかが起こると考えると、イベント駆動なのでJavaScriptはいいんじゃないかと。リアルJavaScript。センサーの値が閾値にいったらなにかしたいわけじゃないですか。ボタンを押して、そこでイベントが発火して……というのはJavaScriptですよね(笑)。

一同:(笑)

JavaScriptのミライ

小山田:たとえば、今スマートフォンのGPSを使ってピザの宅配なんかもできるようになっているけど、それって一昔前のWebだったら考えられないような連携ですよね。今はそういう表現方法が生まれているわけで。今日話したような、ハードウェアとの連携を考えると、Webもただ読むだけじゃなくて、もっと使えるものに変わっていくのかなあと思いますね。

のびすけ:基本的にWebってテキストですもんね。最初のティム・バーナーズ=リーの提唱したHTMLとかWebの世界と、なんか一周したかどうかはわからないですけど。

小山田:もっと、Webはなんでもできそうな気がする。その、なんでもできる中で、すでに知見としてあるJavaScriptのコードのプログラミングでできるなら、それはそれで僕らは入りやすいし。おもしろいな。

のびすけ:入っていきやすいですよね、Webの人たちのほうがアイディアあるんじゃないかなって思うところはあって。家の中で使っているセンサー類とかって、家電の開発側の人からすると、当たり前の技術になっているからそこから新しいことって、なかなか生まれてこないじゃないかと思うんですけど。でも、僕らからすると、それが使えるようになった、というのが新しい。それが一つの表現に取り込めると、新しいサービスを考えられたりもするかなと思ったり。

小山田:うん、うん。

のびすけ:あったら便利だなというところで人間の生活が便利になる、そういったアイディアを作るときとかに、JavaScriptでWebにつなぎたいというアイディアだと、いいんじゃないかなと。

——これから先のJavaScriptが、もっと楽しくなってきそうですね。本日はありがとうございました。

中村 享介
PixelGrid Inc.
Jamstackエンジニア

2009年、JavaScriptの会社として株式会社ピクセルグリッドを設立。 多数のWebリニューアル、新規立ち上げを取り仕切った経験を持ち、情報設計、フロントエンド、クラウド活用、開発フローの効率化を得意とする。 Webをより発展させるため、新しくブラウザに実装された機能の活用事例を数多く生み出しつつ、日々、クラウドサービスを利用した効率のよい制作・開発手法の試行錯誤を続けている。現在の興味はWeb Componentsを使ったマークアップの改善とJamstack。 著書に『WebクリエイティブのためのDOM Scripting』(単著:毎日コミュニケーションズ、2007年)など。ここ数年は書籍の執筆をせず、フロントエンド技術情報メディア「CodeGrid」で精力的に執筆活動を行っている。

小山田 晃浩
PixelGrid Inc.
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP(Developer Technologies)を受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。

外村 奈津子
PixelGrid Inc.
編集

情報出版社に在籍中、Mac雑誌、中高年向けフリーペーパー、コラムサイト運営、健康食雑誌、グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。ピクセルグリッドが提供するフロントエンド技術情報を提供するサービス「CodeGrid」の編集を担当している。

坂巻 翔大郎
PixelGrid Inc.
フロントエンド・エンジニア

大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。

丸山 陽子
PixelGrid Inc.
編集

Mac雑誌の編集者を経験後、フリーランスのエディター/ライターとして独立。パソコン系雑誌やデジタルカメラ雑誌、iPhone/iPadの初心者向け書籍などの編集や執筆に携わる。2015年にピクセルグリッドへ入社し、「CodeGrid」の編集を担当する。

杉浦 有右嗣
PixelGrid Inc.
シニアエンジニア

SIerとしてシステム開発の上流工程を経験した後、大手インターネット企業でモバイルブラウザ向けソーシャルゲーム開発を数多く経験した。2015年にピクセルグリッドへ入社し、フロントエンド・エンジニアとして数々のWebアプリ制作を手掛ける。2018年に大手通信会社に転職し、低遅延配信の技術やプロトコルを使ったプラットフォームの開発と運用に携わっていたが、2020年ピクセルグリッドに再び入社。プライベートでのOSS公開やコントリビュート経験を活かしながら、実務ではクライアントにとって、ちょうどいいエンジニアリングを日々探求している。

この記事についてのご意見・ご感想 この記事をXにポストする

全記事アクセス+月4回配信、月額880円(税込)

CodeGridを購読する

初めてお申し込みの方には、30日間無料でお使いいただけます