情報メディア入門III 2022 ヒューマンコンピュータインタラクション / IM3-2022

2022年9月26日(月)北海道情報大学 情報メディア学科「情報メディア入門III」の講義資料

Transcript

1. 2022.09.26
   ౬ଜ ཌྷ
   !"#$%&%'"#()%(*+,-%
   ./0102345
   /01063.789:8;873<=3>=:?
   ৘ใϝσΟΞೖ໳III
   

   View Slide

2. %&'(
   • ౬ଜ ཌྷ (@yumu19)
   • ৘ใϝσΟΞֶՊ ।ڭत (2021/04ʙ)
   • ઐ໳͸৘ใՊֶ
   • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ
   • ϢϏΩλείϯϐϡʔςΟϯά
   • ΤϯλςΠϯϝϯτίϯϐϡʔςΟϯά
   • όʔνϟϧϦΞϦςΟ
   • ωοτϫʔΫ
   3
   

   View Slide

3. )*+,-
   • VRαοΧʔ࡞ઓ൫
   • iPadͰࢦࣔͨ͠બख഑ஔΛHMDʹͯҰਓশࢹ఺ө૾Λఏࣔ
   4
   

   View Slide

4. ./+0123
   • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ
   • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯͱ͸
   • ݚڀ঺հ
   • ֶձҎ֎ͷൃදɾ৘ใऩू
   • ҰݟςΫϊϩδʔܥͷ࿩͕ଟΊʹݟ͑Δ͔΋͠Ε·ͤ
   Μ͕ɺσβΠϯͷ࿩Ͱ΋͋Γ·͢
   5
   

   View Slide

5. 4567898:56;<8;=>?@8A!
   6
   ਓؒͱίϯϐϡʔλͷؔ܎ੑʹ͍ͭͯͷݚڀ෼໺Ͱ͋Δʢͬ͘͟Γʣ
   Human
   ਓؒ
   Computer
   ίϯϐϡʔλ
   Interaction
   ΠϯλϥΫγϣϯ
   HCIͱུ͞ΕΔ
   

   View Slide

6. 4567898:56;<8;=>?@8+,-A!
   • ਓ͕ؒίϯϐϡʔλΛ࢖͏ͨΊͷΠϯλϑΣʔε(ڥք)ͷݚڀ
   • ৽͍͠ΠϯλϑΣʔεͷݚڀ։ൃ
   • ΠϯλϑΣʔεʹؔ͢Δௐࠪݚڀ
   • ίϯϐϡʔλ͕ਓؒʹ༩͑ΔӨڹͷݚڀʢ৺ཧֶతݚڀʣ
   • ίϯϐϡʔλ͕ਓؒͷ׆ಈΛࢧԉ͢ΔγεςϜͷݚڀ
   • ͳͲ
   • ͱͯ΋෯޿͍
   7
   

   View Slide

7. <8;BC6D
   • 1) ϋʔυ΢ΣΞΠϯλϑΣʔε
   • ػցͱػցͷڥք
   • USBɺHDMIͳͲ
   • 2) Application Programming Interface (API)
   • αʔόͱΫϥΠΞϯτͷڥք
   • ϝΠϯϓϩάϥϜͱϥΠϒϥϦͷڥք
   • 3) User Interface (UI)
   • ίϯϐϡʔλΛ࢖͏ਓͱίϯϐϡʔλͷڥք 8
   ৘ใٕज़(IT)ͷੈքͰΑ͘ొ৔͢ΔΠϯλϑΣʔε͸
   ࣄ෺΍ྖҬͳͲΛ෼͚Δڥ໨ͷ͜ͱ ڥք - Wikipedia (2021/06/14Ӿཡ)
   ڥքɿ
   ࠓ೔͸͜Ε
   

   View Slide

8. <8;BC6D
   • ೖྗΠϯλϑΣʔεͱग़ྗΠϯλϑΣʔε
   • ೖྗΠϯλϑΣʔε
   • Ϛ΢εɺΩʔϘʔυͳͲ
   • ग़ྗΠϯλϑΣʔε
   • σΟεϓϨΠɺεϐʔΧʔͳͲ
   9
   

   View Slide

9. E6F<8;BC6DGHIJK
   10
   Ϩάβ७ਖ਼ΦϓγϣϯϦϞίϯ
   ʛςϨϏʛREGZAɿ౦ࣳ
   https://www.regza.com/
   regza/option/remo/
   ER-W16 | ిࢠϨϯδ/ΦʔϒϯϨϯδ
   | ౦ࣳϥΠϑελΠϧגࣜձࣾ
   https://www.toshiba-lifestyle.com/
   jp/microwaves/er-w16/
   ιϑτ΢ΣΞ (ը໘) ϋʔυ΢ΣΞ (Ϙλϯ)
   

   View Slide

10. <8;BC6D$LMNOP,-+Q
    • େᆘ༸հɼബӋେथɼࢁத঵ଠɼٶԼ๕໌ɽը໘֯ͱը໘୺ͷλʔήοτ഑ஔ͕
    ૢ࡞࣌ؒʹ༩͑ΔӨڹɼݚڀใࠂώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ
    ʢHCIʣɼVol.2022-HCI-197ɼIssue.1ɼNo.55ɼpp.1-8ɼ2022ɽ
    11
    

    View Slide

11. RS<8;BC6D+TU
    12
    [CHI2020] Norimaki Synthesizer: Taste Display Using Ion Electrophoresis in Five Gels - YouTube
    https://www.youtube.com/watch?v=7HIm4LoAZxU
    

    View Slide

12. VWX+,-
    13
    [Preview] Patch-O: Shape Changing Woven Patches for On Body Actuation - YouTube
    https://www.youtube.com/watch?v=l9x-HROUfy0
    

    View Slide

13. YZ[Z\]^$_N`abcDde<
    14
    ArticuLev: An Integrated Self-Assembly Pipeline for Articulated Multi-Bead Levitation Primitives - YouTube
    https://www.youtube.com/watch?v=jnQEMg_iwQk
    

    View Slide

14. fghiN98:56;HjklmnoK
    15
    Logic Bonbon: Food as Computational Artifact - YouTube
    https://www.youtube.com/watch?v=U0K7quCUzT8
    

    View Slide

15. pqr+sbcDde<
    16
    BubBowl: Display Vessel Using Electrolysis Bubbles in Drinkable Beverages - YouTube
    https://www.youtube.com/watch?v=QDoqyS9K7NE
    

    View Slide

16. tuvwxyz{|}<8;BC6D
    17
    Zooids: Building Blocks for Swarm User Interfaces - YouTube
    https://www.youtube.com/watch?v=8Ik7V_QH5wk
    

    View Slide

17. ~ÄÅ2+ÇWyrkÉÑ+:8ÖÜá
    18
    Elevate: A Walkable Pin-Array for Large Shape-Changing Terrains - YouTube
    https://www.youtube.com/watch?v=R1NzSW3MdPw
    

    View Slide

18. ~àâäãåAçéè+Lêë+OP
    19
    More Kawaii than a Real-Person Streamer: Understanding How the Otaku Community Engages with and ... - YouTube
    https://www.youtube.com/watch?v=IuMhbo0MZrU
    

    View Slide

19. <=Dxíìîï
    20
    Yi-Ching Huang, Jerry Yu-Heng Chan, and Jane Hsu. 2018. Reflection before/after Practice: Learnersourcing for Drawing
    Support. In Extended Abstracts of the 2018 CHI Conference on Human Factors in Computing Systems (CHI EA '18)
    

    View Slide

20. ñ8Dóòôöîï?Dõú
    21
    ଟࢹ఺μϯεө૾ͷΠϯλϥΫςΟϒฤूγεςϜ - YouTube
    https://www.youtube.com/watch?v=IzhDQhCcnx4
    

    View Slide

21. ùûü†°¢£§,-+•¶ö#N+ß
    • ʲ௒ΦεεϝʳTwitter @shiropen2 ΛϑΥϩʔ
    • ࠃ಺ͷγϯϙδ΢ϜΛݟΔ(YouTube഑৴ͰແঈࢹௌՄ)
    • EC(ΤϯλςΠϯϝϯτίϯϐϡʔςΟϯάγϯϙδ΢Ϝ)
    • WISS
    • ΠϯλϥΫγϣϯ
    • ࠃࡍձٞ(CHI, UIST, SIGGRAPH)ͷςΟβʔಈըΛݟΔ
    • ࠃࡍձٞ(CHI, UIST, SIGGRAPH)ͷษڧձ(೔ຊޠ)ʹࢀՃ͢Δ
    22
    

    View Slide

22. •¶®bc©™´+L¨01
    • σβΠϯܥ΋ςΫϊϩδʔܥ΋෯޿ؔ͘܎͋Δ
    • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯಛ࿦ʢେֶӃʣ
    • େֶӃਐֶ͠Α͏ʂ
    • ৽͍͠ΠϯλϑΣʔεͷ։ൃʹ͸ϋʔυ΢ΣΞ։ൃͷεΩϧ͕͋
    Δͱ͍͍
    • → ϝσΟΞϓϩάϥϛϯάԋश (2೥ޙظ)
    23
    

    View Slide

23. ®bc©du≠=Æ8≠lØGH∞±≤≥K
    • ArduinoΛ࢖ͬͯϑΟδΧϧίϯϐϡʔςΟϯάΛֶͿ
    • LEDɺηϯαɺϞʔλͳͲͷ࢖͍ํΛֶͿ
    • Tinkercad (͘͢͝ྑ͘ग़དྷͯΔγϛϡϨʔλ) ΋׆༻
    24
    

    View Slide

24. ¥+µ∂ë∑Æ
    • ʮΞΠσΞΛܗʹ͢ΔʯΛςʔϚʹ΋ͷͮ͘ΓΛߦ͏Jθϛ(ࣗओθϛ)
    • ୲౰ڭһɿ⁋ ॱฏɾ౬ଜ ཌྷ
    • ݄1ճ։࠵
    • ࣍ճ 10/14(ۚ) 6ߨ ˏ ϓϩδΣΫτߨٛࣨ(༧ఆ)
    • Twitter: @HIU_Maker
    25
    

    View Slide

25. ,-!∏+π$`∫+ß
    • Θ͔Βͳ͍ (※ݚڀςʔϚʹΑΓ·͢)
    • 3೥ޙʹ໾ʹཱ͔ͭ΋͠Εͳ͍͠ɺ50೥ޙʹ໾ʹཱ͔ͭ΋͠Εͳ͍͠ɺ໾ʹཱͨͳ͍͔΋͠
    Εͳ͍
    • কདྷ໾ʹཱͭ΋ͷ͕Կ͔͸୭ʹ΋Θ͔Βͳ͍
    • ඞཁʹͳ͔ͬͯΒݚڀͯ͠͸ؒʹ߹Θͳ͍
    • ྫɿiPhone͕Ͱ͖Δͣͬͱલ͔ΒϚϧνλονͷݚڀ͸͞Ε͍ͯͨ
    26
    Rekimoto, SmartSkin: An Infrastructure for Freehand Manipulation on Interactive Surfaces (2002)
    

    View Slide

26. ªºÖ,-MN+ß
    • ਓྨʹͱͬͯ
    • ஌ࣝͷ֦େ
    • ͍ͭͲ͜ͰͲΜͳ஌͕ࣝ໾ʹཱͭͷ͔Θ͔Βͳ͍
    • ࡂ֐ͳͲ
    • ৽͍ٕ͠ज़͕ੜ·ΕΔͱ๛͔ʹͳΔ
    • ࢿຊओٛͷ੒ཱ͸ٕज़ֵ৽͕લఏ
    • େֶੜʹͱͬͯ
    • ੜ্͖͍ͯ͘Ͱ໾ཱͭεΩϧΛຏ͘͜ͱ͕Ͱ͖Δ
    • ະ஌ͷঢ়ଶ͔Βௐ΂Δʢจݙௐࠪʣ
    • ஌ࣝͷ஍ਤΛඳ͘ʢ஌ࣝɾ৘ใͷ੔ཧʣ
    • ԾઆͷཱҊͱݕূ
    • ਓʹ఻͑Δʢจষͷॻ͖ํɺϓϨθϯςʔγϣϯʣ
    • ৘ใϝσΟΞֶՊͰ͸3೥ੜ͔Βθϛ഑ଐ͞Ε·͢ 27
    

    View Slide

27. ™Ωæø$¥¢£§¥+$¿iN¡Ω¬√N
    • ݚڀ / ֶձ͸ϋʔυϧ͕ߴ͍
    • Կ͔Λ࡞ָͬͯ͠Έ͍ͨ
    • Maker Faire
    • ώʔϩʔζϦʔά
    28
    

    View Slide

28. ƒ≈∆ãåG«≈»åã
    • ΋ͷͮ͘Γͷࡇయ
    • झຯͰ࡞ͬͨ΋ͷΛɹ
    లࣔ
    • ੈք֤ࠃͰ։࠵
    • ೔ຊͰ͸౦ژɺژ౎ɺ
    େ֞ɺࢁޱɺͭ͘͹ɺ
    ઋ୆ɺ඿দ
    29
    

    View Slide

29. ƒ≈∆ãåG«≈»åã+ì…Q
    30
    Human Controller, ු͘શࣗಈϧʔϏοΫΩϡʔϒ
    https://youtu.be/2vG-YtRmBSw
    

    View Slide

30. 46u6 À6≠
    • ΋ͷͮ͘Γίϯςετ https://heroes-league.net/
    • ࠓ೥͸׬શΦϯϥΠϯͰ։࠵
    • ࡞඼ΞʔΧΠϒαΠτProtopediaʹશ࡞඼ܝࡌ https://protopedia.net/
    31
    

    View Slide

31. 46u6 À6≠+ì…Q
    32
    Star ˑ Jam Street ʙਗ਼૟ָثԻָເ૝ʙ
    https://youtu.be/4QAUfQ7c6DY
    

    View Slide

32. 46u6 À6≠+ì…Q
    33
    Yukio Shinoda, Glowing Air-Bubble Clock - ver.2 with origin; powered by ESP8266
    https://youtu.be/wvD58wH-RZA
    

    View Slide

33. ÃåÕŒÕÃ㜻≈
    34
    https://protopedia.net/
    

    View Slide

34. –I–—“
    35
    https://gugen.jp/
    

    View Slide

35. ”‘’÷
    36
    ϑϥϯΫɾϞε
    .*5ϝσΟΞϥϘʕຐ๏ͷ
    Πϊϕʔγϣϯɾύϫʔ
    
    όʔνϟϧϦΞϦςΟֶ
    
    
    ౉ᬑܙଠ ༥͚ΔσβΠϯʕ
    ϋʔυºιϑτºωοτ࣌୅ͷ
    ৽ͨͳઃܭ࿦
    
    ॹํᆹਓ ίϯϰΟϰΟΞϧɾ
    ςΫϊϩδʔ
    
    

    View Slide

36. ”‘à◊»ŒŒãå
    37
    @shiropen2 @make_jp @fabcrossjp
    

    View Slide

37. ÿêë$
    38
    • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ͸ਓؒͱίϯϐϡʔλͷؔ܎ੑʹ͍ͭͯͷݚڀ෼໺
    • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯݚڀ͸ΠϯλϑΣʔεݚڀʢ͚ͩ͡Όͳ͍͚Ͳʣ
    • ৽͍͠ϢʔβΠϯλϑΣʔεΛߟ͑Δ͜ͱ͸ɺະདྷΛσβΠϯ͢Δ͜ͱ
    • ֶ֎ʹ޿͕͍ͬͯΔΠϯϓοτɾΞ΢τϓοτͷ৔ʹ΋໨Λ޲͚Α͏
    ./0102345
    /01063.789:8;873<=3>=:?
    

    View Slide