IoTビジュアライズ今昔 (第8回 #iotlt : 5分)

Freeboardでビジュアライズをいい感じにする話。

PubNub、Dweet.io、Milkcocoaもいいね。

Transcript

1. *P5ϏδϡΞϥΠζࠓੲ
   株式会社LIG  菅原  のびすけ    
   @n0bisuke  
    sugawara.ryousuke
   d͜Ε͔Βͷ*P5͸άϥϑԽ͡Όͳ͍ͩΖ͏͔d
   

   View Slide

2. ࣗݾ঺հ
   ੁݪ ͷͼ͚͢ LIG inc. ΤϯδχΞ (৽ଔ2೥໨ʹ)
   ग़਎ٶ৓ੜ·Εؠखҭͪ
   ಛٕΘΜͦ͜͹ ഋ෼
   
   Ωʔϫʔυ
   .JMLDPDPBɺ(`TΞΧσϛʔɺՈ௞ԁ
   #BB4 *P5 ϦΞϧλΠϜ௨৴ͳͲ͕޷͖
   ࠷ۙ͸ςΫχΧϧϥΠςΟϯά͕૿͖͑ͯͨ
   

   View Slide

3. ࠷ۙ͸IoTྖҬʹ΋ྗೖΕͯ·͢ɻ
   ͓΋͠ΖϝσΟΞΛ͍࣋ͬͯΔWeb੍࡞ձࣾ
   

   View Slide

4. IoTྖҬ(͕த৺ʹͳΓͦ͏)ͰͷϝσΟΞ΍
   ϓϩϞʔγϣϯ΋΍͍͖ͬͯ·͢ɻ
   ࢀߟ: ՝֎׆ಈͰษڧձΛओ࠵͍ͯͨ͠Βձࣾͷࣄۀʹͳͬͨ࿩
   #IoTLT http://liginc.co.jp/183367
   (͍͍Ͷ਺ 800௒͑·
   ͨ͠ɻ͏Ε͍͠)
   

   View Slide

5. ࠓ೔͸ IoT/ϏδϡΞϥΠζपΓ
   ʹࢸΔ·Ͱͷ࿩Ͱ͢ɻ
   

   View Slide

6. IoTͱσʔλϏδϡΞϥΠζ
   ͷ͜Ε·Ͱɻ
   

   View Slide

7. IoTͷྲྀΕҎલɻ
   Webͷਓ͕ηϯαʔσʔλΛѻ͏
   બ୒ࢶ͸΄΅ߟ͑ΒΕͳ͔ͬͨ
   IoT ݪ࢝࣌୅ (~BC6000)
   

   View Slide

8. Webٕज़Ͱѻ͑ΔϚΠίϯϘʔυ
   ීٴʹΑΓɺ؆୯ʹ
   ηϯαʔσʔλΛWebʹͭͳ͛Δ
   ͜ͱ͕ग़དྷΔΑ͏ʹͳΓ·ͨ͠ɻ
   IoT ݹ୅ (BC2000)
   

   View Slide

9. େྔͷσʔλ͕ऩू͞Εͯ
   ׆༻Λߟ͑ΔϑΣʔζ΁
   IoT தੈ (AC500)
   ػցֶशͱ͔
   

   View Slide

10. ׆༻͢Δʹ͋ͨΓɺσʔλΛ
    ϏδϡΞϥΠζ͍ͨ͠ͱ͍͏
    χʔζ͕ߴ·͍ͬͯ·͢ɻ
    IoT ۙ୅(2015)
    ※ը૾͸શؔ͘܎͋Γ·ͤΜɻ
    

    View Slide

11. ·ͱΊΔͱ͜Μͳײ͡
    *P5ͷྲྀΕͰϚΠίϯϘʔυͰηϯαʔσʔλΛ؆୯ʹ࢖
    ͏͜ͱ͕ग़དྷΔΑ͏ʹͳΓ·ͨ͠ɻ
    ϚΠίϯϘʔυ͕8FCٕज़Ͱѻ͑ΔΑ͏ʹͳΓɺ؆୯ʹη
    ϯαʔσʔλΛ8FCʹͭͳ͛Δ͜ͱ͕ग़དྷΔΑ͏ʹͳΓ·͠
    ͨɻ
    େྔͷσʔλ͕ऩू͞Εͯ׆༻Λߟ͑ΔϑΣʔζʹͳΓ·
    ͨ͠ɻ
    ׆༻͢Δʹ͋ͨΓɺσʔλΛϏδϡΞϥΠζ͍ͨ͠ͱ͍͏
    χʔζ͕ߴ·͍ͬͯ·͢ɻ
    

    View Slide

12. …ϏδϡΞϥΠζͬͯ
    ͚ͬ͜͏େมɻ
    IoT ݱ୅ (2015)
    (D3.js, WebGL, Canvas… ͦͬͪ·Ͱखग़͢..?)
    

    View Slide

13. ઌ೔ɺ͜Μͳ΋ͷΛ࡞Γ·ͨ͠ɻ
    (௧ײͨ͠খ࿩)
    

    View Slide

14. Edison + ਓײηϯα
    Edison ਓײηϯα
    

    View Slide

15. ਓײηϯαͰਓͷग़ೖΓΛՄࢹԽ
    

    View Slide

16. ߏ੒͸͜Μͳײ͡
    MRAA
    Milkcocoa
    Chart.js
    σʔλΠϯϓοτ σʔλΞ΢τϓοτ
    

    View Slide

17. දଆ͕ҙ֎ͱͭΒ͍
    MRAA
    Milkcocoa
    Chart.js
    σʔλΠϯϓοτ σʔλΞ΢τϓοτ
    

    View Slide

18. IoT/σʔλϏδϡΞϥΠζ͸
    Ξ΢τϓοτଆ͕ҙ֎ͱπϥΠ
    

    View Slide

19. ৼΓฦΓɺIoTLT vol6Ͱͷ࿩
    “ษڧձͷ੝Γ্͕ΓΛϦΞϧλΠϜʹՄࢹԽͨ͠࿩”
    Λ͠·ͨ͠ɻ
    

    View Slide

20. ৼΓฦΓɺIoTLT vol6Ͱͷ࿩
    ՄࢹԽͷ෦෼͍͍ײ͡
    ʹ΍ͬͯ͘ΕΔαʔϏ
    εͳ͍͔ͳ͊
    ͭ
    @n0bisuke
    @kiyopikko
    

    View Slide

21. IUUQGSFFCPBSEJP
    freeboard
    

    View Slide

22. freeboard
    ɾϓϩάϥϛϯάෆཁ
    ɾσβΠϯෆཁ
    ɾઃఆ͢Δ͚ͩͰσʔλΛϏδϡΞϥΠζ
    (άϥϑԽ)ͯ͘͠ΕΔ
    ɾάϥϑͷछྨ΋બ΂Δ
    ɾσʔλͷΠϯϓοτϦιʔε΋બ΂Δ
    (֎෦αʔϏεՄ)
    ׂͱٻΊ͍ͯͨ෺ͷཧ૝ܗʹ͍ۙ
    

    View Slide

23. ͜Μͳײ͡
    

    View Slide

24. ࿈ܞͯ͠ΔαʔϏε (ൈਮ)
    PubNub Dweet.io
    SDK͕ଟ࠼!
    ొ࿥ෆཁʂ
    ɾ͍ͮΕ΋Node.jsͷSDK͕͋ΓWeb։ൃͳϊϦͰར༻Մೳ
    ɾαʔόʔ΍DBΛ༻ҙͤͣʹɺ
    ϦΞϧλΠϜʹσʔλΛڞ༗/อଘ͕ग़དྷΔBEαʔϏε(BaaS)
    

    View Slide

25. DEMO
    

    View Slide

26. ͖ͬ͞ͷ࿩ʹ΋ͲΔͱ
    

    View Slide

27. ΍Γ͔ͨͬͨ͜ͱ
    ΦϑΟεʹ౔೔ग़ۈ͍ͯ͠Δਓ͕͍
    ͨΒ֬ೝ(ͦͯ͠։͚ͯ΋Β͍͍ͨ)
    ΦϑΟεϏϧ͕౔೔։͔ͳ͍ɻ
    

    View Slide

28. ϑϧεΫϥονͩͱ͜ΜͳΠϝʔδ
    ΦϑΟεʹ౔೔ग़ۈ͍ͯ͠Δਓ֬ೝ
    ਓײηϯα ϚΠίϯϘʔυ
    αʔόʔαΠυϓϩάϥϜ
    αʔόʔαΠυϓϩάϥϜ
    σʔλϕʔε
    σβΠϯ
    ϑϩϯτΤϯυϓϩάϥϜ (JavaScript)
    Πϯϑϥ༻ҙ
    ίʔσΟϯά (HTML/CSS)
    ΦϑΟεͷਓΛ֬ೝ
    

    View Slide

29. ϑϧεΫϥονͩͱ͜ΜͳΠϝʔδ
    ΦϑΟεʹ౔೔ग़ۈ͍ͯ͠Δਓ֬ೝ
    ਓײηϯα ϚΠίϯϘʔυ
    αʔόʔαΠυϓϩάϥϜ
    αʔόʔαΠυϓϩάϥϜ
    σʔλϕʔε
    σβΠϯ
    ϑϩϯτΤϯυϓϩάϥϜ (JavaScript)
    Πϯϑϥ༻ҙ
    ίʔσΟϯά (HTML/CSS)
    ΦϑΟεͷਓΛ֬ೝ
    खॱଟ͍Αɻɻɻ
    (͜͜Λૣ͘ɾखܰʹ͍ͨ͠ʂ)
    

    View Slide

30. ͏·͘WebαʔϏε࢖͍·͠ΐ
    ਓײηϯα ϚΠίϯϘʔυ
    αʔόʔαΠυϓϩάϥϜ
    αʔόʔαΠυϓϩάϥϜ
    σʔλϕʔε
    σβΠϯ
    ϑϩϯτΤϯυϓϩάϥϜ (JavaScript)
    Πϯϑϥ༻ҙ
    ίʔσΟϯά (HTML/CSS)
    

    View Slide

31. ͏·͘WebαʔϏε࢖͍·͠ΐ
    ਓײηϯα ϚΠίϯϘʔυ
    αʔόʔαΠυϓϩάϥϜ
    αʔόʔαΠυϓϩάϥϜ
    σʔλϕʔε
    σβΠϯ
    ϑϩϯτΤϯυϓϩάϥϜ (JavaScript)
    Πϯϑϥ༻ҙ
    ίʔσΟϯά (HTML/CSS)
    

    View Slide

32. IoT͸ྖҬ͕޿͍͔Β
    ؾ࣋ͪ΍࣮૷Օॴ͕ൃࢄ͕ͪ͠ɻ
    

    View Slide

33. ֎෦αʔϏεΛ׆༻ͯ͠
    ࣮ݱ͍ͨ͜͠ͱʹूத͠·͠ΐ͏ʂ
    

    View Slide

34. Ұ౓ลΓΛݟ౉ͯ͠ɺ
    ೰Ή΂͖ͱ͜ΖͰ೰΋͏ʂ
    

    View Slide

35. ·ͱΊ
    ɾϏδϡΞϥΠζ·Ͱࣗ෼Ͱ΍Δͷ͸େม
    ɾ'SFFCPBSE͸Ξ΢τϓοτΛ؆୯ʹग़དྷΔ
    ɾ1VC/VC %XFFUJP .JMLDPDPB
    ɾαʔϏεΛ׆༻ͯ͠ɺ
    ࣮ݱ͍ͨ͜͠ͱΛ࣮ݱ͢ΔͨΊͷ࠷దղΛʂ
    

    View Slide

36. -*(͕αʔϏε੝Γ্͛·͢Αɻ
    ɾٕज़ܥͳࣥචͨ͠Γ
    ɾΠϕϯτ։͍ͨΓ
    ɾొஃͨ͠Γ
    ɾΠϯλʔϯ΍ΞϧόΠτืू͠
    ͯ·͢ʂ
    ࠙਌ձͰ੠͔͚͍ͯͩ͘͞ʙ
    Ҏ্Ͱ͢ʂ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    ࢓ࣄతͳ࿩ɻ
    

    View Slide