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
63
情報メディア入門I 2024 ヒューマンコンピュータインタラクション / IM1-2024
2024年6月12日(水)に開催された北海道情報大学の講義「情報メディア入門I」の第10回「ヒューマンコンピュータインタラクション」の講義資料
yumulab
June 12, 2024
Tweet
Share
More Decks by yumulab
See All by yumulab
情報の世界 2024年度 第11回「都市のデータ」 #情報の世界 / Data of City 2024
yumulab
0
100
情報の世界 2024年度 第10回「データとセンシングの概要」 #情報の世界 / Data and Sensing 2024
yumulab
0
180
情報メディア学I 2024年度 「インタフェース×AI」 / Interface x AI 2024
yumulab
1
46
サウナでのプロジェクションマッピングの可能性の検討 / EC71koizumi
yumulab
0
340
眠眠ガチャ:ガチャを活用した睡眠意欲向上アプリの開発 / EC71inui
yumulab
1
350
待機電力を削減したネットワーク更新型電子ペーパーサイネージの開発と評価 / IOT64
yumulab
0
180
CARMUI:自動運転車遠隔監視システムのUI検討のためのバーチャル都市プラットフォームの開発 / CARMUI-i2024
yumulab
0
190
GRAB:VRコントローラに握力感知機能を追加する拡張センサ / GRAB-i2024
yumulab
0
120
RolBo – 巻ける電光掲示板の開発 / RolBo-i2024
yumulab
0
110
Other Decks in Technology
See All in Technology
みんなに役立つ「テスト」を学んでみよう!(20140105版)
mizunori
1
110
開発組織全員が自ら学んで成長していく組織づくり
nextbeatdev
6
3.5k
見えないユーザの声はログに埋もれている! ~ログから具体的なユーザの体験を数値化した事例紹介~
navitimejapan
PRO
3
810
超アナログ中心な印刷会社で「エンジニアリング」を見直す
logica0419
4
140
デジタルアイデンティティ技術 認可・ID連携・認証 基礎
oidfj
0
440
Refactoring in Angular via Metrics, Modularity & Testing
rainerhahnekamp
0
200
Okioに愛を込めて
ryunen344
3
580
How To Build a Productive Laravel Team
mattstauffer
1
570
生成 AI の評価方法
asei
5
540
鹿野さんに聞く! 2024年最新CSSトレンドと実践テクニック
tonkotsuboy_com
9
3.6k
Agentは楽しいぞ
tubone24
0
430
新規事業立ち上げ、グロースで きちんと”デリバリー”も"ディスカバリー"も し続けられるアジャイル組織の作り方
applepine1125
1
360
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Teambox: Starting and Learning
jrom
129
8.5k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Being A Developer After 40
akosma
68
580k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
247
20k
Done Done
chrislema
178
15k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Creatively Recalculating Your Daily Design Routine
revolveconf
213
11k
Infographics Made Easy
chrislema
238
18k
Making the Leap to Tech Lead
cromwellryan
126
8.6k
[RailsConf 2023] Rails as a piece of cake
palkan
31
4.2k
Documentation Writing (for coders)
carmenintech
61
4.1k
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]