【Tech Trend Talk vol.13】「Webブラウザの世界から始めるIoT入門」を開催しました！

こんにちは。GIGインターンのナガリナです。

4月も半ばになり、もうすっかり暖かくなりましたね。私はお花見に行くタイミングを逃し、気づいたら桜は散っていましたが、皆さんはお花見に行かれましたか？新年度が始まり、GIGBlog読者のみなさまも忙しくされているかもしれません。

さて弊社GIGでは先日、社外スピーカーをお招きした勉強会「Tech Trend Talk vol.13 Webブラウザの世界から始めるIoT入門」を開催しました。今回はその様子をお伝えします。

今回講師を務めたのは、元LIGのエンジニアで現在は自身で会社を経営されている、のびすけさん。Webブラウザツールのおさらいから始まりのびすけさんが製作したIoT作品や自身の活動について紹介してくれました。

のびすけ（菅原 遼介）：dotstudio株式会社CEO。1989年岩手県生まれ。岩手県立大学在籍時にITベンチャー企業の役員を務める。同大学院を卒業後、株式会社LIGにWebエンジニアとして入社し、Web制作に携わる。2016年7月よりdotstudio株式会社を立ち上げ、IoT領域を中心に活動している。日本最大規模のIoTコミュニティであるIoTLTや、JavaScript RoboticsコミュニティNodeBotsの主催、IoTバックエンドサービスであるMilkcocoaのエバンジェリストとしても活動中。

当日の資料はこちら▼
Webブラウザの世界から始めるIoT入門 #gigttt｜Qiita

Webブラウザの世界から始めるIoT入門

「”IoT”と聞くと構えてしまいがちだけれど、要するに他のWeb業界の他業種の方々にも、IoTに触れる機会を持ってほしい」というのがのびすけさんの願い。拡大してほしいということです。まず、今回の勉強会でのびすけさんが私たちに伝えてくれた「IoT入門」で大事なキーワードは以下の3つでした。

1. ブラウザのAPIを使って物を動かすことは可能なこと
2. 「JavaScript」の勉強や知識を入り口にNode.jsまで理解できるとIoTの世界はさらに広がること
3. 仕様を深く理解できなくても、初心者が「IoTっぽい内容」に触れることは可能なこと

※API… Application Programming Interface
あるコンピュータプログラム（ソフトウェア）の機能や管理するデータなどを、外部の他のプログラムから呼び出して利用するための手順やデータ形式を定めた規約のこと

のびすけさんのおすすめAPI

WebBluetooth
WebBluetoothはWebブラウザのAPIでBluetoothが使えるようになるAPIです。正確にはBLE（Bluetooth Low Energy）というBluetooth4.0の機能を使えます。通常BLEはデバイス間を接続して通信させる規格ですが、その性質上サーバーサイドかつ低レイヤーなプログラミング言語や周辺知識を持っていないと取り扱うことが困難でした。一方ブラウザのJavaScriptからBLEを扱うことを可能にしたブラウザAPIが、WebBluetoothです。
のびすけさんの実験はこちら▼

WebUSB
WebUSBもWebBluetoothと同じく、USBデバイス連携のドライバ開発（CやC++）をやらなくとも、Webブラウザ（JavaScript）でUSBデバイスにアクセスできるようにした技術です。navigator.usb.requestDevice()でUSBデバイスにアクセスできます。

WebRTC
WebRTC（Web Real-Time Communication）はウェブブラウザやモバイルアプリケーションにシンプルなAPI経由でリアルタイム通信（real-time communication; RTC）を提供する、自由かつオープンソースのプロジェクトです。Webブラウザで映像や音声の双方向通信が行える技術であり、navigator.getUserMedia()でカメラやマイクなどのデバイスにアクセスできます。

デバイス制御形API

デバイス制御とはユーザーごとやデバイスごと、一定期間のみに利用を制限することで安全性を高めることであり、デバイス制御形はそのツールの種類です。

GamePad API
WebブラウザでPCに接続しているGamePad(ゲームコントローラ)の情報を取得することができる技術です。navigator.getGamepads()でゲームパッドの情報にアクセスします。
Nintendo SwitchのコントローラをPCに接続して利用することもでき、のびすけさんも試していました。

Web MIDI API
Webブラウザで、PCに接続しているMIDIデバイスの信号を扱うことやnavigator.requestMIDIAccess()でMIDIデバイスにアクセスができる技術です。Web MIDIで信号を受けて、Web Audio APIで音を鳴らすといった連携がよく使われています。

Keyboard API
Webブラウザで、PCに接続しているキーボードの情報を取得することができ、navigator.keyboardにキーボードの情報が入ってきます。

Battery Status API
Webブラウザで、デバイスのバッテリー情報を知ることやnavigator.getButtery()でバッテリー情報にアクセスができる技術です。

Vibration API
Webブラウザ側から、ページにアクセスしているデバイスを振動させるバイブ機能です。navigator.vibrate()でバイブ機能にアクセス出来ます。例えばアダルトサイトを見ていて、飛ばされた先にある怪しげなサイトで出るアラートがこれです。

センシング形API

主にスマートフォンについているセンサーにアクセスするAPIです。

Geolocation API
Webブラウザで、デバイスのGPS機能にアクセスすることが出来ます。いわゆる位置情報。navigator.geolocationでデバイスの位置情報にアクセスします。

devicemotion イベント
Webブラウザで、デバイスの加速度の値にアクセスすることができる加速度センサー。window.addEventListener(“devicemotion”, res => console.log(res.acceleration));でアクセスできる他、傾き（重力加速度）や回転値も取得できます。

Webサービスの話

APIだけでなく、WebサービスのみでIoTっぽいことがやれそうな周辺サービスも紹介していただきました。

enebular
IoTアプリケーション（プロトタイプ）をノンコーディングで作れる無料のサービスです。NodeREDを内包していてノード（機能毎のブロック）を組み合わせることで、Webやデバイス連携のアプリケーションを組むことを可能にします。

SkyWay
WebRTCを使いやすくしてくれる無料のサービスです。

まとめ

冒頭でも紹介しましたが、今回のびすけさんが伝えたかったことは以下の3つです。

• ブラウザのAPIで物理世界の何かを動かすことは出来る
• JavaScriptから入ってNode.jsまでいくとさらに広がる
• 細かい仕様とか深いところまで知らなくてもIoTっぽい内容に触れることは出来る

ブラウザ側からアクセスできることが増えると、セキュリティリスクが高くなるとはよく言われますが、その分開発のハードルは下がり、WebエンジニアやWeb制作者がやれる表現も増えていきます。

Web側の人からの目線では「『現実世界にアクセスする方法（API）が増えてきたな…どう活用しよう』と思ったときの手段の一つとして活用してほしい」とのびすけさんは言っていました。のびすけさんの思いが読者のみなさまに伝われば幸いです。

最後は懇親会で乾杯！

勉強会の後はお待ちかね懇談会の時間です！ 参加者のみなさまと、各々お酒やソフトドリンクを手に乾杯しました！

今回の参加者はエンジニアの方が多いと思いきや、ディレクターやデザイナーなど様々な職種の方が参加していました。懇親会の間も自身のIoT作品に関する意見を募る方もおり、みなさま勉強熱心で関心しました。

社外勉強会を終えて

GIGでは月1回のペースで社外向けの勉強会を開催しています。エンジニアに限らず、デザイナーやディレクター、時には私のようなインターン生までも勉強会に参加しており、それぞれの成長の場となっています。

私はプログラミング経験が一切ないため、内容を理解するのが困難でしたが、普段自分が使っているものがどのように動いているのか、仕組みを理解るする貴重な経験になりました。IoTを実現するには多くの言語を学ばなければいけなかったのが、1つの言語で完結できてしまうのは画期的な技術であると感じました。

GIGでは機械学習、IoT、ブロックチェーンなどの最新トレンドに関する勉強会を今後も定期的に開催していきます。イベントの詳しい情報は、connpassのGIGページをチェックしてください！