SemanticUIを使って工数をかけずにサービス開発

by OH MY GOD Inc

Slide 1

Slide 1 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ϑδϫϥϢ΢λ 4FNBOUJD6* Λ࢖ͬͯ޻਺Λ͔͚ͣʹαʔϏε։ൃ

Slide 2

Slide 2 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ϑδϫϥϢ΢λ !'VKJZBNB@:VUB ˙+BWB4DSJQU ࡇΓ͸ॳΊͯ ˙࢓ࣄɿ4PGUXBSF&OHJOFFS ˙झຯɿχονͳαʔϏεΛີ͔ʹӡ༻

Slide 3

Slide 3 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ࡈɛක䜅㗌ሳբ THE BINGO BLOCK CLOCK ɾVuejs ɾSemanticUI ɾFirebase ௒ΧϯλϯʹϏϯΰେձ͕։࠵Ͱ͖Δ 8FC αʔϏε 仕事中に Twitter をついつい見てしまう人にオススメ！ ɾChromeAPIs ɾSemanticUI IUUQTUIFCJOHPKQ 4/4 Λ ෼͚ؒͩ։͚ͳ͍Α͏ʹ͢Δ $ISPNF ֦ு

Slide 4

Slide 4 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ॆࠦͦ㗫՟㘊ଡ଼㘓㗧㗄㘋ࡈɛ㘨㖽㙆㘬 IUUQTP⒏DFDMPDLXPSL 会話形式で勤怠管理ができる LINEBOT PC・スマートフォンで勤怠管理ができる WEB サービス -*/& ͱ 8FC Ͱۈଵ؅ཧ͕Ͱ͖ΔαʔϏε

Slide 5

Slide 5 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 αʔϏε։ൃͷ 6* ෦෼ͰཔΓʹ͍ͯ͠Δ 4FNBOUJD6* Λ͝঺հ͠·͢ʂ ຊ೔ͷ -5 ʂ

Slide 6

Slide 6 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ˙4FNBOUJD6* Λ࢖͏͖͔͚ͬ ˙$44 ϑϨʔϜϫʔΫΛൺ΂ͯΈͨ ˙4FNBOUJD6*ͷ֓ཁ ˙4FNBOUJD6*Λ࢖ͬͯΈΔ ˙αʔϏεΛ࡞Δ·Ͱͷաఔ ˙·ͱΊ ͉˚༑㗙㗓㗨

Slide 7

Slide 7 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊㗍㗣㗋㗑 6* σβΠϯ ϚʔΫΞοϓ ϑϩϯτΤϯυ αʔόʔαΠυ ʰϑϩϯτΤϯυʱͷ։ൃΛ͓ئ͍͠·͢ɻ という仕事を請け負った

Slide 8

Slide 8 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊㗍㗣㗋㗑 6* σβΠϯ ϚʔΫΞοϓ ϑϩϯτΤϯυ αʔόʔαΠυ ϨεϙϯγϒͰ͓ئ͍͠·͢ɻ コーディングとフロントエンドを含んだ発注だった

Slide 9

Slide 9 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ৭ʑௐ΂ͯΈͨɻ ϚʔΫΞοϓࣗ৴ͳ͍͠ɺσβΠφʔͰ΋ͳ͍͠ ޻਺ͳ͍͠Ͳ͏͠Α͏͔ ɻ ͦ͏ͩɺϑϨʔϜϫʔΫʹཔΖ͏ʂ

Slide 10

Slide 10 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 $44 㙈㙟㖽㙓㙢㖽㘢ઓ㵤ࣛ˾ 4FNBOUJD6* ˒ #PPUTUSBQ ˒ #6-." ˒ ˞˒(JUIVC ΀ξτ⑲਺ .BUFSJBM%FTJHO ˒ .BUFSJBMJ[F ˒ 'PVOEBUJPO ˒

Slide 11

Slide 11 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6* 㗮त௃ ˙ಛ௃ ͳΜͰ΋ἧ͍ͬͯΔ੝Γ੝Γͷ ϑϨʔϜϫʔΫ

Slide 12

Slide 12 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ࠠඎช㗮㗂㘋㙈㙟㖽㙓㙢㖽㘢 #PPUTUSBQ CPPUTUSBQCVOEMFNJOKTɿ,# CPPUTUSBQNJODTTɿ,# 4FNBOUJD6* TFNBOUJDNJOKTɿ,# TFNBOUJDNJODTTɿ,# #6-." CVMNBNJODTTɿ,# ഑৴ͷ࢓ํΛߟ͑ͳ͍ͱ஗͘ͳΔɻ ᶃඞཁͳίϯϙʔωϯτͷΈಡΈࠐΈ ᶄ$%/ ͔Β഑৴

Slide 13

Slide 13 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6*Ò7VFe3FBDUe3JPU ˙4FNBOUJD6*7VF IUUQTHJUIVCDPN4FNBOUJD6*7VF4FNBOUJD6*7VF ˙4FNBOUJD6*3FBDU IUUQTHJUIVCDPN4FNBOUJD0SH4FNBOUJD6*3FBDU ˙4FNBOUJD6*3JPU IUUQTHJUIVCDPNCMBDLUSPPQFSTFNBOUJDVJSJPU !CMBDL@USPPQFS ͞Μ͕։ൃத

Slide 14

Slide 14 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 'PNBOUJD6* ݱࡏ 4FNBOUJD6* ͸ߋ৽͞Ε͓ͯΒͣɺ GPML ͯ͠࡞ΒΕͨ 'PNBOUJD6* ͷํʹ৽͍͠Ϟδϡʔϧ ɺόάͷվम౳͕௥Ճ͞Ε͍ͯΔɻ

Slide 15

Slide 15 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ͪΐͬͱએ఻ 4FNBOUJD6* ʹ͍ͭͯͷهࣄΛॻ͍͍ͯ·͢ɻ

Slide 16

Slide 16 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6* Λ࢖ͬͯΈΔ 4FNBOUJD6* Λ࢖ͬͨαʔϏεΛࣄྫʹ͠·͢ɻ

Slide 17

Slide 17 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 0''*$&$-0$, -*/& ͱ 8FC Ͱۈଵ؅ཧ͕Ͱ͖ΔαʔϏε EJWDMBTTGPVSXJEFDPMVNO EJWDMBTTUXFMWFXJEFDPMVNO 41 ϨΠΞ΢τ 1$ ϨΠΞ΢τ

Slide 18

Slide 18 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ΧελϚΠζ͕؆୯ʂ %BUF1JDLFS 㗌㘝㘬㘬㙔l ೔෇औಘ ݄औಘ ੜ೥݄೔औಘ

Slide 19

Slide 19 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 5)&#*/(0 ˙&MFNFOUT IFBEFS CVUUPO NFTTBHF MBCFM JDPO ˙.PEVMF %SPQEQXO .PEBM 4IBQF ௒؆୯ʹϏϯΰେձ͕։࠵Ͱ͖Δ 8FC αʔϏε

Slide 20

Slide 20 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6* 㗮㙕㘫㙘㖽㙞㗧㙆㙦㘧㗮စ̈ IUUQTGPNBOUJDVJDPNNPEVMFTTIBQFIUNM ˙.PEVMFɿTIBQFʢΦϒδΣΫτΛಈ͔͢ʣ var openBingoModal = function (modal) { $(modal).modal('show', function () { if (modal == ".bingo-modal") { var count = 0; var countup = function () { if (count == 0) { $('.bingo-shape').shape('flip left'); } else if (count == 1) { $('.bingo-shape').shape('flip left'); } else if (count == 2) { $('.bingo-shape').shape('flip left'); } else if (count == 3) { $('.bingo-shape').shape('flip left'); } else if (count == 4) { $('.bingo-shape').shape('flip left'); } else { $('.bingo-shape').shape('flip over'); } count++; var id = setTimeout(countup, 500); if (count > 4) { clearTimeout(id); } } countup(); } }); }

Slide 21

Slide 21 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 αʔϏεΛ࡞Δ·Ͱͷ޻ఔ

Slide 22

Slide 22 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ᶃࢴʹ׬੒ͷΠϝʔδʢϨΠΞ΢τɾ৘ใઃܭʣ ᶄϞοΫΞοϓ࡞੒ʢ)5.-ɾ$44ʣ ᶅ։ൃ؀ڥɾΠϯϑϥߏங ᶆϑϩϯτΤϯυɾɹαʔόʔαΠυ࣮૷ ᶇϦϦʔεʂ ᶈଧ্ͪ͛ʂ ։ൃखॱʢݸਓ։ൃʣ

Slide 23

Slide 23 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 Ǻ ɾ ᶄҁϓҖ㗮㘗㙔㖽㘫㘒ࣣ㗍̈㗙 ᶃϨΠΞ΢τΛܾΊΔʢ1$ɾ41ʣ ᶄ৘ใઃܭʢ"1* ઃܭʣ

Slide 24

Slide 24 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ɾAngularJS ɾ jQuery ɾSemanticUI MYSQL Client WEB Github Client LINE RESTFUL API MYSQL Developer Version Control Production Staging Server LINE Developers MessageingAPI Ǽ㘪㘬㘹㙓࿴ϓ IUUQTP⒏DFDMPDLXPSL

Slide 25

Slide 25 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ಈ͘΋ͷΛ։ൃ͍ͯ͠Δͱ͖͕Ұ൪ָ͍͠ɻ ϚʔΫΞοϓ͸ϑϨʔϜϫʔΫΛ࢖ͬͯɺ ޻਺Λ͔͚ͣ։ൃΛ͢͢ΊΔͱྑͦ͞͏ɻ

Slide 26

Slide 26 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊㘨㖽㙃㙟㘬㗪㘪㘬㘹㙓࿴ϓ"MM'JSFCBTF IUUQTUIFCJOHPKQDBSE JE IUUQTUIFCJOHPKQDBSE JE IUUQTUIFCJOHPKQDBSE JE IUUQTUIFCJOHPKQDBSE JE IUUQTUIFCJOHPKQDBSE JE IUUQTUIFCJOHPKQCJOHP IUUQTMPDBMIPTU BSSBZ< > BSSBZ< > REALTIME DATABASE BINGO MACHINE Developer Version Control BINGO CARDɾVueJS ɾLocalStorage ɾSemanticUI ɾVueJS ɾLocalStorage ɾSemanticUI Firebase Hosting Github

Slide 27

Slide 27 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ໌֬ʹ࡞Γ͍ͨ΋ͷ͕͋ΔͷͰ͋Ε͹ɺ 714 Λθϩ͔Βߏங͢ΔΑΓɺ'JSFCBTFɾ"84"NQMJGZ Λ࢖ͬͯγϣʔτΧοτ͢Δํ͕ྑͦ͞͏ɻ ͨͩɺۀ຿Ͱ͸ -JOVY Λ࢖͏͜ͱ͕ଟ͍ͷͰɺ714 Ͱθϩ͔Β ΠϯϑϥΛߏஙͯ͠ΈΔͷ΋͍͍ͱࢥ͍·͢ɻ ʢࣗ෼͸ۀ຿ͰΠϯϑϥΛ৮Δ͜ͱ͕ͳ͍ͷͰͱͯ΋ษڧʹͳ͍ͬͯΔʣ

Slide 28

Slide 28 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ·ͱΊ

Slide 29

Slide 29 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ϑϧεΫϥονͰ $44 Λॻ͚Δํ͕ྑ͍˕ ɹ ʢͱɺࢲ͸ࢥ͍·͢ʣ ·ͱΊᶃ

Slide 30

Slide 30 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ͨͩɺਓྨʹͱͬͯ $44 ͸ͱͯ΋೉͍͠ͷͰɺ ࣗ෼޷Έɺ΋͘͠͸αʔϏεͷίϯηϓτʹ߹͍ͬͯΔ ϑϨʔϜϫʔΫΛΧελϚΠζͯ͠։ൃ͢Δͷ͕ɺ ࠓͷࣗ෼ʹ߹͍ͬͯͦ͏ͩɻ ·ͱΊᶄ

Slide 31

Slide 31 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6* ؚΊɺ৭ʑͳΦʔϓϯιʔεϓϩδΣΫτͷ ԸܙΛड͚ͳ͕ΒαʔϏεΛ։ൃ͍ͯ͠ΔͷͰɺ ࣗ෼΋ϓϧϦΫग़͢ͳͲɾൃ৴͢ΔͳͲͰߩݙ͍͔ͯ͠ͳ͚Ε͹ ͱࢥ͍ͬͯ·͢ɻ ·ͱΊᶅ

Slide 32

Slide 32 text

!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ɿ!'VKJZBNB@:VUB ɿ!:VUB@'VKJXBSB ϑδϫϥϢ΢λ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ