beenos creators' night#201305今井
TRANSCRIPT
Google ChromePackaged Appsとハードウェアで遊んでみた
ネットプライスドットコムbeenos Future Center いまいだいすけ
13年7月1日月曜日
Google I/O 20132013/05/15 - 17
13年7月1日月曜日
話題に！
13年7月1日月曜日
ただしごく一部の人たちに！
13年7月1日月曜日
【そもそもPackaged Appsとは】・ChromeのWebアプリプラットフォーム →HTML5 + JavaScript + CSS・ローカル環境で起動 →フルスクリーン、URLバー無し・Webでは使えない強力なAPI →カメラ、ネットワーク、通知
13年7月1日月曜日
Chrome OS用のアプリとか
13年7月1日月曜日
なぜ今回注目されたか
13年7月1日月曜日
これ
13年7月1日月曜日
もっと言えば、これ
13年7月1日月曜日
2012年のGoogle I/Oでデモいつのまにか
使えるようになってた
13年7月1日月曜日
じゃ、作り方いくよ～。
13年7月1日月曜日
ローカルにフォルダを用意します
13年7月1日月曜日
manifest.jsonを作ります。{ "name": "Hello world", "description": "My first packaged app.", "version": "0.1", "manifest_version": 2, "app": { "background": { "scripts": ["background.js"] } }, "permissions": [ "serial" ] }
13年7月1日月曜日
background.jsを作ります。
chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('window.html', { 'bounds': { 'width': 450, 'height': 500 } });});
13年7月1日月曜日
ｗindow.htmlを作ります。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Chrome Serial Monitor</title> </head> <body> <script type="text/javascript" src="main.js" charset="UTF-8"></script> <h1>Serial Monitor</h1> <select id="ports"></select> <input type="text" id="baud" value="9600" size="5"/> <input type="button" id="open" value="Open"/> <input type="button" id="close" value="Close"/> <h2>Write</h2> <div> <textarea cols="60" rows="4" id="textWrite"></textarea> <div> <input type="button" id="write" value="Write"/> </div> </div> <h2>Read</h2> <div> <textarea cols="60" rows="4" id="textRead"></textarea> <div> <input type="button" id="clear" value="Clear"/> </div> </div> </body></html>ß
13年7月1日月曜日
main.jsを作ります。function openPort () { var baudRate = 9600; var options = { bitrate:baudRate }; chrome.serial.open(selectedPort, options, function (openInfo) { connectionId = openInfo.connectionId; startReadingPort(); });}
function startReadingPort () { reading = true; readPort();}
function readPort() { var bytesToRead= 1; chrome.serial.read(connectionId, bytesToRead, function (readInfo) { if (readInfo.bytesRead > 0) { var arr = new Uint8Array(readInfo.data); accY = (arr[0] - 128) / 10; } if (reading) readPort(); });}
13年7月1日月曜日
作るもの、以上
13年7月1日月曜日
chrome://extensions/
13年7月1日月曜日
chrome://extensions/
13年7月1日月曜日
作ったフォルダを選ぶと
できた！
13年7月1日月曜日
起動は新規タブから
13年7月1日月曜日
今回はこれとシリアル通信させてみます
13年7月1日月曜日
Arduino側のプログラム#include "Charlie.h"
Charlie charlie(4, 5, 6, 7, 8);int bar = 0;
float toV(int value) { return 5.0 * value / 1023;}
float toG(float volts) { return (volts - 1.65) / 0.8;}
void setup() { Serial.begin(9600); charlie.setArrayIndex(4, 9, 14, 19, 8, 13, 18, 3, 12, 17, 2, 7, 16, 1, 6, 11, 0, 5, 10, 15);}
void loop() { charlie.displayBar(bar, 50); float accX = toG(toV(analogRead(A0))); if (accX < -1) accX = -1; if (accX > 1) accX = 1; int color = accX * 127 + 128; Serial.write(byte(color));}
void serialEvent() { while (Serial.available()) { byte dat = Serial.read(); bar = int(dat); }}
13年7月1日月曜日
送信 受信
13年7月1日月曜日
（DEMO）※Arduino上の加速度センサーの値によってtextareaのbgcolorを変更。また画面上のスライダーをいじると、Arduino側のLEDバ
ーが変化する。
13年7月1日月曜日
とりあえずシリアルのI/Oできたので…
13年7月1日月曜日
応用（Arduino側は変えずに）
13年7月1日月曜日
13年7月1日月曜日
enchant.js + 加速度センサー
13年7月1日月曜日
（DEMO）※Arduino上の加速度センサーの値によって画面のくまちゃんを上下に移動。星を取った数
でLEDバーの点灯数が増えていく。
13年7月1日月曜日
センサーからWebへWebからデバイスへ
13年7月1日月曜日
【センサー】温度、湿度、明るさ、音、圧力、曲げ、傾き、加速度GPS、電圧、スイッチ、
etc...
13年7月1日月曜日
【デバイス】表示器、光、音、モーター、動作、
etc...
13年7月1日月曜日
【通信回線】WiFi、Bluetooth、USB、シリアル
etc...
13年7月1日月曜日
さぁ、何を作りますか？
13年7月1日月曜日
【次回予告】レイ・フロンティア田村さんとなにかデバイス作って持ってくる
13年7月1日月曜日
ご清聴ありがとうございました。
13年7月1日月曜日