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のWIPの話 2019 / wip-2019
Search
ken_c_lo / TAEKO AKATSUKA
June 29, 2019
Design
6
2.4k
esaのWIPの話 2019 / wip-2019
とちぎRuby会議08でお話させていただきました。
http://regional-gh.rubykaigi.org/tochigi08/
https://esa.io
ken_c_lo / TAEKO AKATSUKA
June 29, 2019
Tweet
Share
More Decks by ken_c_lo / TAEKO AKATSUKA
See All by ken_c_lo / TAEKO AKATSUKA
認知パターンから考えるesaらしさのデザイン / Thinking esa-like design
ken_c_lo
35
7.7k
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
185
80k
esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること / Design Talk of esa
ken_c_lo
50
10k
ノンデザイナーのためのコンセプト & ロゴ作り実践講座 feat. savanna.io
ken_c_lo
46
9.9k
esa.io - 趣味から育てるWebサービスの、仲間・会社・お金のつくりかた
ken_c_lo
33
7.6k
esaとRubyistとわたし
ken_c_lo
12
5k
デザイナー兼プロダクトオーナーのススメ
ken_c_lo
48
5.9k
たのしいesa #esa_io #devKan
ken_c_lo
12
3.3k
Other Decks in Design
See All in Design
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
200
Design System for training program
mct
0
130
Credence
lratmansunu
0
460
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
420
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
350
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
Первая беседа о Карте реализации историй
ashapiro
0
290
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
460
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
4.7k
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
200
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
A Philosophy of Restraint
colly
203
16k
GraphQLとの向き合い方2022年版
quramy
43
13k
Building Applications with DynamoDB
mza
90
6.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Building Your Own Lightsaber
phodgson
103
6.1k
Visualization
eitanlees
145
15k
Transcript
esaͷWIPͷ 2019 by @ken_c_lo at esa LLC June 29, 2019
ͱͪ͗Rubyձٞ 08 WIP
!2 • ௩ ົࢠ • @ken_c_lo (@taea) • esa LLC
• ۀऀɾσβΠφʔ • ΤϯδχΞ2ਓ + σβΠφʔ1ਓ • ࠷ॳझຯͰαʔϏεΛ࡞͍ͬͯͨ • 5લ͔Β๏ਓԽ
https://esa.io
• MarkdownͰॻ͚Δใڞ༗αʔϏε • Wikiతͳ͍ํ͕Ͱ͖Δ esaΛ͝ଘͷํʁ ůŢ
None
esaͷWIPͷ 2019 by @ken_c_lo at esa LLC June 29, 2019
ͱͪ͗Rubyձٞ 08 WIP
WIP ͱʁ
WIP ʹ Work in Progress ਐߦதɾ࡞ۀதɾॲཧதɾະ ෆશͰ͋Δ͜ͱΛप͢Δه߸ͱͯ͠ΘΕΔ řŎŕŲƅ
ͱΓ͋͑ͣɺڞ༗ ࡶʹڞ༗ ·ͩશ෦Ͱ͖ͯͳ͍͚Ͳڞ༗
͜Μͳײ͡ͷ͜ͱΛਐΊ͍ͯΔ͚Ͳɺ ·ͩ͡Όͳͯ͘ɺ ͜Ε͔Βͬͱྑ͘ͳΔΜͰ… [WIP] Λ͚ͭͯԿ͔Λڞ༗͢Δͱ͖ͷ͖ͪ • ͳͷͰݫ͗͢͠Δποίϛ·ͩצหͯ͠Ͷ • ͚Ͳɺؒ͘͢͝ҧͬͯͨΒڭ͑ͯͶ •
ࠔͬͯͨΒॿ͚ͯͶ • Δؾ͋ͬͯ͜Ε͔ΒΔͭΓͰ͋ΔΜͩΑ • ͬ͘͟Γ͜͏͍͏͜ͱͬͯΔ͔ΒͳΜͱͳͬͯͯ͘Ͷ • ͞Γؾͳ͘΄Ίͯ͘ΕͨΒΔؾग़Δ͔ • ·ͣࣗͷϝϞతʹॻ͍ͯΔ͚ͩͳΜͩ …ׂͱɺݴ͍༁͕·͍͔͠͠Εͳ͍ʂ
ͭ·ΓɺWIPͱ ΤΫεΩϡʔζͷҰछ ʢݴ͍༁ɾหղɾݐલʣ Excuse me
ਓɺ ݴ͍༁ɾݐલ͕ඞཁ • ஏ͔͍ͣ͜͠ͱ • ݴ͍ͮΒ͍͜ͱ • ͩ͘Βͳ͍͜ͱ • ෆશͳ͜ͱ/ࣗ৴ͳ͍͜ͱ
• ࣄతͰͳ͍͜ͱ …ͳͲΛݴ͏࣌ʹ
ͪͳΈʹ…ʮϙΤϜʯҰछͷΤΫεΩϡʔζ • pplog.net • ࠷৽ͷهࣄ͔͠ެ։Ͱ͖ ͳ͍ϒϩάͷΑ͏ͳͷ • ʮϙΤϜʯΛॻ͘ॴ • ϙΤϜ͔ͩΒ
• Web্ʹΒͳ͍͔Β ݴ͍ʹ͍͘͜ͱɺஏͣ ͔͍͜͠ͱɺϙΤϜ ͳΒݴ͑Δοʂ
ΤΫεΩϡʔζҙਤతͳ੍ݶΛՃ͠ɺ Έʹ͋ΔछͷʮϢϧ͞ʯΛ༩͑Δ͜ͱͰɺ ʮΏΔ͠ͷσβΠϯʯͱউखʹݺΜͰ͓Γ • ࠓ·Ͱݴ͑ͳ͔ͬͨ͜ͱ͕ݴ͑Δ • ॻ͚ͳ͔ͬͨਓ͕ॻ͚Δ • Ͱ͖ͳ͔ͬͨ͜ͱ͕Ͱ͖Δ ݸਓతʹڵຯΛ࣋ͬͯΔ
WIP esa.ioͷWIPػೳʹ͍ͭͯ
อଘϘλϯ͕ 2ͭʁʁ
࡞ۀதͷͱ͖ɺWIPͰอଘ ϒϩάͳͲͰ͍͏ͱ͜ΖͷԼॻ͖ʹ͋ͨΔײ͡ Լॻ͖ஈ֊͔Βଞਓʹݟ͑ΔΑ͏ʹͳͬͯΔ
WIPͰอଘ͢Δͱɺ λΠτϧ͕άϨʔΞτ • WIPͰߋ৽ͯ͠WebhookͰSlackͱ͔ʹ௨͕ඈͳ͍ • ߋ৽ҰཡʹάϨʔΞτͯ͠ग़ΔʢHomeը໘Ͱͳ͍ʣ • Կߋ৽͢Δ͜ͱ͕Ͱ͖Δʢ㵰+Sʣ • ΈΜͳʹੵۃతʹΒͤ͠ͳ͍͚Ͳɺڵຯ͋ΔਓΘ͟Θ͟ݟʹདྷΕ
ݟΔ͜ͱ͕Ͱ͖Δঢ়ଶ
͍͍ͩͨͰ͖ͨΒɺShip It!
Ship It! ͢Δͱ Webhook ͷ௨͕ඈͿ ƻ ΈΜͳ͕ݟʹདྷΔ
Almost done? ≠ Done! ʮ͍͍ͩͨͰ͖ͨʯ͕ϙΠϯτ • 70 - 80%͘Β͍ͱ͔Ͱ͍͍ͷ͔ʁ
• ·ͱ·͖͔ͬͯͨΒҰ୴प͍ͨ͠ͳʔͱࢥͬͨλΠϛϯάͰShip it • ͬͱϒϥογϡΞοϓ͍ͨ͠ͳʔͱࢥͬͨλΠϛϯάͰɺWIPʹ ͢͜ͱͰ͖Δʢ݁ߏΑ͘Δʣ
WIP ͰใΛॻ͍ͯΈΔ Case Study
ग़ࣾͨ͠Β…WIPͰใΛॻ͘ śŰżŖ લͷใΛίϐʔͯ͠ฤू ͬΆ͍ࣈ͕λΠτϧʹೖͬͯΔهࣄΛί ϐʔ͢Δͱɺউखʹࠓͷʹͯ͘͠ΕΔ TODOϦετΛॻ͘ w <>ˠ<Y>ͰνΣοΫϘοΫεॻ͚Δ w ࠓΔ༧ఆͷ͜ͱ͕ࣗͰ၆ᛌͰ͖Δ
w Ϧετʹॻ͍͓ͯ͘ͱɺΕͯΔΘ͚͡Όͳ͘ ͯɺΔͭΓ͋ΔΜͩͳͬͯ͜ͱΘΔ
ࣄத… ใΛԿߋ৽ ŹŞŹŞʜ λεΫΛ͜ͳͨ͢ͼɺใΛߋ৽ w 50%0ϦετʹνΣοΫΛೖΕΔ w ਵ͢ΔղઆඋɺϋϚͬͨͱ͜Ζݒ೦ɺ ͦͷ࣌ͷؾ࣋ͪͳͲه͠ͱ͘ͱศར w
ಥൃతͳλεΫՃͯ͠ߋ৽ w ͷऴΘΓʹʮࠓԿ͚ͬͨͬʜʯͬͯͳΒ ͣʹࡁΉ
ୀࣾ࣌ʹ…ใΛShip It! śŨŜƀŖ SlackͳͲʹ௨͕ඈΜͰɺΈΜͳ͕ݟʹདྷΔ ࠓͷॴײ૯ׅΛॻ͍ͯɺShip It!
ͦͷଞͷใTIPS • ใλΠτϧʹࠓͬͨ͜ͱɺࠓͷؾ࣋ ͪΛॻ͘ਓ͍Δ • ࠓͷϥϯνɺࠓͷςʔϚۂΛॻ͘ਓ • ͋ͱͰͲΜͳ͔ͩͬͨࢥ͍ग़ͤͯศར • ୀࣾ࣌ʹ໌ͷใΛWIPͰॻ͍͓ͯ͘έʔε
͋Δ • ໌ͷݟ௨ཱ͕ͯ͠ΒΕͯศར • ேձͳͲͰɺࡢͱࠓͷใΛڞ༗ͯ͠ɺͦ ΕΛݟͳ͕Βใڞ༗૬ஊΛͨ͠Γ͢Δ • ʮॴײʯίʔφʔʢϑϦʔςΩετͷ෦ʣͰ ࣌ંΓ্͕ͬͨΓ͢Δ
WIPͰใΛॻ͘ͱ… ŬŕŴƅŖ ேɺࣗͷͨΊʹॻ͍ͨTODOϦετ͕ɺ ؼΔͱ͖ʹΈΜͳʹڞ༗Ͱ͖Δใʹʂ w ʮใࠂɾڞ༗ͷͨΊͷυΩϡϝϯτʯΛॻ͔ͳͯ͘ྑ͘ͳΔΜͰ͢Ͷ w ಉ͡Α͏ͳײ͡ͰɺʮΞδΣϯμʯ͕ձٞऴΘΔࠒʹʮٞࣄʯʹͳͬͨΓ͠·͢
WIP ใ͚ͩ͡Όͳ͍ɺ͍ΖΜͳΑ͍͜ͱ
Case 1: WIPͰॻ͘ͱɺணख͍͢͠ • ࣄલʹෆ࣮֬ͳཁૉͷଟ͍ࣄ΄ͲɺखΛ͚ͭΔͷ͕ԯ߷ʢεϥΠυͱ͔ʂʣ • WIPͳΒ࠷ॳͷҰา͕౿Έग़͍͢͠ • ࠷ॳλΠτϧͷΈɺࢥ͍͖ͭΛՕॻ͖ʹ͢Δ͚ͩͰΑ͍ •
࠷ॳʹࡶʹWIPͰͬ͘͟Γॻ͍ͯڞ༗͢ΔͱɺपғͷϑΟʔυόοΫΛड͚ͳ͕ ΒɺঃʑʹυΩϡϝϯτΞΠσΞΛྑ͍ͯ͘͘͜͠ͱ͕Ͱ͖Δ • ్தͰୈࡾऀͷϦΞΫγϣϯΛΒ͑ΔͱɺϞνϕʔγϣϯ্͕Δ Ұؾʹ͕ߴ͍ͷΛॻ͘ͷ ϋʔυϧߴ͍͚ͲɺWIPͩͱղ૾͕ ͍ঢ়ଶ͔Βॻ͖ग़͍͢͠ɻ
Case 2: WIPͰެ։͢ΔͱɺपΓͷཧղΛಘ͍͢ • ʮͳΔ΄Ͳɺ͜͏͍͏ϓϩδΣΫτ͕ࠓಈ͘༧ఆͳͷ͔ʯͱ͍͏प͕Ͱ͖Δ • ΔΑʂΖ͏Αʂ ΛपғʹॊΒ͔͘Ξϐʔϧ → पΓ৺ͷ४උ͕Ͱ͖Δ
• اը͕ॊΒ͔͍͏͔ͪΒΈΜͳ͕ࣄऀʹͳΕΔ༨͕Ͱ͖Δ • ݻ·͔ͬͯΒݴ͏ͱˠʮͬͱૣ͘ݴͬͯ͘ΕΕ…ʯʮͦΜͳٸʹݴΘΕͯ ࠔΔ…ʯ ࢀߟʣϝυϨʔ͞ΜͷΠϯλϏϡʔ : https://docs.esa.io/posts/153 اը্ཱ͕͕ͪͬͨͱ͖ʹɺৄࡉ͕ܾ ·ͬͯͳͯ͘ɺ·ͣλΠτϧ͚ͩ ͷWIPͷυΩϡϝϯτΛ࡞͓ͬͯ͘ɻ
• WIPͱॻ͍ͯ͋Δͱɺॻ͖खͷߟ͑Λ಄͔Β൱ఆ͠ͳ͘ͳΔ • ͜Ε͔Βࡉ͔͍ͱ͜ΖΛྑ͍ͯͭ͘͘͠ΓͳͷͩΖ͏ɺͱ͍͏͜ͱ Λલఏʹ͢Δ͜ͱ͕Ͱ͖Δ • ʮ·ͩॻ͍ͯͳ͍͚͔ͩ͠Εͳ͍͚Ͳɺ͕̋̋Γͯͳ͍͔ʙʯ ˠ ࢦఠࣗવʹؾΛͬͨײ͡ʹͳΔ •
͕େ͖͍ਓɾϋʔτ͕ڧ͍ਓҎ֎ൃ৴͘͢͠ͳΔ ☺ Case 3: WIPͩͱɺಡΈख͕༏͘͠ͳΕΔ ͪΐͬͱπϝ͕͍ΞΠσΞ͚ͩͲɺ ·͋WIP͔ͩΒ͋Μ·ΓποίϛΛೖ ΕΔͷͳ͊…
WIP WIPਓͷͨΊͳΒͣ
• ϩʔΧϧͷςΩετΤσΟλ • ݸਓ༻ͷEvernote • ࣗѼͯͷϝʔϧ ࣗͷͨΊʹॻ͘ʮυΩϡϝϯτʯ උɾϝϞɾTODOϦετɾاըΞΠσΞɾઃܭΞΠσΞ ༩݅ͷཧɾվળҊɾࠒࢥ͍ͬͯΔ͜ͱɾ ॻ్͖தͷΖΖ…
ྫ͑͜Μͳͱ͜Ζʹ
ࣗͷϩʔΧϧ (͋Δ͍) ʹ͋Δ ࣗͷͨΊͷͷΛɺ ૣ͍ஈ֊ͰνʔϜϝΠτʹݟ͑Δॴʹɻ ͦΕΛΓ͘͢͢ΔΈ͕WIP ΈΜͳॻ͍ͯͳ͍Θ͚͡Όͳ͍ɻ ਓʹݟͤͯͳ͍͚ͩͳΜͩʂ
ࣗͷͨΊʹͬͨ͜ͱ͕ɺ ୭͔ͷͨΊʹͳΔ͜ͱ͕͋Δ ࣗͷͨΊʹॻ͍ͨTODOϦετ͕ؼΔͱ͖ʹใʹͳͬͯΔʂ ʢͳΒͳ͍͜ͱ͋Δʣ
ࣗͷͨΊʹͬͨ͜ͱ͕ɺ ୭͔ͷͨΊʹͳΔ • OSSͷϓϩδΣΫτɺݸਓ։ൃ • ϒϩά࡞ͷΞτϓοτɺಉਓ׆ಈͱ͔ʁ • WebαʔϏεͷυοάϑʔσΟϯάͱ͔ • esa͕ࣾେʹ͍ͯ͠Δߦಈࢦͷͻͱͭ
• ʮ͕ࣗͨͪࣗཉ͍͠ͷɾ͏ͷΛͭ͘Δʯ • αʔϏεάοζ͕ࣗͨͪཉͯ͘͠࡞ͬͯΔ ʬ͜ͷݪཧͰճ͍ͬͯͦ͏ͳͷͨͪʭ
ࣗͷͨΊʹͬͨ͜ͱ͕ɺ ୭͔ͷͨΊʹͳΔ ߦҝͦͷͷ͕ใुͰ͋Δঢ়ଶ Ϟνϕʔγϣϯ͕ߴ͍ ͦΕͧΕ͕ࣗతʹಈ͚ΔνʔϜ
ࣗతͳνʔϜ = Α͍νʔϜ …ͩͱesaߟ͑ͯΔ
WIP ·ͱΊ: શ͕ͯWIPʹͳΔ
͜ΕFIXͰ͔͢ʁ ֬ఆࣄ߲Ͱ͔͢ʁ ݱͰΑ͋͘Δ࣭
͔֬ʹࣄΛ͢Δ্Ͱɺ ʮ͜ΕͰ֬ఆ(FIX)ʯݐલ্ඞཁɻ ͳ͍ͱ্ख͘ճΒͳ͍ɻ ͚ΕͲຊདྷɺ શͯͷͷ͝ͱෆશͰɺ ൃల్্Ͱɺ Ͳͷ͔࣌ΒͰมΘ͍͚ͬͯΔ͠ɺ ͬͱྑ͘͢Δ͜ͱ͕ Ͱ͖ΔͷͰͳ͍͔ʁ
WIP ͜Ε͔Βͬͱͬͱྑ͘ͳΔՄೳੑ͕ ͋Δͱ͍͏͜ͱ ͋Εʁ࣮ੈͷதͷ৭Μͳͷɺ͍͍ͩͨ8*1ʹͰ͖ΔͷͰʁ
શ͕ͯWIPͱͯ͠ ίϛϡχέʔγϣϯͰ͖ΔΑ͏ʹͳΔͱɺ ΑΓࣗతͰ͍͖͍͖ͱͨ͠ Α͍ͷ͕࡞ΕΔνʔϜʹͳΕΔͷ͔
Everything is in Progress Thank you (\( ⁰⊖⁰)/)