SlideShare a Scribd company logo
Webデザイナー、
Tesselに挑戦
秋葉秀樹
秋葉秀樹(あきば・ひでき)
株式会社ツクロア(tuqulore) 代表取締役・デザイナー
!
筑波大学非常勤講師、HTML5 experts.jp
DTP・グラフィックデザイン・Webフロントエンド・Flash・3DCG
サービスデザイン
プログラマーじゃないので専門的なことはわからないです。
Tesselのほとんど村岡さんに教えてもらった。
Herokuデプロイは興梠さん、
Node.jsは白石(俊平)さん、
つまり僕は教えてもらうことばかり。
Node.jsでプログラミングするマイコンTesselをつかって、
http通信しようとしたら「思うように動かなかった」話をします
今日のお話
ここ数日、
とても天気がよかった
陽にあたって
ポカポカと気持ちがいい
温度とか、明るさとか
身の回りのリアルな情報がある
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/
Webデザイナー、 Tesselに挑戦
Node.jsによるプログラミング
!
Wi-Fi(wifi-cc3000)を内蔵している
!
他のボードと違い、各モジュールの配線が不要
!
JavaScriptはLuaに変換され実行される
(Web, フロントエンドな人にもなじみがある)
!
(非常に貧弱)
!
(楽なことが良いことばかりではない、あと割高感がある)
!
(現状はUSB接続してターミナルよりコマンドで実行)
導入
Tessel本家(おそらく海外)から購入しても、数日で届いた
Tesselを購入
$ npm install tessel
node_modulesにインストールされる
NPMよりtesselモジュールを取得
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ファイルを書いて保存
$ tessel run sample.js
ローカル環境でNode.jsプログラムを実行する感覚でいい
USBで接続してターミナルより実行
DEMO
Wi-Fiを使用する
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
Node.jsなので、HTTPリクエストもしくはWebソケットを実装したい
サーバーへ通信
問題点
Wi-Fiが弱いため、Web Socketで常に送受信するのはつらい
Tesselの容量が少ないため、node_modulesのサイズでボトルネックに
なることも…
よって、Webブラウザと同じ考えで
リッチなことをやるのは無理と考えた方がいい
今回はHTTPリクエストをNodeサーバに飛ばすことを考える
部屋の温度をWebサイトに表示する
TesselからNode.jsサーバ経由でWebサイトへグラフ表示
温度センサー(climate-si7020)を使ってWebサイトに表示
DEMO
カメラで写真を保存する
Tesselを起動させたら即写真を撮るだけのテスト
カメラ(camera-vc0706)を使う
DEMO
$ tessel run camera_sample.js --upload-dir ./
https://forums.tessel.io/t/camera-image-base64-encoding-time/318
なんとも恐ろしい…
画像をBase64でサーバに送りたい、と思ったら…
明るさを感知したら、写真を保存させる
一定以上の光量を検知したら、写真を撮る
光と音センサー(ambient-attx4)とカメラ(camera-vc0706)
カメラ起動 センサー起動
光量のイベント
で待機
必ずonイベントで順を踏むこと
DEMO
まとめ
夢はひろがる
まとめ
もどかしい…
スタンドアロン環境が醍醐味のハードウェアボードなだけに、Web Socket
など存分に使いたいが、現状では落ちまくるため現実的ではない。
致命的…
最悪、Tesselを強制再起動させたい場合のAPIが見つからず、このあたり
はファームウェアアップデートに期待
いつもと違うスキルが必要…
「何でもJSでできる世の中」とうたっても、ハードウェアにはそれなりの
制約があることを実感。
やはりWebブラウザは強力なだけに恵まれているな、と。
我が家のネコ、「ちくわ」です。よろしく。
シカシ、ユメ ハ ヒロガル ネ!
サーボで自動 やり機をつくってみたい
ありがとうございました!
JavaScript(Node.js)で色々なハードウェアモジュールが動くマイコンボー
ド Tessel を手に入れたので詳しく調べてみた - 凹みTips
http://tips.hecomi.com/entry/2014/07/06/235056
橋本商会 » tesselをカメラ付きwebサーバーにする
http://shokai.org/blog/archives/9426
参考にさせてもらいました日本語のTessel記事

More Related Content

PDF
ソースコードをAAに変換するやつやってみた
PPTX
俺と Amazon Elasticsearch Service とスポットインスタンス
PPTX
俺とプログラミング教育
PPTX
ASP.NETで お手軽Ajax実装
PPTX
システム開発は何故揉めるのか
PPTX
3dmu スライド_MUGENUP1211
PDF
#WDF18 エクスペリエンスを繋ぐために
PDF
第2回ExtJSユーザー事例紹介
ソースコードをAAに変換するやつやってみた
俺と Amazon Elasticsearch Service とスポットインスタンス
俺とプログラミング教育
ASP.NETで お手軽Ajax実装
システム開発は何故揉めるのか
3dmu スライド_MUGENUP1211
#WDF18 エクスペリエンスを繋ぐために
第2回ExtJSユーザー事例紹介

Similar to Webデザイナー、 Tesselに挑戦 (20)

PPTX
Chrome拡張で改善 表紙
KEY
ON HTML5 FIELD で書き尽くせなかったこと
PPTX
あたしデザイナだけど"ナントカ.js"と仲良くできたよ
PDF
どんなデータでもキレイに魅せる! 〜HTML5/JavaScriptでグラフを描画する今時の手法〜
PPTX
アンラーニング
PPTX
マイクロソフトにおけるオープンソース戦略 ソフトウェア開発者が実現できること
PDF
デ部会 プロトタイプ
PDF
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
PPTX
Head First Ad Technology and DMP
PPTX
20180621_Node学園LT
PDF
Bootstrapにちょい足しアニメーション@春のJavascript祭り
PDF
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
PDF
WebエンジニアがXR業界へ転職した話
PDF
20200622 webエンジニアのお仕事 ~開発手法と開発フロー~
PDF
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
PDF
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
KEY
Webサイトのようには作れない!Webアプリ設計の考え方
PDF
_s + bootstrapで始めるWordPressテーマ開発入門
PDF
会議室を現場にする! リアルタイム共同編集によるプロトタイピング
PDF
確定申告ってなんでやるの?.pdf
Chrome拡張で改善 表紙
ON HTML5 FIELD で書き尽くせなかったこと
あたしデザイナだけど"ナントカ.js"と仲良くできたよ
どんなデータでもキレイに魅せる! 〜HTML5/JavaScriptでグラフを描画する今時の手法〜
アンラーニング
マイクロソフトにおけるオープンソース戦略 ソフトウェア開発者が実現できること
デ部会 プロトタイプ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Head First Ad Technology and DMP
20180621_Node学園LT
Bootstrapにちょい足しアニメーション@春のJavascript祭り
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
WebエンジニアがXR業界へ転職した話
20200622 webエンジニアのお仕事 ~開発手法と開発フロー~
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Webサイトのようには作れない!Webアプリ設計の考え方
_s + bootstrapで始めるWordPressテーマ開発入門
会議室を現場にする! リアルタイム共同編集によるプロトタイピング
確定申告ってなんでやるの?.pdf
Ad

More from Hideki Akiba (15)

PDF
デザインエンジニア・ボーダーレスな時代を楽しもう!
PDF
ぼっけもんデザイナーへの道
PDF
Creative Cloud デザインツールの便利な8つの機能 - ADC MEETUP ROUND 08 SESSION2 -
PDF
見た目以上に大事なこれからのデザイン
PDF
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
PDF
伝わる!デザインのつくりかた
PDF
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
PDF
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
PDF
Firefox OSアプリ 「ModeView」
PDF
DesignersHack002 presentation
PDF
HTML5 APIを使ったデモとソースの解説
PDF
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
PDF
HTML5でできるカメラアプリを実際に体験しよう
PDF
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
PDF
Html5west
デザインエンジニア・ボーダーレスな時代を楽しもう!
ぼっけもんデザイナーへの道
Creative Cloud デザインツールの便利な8つの機能 - ADC MEETUP ROUND 08 SESSION2 -
見た目以上に大事なこれからのデザイン
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
伝わる!デザインのつくりかた
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Firefox OSアプリ 「ModeView」
DesignersHack002 presentation
HTML5 APIを使ったデモとソースの解説
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
HTML5でできるカメラアプリを実際に体験しよう
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
Html5west
Ad

Webデザイナー、 Tesselに挑戦