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
フィジカルコンピューティングでアイデアをカタチに! / hiu-physcom
Search
yumulab
August 03, 2025
Technology
68
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
フィジカルコンピューティングでアイデアをカタチに! / hiu-physcom
北海道情報大学オープンキャンパス模擬講義資料
yumulab
August 03, 2025
More Decks by yumulab
See All by yumulab
非試合日の野球場を楽しむためのARホームランボールキャッチ体験システムの開発 / EC79-miyazaki
yumulab
0
230
Bluetooth Low Energyの海に潜る / Dive to Bluetooth Low Energy
yumulab
0
140
湯村研究室の紹介2025 / yumulab2025
yumulab
0
360
Proposal of an Information Delivery Method for Electronic Paper Signage Using Human Mobility as the Communication Medium / ICCE-Asia 2025
yumulab
0
320
研究室から社会へ 〜 情報科学でつなぐ科学技術コミュニケーション実践 / #CoSTEP20th
yumulab
0
170
A Proposal of an Information Delivery Method using Human Movement as a Communication Medium for Electronic Paper Signage / ICEC2025
yumulab
0
130
メタバース空間で対話相⼿に向かって⾃律移動するAIアバター『ノア』の開発 / EC2025-Oyamada
yumulab
0
310
足位置の視覚的提示による電子オルガンのペダル鍵盤演奏学習支援システムの提案 / EC2025-Hokin
yumulab
0
280
電子ペーパーサイネージにおける人の移動を通信媒介とした情報配送手法の提案 / EC2025-Akiba
yumulab
0
190
Other Decks in Technology
See All in Technology
LayerXにおけるセキュリティ管理の現在地と次の一手
tosho
0
250
就職⽀援サービスにおけるキャリアアドバイザーのシフトスケジューリング
recruitengineers
PRO
1
150
気軽に使える"情報のハブ"としてのNotion活用 〜フロー情報の集積点 と、 Claude Code × Notion AI〜
syucream
1
160
FPC(フレキシブル)基板にZephyr実装してみた。
iotengineer22
0
130
【Snowflake Summit 2026 Recap!!】Snowflake Summit Deep Dive: Security & Governance
civitaspo
1
270
マルチアカウント環境での コーディングエージェントを使った障害調査が大変なので AIエージェントにReadOnly権限を付与してみた / ReadOnly AI Agents for Multi-Account AWS Incident Response
yamaguchitk333
2
120
Flow 不死:AI 時代 DevOps 的不變本質
cheng_wei_chen
2
370
手塩にかけりゃいいってもんじゃない
ming_ayami
0
610
新しいUbuntu/GNOMEが使いたいからXからWaylandへ移行頑張ってるの巻 2026-06-20
nobutomurata
0
150
FPGAの開発コンペでZephyrを使ってみた
iotengineer22
0
150
AIネイティブな開発のサプライチェーンリスク対策 〜激動の開発現場でリスクに立ち向かう〜【ZennFes】
cscengineer
PRO
2
140
Bucharest Tech Week 2026 - Reinventing testing practices in the AI era
edeandrea
PRO
1
170
Featured
See All Featured
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.5k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
530
Making the Leap to Tech Lead
cromwellryan
135
9.9k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
360
First, design no harm
axbom
PRO
2
1.2k
The Curse of the Amulet
leimatthew05
1
13k
Optimising Largest Contentful Paint
csswizardry
37
3.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
200
Testing 201, or: Great Expectations
jmmastey
46
8.2k
Designing Experiences People Love
moore
143
24k
The Limits of Empathy - UXLibs8
cassininazir
1
360
Transcript
ւಓใେֶ ΦʔϓϯΩϟϯύε ٖߨٛ ʢใϝσΟΞֶ෦ ใϝσΟΞֶՊʣ ౬ଜ ཌྷ フィジカルコンピューティングでアイデアをカタチに! @yumulab
[email protected]
ࢿྉΞοϓϩʔυࡁ https://speakerdeck.com/yumulab/hiu-physcom
今日の講義の内容 • ϑΟδΧϧίϯϐϡʔςΟϯά֓ཁ (20) • ϑΟδΧϧίϯϐϡʔςΟϯά (ArduinoγϛϡϨʔλ) ԋश (25) •
ͦͷଞɾ·ͱΊɾ࣭ (5) 2
フィジカルコンピューティング概要
「フィジカルコンピューティング」とは • Physical (ཧతͳ) + Computing • ϋʔυΣΞΛѻ͏γεςϜͷϓϩάϥϛϯά • ޫɺಈ͖ɺԻ
ͳͲͳͲ • ΞϓϦήʔϜͷϓϩάϥϛϯάͱԿ͕ҧ͏͔ʁ • ΞϓϦήʔϜίϯϐϡʔλͷதʹด͍ͯ͡Δ • ϑΟδΧϧίϯϐϡʔςΟϯάίϯϐϡʔλͷ֎ͷσʔλΛऔಘ ͨ͠ΓϋʔυΣΞΛಈ͔͢ • ʮInternet of Things (IoT)ʯʮࠐΈίϯϐϡʔςΟϯάʯͱڞ௨ ͋Δ (एׯҧ͏߹͋Δ) 4
フィジカルコンピューティングの例 | 光のボール 5 teamLab, Light Ball Orchestra / ޫͷϘʔϧͰΦʔέετϥ
https://youtu.be/NN1vbIbH3GE
フィジカルコンピューティングの例 | LEDスーツ 6 Wall Recordings, SAMURIZE - Killer Instinct
(Of fi cial Video) https://youtu.be/rjMD36M4GMM
フィジカルコンピューティングの例 | 飲み物の泡ディスプレイ 7 BubBowl: Display Vessel Using Electrolysis Bubbles
in Drinkable Beverages - YouTube https://www.youtube.com/watch?v=QDoqyS9K7NE
フィジカルコンピューティングの例 | 変形するテーブル 8 TRANSFORM - Amazing Technology Invented By
MIT https://youtu.be/lCARHatJQJA
フィジカルコンピューティングの例 | 群ロボットを活用したインタフェース 9 Zooids: Building Blocks for Swarm User
Interfaces - YouTube https://www.youtube.com/watch?v=8Ik7V_QH5wk
どうやって作る? • ͍Ζ͍ΖͳπʔϧɾςΫϊϩδʔ͕ΘΕΔ • Χϝϥը૾ղੳ • ө૾ΤϑΣΫτ੍࡞ (AfterEffect, Blender, Unity)
• ϓϩδΣΫγϣϯϚοϐϯά • ηϯα • Ϟʔλʔ • LED • ϫϯϘʔυϚΠίϯ 10 ͜ͷߨٛͷର
ワンボードマイコン • ී௨ͷPCͱൺͯ • ͍҆🙆 • খ͍͞🙆 • ফඅిྗ🙆 •
ੑೳ͍🙅 11 M5Stack Basic (¥6,831) https://ssci.to/9010 Arduino Uno R3 (¥5,500) https://ssci.to/789 micro:bit (¥3,366) https://ssci.to/7952 Raspberry Pi 4 Model B / 2GB (¥9,570) https://ssci.to/5681 ͜ͷߨٛͷର
Arduino • ʮΞϧσϡΠʔϊʯͱಡΈ·͢ • ͨͿΜੈքҰ༗໊ͳϫϯϘʔυϚΠίϯ • ͍҆ޓ͋ΔɿύνϞϊ͡Όͳͯ͘ΦʔϓϯιʔεϋʔυΣΞ • Arduino IDEͰ։ൃɿC++ݴޠ
12 Arduino Uno R3 https://ssci.to/789 Arduino IDE
Tinkercad | Arduinoシミュレータ • ͑Δ෦ଟ͘ɺ͍ΖΜͳ͜ͱ͕Ͱ͖Δ • ߨٛTinkercadΛͬͯਐΊ·͢ • ※ Tinkercadʹଞʹ3DϞσϦϯάπʔϧؚ·Ε͍ͯ·͕͢ɺ͜ͷߨٛͰ
3DϞσϦϯάπʔϧͷػೳ༻͠·ͤΜ 13
フィジカルコンピューティング演習
Tinkercadを準備しよう • Google ChromeΛ։͘ (σεΫτοϓͷγϣʔτΧοτ͔Β) • ΞυϨεόʔʹ https://bit.ly/hiu-ocͱೖྗ 15
Tinkercadを準備しよう • χοΫωʔϜͰࢀՃ → χοΫωʔϜΛೖྗ • χοΫωʔϜͨ͠ࢴʹॻ͍͍ͯ·͢ (hiu01ʙhiu30) 16 ΫϦοΫ
هೖ ΫϦοΫ ※ ՈͰΔͱ͖ https://www.tinkercad.com/ ʹΞΫηεͯ͠ʮΞΧϯτΛ࡞ʯ ·ͨʮଞαʔϏεΞΧϯτ(Google / Apple / Microsoft / Facebook)ͰαΠϯΠϯʯ ͍ͯͩ͘͠͞
新しい回路の作成 17 ʮճ࿏ʯΛબ ΫϦοΫ
回路シミュレータ画面 • ԋशͰجຊతʹ͜ͷը໘Λ͍·͢ 18 ໊લΛΫϦοΫͯ͠ ฤू͠Α͏ ෦ΛΫϦοΫ → ஔ (υϥοάˍυϩοϓͰOK)
今日やること • (1) LEDΛޫΒͤΔ • (2) NeoPixel (LEDςʔϓ) ΛޫΒͤΔ •
(3) NeoPixelͷ৭Λม͑ͯΈΔ • (4) LCDΛಈ͔ͯ͠දࣔจࣈΛม͑ͯΈΔ • (5) ͍ΖΜͳ෦(ελʔλʔ)Λಈ͔ͯ͠ΈΔ • ͨͿΜશ෦Ͱ͖ͳ͍ͷͰɺͥͻ͓͏ͪͰͬͯΈ͍ͯͩ͘͞ 19
LEDを光らせる 20 ໊લΛΫϦοΫͯ͠ ฤू͠Α͏ ෦ΛΫϦοΫ → ஔ (υϥοάˍυϩοϓͰOK)
21 ෦ͷࢠΛΫϦοΫ →ଓઌࢠΛΫϦοΫ LEDを光らせる
22 ಈ͔͢ʹ͜͜ΛΫϦοΫ LEDを光らせる
23 ɹΫϦοΫͰ෦બ → BackspaceͰআ shiftΛԡ͠ͳ͕ΒΫϦοΫ͢Δͱ ෳબՄೳ Undo ctrl+zͰՄ LEDを光らせる
24 ϚεϗΠʔϧͰը໘֦େ/ॖখ ෦ͷճస (Shiftԡ͠ͳ͕Β ΫϦοΫͰٯճస) ϓϩύςΟมߋ ͳʹͳ͍ͱ͜ΖΛ υϥοά͢Δͱ ը໘Ґஔͷௐ LEDを光らせる
NeoPixel • AdafruitࣾͷϚΠίϯଂϑϧΧϥʔLED • ͭͳ͛ͯ૿ͤΔʂ • ςʔϓঢ়ɺϦϯάঢ়ʹͭͳ͕͍ͬͯΔΛ͏͜ͱ͕ଟ͍ • ੍ޚʹArduinoͳͲΛ͏ •
ϥΠϒϥϦΛ͍͍͑ײ͡ʹͰ͖ΔͷͰɺ੍ޚํ๏ͷৄࡉΛΒͳͯ͘େৎ 25 Adafruit Industries, NeoPixel RGBW LEDs w/ Integrated Driver Chip - Natural White [~4500K - Black Casing - 10 Pack] https://www.adafruit.com/product/2761 $5.95 / 10ݸ εΠοναΠΤϯε, NeoPixel Ring - 12࿈ϑϧΧϥʔγϦΞϧLED https://www.switch-science.com/catalog/1593/ 1,177ԁ Adafruit Industries, NeoPixel Digital RGB LED Strip - White 30 LED - WHITE https://www.adafruit.com/product/1376 $16.95 / meter
NeoPixelを光らせる • ελʔλʔ (෦ͷΈ߹Θͤ)ͷஔ 26 1. ελʔλʔ͔Β “Arduino” Λબ 2.
NeoPixelΛબͯ͠ஔ 3. γϛϡϨʔγϣϯΛ։࢝ ࢀߟɿ࣮ࡍͷNeoPixel
NeoPixelの光る色を変える • ίʔυ (ϓϩάϥϜ/εέον) ͷฤूํ๏ 27 ʮίʔυʯΛΫϦοΫ
NeoPixelの光る色を変える • 25ߦͷredColor, greenColor, blueColorΛফͯ͠ 0ʙ255ͷ͖ͳࣈʹॻ͖͑ • ॻ͖͑ͨΒʮγϛϡϨʔγϣϯΛ։࢝ʯΛΫϦοΫ 28 ͜͜Λॻ͖͑
ྫ͑
LCD • Liquid Crystal Display (=ӷথσΟεϓϨΠ) ͷུ • ArduinoͷΑ͏ͳϚΠίϯϘʔυͰใΛදࣔ͢Δوॏͳखஈ •
16 × 2 (ԣ16จࣈɺॎ2จࣈ) • ઢ͕େม • ελʔλʔʹઢࡁΈͷͷ͕͋ΔͷͰɺͦΕΛ͏ͷָ͕ 29 ळ݄ిࢠ௨, ̡̘̙ΩϟϥΫλ σΟεϓϨΠϞδϡʔϧɹ̍̒×̎ ߦɹόοΫϥΠτനൈ͖ https://akizukidenshi.com/catalog/g/ gP-02919/ 800ԁ
LCD • ελʔλʔ͔ΒʮLCDʯΛબ 30 LCDΛબͯ͠ஔ
LCD • ʮίʔυʯˠʮจࣈʯΛબ 31
LCD • ʮଓߦʯΛΫϦοΫ 32
LCD • දࣔ͢ΔจࣈɺࣈͷҐஔΛม͑ͯΈ·͠ΐ͏ 33 ͜͜Λॻ͖͑ ͜͜ॻ͖͑ͯΈͯOK
いろんな部品(スターター)を動かしてみる • ͍ΖΜͳελʔλʔ͕͋ΔͷͰ͍Ζ͍Ζࢼͯ͠Έ·͠ΐ͏ • جຊతʹɺஔ࣮ͯ͠ߦ͢Δ͚ͩͰಈ͖·͢ • Α͘Θ͔Βͳ͍ͷ͋Δͱࢥ͍·͕͢ • Իͷग़Δͷ͋ΔͷͰҙ •
ͨ͘͞Μஔ͢Δͱಈ࡞͕ॏ͘ͳΔͷͰɺ͍ऴΘͬͨ෦ফ͠·͠ΐ͏ (બͯ͠BackSpaceΩʔ) 34
その他・まとめ
参考:NeoPixelハードウェア解説 • 3ຊͷଓ͕ඞཁɿ৴߸ઢɺ5VɺGND • ଓͯ͠૿͢͜ͱ͕Ͱ͖Δ • Կݸ·ͰଓͰ͖Δʁ → ߋ৽ϨʔτʹΑΔ •
Tinkercadͩͱ100ݸۙ͘ͳΔͱॏ͘ͳΔ 36 ͜ΕͰ1ݸ 0 1 2 3 4 5 6 7 8 9 10 11 ৴߸͕ྲྀΕΔํ ͭͳ͛ͯ૿ͤΔ (ಉ͡छྨͷࢠΛଓ) DIN:৴߸ઢೖྗ(Digital IN) 5V GND DO:৴߸ઢग़ྗ(Digital OUT)
micro:bit • ଞͷϚΠίϯϘʔυ micro:bitʢϚΠΫϩϏοτʣհ͠·͢ • 2015ʙ ։ൃ͞Εͨڭҭ༻ϚΠίϯϘʔυ • ΠΪϦεͰখֶੜʹແঈ͞Εͨ •
ݱࡏϚΠΫϩιϑτࡿԼͷϓϩδΣΫτ • 2020ʹv2ʹόʔδϣϯΞοϓ • LED 5×5 = 25ݸɺϘλϯ2ݸɺεϐʔΧɺϚΠΫɺ໌Δ͞ηϯαʔɺՃηϯαʔɺ ࣓ྗηϯαʔɺԹηϯαʔɺແઢ௨৴ػೳʢBLEʣΛࡌ 37 εΠοναΠΤϯε, micro:bit https://ssci.to/7952 3,366ԁ
micro:bit • Webϒϥβͷ։ൃڥͰ։ൃ͢Δ • ϒϩοΫɺJavaScriptɺPythonͰ։ൃ • ͲͷίʔυͰॻ͍ͯޓੑ͕͋ΔʢมՄೳʣ • ։ൃڥʹγϛϡϨʔλ͕ଐ͢Δ 38
部品の購入 39 εΠοναΠΤϯε, ArduinoΛ͡ ΊΑ͏Ωοτ https://ssci.to/181 7,150ԁ εΠοναΠΤϯε, The Arduino
Starter Kitʢຊޠ൛ʣ https://ssci.to/2628 22,000ԁ εΠοναΠΤϯε, M5GO IoTε λʔλʔΩοτ V2.7 https://ssci.to/9011 9,845ԁ • ͬͱֶͼ͍ͨਓɺͥͻ࣮ػΛߪೖͯ͠Έ͍ͯͩ͘͞ • ࠷ॳΩοτ͕͓͢͢ΊͰ͢ • Arduino୯ମͩͱ΄ͱΜͲԿͰ͖ͳ͍ • ύʔπબͼ͕͍͠
スイッチサイエンス • ΩοτɺϚΠίϯɺNeoPixelɺߴՁ֨ଳηϯα(¥1,000Ҏ্) 40
秋月電子通商 • Ձ֨ଳ෦(߅ɺLEDɺεΠονɺIC)ɺܭଌػث • ळ༿ݪʹ࣮ళฮ͕͋Γ·͢ 41
推薦図書 42 ౻ݪຑཬࡊ, ແବͳϚγʔϯ Λൃ໌͠Α͏! (2021) Ϊϟϧి, Ϊϟϧిͱͭ͘Δ! όΠϒεςϯΞήαΠόʔύϯΫ ޫΓిࢠ࡞
(2021) ArduinoΛ͡ΊΑ͏ ୈ3൛ (2015)
推薦Twitter 43 @shiropen2 @make_jp @FabSceneJp
推薦YouTubeチャンネル 44 Πνέϯ ແବͮ͘Γ
おわりに • ͍ΖΜͳઌੜ͕͍ΖΜͳݚڀΛ͍ͯ͠·͢ • ւಓใେֶͦͷଞͷେֶͷWebαΠτΛௐͯΈ͍ͯͩ͘͞ 45 @yumulab
[email protected]