SlideShare a Scribd company logo
1 of 43
Download to read offline
若
狹
  
正
生
自己紹介
若狹  正生
わかさ まさお
html5jスタッフとか色々やってます。
ブラウザで動かすのが大好きな人です。
http://akizukidenshi.com/catalog/g/gI-02896/
とげとげしてて、動きそうでこわい。何に使えるかもわからない。	
  
こんなの家にあったらもう….
http://akizukidenshi.com/catalog/g/gI-00624/
こんなとがってるもの、目に刺さりそうだし、爆発しそう。	
  
こんなの家にあったらもう….
http://ichigojam.net/
買ったらバラバラで届いて、どう組み立てていいかもわからない。	
  
ハンダとか使わないとだめですか・・・。
http://k-tai.impress.co.jp/docs/column/todays_goods/20150611_705008.html
果敢に恐怖に挑戦した記事です。ぜひこわさを共有してください。
http://www.slideshare.net/bathtimefish/webwebweb
完成品買おうと思ったら、いっぱいあって何がなにやら	
  
わからなくてこわい!!
ハードウェアこわい
こわすぎる
ハードウェアこわい
Bluetooth こわい
UUID / major / minor
温度とかも送信できる	
http://www.houwa-js.co.jp/index.php/ja/products/blead
http://www.appleple.com/products/ibeacon.html
どっかで聞いたiBeaconというもの。位置情報をとったりするが	
  
実は温度とか大気とかいろんな送れる仕様になってて、	
  
それをスマホでリアルタイムに受信できたりする…こわい。
https://github.com/petermetz/cordova-plugin-ibeacon
http://qiita.com/Morikuma_Works/items/c2899e548da1c5e2c28e
そんなiBeaconをWebな環境からも使えたりする。	
  
攻めて来る感じ…こわい。
http://fr.slideshare.net/recruitcojp/w3-c-signage/1
URIを送信	
iBeaconでは英数の文字列なので、わかってるアプリしか見れない。	
  
そこで、URIを送信したりする方法も考えられている。	
  
バス停にいったらURIを送られてバスの到着時間が	
  
スマホですぐに見れるとかできちゃって…こわい。
クラウド こわい
BaaS + IoT
ハードウェアから送信ブラウザで表示
https://mlkcca.com/
ハードウェアが直接BaaSを叩いてデータ送信しまくるのが簡単に	
  
作れるようになっている。環境ごとにライブラリも提供されている。	
  
サーバ知識無くても、もうデータ収集が簡単で、こわい。
h2p://fossbytes.com/how-­‐to-­‐install-­‐windows-­‐10-­‐iot-­‐on-­‐raspberry-­‐pi-­‐2/	
基板もWindowsなどが載ったりしてくるものもある。	
  
ハードウェアの知識なくてもネットワークにつないでとか簡単に	
  
誰でも安くできちゃう…こわい。
VRこわい
http://krpano.com/
http://gigazine.net/news/20150529-google-cardboard-vr/
VRとかスマホで簡単にみることができるようになってる。	
  
iOSとか鬼っ子ぎみなものでも、Krpanoというソフトなどで簡単に	
  
書き出せて、アプリじゃなくてブラウザで見せれたり…こわい。	
  
そして視点入力までも実装できてしまう。こわすぎる…。	
  
+	
  asm.js	
Unityからブラウザ用にVRアプリを簡単に書き出せたりする。	
  
asm.jsでブラウザなのに高速に動作できちゃったり。	
  
流行のOculus用のブラウザアプリなんてすぐそばに。	
  
それも、各ブラウザで対応しちゃいそうな流れ…こわい。	
  
モーションこわい
https://www.leapmotion.com/
アプリがなくてもブラウザで手の動きを簡単に読み取る事ができる。	
  
それもJavaScriptファイルは提供されてるので何も考えなくても	
  
実装が可能なので…こわい。	
  
http://japan.intel.com/realsense/
Intelが作ってるRealSenseは、上半身のみの取得ではあるものの、	
  
表情や言語認識なども含めて取得できる。	
  
これもブラウザで取得が可能(※ただし1つ前のバージョンまで…)	
  
そして、だんだんと内蔵のノートPCが出てきてるから…こわい。	
  
通信 こわい
MQTT
※アプリでもFacebookMessengerなどが利用
センサー情報などHTTPではない軽量に送れる通信プロトコルが	
  
最近流行ってきて、それも楽ちん実装で…こわい。	
  
http://www.v-sido.com/ja/index.html
WebRTCを使ってブラウザからロボットを操作できる環境が出来て
きてる。もうSkyWayなどではロボット用の基板のV-­‐Sidoを操作して
たりするらしい…こわい。	
  
h2p://www.Qinc.com/object/me-­‐slovick-­‐20150121.html	
Bluetooth 4.2 ( 6LoWPAN )
BluetoothがIPV6をしゃべって勝手にサーバにデータをあげれる	
  
ようになっていくらしい。簡単に設置できるようになるから膨大に	
  
データがサーバにためれまくって、それをグラフィカルにブラウザ
で見せるようになる時代がくると思うと…こわい。	
  
テレビこわい
http://panasonic.jp/viera/firefox/
http://panasonic.biz/broad/catv/product/settop/tz-hdt620/
テレビにブラウザがメインなものが出始めてきてる。	
  
常時起動してるブラウザが家の中に存在してきて…こわい。	
  
SONYのテレビもHTML5を押したテレビが出てくる時代に…こわい。	
  
JavaScript こわい
h2p://www.slideshare.net/bathXmefish/webwebweb	
ここに出てるものはJavaScriptで動く、動かせることができるもので
す。なのでちょっとJavaScriptを知ってる人が簡単に基板を操作で
きるプログラムをすぐに出来る環境が出来つつあり…こわい。	
  
MozOpenHard
CHIRIMEN
http://mozopenhard.mozillafactory.org/about
基板の設計さえもオープンで、なおかつブラウザ上で基板を制御
しているものが存在してきてる状態が…こわい。	
  
MIDI こわい
http://www.itmedia.co.jp/news/articles/1505/20/news066.html
MIDIが標準でサポートしている。USBを刺すだけで即認識するほ
どの強力なレベルで連動していて…こわい。	
  
MIDI機器
Android端末
USB
https://www.youtube.com/watch?v=fvwn0imOZQI
PCだけじゃなくAndroid端末でも出来ちゃうので…こわい。	
  
http://www.korg.co.jp/Product/Controller/microKEY/
http://jp.yamaha.com/products/music-production/midi-controllers/wx5/
http://jamstik.com/
MIDIなのでいろんなUIを簡単に利用することができて…こわい。	
  
http://www.ikmultimedia.com/products/irigpads/
http://djtechtools.com/2013/11/03/midi-fighter-twister/
http://denondj.com/products/view/dn-sc2000
MIDIは古くからあるので、いろんなUIが存在しているので…こわい。	
  
+	
  dualMocoLUFA	
http://www.kei3.jp/diary.php?id=4818
http://morecatlab.akiba.coocan.jp/lab/index.php/2013/09/dualmocolufa/
MIDI装置は簡単に自作することができるものが揃ってて…こわい。	
  
ハードウェアこわい
ブラウザ と ハードウェア
•  今後ブラウザからハードウェアの操作や
データを見る事が増えていく
•  大量のデータを効率よく綺麗に見せるの
はWebが得意とすることがより重要に
– D3.jsなどブラウザで画像描画が出来るし
こんなフォーマットが欲しい!とか、
どういうデータが飛んでくるのか?とか
ハードウェア知っておいた方が良くない?
ハードウェアと連動すると
     Webはこわいでしょ?
で、ほんとうは…
JavaScript が動く
    ロボットがこわい
http://www.softbank.jp/robot/special/pepper/

More Related Content

More from Wakasa Masao

思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things
思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things
思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE ThingsWakasa Masao
 
WebBluetoothなど - JSで制御するBluetoothと基板の勉強会 -
WebBluetoothなど	- JSで制御するBluetoothと基板の勉強会 -WebBluetoothなど	- JSで制御するBluetoothと基板の勉強会 -
WebBluetoothなど - JSで制御するBluetoothと基板の勉強会 -Wakasa Masao
 
シャクレ - 写真くれくれサービス -
シャクレ - 写真くれくれサービス -シャクレ - 写真くれくれサービス -
シャクレ - 写真くれくれサービス -Wakasa Masao
 
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係Pepper,Robi..コミュニケーションロボットと僕らの新しい関係
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係Wakasa Masao
 
基板とブラウザと私
基板とブラウザと私基板とブラウザと私
基板とブラウザと私Wakasa Masao
 
Eddystone概要と事例
Eddystone概要と事例Eddystone概要と事例
Eddystone概要と事例Wakasa Masao
 
Web標準技術だけでロボ
Web標準技術だけでロボWeb標準技術だけでロボ
Web標準技術だけでロボWakasa Masao
 
ハードウェアこわい - HTML5オールスターズ
ハードウェアこわい - HTML5オールスターズハードウェアこわい - HTML5オールスターズ
ハードウェアこわい - HTML5オールスターズWakasa Masao
 
HTML5から始まる技術革新 @ 2015/1
HTML5から始まる技術革新 @ 2015/1HTML5から始まる技術革新 @ 2015/1
HTML5から始まる技術革新 @ 2015/1Wakasa Masao
 
ブラウザから飛び出すWeb技術とHTML5
ブラウザから飛び出すWeb技術とHTML5ブラウザから飛び出すWeb技術とHTML5
ブラウザから飛び出すWeb技術とHTML5Wakasa Masao
 
HTML5から始まる技術革新
HTML5から始まる技術革新HTML5から始まる技術革新
HTML5から始まる技術革新Wakasa Masao
 
Web技術を幅広く
Web技術を幅広くWeb技術を幅広く
Web技術を幅広くWakasa Masao
 
HTML5時代でもFlashとかを使い続ける漢達
HTML5時代でもFlashとかを使い続ける漢達HTML5時代でもFlashとかを使い続ける漢達
HTML5時代でもFlashとかを使い続ける漢達Wakasa Masao
 

More from Wakasa Masao (15)

思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things
思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things
思い立ったらJSオンリーで 作ってみて体験して失敗できる LINE Things
 
WebBluetoothなど - JSで制御するBluetoothと基板の勉強会 -
WebBluetoothなど	- JSで制御するBluetoothと基板の勉強会 -WebBluetoothなど	- JSで制御するBluetoothと基板の勉強会 -
WebBluetoothなど - JSで制御するBluetoothと基板の勉強会 -
 
シャクレ - 写真くれくれサービス -
シャクレ - 写真くれくれサービス -シャクレ - 写真くれくれサービス -
シャクレ - 写真くれくれサービス -
 
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係Pepper,Robi..コミュニケーションロボットと僕らの新しい関係
Pepper,Robi..コミュニケーションロボットと僕らの新しい関係
 
基板とブラウザと私
基板とブラウザと私基板とブラウザと私
基板とブラウザと私
 
Eddystone概要と事例
Eddystone概要と事例Eddystone概要と事例
Eddystone概要と事例
 
Web標準技術だけでロボ
Web標準技術だけでロボWeb標準技術だけでロボ
Web標準技術だけでロボ
 
ハードウェアこわい - HTML5オールスターズ
ハードウェアこわい - HTML5オールスターズハードウェアこわい - HTML5オールスターズ
ハードウェアこわい - HTML5オールスターズ
 
HTML5から始まる技術革新 @ 2015/1
HTML5から始まる技術革新 @ 2015/1HTML5から始まる技術革新 @ 2015/1
HTML5から始まる技術革新 @ 2015/1
 
ブラウザから飛び出すWeb技術とHTML5
ブラウザから飛び出すWeb技術とHTML5ブラウザから飛び出すWeb技術とHTML5
ブラウザから飛び出すWeb技術とHTML5
 
HTML5から始まる技術革新
HTML5から始まる技術革新HTML5から始まる技術革新
HTML5から始まる技術革新
 
Web技術を幅広く
Web技術を幅広くWeb技術を幅広く
Web技術を幅広く
 
Html5 by gis tec
Html5 by gis tecHtml5 by gis tec
Html5 by gis tec
 
HTML5時代でもFlashとかを使い続ける漢達
HTML5時代でもFlashとかを使い続ける漢達HTML5時代でもFlashとかを使い続ける漢達
HTML5時代でもFlashとかを使い続ける漢達
 
InfoTalk#17 1st
InfoTalk#17 1stInfoTalk#17 1st
InfoTalk#17 1st
 

Recently uploaded

ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法ivanwang53
 
動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Components動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Componentsokitamasashi
 
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーンWindowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーンivanwang53
 
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元ivanwang53
 
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docxWindows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docxivanwang53
 
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]Taka Narita
 

Recently uploaded (6)

ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
 
動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Components動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Components
 
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーンWindowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
 
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
 
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docxWindows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
 
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
 

ハードウェアこわい(字幕版) - HTML5オールスターズ