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.

2016初夏のJavaScript祭り20160514

1,963 views

Published on

2016初夏のJavaScript祭り
「JavaScriptでデバイス連携してみて出会える技術!広がる知識!」の登壇資料です。

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

2016初夏のJavaScript祭り20160514

  1. 1. 初夏のJavaScript祭 JavaScriptでデバイス連携してみて 出会える技術!広がる知識! ワンフットシーバス 田中正吾
  2. 2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です!
  3. 3. 自己紹介
  4. 4. 田中正吾(たなかせいご) 屋号:ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い 現在に至る。 最近は、JavaScriptやHTML5アニメーション、 スマートフォン演出制作のワークフロー改善に 関わったりしていました。 デジタルサイネージやアプリ制作もやります。
  5. 5. LIGブログのDevRelコーナーに寄稿してます。 (最近、3記事以上書いたのでライターページできた。)
  6. 6. ウォンバットが好きで、その情報収集に WEBの知見や技術を全力で注いでいます。
  7. 7. (豆知識)ウォンバットは、おしりが硬くて、 巣穴をおしりで塞いで外敵から防御します。
  8. 8. 背景
  9. 9. 普段のWEB制作のかたわら デバイス連携する制作もしてる
  10. 10. なぜやるのか? デバイス
  11. 11. 最近言われはじめてるデバイスをつかった 計測→収集→分析はスマートフォンと似ている 計測 収集 分析 デバイス
  12. 12. スマートフォンが多機能・高機能とするなら デバイス連携は、特化した計測 デバイス
  13. 13. つまり、自分が使っているJavaScriptは デバイス連携も可能。 JavaScriptでいろいろ知見広がる。
  14. 14. そんな話をします!
  15. 15. デモ
  16. 16. 早速デモします
  17. 17. リモートサイコロ 1号
  18. 18. サイコロの目がいろいろ連動 (まずモニターでWEB連動)
  19. 19. 磁石でくっつくlittleBitsというデバイスが リモートサイコロ1号が反応。
  20. 20. 1のときは1つLEDが点灯!
  21. 21. 2のときは2つLEDが点灯!!
  22. 22. 3のときは3つLEDが点灯!!!
  23. 23. 4のときは、さらにBluetooth無線化された 別のlittleBitsがうごきます!!!!
  24. 24. リモートサイコロ 1号のしかけ
  25. 25. 中にMESHというデバイス
  26. 26. MESHというデバイスの傾きセンサを アプリで上のにある面を検知
  27. 27. その情報をアプリ経由でWEBに通知
  28. 28. MESHの情報はIFTTTという TwitterといったWEBサービスや いろいろなデバイスをつなぐ サービスで伝えます。
  29. 29. 磁石でくっつくlittleBitsのしかけ
  30. 30. littleBitsはRaspberryPiという小さなPCで サイコロ反応と連動します。
  31. 31. データ蓄積・連絡は MilkcocoaというWEBサービス利用
  32. 32. こんな流れ 中継
  33. 33. いざデモ!
  34. 34. うまくいきますように
  35. 35. 出会える技術!広がる知識!
  36. 36. こんな流れ 中継
  37. 37. JavaScriptで連携しているところ 中継 MESHアプリ WEBサービス 一部Arduino
  38. 38. 一部をのぞいて、かなりJavaScript連携 中継 MESHアプリ WEBサービス 一部Arduino
  39. 39. どんな風にJavaScriptが絡んでいるか
  40. 40. まずはここ 中継 MESHアプリ WEBサービス 一部Arduino
  41. 41. クラウドで気軽にサーバ解説できるHeroku。 NodeJS(express)サーバーを立ててる。 中継 WEBサービス
  42. 42. MESHからの値を使いやすく Milkcocoaに連絡したいので中継させた。 中継 WEBサービス
  43. 43. 「用途に合わせてデータを合わせる」 という知見を持てる 中継 var express = require('express');
  44. 44. 次はこのあたり 中継 MESHアプリ WEBサービス 一部Arduino
  45. 45. デバイス連携はできるだけすぐに 反応を伝えたくなるので リアルタイム通信したくなってくる!
  46. 46. そこでリアルタイム通信を追っていくと WebSocket/SocketIO/MQTTと出会える WebSocket SocketIO MQTT
  47. 47. WebSocket/SocketIO/MQTTは JavaScriptで動かせる! WebSocket SocketIO MQTT var WebSocket = require('ws'); var io = require('socket.io'); var mqtt = require('mqtt');
  48. 48. HTTP通信だと自宅内デバイスを やり取りするときにIP特定しにくく 手間がかかるケースもある(NAT越え)
  49. 49. WebSocket/SocketIO/MQTTは そのあたりも解決しやすい WebSocket SocketIO MQTT
  50. 50. 今回のMilkcocoaはMQTT/WebSocketに対応。 JavaScriptだけでリアルタイム通信が 高速開発できるサービス! 中継 var milkcocoa = new MilkCocoa(" .mlkcca.com");
  51. 51. 今回のMilkcocoaはMQTT/WebSocketに対応。 JavaScriptだけでデータの保存・更新・取得も 高速開発できるサービス!
  52. 52. 「よりリアルタイムに反応させる通信技術」 という知見を持てる
  53. 53. 最後はここ 中継 MESHアプリ WEBサービス 一部Arduino
  54. 54. 一部Arduinoのプログラムを書くが おおむねJavaScriptで制御できる。 (Arduino部分は文字列1でLED1が光る程度のシンプルなもの) 一部Arduino プログラム
  55. 55. 気軽に買えて小さいPC Raspberry Pi は NodeJSが動くのでWEB連携しやすい
  56. 56. ArduinoとNodeJSで PCとハードが会話しやすくなる!
  57. 57. WEBともリアルタイム連携しつつ ハード制御(LED点灯とか)も JavaScriptで一貫してできる 一部Arduino プログラム var serialport = require('serialport'); // ハード制御(シリアル) var express = require('express'); var milkcocoa = new MilkCocoa(" .mlkcca.com");
  58. 58. さらにBluetoothの制御もできるので 今回のBluetoothなlittleBitsも操作可能! var noble = require('noble'); // Bluetooth制御
  59. 59. 「ハードとWEBの橋渡しするライブラリ群」 という知見を持てる
  60. 60. デバイス連携の楽しさ ふりかえり
  61. 61. デバイス連携をしてみると 普段のWEB制作と別のアプローチで 技術を知ることができる
  62. 62. 普段のWEB制作でも触れるかもしれないが 技術の見え方・使い方がちがう (目下の案件重視になりがち)
  63. 63. トイレや適温管理など身近な問題解決や おもしろ反応ネタなど取り組みやすい (やれそうな事例がいろいろ出てきた) 通信機器 RaspberryPiなど 家庭内や会社内ネットワーク
  64. 64. わりと工作がらみをするので 普段とちがうアタマを使っている
  65. 65. 手元でモノが動き、やりとりできるので ディスプレイのなかでの出来事とはちがう体験
  66. 66. さらにいえば、モノのデータを 今回のように手持ちのWEB技術で 可視化するのは楽しい (今回はMilkcocoa+CreateJSで制作しました)
  67. 67. なによりデバイス連携はWEBの技術を 普段とちがう活かし方を知れる。 新しい興味が生まれる可能性を感じる。 家庭内や会社内ネットワーク
  68. 68. 新しい興味はスキルアップの原動力。 そこにJavaScriptでかなり踏み込んでいけます! 家庭内や会社内ネットワーク
  69. 69. デバイス連携楽しいよ! JavaScript楽しいよ!
  70. 70. ご清聴いただきまして ありがとうございました!

×