Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

n0bisuke
October 15, 2015
1.1k

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

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

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

n0bisuke

October 15, 2015
Tweet

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