Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2015年末JavaScript祭ゆく年くる年
さあ!JavaScriptで
デバイスとやりとりするよ!
ワンフットシーバス 田中正吾
私の話はスライドを後ほど共有します。
話す内容に注力いただいて大丈夫です!
自己紹介
田中正吾(たなかせいご)
屋号:ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を
中心にインタラクティブコンテンツを主に行い
現在に至る。
最近は、JavaScriptやHTML5アニメーション、
スマートフォン演出制作の...
デバイスとやりとりするネタですと
最近ウォンバットとIoTの話をしました
さっそくはじめましょう
今回のタイトル
さあ!
JavaScriptと
デバイスとやりとりするよ!
ということで
まずブラウザ上で
JavaScriptボタン
まずブラウザ上で
JavaScriptボタン
$(dom).on(“click”,function(){
// なにか起きるよ!!
})
ブラウザ
(表示側)
このようにJavaScriptは
はじめはブラウザ表示上が主戦場
まずNodeJSの登場で
サーバーサイドもできるように!
ブラウザ
(表示側)
サーバー
(NodeJS)
NodeJS
なんと最近では
NodeJSからハードウェアの
デバイスもつながるようになってきた!
ブラウザ
(表示側)
サーバー
(NodeJS)
デバイス
(NodeJS)
NodeJS
デバイスとは。
引用:
デバイス=リアルの何か
引用:
つまり
リアルの
ボタン
つまり
リアルの何かと
つまり
リアルの何かとやりとりできる!
JavaScriptでのデバイス連携の
しくみをお伝えしていきます
!
デバイス連携する
JavaScriptでのしくみ
今日お伝えするJavaScriptでの
デバイス連携のしくみ
まず、デバイスがPCと会話しやすくする
Arduino(あるでぃーの)というしくみがある
♪
ArduinoだけはJavaScriptでなく
C++風の独自の言語
ArduinoはUSB(シリアルポート)経由で
NodeJSのserialportライブラリと会話ができる
PCと、こういう風に会話できる!
node-searialportのコードの雰囲気
Arduino側から特定の文字が来たら
動作するようにしています
さらに、サーバーとしてのNodeJS(express)も
加わるとWEBとの相性がとてもよくなります
NodeJS
加えて、リアルタイムに強いSocket通信が
NodeJS(socket.io)で扱いやすい
NodeJSの
司令塔サーバー
デバイスの動きをすぐに反映できる。
WEBの反応をすぐに伝えられる。
NodeJSの
司令塔サーバー
司令塔サーバー側の
NodeJSコードの雰囲気
司令塔サーバーで中継して
WEBとデバイスでいろいろやりとりできる!
NodeJSの
司令塔サーバー
たくさんつくれば、
いろいろ測れる、うごかせる!
余談:おのおのの接続ポイントでの実装は
見通しやすくするためメリハリをつけてます
(ローカルサーバー→司令塔に実装多めにしてる)
local
実装小
実装小 実装中
実装大
私のブログに今回の話に関連しそうな記事を
ピックアップしました。よろしければ。
URL : http://www.1ft-seabass.jp/memo/
デバイスの動き
さて今回のデバイス①
デバイス1号(でばいすいちごう)
デバイス1号(でばいすいちごう)
光ったりする!
ボタン押せたりする!
中身はこんな感じ
littleBitsという磁石でつないで
電子工作できるデバイスで構成
カラーごとの役割を意識して
つなげて磁石でパチパチつなげて設計できる
電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT
そんなlittleBitsには
ArduinoもあるのでPCと連携しやすい
さきほどの連携図と照らし合わせると
デバイス+Arduino部分は以下になります
PCの役割のところは、今回は
Raspberry PiというミニPCにやってもらう
さきほどの連携図と照らし合わせると
PC部分がRaspberry Piになります
そして、SORACOMがLTE/3G接続を担当
Raspberry Pi
FS01BU +
SORACOM Air
(通信をする)
Raspberry Pi
(サーバー)
SORACOMで少ない初期コストで
デバイスの「つながる」を実現
これを箱を組み立てて
これを箱を組み立てて
実装してGO!!!
いよいよデモ
デバイス1号
ボタンでWEBと連携して
画面がしゃべります
(CreateJS+Web Speech API)
画面がしゃべります
(CreateJS+Web Speech API)
デモ
littleBitsはこんなやりとり
IFTTT(Maker Channel)を利用し
スマホ連携で光ります
デモ
littleBitsはこんなやりとり
うまくいってほしい
ちょっと準備しまーす
ON
デバイス②
デバイス2号(でばいすにごう)
組み立てる
サーボ矢印と赤外線センサの構成
サーボ矢印が私のTwitter投稿と反応
今からのみんなの#jsfes投稿にも
反応するかどうか!?
デモ
赤外線リモコンともやりとり
画面がしゃべります
(CreateJS+Web Speech API)
画面がしゃべります
(CreateJS+Web Speech API)
デモ
実は操作したものはSlackにもログ連携
うまくいってほしい
まとめ
このようにやりとりできると
いろいろおもしろい!
今まで見たデモから
発展させてみる
デバイス→JavaScript→WEBの例
自分の知りたい現実のデータ貯めて
遠くでいつでも見ることができる!
家の温度
自分の知りたい現実のデータ貯めて
遠くでいつでも見ることができる!
家の温度
WEBのよいところ
自動・蓄積・遠隔
WEB→JavaScript→デバイスの例
WEBの情報をデバイスに
反応させることもできる!
デバイス
盛り上がってるよ
SNSなど
WEBの情報をデバイスに
反応させることもできる!
デバイス
盛り上がってるよ
SNSなど
WEBのよいところ
収集・通知・見える化
➔JavaScriptでデバイスとWEBが連携しやすく
なってきた。サーバーや表示も絡めて、いろ
いろ楽しい!
➔JavaScriptでWEBのよいところ(自動・蓄
積・遠隔・収集・見える化など)をデバイス
やセンサーと絡めると新しい可能性が!...
2016年ぜひJavaScriptで
デバイスとやりとりしてみてください!
ご清聴いただきまして
ありがとうございました!
Upcoming SlideShare
Loading in …5
×

さあ!Javascriptでデバイスとやりとりするよ!

5,596 views

Published on

年末JavaScript祭ゆく年くる年 in IDCフロンティア の登壇資料です。

「さあ!Javascriptでデバイスとやりとりするよ!」

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます!
・シルエットデザインhttp://kage-design.com/
・human pictogram 2.0http://pictogram2.com/

Published in: Technology
  • You can try to use this service ⇒ www.HelpWriting.net ⇐ I have used it several times in college and was absolutely satisfied with the result.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If we are speaking about saving time and money this site ⇒ www.WritePaper.info ⇐ is going to be the best option!! I personally used lots of times and remain highly satisfied.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

さあ!Javascriptでデバイスとやりとりするよ!

  1. 1. 2015年末JavaScript祭ゆく年くる年 さあ!JavaScriptで デバイスとやりとりするよ! ワンフットシーバス 田中正吾
  2. 2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です!
  3. 3. 自己紹介
  4. 4. 田中正吾(たなかせいご) 屋号:ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い 現在に至る。 最近は、JavaScriptやHTML5アニメーション、 スマートフォン演出制作のワークフロー改善に 関わったりしていました。 デジタルサイネージやアプリ制作もやります。
  5. 5. デバイスとやりとりするネタですと 最近ウォンバットとIoTの話をしました
  6. 6. さっそくはじめましょう
  7. 7. 今回のタイトル
  8. 8. さあ!
  9. 9. JavaScriptと
  10. 10. デバイスとやりとりするよ!
  11. 11. ということで
  12. 12. まずブラウザ上で JavaScriptボタン
  13. 13. まずブラウザ上で JavaScriptボタン $(dom).on(“click”,function(){ // なにか起きるよ!! })
  14. 14. ブラウザ (表示側) このようにJavaScriptは はじめはブラウザ表示上が主戦場
  15. 15. まずNodeJSの登場で サーバーサイドもできるように! ブラウザ (表示側) サーバー (NodeJS) NodeJS
  16. 16. なんと最近では
  17. 17. NodeJSからハードウェアの デバイスもつながるようになってきた! ブラウザ (表示側) サーバー (NodeJS) デバイス (NodeJS) NodeJS
  18. 18. デバイスとは。 引用:
  19. 19. デバイス=リアルの何か 引用:
  20. 20. つまり リアルの ボタン
  21. 21. つまり リアルの何かと
  22. 22. つまり リアルの何かとやりとりできる!
  23. 23. JavaScriptでのデバイス連携の しくみをお伝えしていきます !
  24. 24. デバイス連携する JavaScriptでのしくみ
  25. 25. 今日お伝えするJavaScriptでの デバイス連携のしくみ
  26. 26. まず、デバイスがPCと会話しやすくする Arduino(あるでぃーの)というしくみがある ♪
  27. 27. ArduinoだけはJavaScriptでなく C++風の独自の言語
  28. 28. ArduinoはUSB(シリアルポート)経由で NodeJSのserialportライブラリと会話ができる
  29. 29. PCと、こういう風に会話できる!
  30. 30. node-searialportのコードの雰囲気
  31. 31. Arduino側から特定の文字が来たら 動作するようにしています
  32. 32. さらに、サーバーとしてのNodeJS(express)も 加わるとWEBとの相性がとてもよくなります NodeJS
  33. 33. 加えて、リアルタイムに強いSocket通信が NodeJS(socket.io)で扱いやすい NodeJSの 司令塔サーバー
  34. 34. デバイスの動きをすぐに反映できる。 WEBの反応をすぐに伝えられる。 NodeJSの 司令塔サーバー
  35. 35. 司令塔サーバー側の NodeJSコードの雰囲気
  36. 36. 司令塔サーバーで中継して WEBとデバイスでいろいろやりとりできる! NodeJSの 司令塔サーバー
  37. 37. たくさんつくれば、 いろいろ測れる、うごかせる!
  38. 38. 余談:おのおのの接続ポイントでの実装は 見通しやすくするためメリハリをつけてます (ローカルサーバー→司令塔に実装多めにしてる) local 実装小 実装小 実装中 実装大
  39. 39. 私のブログに今回の話に関連しそうな記事を ピックアップしました。よろしければ。 URL : http://www.1ft-seabass.jp/memo/
  40. 40. デバイスの動き
  41. 41. さて今回のデバイス①
  42. 42. デバイス1号(でばいすいちごう)
  43. 43. デバイス1号(でばいすいちごう)
  44. 44. 光ったりする!
  45. 45. ボタン押せたりする!
  46. 46. 中身はこんな感じ
  47. 47. littleBitsという磁石でつないで 電子工作できるデバイスで構成
  48. 48. カラーごとの役割を意識して つなげて磁石でパチパチつなげて設計できる 電源が流れて POWER スイッチを押すと INPUT ライトがつくよ OUTPUT
  49. 49. そんなlittleBitsには ArduinoもあるのでPCと連携しやすい
  50. 50. さきほどの連携図と照らし合わせると デバイス+Arduino部分は以下になります
  51. 51. PCの役割のところは、今回は Raspberry PiというミニPCにやってもらう
  52. 52. さきほどの連携図と照らし合わせると PC部分がRaspberry Piになります
  53. 53. そして、SORACOMがLTE/3G接続を担当
  54. 54. Raspberry Pi FS01BU + SORACOM Air (通信をする) Raspberry Pi (サーバー) SORACOMで少ない初期コストで デバイスの「つながる」を実現
  55. 55. これを箱を組み立てて
  56. 56. これを箱を組み立てて
  57. 57. 実装してGO!!!
  58. 58. いよいよデモ
  59. 59. デバイス1号
  60. 60. ボタンでWEBと連携して
  61. 61. 画面がしゃべります (CreateJS+Web Speech API)
  62. 62. 画面がしゃべります (CreateJS+Web Speech API)
  63. 63. デモ
  64. 64. littleBitsはこんなやりとり
  65. 65. IFTTT(Maker Channel)を利用し スマホ連携で光ります
  66. 66. デモ
  67. 67. littleBitsはこんなやりとり
  68. 68. うまくいってほしい
  69. 69. ちょっと準備しまーす ON
  70. 70. デバイス②
  71. 71. デバイス2号(でばいすにごう)
  72. 72. 組み立てる
  73. 73. サーボ矢印と赤外線センサの構成
  74. 74. サーボ矢印が私のTwitter投稿と反応
  75. 75. 今からのみんなの#jsfes投稿にも 反応するかどうか!?
  76. 76. デモ
  77. 77. 赤外線リモコンともやりとり
  78. 78. 画面がしゃべります (CreateJS+Web Speech API)
  79. 79. 画面がしゃべります (CreateJS+Web Speech API)
  80. 80. デモ
  81. 81. 実は操作したものはSlackにもログ連携
  82. 82. うまくいってほしい
  83. 83. まとめ
  84. 84. このようにやりとりできると いろいろおもしろい!
  85. 85. 今まで見たデモから 発展させてみる
  86. 86. デバイス→JavaScript→WEBの例
  87. 87. 自分の知りたい現実のデータ貯めて 遠くでいつでも見ることができる! 家の温度
  88. 88. 自分の知りたい現実のデータ貯めて 遠くでいつでも見ることができる! 家の温度 WEBのよいところ 自動・蓄積・遠隔
  89. 89. WEB→JavaScript→デバイスの例
  90. 90. WEBの情報をデバイスに 反応させることもできる! デバイス 盛り上がってるよ SNSなど
  91. 91. WEBの情報をデバイスに 反応させることもできる! デバイス 盛り上がってるよ SNSなど WEBのよいところ 収集・通知・見える化
  92. 92. ➔JavaScriptでデバイスとWEBが連携しやすく なってきた。サーバーや表示も絡めて、いろ いろ楽しい! ➔JavaScriptでWEBのよいところ(自動・蓄 積・遠隔・収集・見える化など)をデバイス やセンサーと絡めると新しい可能性が! まとめ
  93. 93. 2016年ぜひJavaScriptで デバイスとやりとりしてみてください!
  94. 94. ご清聴いただきまして ありがとうございました!

×