Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

by n0bisuke
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)が増えてきたな、どう活用しようって感じの手段の一つとして頭のどこかに残れば幸いです。

それでは!

n0bisuke
プロトタイピング専門スクール「プロトアウトスタジオ」で教えたりしてます。 プロフ -> https://dotstud.io/members/n0bisuke
https://protoout.studio
dotstudio
全ての人がモノづくりを楽しむ世界を目指して活動しています。
https://dotstud.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした