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

2019/06/01 - JavaScript祭りの資料です👍

Transcript

1. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 ϑδϫϥ
   Ϣ΢λ 4FNBOUJD6* Λ࢖ͬͯ޻਺Λ͔͚ͣʹαʔϏε։ൃ
2. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 ϑδϫϥ
   Ϣ΢λ !'VKJZBNB@:VUB ˙
   +BWB4DSJQU ࡇΓ͸ॳΊͯ ˙
   ࢓ࣄɿ4PGUXBSF&OHJOFFS ˙
   झຯɿχονͳαʔϏεΛີ͔ʹӡ༻
3. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 ࡈɛක䜅㗌ሳբ THE BINGO BLOCK CLOCK ɾVuejs ɾSemanticUI ɾFirebase ௒ΧϯλϯʹϏϯΰେձ͕։࠵Ͱ͖Δ 8FC αʔϏε 仕事中に Twitter をついつい見てしまう人にオススメ！ ɾChromeAPIs ɾSemanticUI IUUQTUIFCJOHPKQ
   4/4 Λ  ෼͚ؒͩ։͚ͳ͍Α͏ʹ͢Δ $ISPNF ֦ு
4. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 ॆࠦͦ㗫՟㘊ଡ଼㘓㗧㗄㘋ࡈɛ㘨㖽㙆㘬 IUUQTP⒏DFDMPDLXPSL 会話形式で勤怠管理ができる LINEBOT PC・スマートフォンで勤怠管理ができる WEB サービス -*/& ͱ 8FC Ͱۈଵ؅ཧ͕Ͱ͖ΔαʔϏε
5. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 αʔϏε։ൃͷ 6* ෦෼ͰཔΓʹ͍ͯ͠Δ 4FNBOUJD6* Λ͝঺հ͠·͢ʂ ຊ೔ͷ -5 ʂ
6. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 ˙
   4FNBOUJD
   6* Λ࢖͏͖͔͚ͬ ˙
   $44 ϑϨʔϜϫʔΫΛൺ΂ͯΈͨ ˙
   4FNBOUJD
   6*
   ͷ֓ཁ ˙
   4FNBOUJD
   6*
   Λ࢖ͬͯΈΔ ˙
   αʔϏεΛ࡞Δ·Ͱͷաఔ ˙
   ·ͱΊ ͉˚༑㗙㗓㗨
7. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 㗍㗣㗋㗑 6* σβΠϯ ϚʔΫΞοϓ ϑϩϯτΤϯυ αʔόʔαΠυ ʰϑϩϯτΤϯυʱͷ։ൃΛ͓ئ͍͠·͢ɻ という仕事を請け負った
8. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 㗍㗣㗋㗑 6* σβΠϯ ϚʔΫΞοϓ ϑϩϯτΤϯυ αʔόʔαΠυ ϨεϙϯγϒͰ͓ئ͍͠·͢ɻ コーディングとフロントエンドを含んだ発注だった
9. !'VKJZBNB@:VUB 
   
   +BWB4DSJQU ୄ㘊 ৭ʑௐ΂ͯΈͨɻ ϚʔΫΞοϓࣗ৴ͳ͍͠ɺσβΠφʔͰ΋ͳ͍͠ ޻਺ͳ͍͠Ͳ͏͠Α͏͔ ɻ ͦ͏ͩɺϑϨʔϜϫʔΫʹཔΖ͏ʂ
10. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 $44 㙈㙟㖽㙓㙢㖽㘢ઓ㵤ࣛ˾ 4FNBOUJD6* ˒  #PPUTUSBQ ˒  #6-." ˒  ˞˒(JUIVC ΀ξτ⑲਺ .BUFSJBM
    %FTJHO ˒  .BUFSJBMJ[F ˒  'PVOEBUJPO ˒ 
11. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 4FNBOUJD
    6* 㗮त௃ ˙
    ಛ௃ ͳΜͰ΋ἧ͍ͬͯΔ੝Γ੝Γͷ ϑϨʔϜϫʔΫ
12. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ࠠඎช㗮㗂㘋㙈㙟㖽㙓㙢㖽㘢 #PPUTUSBQ CPPUTUSBQCVOEMFNJOKTɿ,# CPPUTUSBQNJODTTɿ
    ,# 4FNBOUJD
    6* TFNBOUJDNJOKTɿ
    ,# TFNBOUJDNJODTTɿ
    ,# #6-." CVMNBNJODTTɿ,# ഑৴ͷ࢓ํΛߟ͑ͳ͍ͱ஗͘ͳΔɻ ᶃඞཁͳίϯϙʔωϯτͷΈಡΈࠐΈ ᶄ$%/ ͔Β഑৴
13. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 4FNBOUJD6*
    Ò
    7VFe3FBDUe3JPU ˙
    4FNBOUJD
    6*
    7VF IUUQTHJUIVCDPN4FNBOUJD6*7VF4FNBOUJD6*7VF ˙
    4FNBOUJD
    6*
    3FBDU IUUQTHJUIVCDPN4FNBOUJD0SH4FNBOUJD6*3FBDU ˙
    4FNBOUJD
    6*
    3JPU IUUQTHJUIVCDPNCMBDLUSPPQFSTFNBOUJDVJSJPU !CMBDL@USPPQFS ͞Μ͕։ൃத
14. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 'PNBOUJD
    6* ݱࡏ 4FNBOUJD
    6* ͸ߋ৽͞Ε͓ͯΒͣɺ GPML ͯ͠࡞ΒΕͨ 'PNBOUJD
    6* ͷํʹ৽͍͠Ϟδϡʔϧ ɺόάͷվम౳͕௥Ճ͞Ε͍ͯΔɻ
15. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ͪΐͬͱએ఻ 4FNBOUJD
    6* ʹ͍ͭͯͷهࣄΛॻ͍͍ͯ·͢ɻ
16. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 4FNBOUJD6* Λ࢖ͬͯΈΔ 4FNBOUJD6* Λ࢖ͬͨαʔϏεΛࣄྫʹ͠·͢ɻ
17. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 0''*$&
    $-0$, -*/& ͱ 8FC Ͱۈଵ؅ཧ͕Ͱ͖ΔαʔϏε EJW
    DMBTTGPVS
    XJEF
    DPMVNO EJW
    DMBTTUXFMWF
    XJEF
    DPMVNO 41 ϨΠΞ΢τ 1$ ϨΠΞ΢τ
18. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ΧελϚΠζ͕؆୯ʂ %BUF1JDLFS 㗌㘝㘬㘬㙔l ೔෇औಘ ݄औಘ ੜ೥݄೔औಘ
19. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 5)&
    #*/(0 ˙
    &MFNFOUT
    IFBEFS
    CVUUPO
    NFTTBHF
    MBCFM
    JDPO ˙
    .PEVMF
    %SPQEQXO
    .PEBM
    4IBQF ௒؆୯ʹϏϯΰେձ͕։࠵Ͱ͖Δ 8FC αʔϏε
20. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 4FNBOUJD
    6* 㗮㙕㘫㙘㖽㙞㗧㙆㙦㘧㗮စ̈ 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(); } }); }
21. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 αʔϏεΛ࡞Δ·Ͱͷ޻ఔ
22. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ᶃ
    ࢴʹ׬੒ͷΠϝʔδʢϨΠΞ΢τɾ৘ใઃܭʣ ᶄ
    ϞοΫΞοϓ࡞੒ʢ)5.-ɾ$44ʣ ᶅ
    ։ൃ؀ڥɾΠϯϑϥߏங ᶆ
    ϑϩϯτΤϯυɾɹαʔόʔαΠυ࣮૷ ᶇ
    ϦϦʔεʂ ᶈ
    ଧ্ͪ͛ʂ ։ൃखॱʢݸਓ։ൃʣ
23. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 Ǻ ɾ ᶄ
    ҁϓҖ㗮㘗㙔㖽㘫㘒ࣣ㗍̈㗙 ᶃ
    ϨΠΞ΢τΛܾΊΔʢ1$ɾ41ʣ ᶄ
    ৘ใઃܭʢ"1* ઃܭʣ
24. !'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
25. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ಈ͘΋ͷΛ։ൃ͍ͯ͠Δͱ͖͕Ұ൪ָ͍͠ɻ ϚʔΫΞοϓ͸ϑϨʔϜϫʔΫΛ࢖ͬͯɺ ޻਺Λ͔͚ͣ։ൃΛ͢͢ΊΔͱྑͦ͞͏ɻ
26. !'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
27. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ໌֬ʹ࡞Γ͍ͨ΋ͷ͕͋ΔͷͰ͋Ε͹ɺ 714 Λθϩ͔Βߏங͢ΔΑΓɺ'JSFCBTFɾ"84
    "NQMJGZ Λ࢖ͬͯγϣʔτΧοτ͢Δํ͕ྑͦ͞͏ɻ ͨͩɺۀ຿Ͱ͸ -JOVY Λ࢖͏͜ͱ͕ଟ͍ͷͰɺ714 Ͱθϩ͔Β ΠϯϑϥΛߏஙͯ͠ΈΔͷ΋͍͍ͱࢥ͍·͢ɻ ʢࣗ෼͸ۀ຿ͰΠϯϑϥΛ৮Δ͜ͱ͕ͳ͍ͷͰͱͯ΋ษڧʹͳ͍ͬͯΔʣ
28. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ·ͱΊ
29. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ϑϧεΫϥονͰ $44 Λॻ͚Δํ͕ྑ͍˕ ɹ ʢͱɺࢲ͸ࢥ͍·͢ʣ ·ͱΊᶃ
30. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ͨͩɺਓྨʹͱͬͯ $44 ͸ͱͯ΋೉͍͠ͷͰɺ ࣗ෼޷Έɺ΋͘͠͸αʔϏεͷίϯηϓτʹ߹͍ͬͯΔ ϑϨʔϜϫʔΫΛΧελϚΠζͯ͠։ൃ͢Δͷ͕ɺ ࠓͷࣗ෼ʹ߹͍ͬͯͦ͏ͩɻ ·ͱΊᶄ
31. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 4FNBOUJD6* ؚΊɺ৭ʑͳΦʔϓϯιʔεϓϩδΣΫτͷ ԸܙΛड͚ͳ͕ΒαʔϏεΛ։ൃ͍ͯ͠ΔͷͰɺ ࣗ෼΋ϓϧϦΫग़͢ͳͲɾൃ৴͢ΔͳͲͰߩݙ͍͔ͯ͠ͳ͚Ε͹  ͱࢥ͍ͬͯ·͢ɻ ·ͱΊᶅ
32. !'VKJZBNB@:VUB 
    
    +BWB4DSJQU ୄ㘊 ɿ!'VKJZBNB@:VUB ɿ!:VUB@'VKJXBSB ϑδϫϥ
    Ϣ΢λ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ