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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
240
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
180
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
週末にループ・エンジニアリングの理解を深めるためのスライド
nagatsu
0
520
Lightning近況報告
kozy4324
0
230
4人目のSREはAgent
tanimuyk
0
250
はてなのサービス基盤を支える Kubernetes《足腰》
masayoshimaezawa
0
140
2026 AI Memory Architecture
nagatsu
0
500
【FinOps】データドリブンな意思決定を目指して
z63d
2
460
自分が詳しくない領域でAIを使う #プロヒス2026
konifar
20
7.8k
Flow 不死:AI 時代 DevOps 的不變本質
cheng_wei_chen
2
550
感情と身体を置き去りにしない、エンジニアの生きのこり方 ──いまから、ここから「自分の状態」を扱うという選択
saorimurooka
0
360
40代で“やっとエンジニアになれた”――閉じた学びを開き、空の青さを知る / 20260628 Naoki Takahashi
shift_evolve
PRO
4
1k
GitHub Copilot運用のリアル ~AI Credit時代にどう向き合うか~
takafumisu2uk1
0
470
Agile and AI Redmine Japan 2026
hiranabe
4
500
Featured
See All Featured
Unsuck your backbone
ammeep
672
58k
Building AI with AI
inesmontani
PRO
1
1.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.2k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
140
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
200
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
sira's awesome portfolio website redesign presentation
elsirapls
0
280
The agentic SEO stack - context over prompts
schlessera
0
820
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2k
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]