Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
情報メディア入門I 2024 ヒューマンコンピュータインタラクション / IM1-2024
Search
yumulab
June 12, 2024
Technology
0
120
情報メディア入門I 2024 ヒューマンコンピュータインタラクション / IM1-2024
2024年6月12日(水)に開催された北海道情報大学の講義「情報メディア入門I」の第10回「ヒューマンコンピュータインタラクション」の講義資料
yumulab
June 12, 2024
Tweet
Share
More Decks by yumulab
See All by yumulab
デジタルファブリケーションの未来を北海道・札幌から考える / SIAF School 2025
yumulab
0
61
入浴時に映像が投影される一人用足湯システムの開発と運用 / ipsjhokkaido2024
yumulab
0
63
NNEPS: Network-Updated E-Paper Signage with Reduced Standby Power Consumption (Poster)
yumulab
0
61
NNEPS: Network-Updated E-Paper Signage with Reduced Standby Power Consumption (Slide)
yumulab
0
9
Shoe Recognition Model with Floor Pressure Sensors (Poster)
yumulab
0
32
Shoe Recognition Model with Floor Pressure Sensors (Slide)
yumulab
0
4
湯村研究室の紹介2024 / yumulab2024
yumulab
0
380
Practices of Research and Education using Digital Fabrication Technologies
yumulab
0
33
Utilization of Fabrication Technology for Prototyping and Creation
yumulab
0
34
Other Decks in Technology
See All in Technology
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
510
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
2.3k
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
540
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
700
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5.2k
Larkご案内資料
customercloud
PRO
0
650
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
2k
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
130
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.3k
Platform Engineeringは自由のめまい
nwiizo
4
2.1k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
200
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to Ace a Technical Interview
jacobian
276
23k
Music & Morning Musume
bryan
46
6.3k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
The Art of Programming - Codeland 2020
erikaheidi
53
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Transcript
2024.06.12 ౬ଜ ཌྷ ヒューマンコンピュータインタラクション ใϝσΟΞೖI @yumu19 / @yumulab
[email protected]
はじめに • X (Twitter)ͷײɾ࣭ͷߘܴ • (͜ͷतۀͷࢲͷճͷΈ) • ϋογϡλά #ใϝσΟΞೖ •
HIU-WiFi͔ΒTwitterͭͳ͕Βͳ͍ͷͰ(͝ΊΜͶ🥺)ɺɹ εϚϗ͔Βߘ͍ͯͩ͘͠͞ • ࢲͷճͰεϥΠυͷࡱӨɾεΫγϣߘOKͰ͢🙆 2
自己紹介 • ౬ଜ ཌྷ (@yumu19) • ใϝσΟΞֶՊ ।ڭत (2021/04ʙ) •
ઐใՊֶ • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ • ϢϏΩλείϯϐϡʔςΟϯά • ΤϯλςΠϯϝϯτίϯϐϡʔςΟϯά • όʔνϟϧϦΞϦςΟ • ωοτϫʔΫ 3
最近の研究 (ゼミ学生) 4 ϝϞ͔ΒεϥΠυΛࣗಈੜ͢ΔϓϨθϯπʔϧ ർ࿑ΛՄࢹԽ͢ΔΞΫηαϦ ਭσʔλΛͬͯ ΨνϟΛҾ͘ ϔϧεέΞΞϓϦ αφͰͷϓϩδΣΫγϣϯϚοϐϯά
今日の講義内容 • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯ(HCI)ͱ • HCIͷݚڀհ • ൃදɾใऩूʹ͍ͭͯ • ςΫϊϩδʔܥͱσβΠϯܥɺ྆ํʹؔ͢Δ༰ Ͱ͢
5
ヒューマンコンピュータインタラクションとは 6 ਓؒͱίϯϐϡʔλͷؔੑʹ͍ͭͯͷݚڀͰ͋Δʢͬ͘͟Γʣ Human ਓؒ Computer ίϯϐϡʔλ Interaction ΠϯλϥΫγϣϯ HCIͱུ͞ΕΔ
ヒューマンコンピュータインタラクションの研究とは • ਓ͕ؒίϯϐϡʔλΛ͏ͨΊͷΠϯλϑΣʔε(ڥք)ͷݚڀ • ৽͍͠ΠϯλϑΣʔεͷݚڀ։ൃ • ΠϯλϑΣʔεʹؔ͢Δௐࠪݚڀ • ίϯϐϡʔλ͕ਓؒʹ༩͑ΔӨڹͷݚڀʢ৺ཧֶతݚڀʣ •
ίϯϐϡʔλ͕ਓؒͷ׆ಈΛࢧԉ͢ΔγεςϜͷݚڀ • ͳͲ • ͱͯ෯͍ 7
インタフェース • 1) ϋʔυΣΞΠϯλϑΣʔε • ػցͱػցͷڥք • USBɺHDMIͳͲ • 2)
Application Programming Interface (API) • αʔόͱΫϥΠΞϯτͷڥք • ϝΠϯϓϩάϥϜͱϥΠϒϥϦͷڥք • 3) User Interface (UI) • ίϯϐϡʔλΛ͏ਓͱίϯϐϡʔλͷڥք 8 ใٕज़(IT)ͷੈքͰΑ͘ొ͢ΔΠϯλϑΣʔε ࣄྖҬͳͲΛ͚Δڥͷ͜ͱ ڥք - Wikipedia (2021/06/14Ӿཡ) ڥքɿ ࠓ͜Ε
インタフェース • ೖྗΠϯλϑΣʔεͱग़ྗΠϯλϑΣʔε 9 ʢίϯϐϡʔλʣೖྗ ʢίϯϐϡʔλ͔Βʣग़ྗ ϚεɺΩʔϘʔυ etc. σΟεϓϨΠɺεϐʔΧ etc.
ユーザインタフェース (UI) 10 Ϩάβ७ਖ਼ΦϓγϣϯϦϞίϯ ʛςϨϏʛREGZAɿ౦ࣳ https://www.regza.com/ regza/option/remo/ ER-W16 | ిࢠϨϯδ/ΦʔϒϯϨϯδ
| ౦ࣳϥΠϑελΠϧגࣜձࣾ https://www.toshiba-lifestyle.com/ jp/microwaves/er-w16/ ιϑτΣΞ (ը໘) ϋʔυΣΞ (Ϙλϯ)
インタフェース研究 11 Sketchpad CG, CAD, VR (Ivan Sutherland, 1963) oN-Line
System(NLS) Mouse, GUI (Douglas Engelbart, 1968) Dynabook (Alan Kay, 1968)
FurAir:毛のモフモフを超音波で再現する装置 12 [SIGGRAPH Asia 2023 E-tech] FurAir: Non-contact Presentation of
Soft Fur Texture - YouTube https://www.youtube.com/watch?v=Cj0DC_XycA4
VTuberの頭突きを感じる 13 LivEdge siggraph2023 video - YouTube https://www.youtube.com/watch?v=08aEhiMcGTU
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 BubBowl: Display Vessel Using Electrolysis Bubbles in Drinkable
Beverages - YouTube https://www.youtube.com/watch?v=QDoqyS9K7NE
味覚インタフェースの開発 16 [CHI2020] Norimaki Synthesizer: Taste Display Using Ion Electrophoresis
in Five Gels - YouTube https://www.youtube.com/watch?v=7HIm4LoAZxU
医療装具に電子部品を組み込むツールキット 17 E-Orthosis: Augmenting Off-the-shelf Orthoses with Electronics - YouTube
https://www.youtube.com/watch?v=YNetyKD26qI
オウムのためのビデオ会議システム 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 Crafting Interactive Circuits on Glazed Ceramic Ware -
YouTube https://www.youtube.com/watch?v=P-K3AfB3AuM
VR空間内の地形を物理世界のピンで再現 20 Elevate: A Walkable Pin-Array for Large Shape-Changing Terrains
- YouTube https://www.youtube.com/watch?v=R1NzSW3MdPw
イラスト修正におけるコミュニケーション支援 21 We-toon Video - YouTube https://www.youtube.com/watch?v=csZMW-e5cC0
変形布の研究 22 [Preview] Patch-O: Shape Changing Woven Patches for On
Body Actuation - YouTube https://www.youtube.com/watch?v=l9x-HROUfy0
超音波音響浮揚による立体ディスプレイ 23 ArticuLev: An Integrated Self-Assembly Pipeline for Articulated Multi-Bead
Levitation Primitives - YouTube https://www.youtube.com/watch?v=jnQEMg_iwQk
食べられるコンピュータ(論理演算装置) 24 Logic Bonbon: Food as Computational Artifact - YouTube
https://www.youtube.com/watch?v=U0K7quCUzT8
群ロボットを活用したインタフェース 25 Zooids: Building Blocks for Swarm User Interfaces -
YouTube https://www.youtube.com/watch?v=8Ik7V_QH5wk
YouTuber or VTuber どちらが支持される? 26 ӽޙل, ޖ݈࿕, ৽Ҫوߛ, ӬࢻԻ, খྛູ.
(2023). ΧςΰϦผʹ͓͚Δ VTuber ͱ YouTuber ͷ৴ελΠϧʹΑΔҹධՁ. ใॲཧֶձจࢽ
ダンス映像編集支援システム 27 ଟࢹμϯεө૾ͷΠϯλϥΫςΟϒฤूγεςϜ - YouTube https://www.youtube.com/watch?v=IzhDQhCcnx4
どうやって面白い研究の情報集めるの? • ʲΦεεϝʳTwitter @shiropen2 ΛϑΥϩʔ • ࠃͷγϯϙδϜΛݟΔ(YouTube৴ͰແঈࢹௌՄ) • EC(ΤϯλςΠϯϝϯτίϯϐϡʔςΟϯάγϯϙδϜ) •
WISS • ΠϯλϥΫγϣϯ • ࠃࡍձٞ(CHI, UIST, SIGGRAPH)ͷςΟβʔಈըΛݟΔ • ࠃࡍձٞ(CHI, UIST, SIGGRAPH)ͷษڧձ(ຊޠ)ʹࢀՃ͢Δ 28
情報メディア学科のHCI関連講義 • σβΠϯܥςΫϊϩδʔܥ෯ؔ͋͘Δ • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯʢେֶӃʣɿେֶӃਐֶ͠Α͏ʂ • ৽͍͠ΠϯλϑΣʔεͷ։ൃʹϋʔυΣΞ։ൃͷεΩϧ͕͋Δͱ͍͍ • → ϑΟδΧϧίϯϐϡʔςΟϯάԋश
(2) • ήʔϜΤϯδϯUnity͕͑Δͱݚڀʹඇৗʹཱͭ (ಛʹVRɾARܥ) • → ήʔϜϓϩάϥϛϯάԋश (2) 29
ヒューマンコンピュータインタラクション(大学院講義) 30
フィジカルコンピューティング演習 (守・湯村) • ArduinoΛͬͯϑΟδΧϧίϯϐϡʔςΟϯάΛֶͿ • LEDɺηϯαɺϞʔλͳͲͷ͍ํΛֶͿ • Tinkercad (͘͢͝ྑ͘ग़དྷͯΔγϛϡϨʔλ) ׆༻
31
研究は何の役に立つの? • Θ͔Βͳ͍ (※ݚڀςʔϚʹΑΓ·͢) • 3ޙʹʹཱ͔ͭ͠Εͳ͍͠ɺ50ޙʹʹཱ͔ͭ͠Εͳ͍͠ɺʹཱͨͳ͍͔͠ Εͳ͍ • কདྷʹཱͭͷ͕Կ͔୭ʹΘ͔Βͳ͍ •
ඞཁʹͳ͔ͬͯΒݚڀͯؒ͠ʹ߹Θͳ͍ • ྫɿiPhone͕Ͱ͖Δͣͬͱલ͔ΒϚϧνλονͷݚڀ͞Ε͍ͯͨ 32 Rekimoto, SmartSkin: An Infrastructure for Freehand Manipulation on Interactive Surfaces (2002)
なんで研究するの? • ਓྨʹͱͬͯ • ࣝͷ֦େ • ͍ͭͲ͜ͰͲΜͳ͕ࣝʹཱͭͷ͔Θ͔Βͳ͍ʢࡂͳͲʣ • ৽͍ٕ͠ज़͕ੜ·ΕΔͱ๛͔ʹͳΔ →
ࢿຊओٛͷཱٕज़ֵ৽͕લఏ • େֶੜʹͱͬͯ • ੜ্͖͍ͯ͘ͰཱͭεΩϧΛຏ͘͜ͱ͕Ͱ͖Δ • ະͷঢ়ଶ͔ΒௐΔʢจݙௐࠪʣ • ࣝͷਤΛඳ͘ʢࣝɾใͷཧʣ • ԾઆͷཱҊͱݕূ • ਓʹ͑Δʢจষͷॻ͖ํɺϓϨθϯςʔγϣϯʣ • ใϝσΟΞֶՊͰ3ੜ͔Βθϛଐ͞Ε·͢ • 2ؒ͡ΌΓͳ͍ → େֶӃʂ 33
学会以外にも面白いものに触れる機会がある • ݚڀ / ֶձϋʔυϧ͕ߴ͍ • Կ͔Λ࡞ָͬͯ͠Έ͍ͨ • Maker Faire
• ώʔϩʔζϦʔά • ͷͮ͘Γθϛ 34
Maker Faire • ͷͮ͘Γͷࡇయ • झຯͰ࡞ͬͨͷΛɹ లࣔ • ੈք֤ࠃͰ։࠵ •
ຊͰ౦ژɺژɺ େ֞ɺࢁޱɺͭ͘ɺ ઋɺদ 35
Maker Faireの作品例 36 Human Controller, ු͘શࣗಈϧʔϏοΫΩϡʔϒ https://youtu.be/2vG-YtRmBSw
ヒーローズリーグ • ͷͮ͘Γίϯςετ https://heroes-league.net/ • ࠓશΦϯϥΠϯͰ։࠵ • ࡞ΞʔΧΠϒαΠτProtopediaʹશ࡞ܝࡌ https://protopedia.net/ 37
ヒーローズリーグの作品例 38 Star ˑ Jam Street ~ ਗ਼ָثԻָເ ~ https://youtu.be/4QAUfQ7c6DY
ヒーローズリーグの作品例 39 Yukio Shinoda, Glowing Air-Bubble Clock - ver.2 with
origin; powered by ESP8266 https://youtu.be/wvD58wH-RZA
ProtoPedia 40 https://protopedia.net/
GUGEN 41 https://gugen.jp/
ものづくりゼミ • ʮΞΠ デ ΞΛܗʹ͢ΔʯΛςʔϚʹͷ づ ͘ΓΛߦ͏Jθ ϛ(ࣗओ ゼ ϛ)
• ୲ڭһɿ⁋ ॱฏɾ౬ଜ ཌྷ • ݄1ճ։࠵ • Twitter: @HIU_Maker 42
推薦図書 43 ϑϥϯΫɾϞε .*5ϝσΟΞϥϘʕຐ๏ͷ Πϊϕʔγϣϯɾύϫʔ όʔνϟϧϦΞϦςΟֶ
ᬑܙଠ ༥͚ΔσβΠϯʕ ϋʔυºιϑτºωοτ࣌ͷ ৽ͨͳઃܭ ॹํᆹਓ ίϯϰΟϰΟΞϧɾ ςΫϊϩδʔ
推薦Twitter 44 @shiropen2 @make_jp @fabcrossjp
おわりに 45 • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯਓؒͱίϯϐϡʔλͷؔੑʹ͍ͭͯͷݚڀ • ώϡʔϚϯίϯϐϡʔλΠϯλϥΫγϣϯݚڀΠϯλϑΣʔεݚڀʢ͚ͩ͡Όͳ͍͚Ͳʣ • ৽͍͠ϢʔβΠϯλϑΣʔεΛߟ͑Δ͜ͱɺະདྷΛσβΠϯ͢Δ͜ͱ • ֶ֎ʹ͕͍ͬͯΔΠϯϓοτɾΞτϓοτͷʹΛ͚Α͏
@yumulab
[email protected]