Save 37% off PRO during our Black Friday Sale! »

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

4aac6005aa814ea0dbb4675d297fee17?s=47 YutaFujiwara
June 01, 2019

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

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

4aac6005aa814ea0dbb4675d297fee17?s=128

YutaFujiwara

June 01, 2019
Tweet

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 ୄ㘊 ˙4FNBOUJD6* Λ࢖͏͖͔͚ͬ ˙$44 ϑϨʔϜϫʔΫΛൺ΂ͯΈͨ ˙4FNBOUJD6*ͷ֓ཁ ˙4FNBOUJD6*Λ࢖ͬͯΈΔ ˙αʔϏεΛ࡞Δ·Ͱͷաఔ

    ˙·ͱΊ ͉˚༑㗙㗓㗨
  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 ୄ㘊 4FNBOUJD6* 㗮त௃ ˙ಛ௃ ͳΜͰ΋ἧ͍ͬͯΔ੝Γ੝Γͷ ϑϨʔϜϫʔΫ

  12. !'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ࠠඎช㗮㗂㘋㙈㙟㖽㙓㙢㖽㘢 #PPUTUSBQ CPPUTUSBQCVOEMFNJOKTɿ,# CPPUTUSBQNJODTTɿ,# 4FNBOUJD6* TFNBOUJDNJOKTɿ,# TFNBOUJDNJODTTɿ,#

    #6-." CVMNBNJODTTɿ,# ഑৴ͷ࢓ํΛߟ͑ͳ͍ͱ஗͘ͳΔɻ ᶃඞཁͳίϯϙʔωϯτͷΈಡΈࠐΈ ᶄ$%/ ͔Β഑৴
  13. !'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6*Ò7VFe3FBDUe3JPU ˙4FNBOUJD6*7VF IUUQTHJUIVCDPN4FNBOUJD6*7VF4FNBOUJD6*7VF ˙4FNBOUJD6*3FBDU IUUQTHJUIVCDPN4FNBOUJD0SH4FNBOUJD6*3FBDU ˙4FNBOUJD6*3JPU IUUQTHJUIVCDPNCMBDLUSPPQFSTFNBOUJDVJSJPU

    !CMBDL@USPPQFS ͞Μ͕։ൃத
  14. !'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 'PNBOUJD6* ݱࡏ 4FNBOUJD6* ͸ߋ৽͞Ε͓ͯΒͣɺ GPML ͯ͠࡞ΒΕͨ 'PNBOUJD6*

    ͷํʹ৽͍͠Ϟδϡʔϧ ɺόάͷվम౳͕௥Ճ͞Ε͍ͯΔɻ
  15. !'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ͪΐͬͱએ఻ 4FNBOUJD6* ʹ͍ͭͯͷهࣄΛॻ͍͍ͯ·͢ɻ

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

  17. !'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 0''*$&$-0$, -*/& ͱ 8FC Ͱۈଵ؅ཧ͕Ͱ͖ΔαʔϏε EJWDMBTTGPVSXJEFDPMVNO EJWDMBTTUXFMWFXJEFDPMVNO

    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 ୄ㘊 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(); } }); }
  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 ϑδϫϥϢ΢λ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ