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
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.6k
怖くない!はじめてのClaude Code
shinya337
0
400
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
Claude Code に プロジェクト管理やらせたみた
unson
6
4.1k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
690
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Facilitating Awesome Meetings
lara
54
6.4k
Designing for humans not robots
tammielis
253
25k
Building an army of robots
kneath
306
45k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Raft: Consensus for Rubyists
vanstee
140
7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Making Projects Easy
brettharned
116
6.3k
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]