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
160
情報メディア入門I 2024 ヒューマンコンピュータインタラクション / IM1-2024
2024年6月12日(水)に開催された北海道情報大学の講義「情報メディア入門I」の第10回「ヒューマンコンピュータインタラクション」の講義資料
yumulab
June 12, 2024
Tweet
Share
More Decks by yumulab
See All by yumulab
ASSADS:ASMR動画に合わせて撫でられる感覚を提示するシステムの開発と評価 / ec75-shimizu
yumulab
1
400
ウッドスタックチャン:木材を用いた小型エージェントロボットの開発と印象評価 / ec75-sato
yumulab
1
420
MGDSS:慣性式モーションキャプチャを用いたジェスチャによるドローンの操作 / ec75-yamauchi
yumulab
0
250
チャッドローン:LLMによる画像認識を用いた自律型ドローンシステムの開発と実験 / ec75-morisaki
yumulab
1
480
NOVVS:北海道情報大学図書館における滞在人数可視化システムの開発と検証 / i2025-minami
yumulab
0
92
CHaserWeb:ブラウザ上で動作する対戦型プログラミング学習環境の提案と評価 / i2025-inoue
yumulab
0
240
CARMUI-NET:自動運転車遠隔監視のためのバーチャル都市プラットフォームにおける通信品質変動機能の開発と評価 / UBI85
yumulab
0
250
待機電力を削減したネットワーク更新型電子ペーパーサイネージの研究開発 / UBISympo2025
yumulab
0
110
デジタルファブリケーションの未来を北海道・札幌から考える / SIAF School 2025
yumulab
0
110
Other Decks in Technology
See All in Technology
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
What’s new in Android development tools
yanzm
0
320
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
370
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
5
13k
ビギナーであり続ける/beginning
ikuodanaka
3
760
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
270
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.3k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
250
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
3
17k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Documentation Writing (for coders)
carmenintech
72
4.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
A designer walks into a library…
pauljervisheath
207
24k
Navigating Team Friction
lara
187
15k
Gamification - CAS2011
davidbonilla
81
5.4k
GitHub's CSS Performance
jonrohan
1031
460k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
KATA
mclloyd
30
14k
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]