Beenos creators' night#201305今井

403 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
403
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beenos creators' night#201305今井

  1. 1. Google Chrome Packaged Appsと ハードウェアで遊んでみた ネットプライスドットコム beenos Future Center いまいだいすけ 13年7月1日月曜日
  2. 2. Google I/O 2013 2013/05/15 - 17 13年7月1日月曜日
  3. 3. 話題に! 13年7月1日月曜日
  4. 4. ただしごく一部の人たちに! 13年7月1日月曜日
  5. 5. 【そもそもPackaged Appsとは】 ・ChromeのWebアプリプラットフォーム   →HTML5 + JavaScript + CSS ・ローカル環境で起動  →フルスクリーン、URLバー無し ・Webでは使えない強力なAPI  →カメラ、ネットワーク、通知 13年7月1日月曜日
  6. 6. Chrome OS用のアプリとか 13年7月1日月曜日
  7. 7. なぜ今回注目されたか 13年7月1日月曜日
  8. 8. これ 13年7月1日月曜日
  9. 9. もっと言えば、これ 13年7月1日月曜日
  10. 10. 2012年のGoogle I/Oでデモ いつのまにか 使えるようになってた 13年7月1日月曜日
  11. 11. じゃ、作り方いくよ∼。 13年7月1日月曜日
  12. 12. ローカルにフォルダを用意します 13年7月1日月曜日
  13. 13. 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日月曜日
  14. 14. background.jsを作ります。 chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('window.html', { 'bounds': { 'width': 450, 'height': 500 } }); }); 13年7月1日月曜日
  15. 15. window.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日月曜日
  16. 16. 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日月曜日
  17. 17. 作るもの、以上 13年7月1日月曜日
  18. 18. chrome://extensions/ 13年7月1日月曜日
  19. 19. chrome://extensions/ 13年7月1日月曜日
  20. 20. 作ったフォルダを選ぶと できた! 13年7月1日月曜日
  21. 21. 起動は新規タブから 13年7月1日月曜日
  22. 22. 今回はこれと シリアル通信させてみます 13年7月1日月曜日
  23. 23. 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日月曜日
  24. 24. 送信 受信 13年7月1日月曜日
  25. 25. (DEMO) ※Arduino上の加速度センサーの値によって textareaのbgcolorを変更。また画面上の スライダーをいじると、Arduino側のLEDバ ーが変化する。 13年7月1日月曜日
  26. 26. とりあえず シリアルのI/Oできたので… 13年7月1日月曜日
  27. 27. 応用 (Arduino側は変えずに) 13年7月1日月曜日
  28. 28. 13年7月1日月曜日
  29. 29. enchant.js + 加速度センサー 13年7月1日月曜日
  30. 30. (DEMO) ※Arduino上の加速度センサーの値によって 画面のくまちゃんを上下に移動。星を取った数 でLEDバーの点灯数が増えていく。 13年7月1日月曜日
  31. 31. センサーからWebへ Webからデバイスへ 13年7月1日月曜日
  32. 32. 【センサー】 温度、湿度、明るさ、音、 圧力、曲げ、傾き、加速度 GPS、電圧、スイッチ、 etc... 13年7月1日月曜日
  33. 33. 【デバイス】 表示器、光、音、 モーター、動作、 etc... 13年7月1日月曜日
  34. 34. 【通信回線】 WiFi、Bluetooth、 USB、シリアル etc... 13年7月1日月曜日
  35. 35. さぁ、何を作りますか? 13年7月1日月曜日
  36. 36. 【次回予告】 レイ・フロンティア田村さんと なにかデバイス作って持ってくる 13年7月1日月曜日
  37. 37. ご清聴 ありがとうございました。 13年7月1日月曜日

×