LoginSignup
22
20

More than 5 years have passed since last update.

@n0bisuke(Sugawara Nobisuke)

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

Last updated at Posted at 2019-03-20
1 / 33

この資料について

  • こちらのイベントでの発表資料です。
  • 基本的には、現時点でmacOSのChromeで(v72)試せる内容になってます。他のブラウザでは試してません。
  • Webエンジニアだったり、WebディレクターだったりWeb業界の人向けです。
  • 過去にも同じようなネタやったことあるけど、割と状況変わったりするので再度調査も兼ねてまとめました。
  • IoTってタイトルで言ってますけど、IoTっぽいことって言った方が正しいです。IoTとは〜みたいなことを知りたい人は誰かビジネスサイドの人のそういう資料を見ましょう。個人的にはIoTとは〜みたいな問いはここではどうでもいい各々の解釈で良いと思っています。

うーん、誰かに怒られるのかなぁ

自己紹介

今回言いたいこと

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

有名どころAPI

有名どころってのは主観です。

WebBluetooth

  • WebブラウザのJavaScriptから外部のBluetoothデバイスとの接続が行えるAPI
  • avigator.bluetooth.requestDevice()でBluetoothデバイスにアクセスできる
  • 深くなるので後述1

WebUSB

  • WebブラウザのJavaScriptからUSBデバイスへ"直接"アクセスできる技術
  • navigator.usb.requestDevice()でUSBデバイスにアクセスできる
  • 深くなるので後述2

WebRTC

  • Webブラウザで、映像や音声の双方向通信が行える技術
  • navigator.getUserMedia()でカメラやマイクなどのデバイスにアクセスできる


図にあるようにP2Pで通信が行われる

デバイス制御形

基本的には↑同様にWebブラウザ上のJavaScriptで制御できるAPIです。

GamePad API

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

Web MIDI API

Keyboard API

  • Webブラウザで、PCに接続しているキーボードの情報を取得することができます。
  • navigator.keyboardにキーボードの情報が入ってきます。
navigator.keyboard.getLayoutMap().then(res => console.log(res))


僕が使ってるキーボードは48キーなんでしょう。

Battery Status API

  • Webブラウザで、デバイスのバッテリー情報を知ることが出来ます。
  • navigator.getButtery()でバッテリー情報にアクセス出来ます。
navigator.getBattery().then(v => console.log(v));

  • フル充電じゃないと見れないサイトとか作れそう
  • 電池の残りが少ない時にしか見れないキャンペーンとか

Vibration API

  • Webブラウザ側から、ページにアクセスしているデバイスを振動させます。バイブ機能。
  • navigator.vibrate()でバイブ機能にアクセス出来ます。
  • アダルトサイトを見ていて飛ばされた先にある怪しげなサイトで出るアラートなどはこれです。（たぶん言い切っていい思う。）

センシング形API

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

Geolocation API

  • Webブラウザで、デバイスのGPS機能にアクセスすることが出来ます。いわゆる位置情報。
  • navigator.geolocationでデバイスの位置情報にアクセスします。
  • 市民権を得ていて、よく使われているイメージなので説明は省略。

devicemotion イベント

  • Webブラウザで、デバイスの加速度の値にアクセスすることが出来ます。加速度センサ。
  • window.addEventListener("devicemotion", res => console.log(res.acceleration));でアクセスできる
    • navigatorオブジェクトに紐づいてないからここまでの流れで見ると少し異色
  • その他、傾き(重力加速度)や回転値も取得できる。

その他パラメータでアクセスできる機能逆引き

なんちゃらAPIみたいに市民権得てるネタ(メソッド)ではなく、ちょっとした値が取れるよ（プロパティ）くらいのものです。

Webサイトを見ているデバイスが接続しているネットワーク情報を知る - navigator.connection 

console.log(navigator.connection);

  • 回線の速度によって表示を変えたりに使えそう
    • 重いサイトであれば、速度が遅くなってるのでWiFiに接続してから試してね〜みたいな
    • インスタレーションっぽいサイトだったらパーティクルの数を制限してあげたり
    • 動画や画像を使うサイトであれば画質の調整をしたり

Webサイトを見ているデバイスのCPUや性能情報

  • 活用ポイントは先ほどのネットワーク情報と同様なイメージ
  • PCスペックが低い人には買い替えを促す販促など

CPUの種類を知る - navigator.platform 

console.log(navigator.platform);

-> "MacIntel"

CPUのコア数を知る - navigator.hardwareConcurrency 

console.log(navigator.hardwareConcurrency);

-> 4

CPUのコアが4つ

メモリを知る - navigator.deviceMemory 

console.log(navigator.deviceMemory);

-> 8

8Gのメモリってことですね。

デバイスがオンラインかオフラインか - navigator.onLine

  • デバイスがネットワークに繋がっていてオンラインならtrue、オフラインならfalseが返ってきます。
  • true/falseの真偽値が返ってくるだけでシンプル

デバイスがどれくらい同時タップ可能か - Navigator.maxTouchPoints

  • Webブラウザから、デバイス（主にスマートフォン）の同時タップ数を知ることができる

その他、名前はそれっぽいけど違かった子たち

全然調べてないから違かったらコメントください。

  • navigator.locks
    • プロセスのロック的な話っぽい
  • navigator.sendBeacon
    • いわゆるビーコンデバイスみたいな話ではなく、簡単なパケットを送る的なものっぽい

少し深くなっていく話

冒頭に紹介だけしたAPIに関して少し掘り下げて紹介

WebBluetooth

WebUSB

  • WebUSBを使ってブラウザのJavaScriptからArduinoを制御してみよう！
  • WebBluetooth同様に、USBデバイス連携のドライバ開発(多分CとかC++)をやらなくとも、Webブラウザ（JavaScript）でUSBデバイスにアクセスできるようになるので、開発のコストが下がり、USBデバイスがよりインターネットに繋がりやすくなる未来が示唆された。

Node.js方面に降りていく

Webサービスの話

その他、WebサービスのみでIoTっぽいことがやれそうな周辺サービス

enebular

  • https://www.enebular.com/ja/index.html
  • IoTアプリケーション(プロトタイプ)をノンコーディングで作れるサービス
  • 無料
  • NodeREDを内包していてノード(機能毎のブロック)を組み合わせることでWebやデバイス連携のアプリケーションが組める

SkyWay

まとめ

↑にも載せたまとめくらいですが、

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

ってことが言いたかったです。

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

Web側の人からの目線では、PCやスマホの画面の中だけの話じゃなくて現実世界にアクセスする方法(API)が増えてきたな、どう活用しようって感じの手段の一つとして頭のどこかに残れば幸いです。

それでは！

22
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
20