HTML5 Conference

HTML5 Conference

f:id:keiwt:20150128205903j:plain

基調講演

  • 講演者
元SFCの学生兼村井純氏の弟子兼東京電子大学教授

村井氏が既得権益と戦っているので、殺されるかもしれないとの話し。
社会人を大学に戻すのを勧める。

村井 純氏(慶應義塾大学 環境情報学部長 and 日本のインターネットの父)

そういえば、前々回ワタシが参加したときに慶應医学部OBのネットワークで医学データをビッグデータとして分析するとおっしゃっていました。
個人的にも医学に興味があるので、どうなっているか興味があります。

グロいので目を閉じることを要求する。

足のレントゲン写真

日本の整形外科に送信

手術必要

一旦釘で止める

今日来れた

モノにuid(RFID)を付ける

モノをトラッキング

1cmのコンピュータにはBluutooth

Everything speaks HTML,HTTP,TCP/IP,HTTPできる

House of Cards(Netfilix)

どこでやめたか、何話まで見たか、ちょいワルがいいのか、浮気女がいいのかなどのビッグデータ解析
※テレビにカメラも考えられている

SFCの脳の授業では脳を3Dプリンタで作成して、持ってくる

Download this things

欲しいものはすぐダウンロード

流通はなくなる。
関税がなくなる。
社会的インパクトが大きい。 ↓
日本中のコンビニに3Dプリンタをイメージ

日本はダントツでイノベーションにデータを利用していない

日本の経営者はデータ活用にネガティブ

開発企業からユーザー企業に転籍することを勧める
※そうすれば日本は良くなる

次元が違いすぎて、学生に話が通じないこともよくあるようです。

及川 卓也(GoogleにてChromeの開発チーム)

前回、「不満があったら自分で解決する」とおっしゃっていた神です。

俺にとってはネクタイはコスプレだ!!!

機器やサービスの組み合わせが多彩に。

Service Worker

ブラウザの中にインテリジェンスの高いWEBプロキシが入っている感じ

HTTP Server同士のクロスオリジンではなく、ブラウザ側がフェッチしてくれる

技術的にはHTML,CSS,JSのみになるかもしれない。

いや、文章をレンダリングすることだけでこれからの社会の要求を満たすことができるのでしょうか。

JSではECMAScript6でクラス導入。

11:20 - 12:00

  • Web技術によるデバイス制御・連携などを、まずは作り手として楽しんでみる♪(ルームF)
JavaScriptを使ったデバイス・ガジェットの制御や、デバイス間の連携を行える環境が
整ってきています。
それを見て、「自分も何かやってみたいな!」などと思ってみたりするものの、
実際作るのにはハードルがあったりしませんか?

その一歩を踏み出して作ってみた・試してみたという話、
どんなデバイス連携が行えるかという内容を、実演も行いながらご紹介します。

Arduinoで始めるWeb技術者のためのIoT入門を@ITで連載しています。

センサーの値を読み込み送信するのは最近すごく楽になってきた。

C言語ではなくてもよくなった。

JSが動くボード

Firmataプロトコルは信号さえ遅れれば、別にRubyでも良い。

Arduinoは3000円。

センサーは500円

Node.js⇔Arduino⇔センサー ※Firmata

$ npm install johnny-five

tmp/node_modules/johnny-five
tmp/node_modules/main.js

var jS = require('johnny-five');
var arduino = new jS.Board();
arduino.on('ready', functon(){
    var sensor = new jS.Sensor({
          pin: 'A0',
          freq: 1000,
    });
    sensor.on('data', function () {
         console.log(this.raw);
    }
});

$ node main.js

ArduinoはUSBケーブルが付いている

直結できるデバイス * キーボード

Arduino Micro or Arduino Leonardo

フロント側はkeydown
Arduino UNO Rev3
moco fo LUFAでファームウェアを追加
Arduino IDEにMIDI Libraryをインストール
void setup() {
    MIDI.begin(4);
}
void loop() {
    int val = ;
    
}

ブラウザ側はWeb MIDI APIを使う

chrome://flags/でMIDIで検索して有効にする
ブラウザは再起動してください

キーボード、MIDI以外でもできます。

13:20 - 14:00

  • 悩める組み込み機器向けウェブコンテンツのパフォーマンス(ルームA)
近年、ブラウザーやブラウザーランタイムは、PCやスマートフォンのみならず、
テレビ、コンソールゲーム機などの組み込み機器にも導入されるようになりました。
また、Raspberry Piに代表されるSingle Board Computer(SBC)も流行りだし、
ロースペックな環境で動作しなければならないウェブアプリケーション開発の需要が
高まろうとしています。

多くの組み込み機器に搭載されたは、近年よく使われるAPIやCSSをサポートしています。
しかし、そのパフォーマンスはスマートフォンと較べて非常に貧弱です。
スマートフォンでは当たり前のパフォーマンスが得られることはありません。

本セッションでは、組み込み向け機器の現状を紹介し、
その上で動作するウェブアプリケーションの開発の課題、私の経験での苦労話、
そして、それに立ち向かうための Tips を紹介します。
SBC(Single Board Computer)

RasberryPiはスペックが一番低い

ODROID-U3、ODROID-C1はハイスペック

スマホは超贅沢品

RasberryPiは1 Core(700MHz)

プレロード、いらない機能はなくす

処理時間オーバー  
↓  
分割して処理する

メモリーリーク
↓
JSでは特に注意
すぐに落ちる

ブラウザのバグが顕著に出る(スマホでは顕在化しない)

Google Closure Compilerのゆるモードがオススメ

setTimeout()よりCSS Transitions,CSS TransformのtranslateX()がオススメ
↓
GPUの使用率が低い

spanで変化する箇所のみposition:absoluteで描画領域を最小限にする

position:absoluteは位置を固定できる

loadイベントとレンダリング完了の時差があるため、setTimeout()で少し待ってから処理する

videoタグはデフォルトでデコード後のものがプリバッファリングされるので、  
preload="none" or preload="metadata"

prototype使ったほうがメモリ消費が少ない

jQueryはDOMアクセスのみしか使わない場合が多い
↓
無駄に読み込んでいる
↓
素のjs or vanillaJS

素のgetElementByIdをオススメ
素のjsをオススメ

14:20 - 15:00

  • HTML5 によるロボット制御(ルームD)
JavaScript と ROS を用いたロボット制御について解説します。

また、 W3C Browsers and Robotics Community Group で検討が進む
Robotics Web API を用いたロボット制御にも触れます。
WebSocket経由でルンバを動かす
スマホ⇔PC⇔ルンバ
WebSocket
USB Serial

ROS(Robot Operating System)

制御プログラムはC++で記述する

publish(命令を送信)
subscribe(アプリが情報を取得)

Rosbridge(jsでROSを使用できる)
PCに載せる

eventemitter2.js,roslib.js
var ros = new ROSLIB.Ros();
ros.connect('http://localhost')

cmd_velノードに前進コマンドを送信する
linearは進行方向と速度
angularは回転方向と速度

ルンバから情報を受取る
odomノードをsubscribeする

ロボットを制御するWeb APIを作る
gecko/dom/geolocation
gecko/dom/roboticeなどのようにすれば作れる
しかし、C++はハードルが高い

WebIOPi
RasberryPi上で動くIoTフレームワーク

FoxberryPi

ロボットのWeb API
必要なのはGPIOとI2C

GPIO(General Purpose Input/Output)
モーターのon/offの制御ができる

I2C
シリアル通信のためのバス
GPIOではon/offのみだが、I2Cはモーターの回転数等を細かく制御できる

navigator.mozGpio.write
navigator.mozI2c.getI2CDevice(デバイス名,アドレス)

DRV8830を用いたモーター制御

実演
RosBridgeを起動
↓
ルンバのノードを起動
↓
ブラウザで操作