webデザイナー、 tesselに挑戦
DESCRIPTION
2014年11月16日、JS board 勉強会 東京 #1で発表した、JavaScriptで動くマイコン「Tessel」に挑戦した話。TRANSCRIPT
![Page 1: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/1.jpg)
Webデザイナー、 Tesselに挑戦
秋葉秀樹
![Page 2: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/2.jpg)
秋葉秀樹(あきば・ひでき) 株式会社ツクロア(tuqulore) 代表取締役・デザイナー !筑波大学非常勤講師、HTML5 experts.jp DTP・グラフィックデザイン・Webフロントエンド・Flash・3DCG サービスデザイン
![Page 3: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/3.jpg)
プログラマーじゃないので専門的なことはわからないです。
Tesselのほとんど村岡さんに教えてもらった。
Herokuデプロイは興梠さん、
Node.jsは白石(俊平)さん、
つまり僕は教えてもらうことばかり。
Node.jsでプログラミングするマイコンTesselをつかって、
http通信しようとしたら「思うように動かなかった」話をします
今日のお話
![Page 4: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/4.jpg)
ここ数日、 とても天気がよかった
陽にあたって ポカポカと気持ちがいい
![Page 5: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/5.jpg)
温度とか、明るさとか 身の回りのリアルな情報がある
![Page 6: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/6.jpg)
TECH SPECS !THE NITTY Programmable via JavaScript 14 different hardware modules for added capabilities Compatible with 10,000's of Node.js packages on NPM Deploy over USB or remotely by WiFi !THE GRITTY 180mhz ARM Cortex-M3 LPC1830 32mb SDRAM 32mb Flash TI CC3000 WiFi radio 20-pin GPIO bank for general prototyping Micro USB or battery power
Technical Machine : https://tessel.io/
![Page 7: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/7.jpg)
![Page 8: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/8.jpg)
Node.jsによるプログラミング !Wi-Fi(wifi-cc3000)を内蔵している !他のボードと違い、各モジュールの配線が不要 !JavaScriptはLuaに変換され実行される
(Web, フロントエンドな人にもなじみがある)
!(非常に貧弱)
!(楽なことが良いことばかりではない、あと割高感がある)
!(現状はUSB接続してターミナルよりコマンドで実行)
![Page 9: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/9.jpg)
導入
![Page 10: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/10.jpg)
Tessel本家(おそらく海外)から購入しても、数日で届いたTesselを購入
![Page 11: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/11.jpg)
$ npm install tessel
node_modulesにインストールされるNPMよりtesselモジュールを取得
![Page 12: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/12.jpg)
var tessel = require('tessel');!!var led1 = tessel.led[0].output(1);!var led2 = tessel.led[1].output(0);!!setInterval(function () {! led1.toggle();! led2.toggle();!}, 30);
Node.jsの流儀どおり、requireさせるJavaScriptファイルを書いて保存
![Page 13: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/13.jpg)
$ tessel run sample.js
ローカル環境でNode.jsプログラムを実行する感覚でいいUSBで接続してターミナルより実行
DEMO
![Page 14: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/14.jpg)
Wi-Fiを使用する
![Page 15: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/15.jpg)
Tesselに記憶させる方法は主に2種類Wi-FiのSSIDとパスワードを設定
方法1. ターミナルよりTesselに送信
方法2. JavaScript実行ファイルに記述するvar wifiSettings = {! ssid: "Buffalo-G-5D60",! password: “**********“,! security: "wpa2", // optional! timeout: 20 // optional!};!wifi.connect(wifiSettings, callback);
$ tessel wifi -n Buffalo-G-5D60 -p ********** -s wpa2
![Page 16: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/16.jpg)
Node.jsなので、HTTPリクエストもしくはWebソケットを実装したいサーバーへ通信
問題点Wi-Fiが弱いため、Web Socketで常に送受信するのはつらい Tesselの容量が少ないため、node_modulesのサイズでボトルネックになることも…
よって、Webブラウザと同じ考えで リッチなことをやるのは無理と考えた方がいい
今回はHTTPリクエストをNodeサーバに飛ばすことを考える
![Page 17: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/17.jpg)
部屋の温度をWebサイトに表示する
![Page 18: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/18.jpg)
TesselからNode.jsサーバ経由でWebサイトへグラフ表示温度センサー(climate-si7020)を使ってWebサイトに表示
DEMO
![Page 19: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/19.jpg)
カメラで写真を保存する
![Page 20: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/20.jpg)
Tesselを起動させたら即写真を撮るだけのテストカメラ(camera-vc0706)を使う
DEMO
$ tessel run camera_sample.js --upload-dir ./
![Page 21: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/21.jpg)
https://forums.tessel.io/t/camera-image-base64-encoding-time/318
なんとも恐ろしい…画像をBase64でサーバに送りたい、と思ったら…
![Page 22: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/22.jpg)
明るさを感知したら、写真を保存させる
![Page 23: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/23.jpg)
一定以上の光量を検知したら、写真を撮る光と音センサー(ambient-attx4)とカメラ(camera-vc0706)
カメラ起動 センサー起動 光量のイベント で待機
必ずonイベントで順を踏むこと
DEMO
![Page 24: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/24.jpg)
まとめ
![Page 25: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/25.jpg)
夢はひろがるまとめ
もどかしい…スタンドアロン環境が醍醐味のハードウェアボードなだけに、Web Socketなど存分に使いたいが、現状では落ちまくるため現実的ではない。
致命的…最悪、Tesselを強制再起動させたい場合のAPIが見つからず、このあたりはファームウェアアップデートに期待
いつもと違うスキルが必要…「何でもJSでできる世の中」とうたっても、ハードウェアにはそれなりの制約があることを実感。 やはりWebブラウザは強力なだけに恵まれているな、と。
![Page 26: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/26.jpg)
我が家のネコ、「ちくわ」です。よろしく。
シカシ、ユメ ハ ヒロガル ネ!
サーボで自動餌やり機をつくってみたい
![Page 27: Webデザイナー、 Tesselに挑戦](https://reader034.vdocuments.mx/reader034/viewer/2022052217/559b86901a28ab1d458b4838/html5/thumbnails/27.jpg)
ありがとうございました!
JavaScript(Node.js)で色々なハードウェアモジュールが動くマイコンボード Tessel を手に入れたので詳しく調べてみた - 凹みTips http://tips.hecomi.com/entry/2014/07/06/235056
橋本商会 » tesselをカメラ付きwebサーバーにする http://shokai.org/blog/archives/9426
参考にさせてもらいました日本語のTessel記事