SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
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/
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記事

Contenu connexe

Similaire à Webデザイナー、 Tesselに挑戦

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

Similaire à Webデザイナー、 Tesselに挑戦 (20)

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

Plus de Hideki Akiba

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

Plus de Hideki Akiba (15)

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

Webデザイナー、 Tesselに挑戦