感情インタラクションβ~これからのIoTはグラフ化じゃないだろうか~(第6回 #iotlt : 5分)

第6回 #iotlt での発表です。
会場の様子をこころコンパスとWebAudioの音量からHueの色と出力を調整して可視化した発表をしました。

実際のプレゼンは https://i.gyazo.com/f445676f7fc67f02870d8ef724dc6c8e.png こんな感じでスライドをWebページに埋め込んで行いました。

Transcript

1. ײ৘ΠϯλϥΫγϣϯЌ
   株式会社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. Amazon WebσβΠϯΧςΰϦ 1Ґʂ
   ݱ৔ͷϓϩ͕ڭ͑Δ WEBσβΠϯ ৽ɾελϯμʔυ
   ςΫχοΫ37
   એ఻: ॻ੶σϏϡʔ͠·ͨ͠ʂ
   

   View Slide

5. ࠓ೔͸ΈΜͳ͕ؾʹͳͬͯΔ
   Ͱ͋Ζ͏࿩Λ͠·͢ɻ
   ίΠπˠ
   

   View Slide

6. ࠓ೔͸ΈΜͳ͕ؾʹͳͬͯΔ
   Ͱ͋Ζ͏࿩Λ͠·͢ɻ
   ίΠπˠ
   

   View Slide

7. ΫϚJT)VF
   

   View Slide

8. Hueͬͯ? IUUQXXXNFFUIVFDPNKB+1
   ϓϩάϥϜૢ࡞Մೳͳর໌*P5σόΠε
   ɾ8FC"1*+BWBTDSJQUͰ੍ޚͰ͖Δ
   ɾଟ࠼ͳૢ࡞ ৭ɺ໌Δ͞FUD
   
   

   View Slide

9. Q: ͜ͷΫϚ͸ԿΛ͍ͯ͠Δʁ
   

   View Slide

10. A: ձ৔ͷ੝Γ্͕ΓΛՄࢹԽ
    ͍ͯ͠·͢ɻ
    

    View Slide

11. Ͳ͏΍ͬͯΔͷ͔…?
    ਓͷײ৘Λ෼ੳͯ͠
    ΠϯλϥΫγϣϯΛ͍ͯ͠·͢ɻ
    

    View Slide

12. ͜͜Ζίϯύε (by εϚʔτϝσΟΧϧ)
    IUUQTNBSUNFEJDBMKQJDUDPDPSP@DPNQBTT
    ੠͔Βײ৘Λղੳ
    ɾൃ࿩ͷςϯϙɺԻఔɺ
    ͳͲछྨఔͷಛ௃ྔ
    ͔Βࢉग़
    ɾҩྍݱ৔ͳͲͰར༻
    ͞Ε͍ͯΔٕज़
    

    View Slide

13. γεςϜߏ੒ શ෦Javascript!
    ൃ࿩
    WebAudioAPI
    ajax
    Hue
    Cylon.jsͷHueΞμϓλͰ؆୯ૢ࡞
    

    View Slide

14. ͜ͷ࢓૊ΈΛ࢖ͬͯࡢ೔#tritonjsͰσϞ͖ͯ͠·ͨ͠ɻ
    

    View Slide

15. ͜ͷ࢓૊ΈΛ࢖ͬͯࡢ೔#tritonjsͰσϞ͖ͯ͠·ͨ͠ɻ
    

    View Slide

16. ࡢ೔ͱಉ͡಺༰?
    

    View Slide

17. ಉ͡ൃද͸͠ͳ͍ͬ͢ʂ
    σϞΛݟͨਓ͸ҧ͍͕෼͔
    Δϋζʂ
    

    View Slide

18. ΍Γ͔ͨͬͨ͜ͱ͸ษڧձՄࢹԽ
    എܠ: ΠϕϯτΑ͘΍Δ͠ͳΜ͔৘ใ
    ͱΓ͍ͨɻ
    → ͜͜Ζίϯύε࢖ͬͯ੝Γ্͕Γ
    ՄࢹԽ
    

    View Slide

19. ษڧձͷ੝Γ্͕Γ?
    ɾൃ࿩͔ΒऔΕΔײ৘
    ɾԻྔʹΑΔձ৔ͷ্༙͖͕Γ
    ɾπΠʔτ
    ɾ೤ؾ
    ʜͱ͔ͷ৘ใΛ࢖͑Δ͔΋
    ϦΞϧλΠϜʹݟΕͨΒ੝Γ্͕Δ͔΋ͳʂͱ͍͏͜ͱͰ
    

    View Slide

20. ͭ͘Γ·ͨ͠ʂ
    ·్ͩத͔ͩΒЌ
    

    View Slide

21. ͭ͘Γ·ͨ͠ʂ
    ·్ͩத͔ͩΒЌ
    ײ
    ৘
    Ի
    ྔ
    πΠʔτ
    ΍Γ͔ͨͬͨ
    

    View Slide

22. View Slide

23. ɾൃ࿩͔ΒऔΕΔײ৘
    ɾԻྔʹΑΔձ৔ͷ੝Γ্͕Γ
    ɾπΠʔτ
    ɾ೤ؾ
    ։ൃঢ়گ
    ˡࡢ೔
    ˡࠓ೔
    ˡࠓ೔΍Γ͔͚ͨͬͨͲʜ
    ˡ͍͔ͭ΍Γ͍ͨ
    

    View Slide

24. ɾݟ͑ͳ͔ͬͨσʔλͷՄࢹԽ͸ָ͍͠
    ɾσόΠε࿈ܞ͸ׂͱ͔ΜͨΜ
    ɾσʔλूΊͨ͸͍͍͚ͲάϥϑԽ͕
    ໘౗
    ɾYJWFMZతͳαʔϏεधཁ͋Γͦ͏΍ɻ
    ࡞ͬͯΈͨײ૝
    ൃදऀεςʔλε: ࣾձਓೋ೥໨ͷ৽ถΤϯδχΞ
    

    View Slide

25. ·ͱΊ
    )VFͱ͜͜ΖίϯύεͰձ৔੝Γ্͕ΓΛՄࢹԽ
    ͯ͠Έ·ͨ͠ʂϓϨθϯπʔϧతͳ΋ͷΛ࡞੒
    ͜Ε͔Βͷ*P5͸άϥϑԽ͡Όͳ͍͔
    ձٞΛՄࢹԽ
    ਓ࿛ήʔϜ΍ͬͯΈ͍ͨ
    ਫ਼౓ͱ͔৭ʑௐ੔͠ͳ͍ͱ
    ࠓޙ
    

    View Slide

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

    View Slide