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

弊社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    

そもそも「IoT」とは？

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

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

IoT開発に役立つおすすめAPI

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

WebブラウザAPI

WebBluetooth

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

のびすけさんの実験はこちら▼

 

View this post on Instagram

 

今日の成果。 WebBluetoothから電球制御

n0bisukeさん(@n0bisuke)がシェアした投稿 - 2019年 1月月26日午前1時09分PST

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サービスのみでIoTっぽいことをやってみる

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は、Web制作、Webマーケティング、コンテンツ制作、サービス開発など、Web戦略をトータルで支援するデジタルコンサルティング企業です。開発のご相談はお気軽にお問い合わせください。

GIG BLOG編集部

株式会社GIGのメンバーによって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。