Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
フィジカルコンピューティングでアイデアをカタチに! / hiu-physcom
Search
yumulab
August 03, 2025
Technology
84
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
オープンキャンパス模擬講義 Webカメラを使ったインタラクティブWebアプリの開発 / oc2026
yumulab
0
61
非試合日の野球場を楽しむためのARホームランボールキャッチ体験システムの開発 / EC79-miyazaki
yumulab
0
430
MR流体を用いたセルフセンシング可能な触覚デバイスの提案 / haptics36-kamimura
yumulab
0
130
歌詞駆動パーティクルライブ制作支援ツールの提案 / wiss2025-kamimura
yumulab
0
18
人の移動を通信媒介とする電子ペーパーサイネージのための圧電素子を用いた近接駆動方式の提案 / wiss2025-akiba
yumulab
0
19
ASMR耳かき動画のための音と触覚の同時提示システムの提案 / wiss2025-shimizu
yumulab
0
15
地産地消型センシングに向けた植物の葉への電子回路形成の検討 / wiss2025-yumura
yumulab
0
16
Bluetooth Low Energyの海に潜る / Dive to Bluetooth Low Energy
yumulab
0
160
湯村研究室の紹介2025 / yumulab2025
yumulab
0
380
Other Decks in Technology
See All in Technology
幾何アルゴリズムで なめらかなピン操作を / iOSDC Japan 2026 / smoothpin
kazumanagano
0
350
The Agent Builder Loop from Daily Work to OSS
minorun365
PRO
3
200
バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ
waiwai2111
1
120
DEFCON_CHV_CTF_Write-up.pdf
bata_24
0
150
HRC_Frontend_Conference_Fukuoka_2026.pdf
ts020
0
720
Claude Codeを「使うほど育つ」AI秘書にするノウハウ
minorun365
PRO
27
20k
あるけみー式LTスライド作成術
alchemy1115
1
210
俺の仕事は AIに奪われないし、たぶんその BIも要らない
hikaruri
0
470
What the customer really needed
kawaguti
PRO
1
160
Geolonia の開発現場における AIの活用について
miya0001
0
100
20260912_スクラムにジェネラリストは必要か
ryugen04
0
420
10分で知る最近のOmarchy
komagata
0
320
Featured
See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
46k
Accessibility Awareness
sabderemane
1
210
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
59
7k
Side Projects
sachag
456
43k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.1k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
WCS-LA-2024
lcolladotor
0
830
How to Think Like a Performance Engineer
csswizardry
28
2.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
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]