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
esaとRubyistとわたし
Search
ken_c_lo / TAEKO AKATSUKA
March 21, 2017
Design
12
5k
esaとRubyistとわたし
大江戸Ruby会議06で発表させていただきました
https://asakusarb.github.io/oedo06/
ken_c_lo / TAEKO AKATSUKA
March 21, 2017
Tweet
Share
More Decks by ken_c_lo / TAEKO AKATSUKA
See All by ken_c_lo / TAEKO AKATSUKA
esaのWIPの話 2019 / wip-2019
ken_c_lo
6
2.5k
認知パターンから考えるesaらしさのデザイン / Thinking esa-like design
ken_c_lo
35
7.9k
The esa way - Creating a Profitable Product from a Hobby Project
ken_c_lo
1
480
エンジニアのためのスライドデザイン実践講座 / How to design presentations for engineers
ken_c_lo
186
81k
esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること / Design Talk of esa
ken_c_lo
50
11k
ノンデザイナーのためのコンセプト & ロゴ作り実践講座 feat. savanna.io
ken_c_lo
46
9.9k
esa.io - 趣味から育てるWebサービスの、仲間・会社・お金のつくりかた
ken_c_lo
33
7.6k
デザイナー兼プロダクトオーナーのススメ
ken_c_lo
48
5.9k
たのしいesa #esa_io #devKan
ken_c_lo
12
3.3k
Other Decks in Design
See All in Design
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
110
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
370
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
190
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
250
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4k
portfolio2025_kanakoohata
kanako106
0
520
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
210
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
540
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
450
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.7k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
120
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
320
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
Code Review Best Practice
trishagee
65
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Bash Introduction
62gerente
610
210k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
4
190
Transcript
@ken_c_lo TAEKO AKATSUKA 2017.03.20 େߐށRubyձٞ06 @ιϥγςΟΧϯϑΝϨϯεηϯλʔ esa ͱ Rubyist ͱ
Θͨ͠
\śŸũƄŪ!/
w ௩ົࢠ w !LFO@D@MP w FTB--$ w σβΠφʔ w ϓϩάϥϚͰͳ͍
w 3VCZJTU
4
5 ΤϯδχΞਓ σβΠφʔਓͷձࣾ FTBJP QQMPHOFUͷ։ൃɾӡӦ
https://esa.io w νʔϜͷͨΊͷυΩϡϝϯτڞ༗αʔϏε w ʮใΛҭ͍ͯͨʯͱ͍͏ίϯηϓτ w ϚʔΫμϯͰॻ͚Δ w ʮॻ్͖தʯͷใΛڞ༗Ͱ͖Δ w
BTBLVTBSCͷӡӦͰ͍͍ͬͯͨͩͯ ·͢
https://pplog.net w ʮϙΤϜʯ͕ॻ͚ΔɺಡΊΔ w هࣄຖͷύʔϚϦϯΫ͕ͳ͍ϒϩά w VTFST w ଟ͘ͷ3VCZJTU͕ϙΤϚʔ ॳΊͯͷਓӈԼͷϗωΛճ͢ͱ
ଟָ͍͠ͱࢥ͍·͢
ಥવࢲࣄͰڪॖͰ͕͢ʜ w ࠷ۙ݁ࠗ͠·ͯ͠ʜ w !UBUTVP4BLVSBJ w ͋ͷϦετ w IUUQBN[OBTJB B0Y#0X-
ͱ͜ΖͰʮ3VCZJTUʯͬͯԿʁ RubyistͬͯԿ͔ͩͬͯΔʁ ͋ΕɺΒͳ͍ͷʁ ͪΌΜͱఆ͕ٛ͋ΔΜͩΑ w ͍Θ͘
3VCZJTUͱ ʮRubyʹରͯ͠୯ͳΔ ͓٬͞ΜҎ্ͷؾ࣋ͪ Λ͍࣋ͬͯΔਓʯ https://www.slideshare.net/ takahashim/how-to-become-a- rubyist
ຊͷझࢫ w QEɺͦͯ͠3VCZJTUୡͱͷग़ձ͍ w ΤϯδχΞͱΜͰαʔϏεΛ࡞ΔΑ͏ʹͳΔ ·Ͱ w ࢲ͕αʔϏεσβΠϯΛ௨ͯ͠Γ͔ͨͬͨ͜ͱ w ˢͱ3VCZίϛϡχςΟͱͷڞ௨ͷ
w ͪΐͬͱ;Θͬͱͨ͠
ݽಠظલ͘Β͍·Ͱ w ϑϦʔϥϯε w ࣗͷ8FCαʔϏεΛ࡞Γ͍ͨ w $BLF1)1ͱ͔ษڧͨ͠Γ w ਓͰαʔϏε࡞ͬͨΓ࠳ંͨ͠Γ w
աఔΛͨ·ʹ#MPHʹॻ͍ͯͨ w 3VCZίϛϡχςΟपลͷσβΠφʔͱΓ߹͏
P4D Programming for Designers w ΤϯδχΞʢ΄ͱΜͲ3VCZJTUʣ ͕σβΠφʔʹ3BJMT(JUΛڭ ͑ͯ͘ΕΔίϛϡχςΟ w લ͘Β͍·Ͱ
1%ͰॳΊͯग़ձͬͨ3VCZJTU ͱ͍͏ਓछ w ଛಘײɺ͓ࣄײ͕ͳ͘ɺͨͩʮ͖͔ͩΒʯͰ ຖिͱִ͔िͱ͔ू·͍ͬͯΔ w ແঈͰ৺ʹσβΠφʔʹ(JU3BJMTΛڭ͑ͯ͘ ΕΔ w ͜Μͳʹʮ͍͍ײ͡ʯͷਓୡΛॳΊͯݟͨ
ͳͥ͋ͷࠒɺ ൴Β͋Μͳʹ ஸೡʹ ࢲୡσβΠφʔʹ(JU3BJMTΛ ڭ͑ͯ͘Ε͍ͯͨͷ͔ʁ ฉ͍ͯΈͨɻ
!QQXPSLTࢯ ΈΜͳ͕ͦ͏͔Βͳ͍͚Ͳɺ ͓Εڭ͑Δͷָ͕͔ͬͨ͠ɻ ָ͔͔ͬͨ͠Βͬͨɻ ָ͍͜͠ͱਓʹڭ͍͑ͨ ͍ͬͯ͏ͷ͋ͬͨɻ ʢRailsʹग़ձ͔ͬͯΒ ϚδͰWeb։ൃָ͘͠ͳͬͨΜͩΑͳ͋ɻʣ
ओ࠵!TBUPDPDPBࢯ ʰ͕͖ࣗͩͱࢥ͏ͷ Λଞͷਓ͖ʹͳͬͯ͘Ε Δͱخ͍͠ʱ ͕Ϟνϕʔγϣϯ͔ͳ͋ɻ
3VCZJTUͱ ʮRubyʹରͯ͠୯ͳΔ ͓٬͞ΜҎ্ͷؾ࣋ͪ Λ͍࣋ͬͯΔਓʯ https://www.slideshare.net/ takahashim/how-to-become-a- rubyist
1%ϋοΧιϯ w σβΠφʔͱϓϩάϥϚਓͰΜͰɺͰαʔ ϏεΛ࡞Δ w ΤϯδχΞɺσβΠφʔͷ͓ޓ͍ͷ͢͝͞࠶ೝࣝ w 8FCαʔϏεΛ࡞Δָ͍ͬͯ͠ʂ w ֤νʔϜϨϕϧߴܹͯ͘త
QEͱग़ձͬͯҎ߱ɺ 3VCZͷΤϯδχΞͱΜͰɺ ৭ʑͳαʔϏεΛ झຯͰ࡞ΔΑ͏ʹͳΔ
2011.12 http://receibo.herokuapp.com w/ @shu0115 w ؆୯ՈܭαʔϏε w ϨδͰͦͷͰೖྗ͢Δ w ϨγʔτΛஷΊͳ͍͍ͯ͘Ոܭ
w 044 ݱࡏٳࢭதͰ͢N @@ N
2013.04 http://ktra.herokuapp.com/ https://github.com/taea/ktra w/ @katton, @ppworks w λεΫཧπʔϧ w ਓ༻1JWPUBM5SBDLFSΈ͍ͨͳ
w ॳΊͯSBJMTOFXͨ͠αʔϏε w 044
2013.09 https://pplog.net w/ @ppworks and Team pplog ॳΊͯͷਓӈԼͷϗωΛճ͢ͱ ଟָ͍͠ͱࢥ͍·͢
2014.05 https://esa.io w/ @fukayatsu
ָͯ͘͠ɺ αʔϏεΛͻͨ͢Β࡞͍ͬͯͨΒɺ ͍ͭͷؒʹ͔झຯ͕ ຊۀʹͳ͍ͬͯͨɻ
ࢲ͕͜ΕΒͷϓϩμΫτ σβΠϯΛ௨ͯ͡ Γ͍ͨ͜ͱ ϓϩμΫτʹ໋Λਧ͖ࠐΉ͜ͱ
ϓϩμΫτ͕͖ͪΜͱσβΠϯ͞ ΕΔͱɺҙࢥ͕॓Δ w ϓϩμΫτ͕ࣗΉํҙࢥΛ͔࣋ͬͨͷΑ͏ʹɺ ͍͖͍͖ͱࣗ͢ΔΑ͏ʹͳΔ w ։ൃνʔϜ͍͖͍͖ͱࣗ͢Δ w σβΠϯʹ͓͍ͯͦͷঢ়ଶ͕࣮ݱग़དྷͨͱָ͖͕͍͠ ؔΘΔਓ͕͍͖͍͖ͱ͢ΔͨΊͷ
ʮϕʔεʯΛ࡞Γ͍ͨ
ʮ͍͖͍͖ʯ
ʰແ໊ͷ࣭ʱ ͋Δத৺తͳ࣭͕ଘࡏ͢ΔɻͦΕਓɺொɺݐɺߥͳͲͷੜ໋ਫ਼ਆ ͷࠜݯతͳنൣͰ͋Δɻ͜ͷ࣭٬؍త͔ͭਖ਼֬Ͱ͋Δ͕ɺ໊͚Δ͜ ͱͰ͖ͳ͍ɻ ͜ͷ࣭Λࣗݾͷੜ໋ʹٻΊΔ͜ͱɺສਓʹͱͬͯͷجຊత໋Ͱ͋Γɺ ͯ͢ͷݸਓͷޠͷཁͰ͋ΔɻͦΕɺ͕ࣗ࠷ੜ͖ੜ͖ͱ͢Δॠؒ گΛٻΊΔ͜ͱͰ͋Δɻ ʢதུʣ ݐொͷແ໊ͷ࣭ɺਓͼͱͷฏຌͳৗੜ׆͔Βؒతʹੜ͞ΕΔ ͚ͩͰɺਓҝతʹͦΕΛͭ͘Δ͜ͱͰ͖ͳ͍ɻͪΐ͏ͲɺՖ͕छ͔Βੜ
͞ΕΔ͚ͩͰɺਓҝతʹͦΕΛͭ͘Εͳ͍ͷͱಉ͡Ͱ͋Δɻ ᴷᴷ C.ΞϨΫαϯμʔஶ ʗ ฏాᷨಹ ༁ ʰ࣌Λӽ͑ͨݐઃͷಓʱ ᴷᴷ ߐߒҰ ஶ ʰύλʔϯɺWikiɺXP ʙ࣌Λӽ͑ͨͷݪଇ P.42 ΑΓ
ʰແ໊ͷ࣭ʱ - ͦͷ֗ʮΒ͠͞ʯΛͪΌΜͱอͪͳ͕Β͢Δ - ্͔Βͷԡ͚͠Ͱͳ͘ - ͋ΔҰఆͷݫ͍͠ϧʔϧ͕͋ΔΘ͚Ͱͳ͘ - ͦΕͧΕ͕ࣗతʹͦΕͧΕͷͤΛٻΊͯಈ͍ͨ݁Ռ -
ؾ͚ͮࣗવͱͦ͏ͳ͍ͬͯΔΑ͏ͳ … ֗ݐγεςϜ͕ Ұఆͷ࣭Λอͬͨ··ɺϘτϜΞοϓͰ উखʹࣗݾ૿৩ɾ͍ͯ͘͠ɻ
ϓϩμΫτʹؔΘΔਓ͕ ʮ͍͖͍͖ʯ͢ΔͨΊͷ ϕʔεΛ࡞Δͷ͕ɺ ࢲʹͱͬͯͷσβΠϯɻ • ίϯηϓτϝΠΩϯάੈք؍ͷৢΛಓʹ͍ͬͯΔͱɺ͋Δ ͔࣌Βͦ͜ʹ֬ݻͨΔنൣ͕ੜ·ΕɺϓϩμΫτ͕ΩϟϥΛ֫ಘ͠ɺ ؔΘΔਓ͕͍͖͍͖ͱ͠͡ΊΔɻ • ϏδϡΞϧɺίʔυؔͳ͘ɺʰ͍͖͍͖ʱͷͨΊʹͰ͖Δ͜ͱΛ
Δ
͍͖͍͖ͱͨ͠ϓϩμΫτ ϢʔβʔʹѪ͞ΕΔ • esaϢʔβʔʹѪ͞Εͯ·͢ΑͶɺͱΑ͘ݴΘΕΔ • ϢʔβʔϓϩμΫτͷੈք؍ʹڞ໐ͯ͠ • ੵۃతʹԠԉͯ͘͠ΕΔ • ָͬͯ͘͘͠ΕΔ
• ϑΟʔυόοΫͳͲΛ௨ͯ͠ҰॹʹϓϩμΫτΛ࡞Δؒ • ʢ͍͍ҙຯͰɺʮ͓٬͞ΜʯͬΆ͘ͳ͍ʁʁʣ • NiceͳϢʔβʔ͞ΜͨͪɾίϛϡχςΟʹकΒΕ͍ͯΔ
3VCZίϛϡχςΟʹɺ ࣅͯΔʁ ʢࣅͯͨΒ͍͍ͳʜʣ
3VCZJTUʹڭΘͬͨσβΠϯ؍ • ࢲ͕σβΠϯͰΓ͔ͨͬͨ͜ͱɺRubyίϛϡχςΟͷதʹ ͋ͬͨ • Rubyistʹग़ձ͍ɺͦͷ͍͖͍͖ͱͨ͠ྑ͞ʹ৮ൃ͞Εͯੜ·Εͨ σβΠϯ؍ɾϓϩμΫτ؍
ؔΘΔਓΛ͍͖͍͖ͱͤ͞Δ 3VCZͷσβΠϯʹɺ σβΠφʔͱͯ͠श͍͍ͨɻ • Matzࢯ = ݴޠσβΠφʔ • σβΠϯͱ͍͏ߦҝຊདྷ͜͏͍͏͜ͱͳΜ͡Όͳ͍͔ •
esapplog·ͨɺRubyΛͬͯ࡞ΓɺRubyίϛϡχςΟͷத Ͱੜ·ΕͨαʔϏε • Matz is nice so we are nice. • ϓϩμΫτσβΠϯRubyֶͷ૬ࣅܗͰ͋Γ͍ͨɻ
͋Γ͕ͱ͏͍͟͝·͢ʂ 3VCZJTUͷΈͳ͞Μ
FTB͔Βͷ͔͞͞ͳԸฦ͠ esaͰOSSίϛϡχςΟٕज़ΧϯϑΝϨϯεʹ͚ͯɺӡӦπʔ ϧͱͯ͠esaͷແঈఏڙʢπʔϧεϙϯαʔʣΛߦ͍ͬͯ·͢ɻ ͝رͷํ͓ؾܰʹ͝૬ஊ͍ͩ͘͞ :) asakusa.rb, RubyKaigi, ౦ژnodeֶԂ ଞଟͷίϛϡχςΟར༻