情報メディア入門I 2024 ヒューマンコンピュータインタラクション / IM1-2024

2024年6月12日(水)に開催された北海道情報大学の講義「情報メディア入門I」の第10回「ヒューマンコンピュータインタラクション」の講義資料

Transcript

1. 2024.06.12 ౬ଜ ཌྷ ヒューマンコンピュータインタラクション ৘ใϝσΟΞೖ໳I @yumu19 / @yumulab yumura@do-johodai.ac.jp
2. はじめに • X (Twitter)΁ͷײ૝ɾ࣭໰ͷ౤ߘ׻ܴ • (͜ͷतۀͷࢲͷճͷΈ) • ϋογϡλά #৘ใϝσΟΞೖ໳ • HIU-WiFi͔ΒTwitterͭͳ͕Βͳ͍ͷͰ(͝ΊΜͶ🥺)ɺɹ εϚϗ͔Β౤ߘ͍ͯͩ͘͠͞ • ࢲͷճͰ͸εϥΠυͷࡱӨɾεΫγϣ΋౤ߘOKͰ͢🙆 2
3. 自己紹介 • ౬ଜ ཌྷ (@yumu19) • ৘ใϝσΟΞֶՊ ।ڭत (2021/04ʙ) • ઐ໳͸৘ใՊֶ • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ • ϢϏΩλείϯϐϡʔςΟϯά • ΤϯλςΠϯϝϯτίϯϐϡʔςΟϯά • όʔνϟϧϦΞϦςΟ • ωοτϫʔΫ 3
4. 最近の研究 (ゼミ学生) 4 ϝϞ͔ΒεϥΠυΛࣗಈੜ੒͢ΔϓϨθϯπʔϧ ർ࿑౓ΛՄࢹԽ͢ΔΞΫηαϦ ਭ຾σʔλΛ࢖ͬͯ ΨνϟΛҾ͘ ϔϧεέΞΞϓϦ α΢φͰͷϓϩδΣΫγϣϯϚοϐϯά
5. 今日の講義内容 • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ(HCI)ͱ͸ • HCIͷݚڀ঺հ • ൃදɾ৘ใऩूʹ͍ͭͯ • ςΫϊϩδʔܥͱσβΠϯܥɺ྆ํʹؔ܎͢Δ಺༰ Ͱ͢ 5
6. ヒューマンコンピュータインタラクションとは 6 ਓؒͱίϯϐϡʔλͷؔ܎ੑʹ͍ͭͯͷݚڀ෼໺Ͱ͋Δʢͬ͘͟Γʣ Human ਓؒ Computer ίϯϐϡʔλ Interaction ΠϯλϥΫγϣϯ HCIͱུ͞ΕΔ
7. ヒューマンコンピュータインタラクションの研究とは • ਓ͕ؒίϯϐϡʔλΛ࢖͏ͨΊͷΠϯλϑΣʔε(ڥք)ͷݚڀ • ৽͍͠ΠϯλϑΣʔεͷݚڀ։ൃ • ΠϯλϑΣʔεʹؔ͢Δௐࠪݚڀ • ίϯϐϡʔλ͕ਓؒʹ༩͑ΔӨڹͷݚڀʢ৺ཧֶతݚڀʣ • ίϯϐϡʔλ͕ਓؒͷ׆ಈΛࢧԉ͢ΔγεςϜͷݚڀ • ͳͲ • ͱͯ΋෯޿͍ 7
8. インタフェース • 1) ϋʔυ΢ΣΞΠϯλϑΣʔε • ػցͱػցͷڥք • USBɺHDMIͳͲ • 2) Application Programming Interface (API) • αʔόͱΫϥΠΞϯτͷڥք • ϝΠϯϓϩάϥϜͱϥΠϒϥϦͷڥք • 3) User Interface (UI) • ίϯϐϡʔλΛ࢖͏ਓͱίϯϐϡʔλͷڥք 8 ৘ใٕज़(IT)ͷੈքͰΑ͘ొ৔͢ΔΠϯλϑΣʔε͸ ࣄ෺΍ྖҬͳͲΛ෼͚Δڥ໨ͷ͜ͱ ڥք - Wikipedia (2021/06/14Ӿཡ) ڥքɿ ࠓ೔͸͜Ε
9. インタフェース • ೖྗΠϯλϑΣʔεͱग़ྗΠϯλϑΣʔε 9 ʢίϯϐϡʔλ΁ʣೖྗ ʢίϯϐϡʔλ͔Βʣग़ྗ Ϛ΢εɺΩʔϘʔυ etc. σΟεϓϨΠɺεϐʔΧ etc.
10. ユーザインタフェース (UI) 10 Ϩάβ७ਖ਼ΦϓγϣϯϦϞίϯ ʛςϨϏʛREGZAɿ౦ࣳ https://www.regza.com/ regza/option/remo/ ER-W16 | ిࢠϨϯδ/ΦʔϒϯϨϯδ | ౦ࣳϥΠϑελΠϧגࣜձࣾ https://www.toshiba-lifestyle.com/ jp/microwaves/er-w16/ ιϑτ΢ΣΞ (ը໘) ϋʔυ΢ΣΞ (Ϙλϯ)
11. インタフェース研究 11 Sketchpad CG, CAD, VR (Ivan Sutherland, 1963) oN-Line System(NLS) Mouse, GUI (Douglas Engelbart, 1968) Dynabook (Alan Kay, 1968)
12. FurAir：毛のモフモフを超音波で再現する装置 12 [SIGGRAPH Asia 2023 E-tech] FurAir: Non-contact Presentation of Soft Fur Texture - YouTube https://www.youtube.com/watch?v=Cj0DC_XycA4
13. VTuberの頭突きを感じる 13 LivEdge siggraph2023 video - YouTube https://www.youtube.com/watch?v=08aEhiMcGTU
14. SkinPaper 14 SkinPaper: Exploring Opportunities for Woven Paper as a Wearable Material for On-Skin Interactions - YouTube https://www.youtube.com/watch?v=ydAO186J3o4
15. 飲み物の泡ディスプレイ 15 BubBowl: Display Vessel Using Electrolysis Bubbles in Drinkable Beverages - YouTube https://www.youtube.com/watch?v=QDoqyS9K7NE
16. 味覚インタフェースの開発 16 [CHI2020] Norimaki Synthesizer: Taste Display Using Ion Electrophoresis in Five Gels - YouTube https://www.youtube.com/watch?v=7HIm4LoAZxU
17. 医療装具に電子部品を組み込むツールキット 17 E-Orthosis: Augmenting Off-the-shelf Orthoses with Electronics - YouTube https://www.youtube.com/watch?v=YNetyKD26qI
18. オウムのためのビデオ会議システム 18 Kleinberger et al., Birds of a Feather Video-Flock Together: Design and Evaluation of an Agency- Based Parrot-to-Parrot Video-Calling System for Interspecies Ethical Enrichment.
19. 陶磁器に電子回路を組み込む 19 Crafting Interactive Circuits on Glazed Ceramic Ware - YouTube https://www.youtube.com/watch?v=P-K3AfB3AuM
20. VR空間内の地形を物理世界のピンで再現 20 Elevate: A Walkable Pin-Array for Large Shape-Changing Terrains - YouTube https://www.youtube.com/watch?v=R1NzSW3MdPw
21. イラスト修正におけるコミュニケーション支援 21 We-toon Video - YouTube https://www.youtube.com/watch?v=csZMW-e5cC0
22. 変形布の研究 22 [Preview] Patch-O: Shape Changing Woven Patches for On Body Actuation - YouTube https://www.youtube.com/watch?v=l9x-HROUfy0
23. 超音波音響浮揚による立体ディスプレイ 23 ArticuLev: An Integrated Self-Assembly Pipeline for Articulated Multi-Bead Levitation Primitives - YouTube https://www.youtube.com/watch?v=jnQEMg_iwQk
24. 食べられるコンピュータ(論理演算装置) 24 Logic Bonbon: Food as Computational Artifact - YouTube https://www.youtube.com/watch?v=U0K7quCUzT8
25. 群ロボットを活用したインタフェース 25 Zooids: Building Blocks for Swarm User Interfaces - YouTube https://www.youtube.com/watch?v=8Ik7V_QH5wk
26. YouTuber or VTuber どちらが支持される？ 26 ӽޙ޺ل, ޖ݈࿕, ৽Ҫوߛ, ෋ӬࢻԻ, খྛູ. (2023). ΧςΰϦผʹ͓͚Δ VTuber ͱ YouTuber ͷ഑৴ελΠϧʹΑΔҹ৅ධՁ. ৘ใॲཧֶձ࿦จࢽ
27. ダンス映像編集支援システム 27 ଟࢹ఺μϯεө૾ͷΠϯλϥΫςΟϒฤूγεςϜ - YouTube https://www.youtube.com/watch?v=IzhDQhCcnx4
28. どうやって面白い研究の情報集めるの？ • ʲ௒ΦεεϝʳTwitter @shiropen2 ΛϑΥϩʔ • ࠃ಺ͷγϯϙδ΢ϜΛݟΔ(YouTube഑৴ͰແঈࢹௌՄ) • EC(ΤϯλςΠϯϝϯτίϯϐϡʔςΟϯάγϯϙδ΢Ϝ) • WISS • ΠϯλϥΫγϣϯ • ࠃࡍձٞ(CHI, UIST, SIGGRAPH)ͷςΟβʔಈըΛݟΔ • ࠃࡍձٞ(CHI, UIST, SIGGRAPH)ͷษڧձ(೔ຊޠ)ʹࢀՃ͢Δ 28
29. 情報メディア学科のHCI関連講義 • σβΠϯܥ΋ςΫϊϩδʔܥ΋෯޿ؔ͘܎͋Δ • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯʢେֶӃʣɿେֶӃਐֶ͠Α͏ʂ • ৽͍͠ΠϯλϑΣʔεͷ։ൃʹ͸ϋʔυ΢ΣΞ։ൃͷεΩϧ͕͋Δͱ͍͍ • → ϑΟδΧϧίϯϐϡʔςΟϯάԋश (2೥) • ήʔϜΤϯδϯUnity͕࢖͑Δͱݚڀʹඇৗʹ໾ཱͭ (ಛʹVRɾARܥ) • → ήʔϜϓϩάϥϛϯάԋश (2೥) 29
30. ヒューマンコンピュータインタラクション(大学院講義) 30
31. フィジカルコンピューティング演習 (守・湯村) • ArduinoΛ࢖ͬͯϑΟδΧϧίϯϐϡʔςΟϯάΛֶͿ • LEDɺηϯαɺϞʔλͳͲͷ࢖͍ํΛֶͿ • Tinkercad (͘͢͝ྑ͘ग़དྷͯΔγϛϡϨʔλ) ΋׆༻ 31
32. 研究は何の役に立つの？ • Θ͔Βͳ͍ (※ݚڀςʔϚʹΑΓ·͢) • 3೥ޙʹ໾ʹཱ͔ͭ΋͠Εͳ͍͠ɺ50೥ޙʹ໾ʹཱ͔ͭ΋͠Εͳ͍͠ɺ໾ʹཱͨͳ͍͔΋͠ Εͳ͍ • কདྷ໾ʹཱͭ΋ͷ͕Կ͔͸୭ʹ΋Θ͔Βͳ͍ • ඞཁʹͳ͔ͬͯΒݚڀͯ͠͸ؒʹ߹Θͳ͍ • ྫɿiPhone͕Ͱ͖Δͣͬͱલ͔ΒϚϧνλονͷݚڀ͸͞Ε͍ͯͨ 32 Rekimoto, SmartSkin: An Infrastructure for Freehand Manipulation on Interactive Surfaces (2002)
33. なんで研究するの？ • ਓྨʹͱͬͯ • ஌ࣝͷ֦େ • ͍ͭͲ͜ͰͲΜͳ஌͕ࣝ໾ʹཱͭͷ͔Θ͔Βͳ͍ʢࡂ֐ͳͲʣ • ৽͍ٕ͠ज़͕ੜ·ΕΔͱ๛͔ʹͳΔ → ࢿຊओٛͷ੒ཱ͸ٕज़ֵ৽͕લఏ • େֶੜʹͱͬͯ • ੜ্͖͍ͯ͘Ͱ໾ཱͭεΩϧΛຏ͘͜ͱ͕Ͱ͖Δ • ະ஌ͷঢ়ଶ͔Βௐ΂Δʢจݙௐࠪʣ • ஌ࣝͷ஍ਤΛඳ͘ʢ஌ࣝɾ৘ใͷ੔ཧʣ • ԾઆͷཱҊͱݕূ • ਓʹ఻͑Δʢจষͷॻ͖ํɺϓϨθϯςʔγϣϯʣ • ৘ใϝσΟΞֶՊͰ͸3೥ੜ͔Βθϛ഑ଐ͞Ε·͢ • 2೥ؒ͡Ό଍Γͳ͍ → େֶӃ΁ʂ 33
34. 学会以外にも面白いものに触れる機会がある • ݚڀ / ֶձ͸ϋʔυϧ͕ߴ͍ • Կ͔Λ࡞ָͬͯ͠Έ͍ͨ • Maker Faire • ώʔϩʔζϦʔά • ΋ͷͮ͘Γθϛ 34
35. Maker Faire • ΋ͷͮ͘Γͷࡇయ • झຯͰ࡞ͬͨ΋ͷΛɹ లࣔ • ੈք֤ࠃͰ։࠵ • ೔ຊͰ͸౦ژɺژ౎ɺ େ֞ɺࢁޱɺͭ͘͹ɺ ઋ୆ɺ඿দ 35
36. Maker Faireの作品例 36 Human Controller, ු͘શࣗಈϧʔϏοΫΩϡʔϒ https://youtu.be/2vG-YtRmBSw
37. ヒーローズリーグ • ΋ͷͮ͘Γίϯςετ https://heroes-league.net/ • ࠓ೥͸׬શΦϯϥΠϯͰ։࠵ • ࡞඼ΞʔΧΠϒαΠτProtopediaʹશ࡞඼ܝࡌ https://protopedia.net/ 37
38. ヒーローズリーグの作品例 38 Star ˑ Jam Street ～ ਗ਼૟ָثԻָເ૝ ～ https://youtu.be/4QAUfQ7c6DY
39. ヒーローズリーグの作品例 39 Yukio Shinoda, Glowing Air-Bubble Clock - ver.2 with origin; powered by ESP8266 https://youtu.be/wvD58wH-RZA
40. ProtoPedia 40 https://protopedia.net/
41. GUGEN 41 https://gugen.jp/
42. ものづくりゼミ • ʮΞΠ デ ΞΛܗʹ͢ΔʯΛςʔϚʹ΋ͷ づ ͘ΓΛߦ͏Jθ ϛ(ࣗओ ゼ ϛ) • ୲౰ڭһɿ⁋ ॱฏɾ౬ଜ ཌྷ • ݄1ճ։࠵ • Twitter: @HIU_Maker 42
43. 推薦図書 43 ϑϥϯΫɾϞε
    
    .*5ϝσΟΞϥϘʕຐ๏ͷ
    Πϊϕʔγϣϯɾύϫʔ
     όʔνϟϧϦΞϦςΟֶ
    
     ౉ᬑܙଠ
    ༥͚ΔσβΠϯ
    ʕ ϋʔυºιϑτºωοτ࣌୅ͷ ৽ͨͳઃܭ࿦
     ॹํᆹਓ
    ίϯϰΟϰΟΞϧɾ ςΫϊϩδʔ
    
44. 推薦Twitter 44 @shiropen2 @make_jp @fabcrossjp
45. おわりに 45 • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ͸ਓؒͱίϯϐϡʔλͷؔ܎ੑʹ͍ͭͯͷݚڀ෼໺ • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯݚڀ͸ΠϯλϑΣʔεݚڀʢ͚ͩ͡Όͳ͍͚Ͳʣ • ৽͍͠ϢʔβΠϯλϑΣʔεΛߟ͑Δ͜ͱ͸ɺະདྷΛσβΠϯ͢Δ͜ͱ • ֶ֎ʹ޿͕͍ͬͯΔΠϯϓοτɾΞ΢τϓοτͷ৔ʹ΋໨Λ޲͚Α͏ @yumulab yumura@do-johodai.ac.jp