Rails Developers Meetup 2018 Day 3 Extreme で発表させていただきました - https://techplay.jp/event/679666 - 質問: https://railsdm.herokuapp.com/issues/76
協力: FlyTeam: https://flyteam.jp/ レイルラボ: https://raillab.jp/
ΤϯδχΞͷͨΊͷεϥΠυσβΠϯ࣮ફߨ࠲Rails Developers Meetup 2018 Day3 Extreme2018.07.14esa LLC TAEKO AKATSUKA @ken_c_lo؆୯ɾΘΔɾಡ·ΕΔ͋co-sponsored by
View Slide
w ௩ົࢠw [email protected]@MPw FTB--$w ϓϩάϥϚʔਓσβΠφʔਓਓͷձࣾw ۀऀɾσβΠφʔw 3BJMTओʹWJFXͷ෦ΛΑ͘৮Δ
https://esa.io
ࠓճͷൃදͷܦҢಙ༻ΧϧύεࢯͷొஃΛἤͬͨΒɺ15ޙ͘Β͍ʹΦϑΝʔͷDM͕དྷͨ
• Bootstrap Night• ࣗࣾαʔϏεΛࣗݾࢿۚͰӡӦͯ͠ΔਓͷͨΊͷΠϕϯτ• ͋·Γදʹग़ͳ͍͚Ͳɺ ͍͢͝αʔϏεΛ࡞͍ͬͯΔਓʹొஃͯ͠Β͏• εϥΠυͷσβΠϯ͕…ࡐ: ਓͷεϥΠυͷσβΠϯ
ࡐͷεϥΠυͷ࡞ऀ• ͏͚͕Θ͞Μ @ukegawa• ΫϩΰגࣜձࣾɾΤϯδχΞࣾ• 2ͭͷαʔϏεΛ࡞ΓӡӦ• Flyteam: ඈߦػϚχΞͷαʔϏε flyteam.jp• ϨΠϧϥϘ: మಓϚχΞͷαʔϏε raillab.jpࠓճɺ͏͚͕Θ͞ΜͷεϥΠυΛϦσβΠϯ͠ͳ͕ΒɺΘΔεϥΠυσβΠϯͷώϯτΛݟ͚͍ͭͯ͜͏ͱࢥ͍·͢ɻݩεϥΠυ: https://speakerdeck.com/kurogo/03-bootstrap-night-vol-dot-3-zi-she-saitoyun-ying-jin-tiyotutokodawarifalsesabisuhui-she-yatutemasu ※ ࠓճͷ༰ͷ্ؔɺҰ෦ެ։͞ΕͨεϥΠυ͔Βมߋ͍ͯ͠Δ෦͕͋Γ·͢
Before
AfterͲͷΑ͏ʹม͑ͨͷ͔Λɺ͜Ε͔Βݸผʹղઆ͍͖ͯ͠·͢ɻ
ࠓճͷझࢫ• ΘΔɾಡ·ΕΔεϥΠυϨΠΞτͷ࡞Γํ• ྫ͑ɺτʔΫͷͦͷʹ͍ͳͯ͘WebͰγΣΞ͞Εͨ࣌ʹɺಡ·ΕͯΘ͔Γ͍͢σβΠϯΛࢦ͠·͢ • ͔ΜͨΜʹͰ͖Δ• KeynoteͷػೳͷൣғͰͰ͖Δ͜ͱʹݶఆɻڽͬͨ͜ͱΓ·ͤΜɻ • ͷߏ͠ΌΓ͢͞ʹ౿Έࠐ·ͳ͍• ΤϯδχΞ͞Μͨͪɺͷߏ͠ΌΓجຊతʹΈΜͳ্ख• ݟͤํͷͰͬͱΘ͔Γ͘͢ͳΔ͔ʁͱ͍͏ײ͡ͷʹͳΓ·͢
Keynote ςϯϓϨʔτ• Azusa͕ϕʔε• େମ͍͍ײ͡ʹͳΔKeynoteςϯϓϨʔτ• http://sanographix.github.io/azusa-keynote/• ͬͯΔਓଟ͍ɻࢲѪ༻ɻ• ຊʹେମ͍͍ײ͡ʹͳΔ• ૉΒ͍͠ͷΛ͋Γ͕ͱ͏͍͟͝·͢
·ͣɺදࢴλΠτϧϩΰɾΧϥʔϦϯά
Before• දࢴ͕ΠϕϯτλΠτϧʹͳͬͯͨ• 3ϖʔδͰͬͱɺτʔΫͷλΠτϧ͕ग़ͯ͘Δ• ͠ΌΔॱ൪తʹ͍͍ͷ͔͠Εͳ͍͚Ͳ…
After
දࢴॏཁ• Tweet͞Εͨ࣌ͷOGPΛҙࣝ• ΕͪΌ͚ͬͨͲmm• ಡΈͨ͘ͳΔදࢴʹ• ࣗࣾαʔϏε͕ΞϐʔϧͰ͖Δදࢴʹ
λΠτϧΛϩΰͬΆ͘ἧ͑Δἧ͑ΔΘ͟ͱἧ͑ͳ͍গ͠খ͘͞ਧ͖ग़͠ศར1ʙ2ߦͷ྆Λἧ͑Δ↓҆ఆײɾΧλϚϦײ͕ग़Δ3ߦἧ͑ͣখ͘͞↓ը໘ʹϦζϜ͕ग़Δ;͖ͩ͠↓ΞΫηϯτʹศརʂ҆ఆײ + ϦζϜײͰΛҾ͘λΠτϧʹ
͞Βʹࡉ͔͍λΠτϧ͚ͩͰͻͱख͔͚ؒΔͱ݁ߏҧ͏ʮ!ʯΛී௨ʹϕλଧͪ͢Δͱ…ʮ!ʯ͚ͩ໌ேମɾগ͠φφϝʹϝοηʔδʹ͍͕ग़ΔΑ͘ΘΕΔςΫͰ͢શ෦ಉ͡ଠͩ͞ͱ…େࣄ͡Όͳ͍จࣈΛࡉ͘͢Δڧऑ͕͖ͭϦζϜ͕ੜ·ΕΔ
ΧϥʔϦϯά: ৭গͳ͘ओʹ2৭ɾͬͯ4৭ + ͨ·ʹനࠇϝΠϯΧϥʔഎܠ৭ςΩετΧϥʔจࣈ৭αϒΧϥʔͨ·ʹαϒతʹ͏ΞΫηϯτΧϥʔڧௐ͍ͨ࣌͠ʹ͏
ϒϥϯυΧϥʔΛ͏ϒϧʔΑΓɺΤϯδͷํ͕ݸੑతͰҹʹΓ͍͢ʁ͔ͭɺࠓചग़͠தαʔϏε͕ϨΠϧϥϘͳͷͰɺͪ͜ΒͷΧϥʔϦϯάΛத৺ʹ͏͚͕Θ͞Μɺ2ͭαʔϏεΛ͍࣋ͬͯΔͷͰ໎͏…
͜ͷεϥΠυͷΧϥʔϦϯάεϥΠυͷσβΠϯͷΛ͢ΔͷͰɺअຐʹͳΒͳ͍Α͏ͳ৭Λ࠾༻ɻϝΠϯΧϥʔഎܠ৭ςΩετΧϥʔจࣈ৭αϒΧϥʔͨ·ʹαϒతʹ͏ΞΫηϯτΧϥʔڧௐ͍ͨ࣌͠ʹ͏
ΞδΣϯμ ͷϖʔδฒྻɾରൺͷؔͷදݱ
େݟग़͠খݟग़͠খݟग़͠େݟग़͠খݟग़͠খݟग़͠Before: ใΛཧରʹͳΔ2ͭͷʮίμϫϦʯ๏ଇΛಡΈղ͖ɺྨ͢Δɻ
ࠨӈʹฒͯฒྻؔΛදݱରͱͳΔ2ͭͷใΛࠨӈฒྻʹฒΔਧ͖ग़͠ + ʮίμϫϦʯηϯλʔἧ͑খݟग़͠ͷܗଶΛἧ͑Δฒྻɾରൺؔʹ͋Δͷ↓ࠨӈʹฒΔͱ ͕ؔΘ͔Γ͍͢;͖ͩ͠ +ʮίμϫϦʯ↓ݟग़͠ͷσβΠϯ౷Ұϖʔδͷ݁Ληϯλʔἧ͑↓҆ఆײɾڧௐใͷྨʹ߹ΘͤͯɺݟͨΛ౷Ұ͢Δɻ
ܦྺ ͷϖʔδ࣌ܥྻͷදݱ
Before: ใΛཧද͡Όͳ͍ φχΧදͷ෦ͱɺදͰͳ͍෦ɺ2छྨͷใɻͬͪ͜ ද߸߸߸߸߸↑ Before↓After
࣌ܥྻΛදݱ͢ΔσβΠϯͱઢͰ࣌ܥྻʹࣈΛڧௐ• ද͡Όͳ͍෦ݟͨ Λ͚Δ• Before / AfterͷؔੑΛ ;͖ͩ͠Ͱ҉ࣔͱઢͰ߲Λ݁Ϳ↓࣌ܥྻͷදݱࣈΛڧௐ͢Δ↓ΞΫηϯτɾදදݱද͡Όͳ͍෦
தදࢴʢେݟग़͠ʣ ͷϖʔδͷ۠Γͷදݱ
ͷ۠ΓΛදݱਧ͖ग़͠ + ʮίμϫϦʯηϯλʔἧ͑ଞͷϖʔδͱҧ͏ϨΠΞτʹͯ͠ɺͷసʹؾ͔ͮͤΔɻΞδΣϯμͷ;͖ͩ͠Λ࠶ར༻;͖ͩ͠ΛޮՌతʹར༻͠ɺεϥΠυશମʹ౷ҰײΛग़͢
ձࣾհ ͷϖʔδࣸਅɾΠϥετΛͬͯɺ͍͖͍͖ͱΘ͔Γ͘͢
After3ϖʔδʹׂ
Before: ใΛཧ3ͭͷใ͕ೖͬͯͨ → ͦΕͧΕϖʔδΛׂ͢Δձࣾհωʔϛϯάݟग़͠ϙϦγʔ
ࣸਅΛେ͖͘͏Before: ձࣾհͷ෦ࣸਅͷ༨നʹςΩετݩࣸਅΛτϦϛϯά·ͱ·ͬͨ༨നΛ ӈ্ʹਓΪϦΪϦͰΔ͜ͱͰɺը໘ʹ͕ΓͱഭྗԞ͔Βखલͷ͕Γ·ͱ·ͬͨ༨ന͕ͱΕΔࣸਅจࣈΛ͍ͤ͢ɻ
ΠϥετͰΠϝʔδ͘͢͠Before: ωʔϛϯά༝དྷΠϥετͰิͭ·Γ…Ͳ͏͍͏͜ͱʁ݁ΛՃͯ͠ิҹͰ݁༠ಋ͍Β͢ͱ• ͍Β͢ͱ: https://www.irasutoya.com/• Adobe Stock: https://stock.adobe.com/jp/େମͳΜͰ͋Δҹ + ݁ʢͭ·Γ…ʣ• ҹͷԼʹɺͦͷϖʔδͷ݁Λॻ͘• ҹ্͕ԼΛ۠ͬͯ͘ΕΔ• ʮͭ·ΓʯͷׂΛՌͨ͢
ࣄͷॴɾ࣌ؒ ͷϖʔδάϧʔϓԽɾϥϕϦϯά
After2ϖʔδʹׂ
ि5ۈͷਓि4ۈͷਓि3ۈͷਓฏۈͷਓΞϧόΠτɾ ύʔτφʔۈස͝ͱͷελοϑͷάϧʔϓਓۈසਓਓਓۈ࣌ؒۈॴ৬छάϧʔϐϯάϥϕϦϯάಉ͡छྨͷใΛ άϧʔϓԽ͢ΔใʹϥϕϧΛ͚ͭΔ
ਓɾάϧʔϓΛΘ͔Γ͘͢ਓ ۈසۈස ͝ͱͷ άϧʔϓ৬छਓΞΠίϯใͷछྨ͕ҟͳΔͷͰɺ σβΠϯΛม͑ΔਓΛද͢ใ• 1ਓͷใͱ͍͏͜ͱΛ҉ࣔ͢ΔͨΊɺ ΞΠίϯΛ͏• ΞΠίϯͷۙ͘ʹ৬छΛஔɻͦͷਓͷଐੑΛදݱ• ۈ࣌ؒͷࣈΛڧௐ͢Δ͜ͱͰɺը໘ʹ౷Ұײɾਓಉ࢜ͷൺֱ͕͘͢͠ͳΔۈ࣌ؒ͝ͱͷਓͷάϧʔϓ• ਓɾۈසͰूஂΛϥϕϦϯά• 4ϚεʹΘ͚ͯάϧʔϓԽ• ࣈΛڧௐͯ͠ϝϦϋϦ
ΞΠίϯʹFont Awesome• https://fontawesome.com/v4.7.0/ ʢݹ͍ํʣ• MacʹϑΥϯτΛΠϯετʔϧ• alfred-font-awesome-workflow• https://github.com/ruedap/alfred-font-awesome-workflow • AlfredͰctrl ԡ͠ͳ͕Βબ• ͕ग़Δ• ϑΥϯτબ →
αʔϏεհ ͷϖʔδΞϐʔϧϙΠϯτΛత֬ʹΞϐʔϧ͢Δʹ
After͍ͩͿ૿ͨ͠
ใΛཧΑ͘ΈΔͱ8ͷαʔϏεͰ͋Δ͜ͱ͕Θ͔ΔτϥϑΟοΫϢʔβʔߘ ίϯςϯπ۩ମతͳϖʔδͷհͦͷͰαΠτΈͳ͕Β͠ΌΔ༧ఆͩͬͨͷͰɺεϥΠυͰϦϯΫͷΈʹͳ͍ͬͯΔɻΑ͘ΈΔͱࣈ͕͍͢͝Α͘ΈΔͱࣈ͕͍͢͝Α͘ݟΔͱ৭ʑ͍͢͝Μ͚ͩͲɺΑ͘ݟͳ͍ͱ͕͢͝͞Θ͔Βͳ͍ಠࣗฤू ίϯςϯπ
·ͣεΫγϣΛόʔϯͱʮ͜Ε͔ΒɺαʔϏεհ͢ΔΑʂʯͱ͍͏͜ͱΛ͑Δ
վΊͯαʔϏεհΧϥʔϦϯά↓FlyTeamͷςʔϚΧϥʔʹ ݟग़͠ΛՃ↓ใͷछผຖʹϒϩοΫ͚ࣈΛڧௐ ϖʔδϏϡʔ → PVϢχʔΫϢʔβʔ → UU ࣈΛগͳͯ͘͠ʹೖΓ͘͢ࣈΛڧௐݟग़͠ΛՃࣈΛڧௐ↓ࢹ֮తͳΞΫηϯτʹ8ΛՃαΠτ໊େ͖ͳࣈͰϝϦϋϦ↓ݩͷදࣔࣈΛͳΔ͘ݮΒ͢↓ʹೖΓ͍͢
ΞϐʔϧϙΠϯτΛৄࡉʹղઆ↑͜ͷ෦εΫγϣΛࡌͤΔ↓Πϝʔδ͘͢͠ ;͖ͩ͠ + ίμϫϦ↓౷ҰײɾΞΫηϯτ ;͖ͩ͠ + ίμϫϦิઆ໌
ΞϐʔϧϙΠϯτΛৄࡉʹղઆ͍͢͝ϙΠϯτ
ΞϐʔϧϙΠϯτΛৄࡉʹղઆ
Beforeಉ༷ʹɺ͏ҰͭͷαʔϏεͷʮϨΠϧϥϘʯͷհ…
ΞϐʔϧϙΠϯτΛ;͖ͩ͠Ͱղઆ
·ͱΊ
·ͱΊ: ใཧ͕؊৺• ͍͑ͨใΛཧ͢Δ• άϧʔϐϯάɾϥϕϦϯά• ಉ͡άϧʔϓͷใΛݻΊΔ• ಉ͡छྨͷใͷσβΠϯΛἧ͑Δ͜Ε͚ͩͰɺ݁ߏݟ͘͢ͳΔ
ࠓճؾ͍ͮͨ͜ͱଟɺଞਓࣄͩͱ٬؍ࢹ͍͔͢͠ΒʁਓͷεϥΠυͷ σβΠϯΛ͢ͷָ
۩ମతͳखॱ• ·ͣɺςΩετ͚ͩͰߏཁૉΛॻ͘• Markdownͱ͔ (esaͱ͔ʣ• ͦͷใΛ٬؍ࢹͯ͠ɺཧɾྨ͢Δ• KeynoteͳͲͰεϥΠυࢴ໘ΛσβΠϯ͕ࣗॻ͍ͨ͜ͱΛ٬؍ࢹ͢ΔͱσβΠϯ͍͢͠
Enjoy Design :)