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
SemanticUIを使って工数をかけずにサービス開発
Search
OH MY GOD Inc
June 01, 2019
Design
4
1.9k
SemanticUIを使って工数をかけずにサービス開発
2019/06/01 - JavaScript祭りの資料です👍
OH MY GOD Inc
June 01, 2019
Tweet
Share
More Decks by OH MY GOD Inc
See All by OH MY GOD Inc
ザ・クーポン- サービス紹介・実績 資料
fujiyamayuta
0
45k
THE BINGO - サービス紹介・実績 資料
fujiyamayuta
0
730k
ザ・スタンプラリー - サービス紹介・実績 資料
fujiyamayuta
1
44k
困った!よくあるトラブル対処方法
fujiyamayuta
0
19k
レシートパシャパシャ
fujiyamayuta
0
680
LINEミニアプリ・LIFF どちらを提案するのがベストか考えてみる
fujiyamayuta
0
260
マズローの欲求5段階説で考えてみる、なぜ俺たちは個人開発をするのか?
fujiyamayuta
2
150
OH MY GOD inc. 会社概要
fujiyamayuta
0
23k
ザ・クーポン- サービス概要資料
fujiyamayuta
1
170
Other Decks in Design
See All in Design
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.9k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
310
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
190
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
200
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
730
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
870
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
Featured
See All Featured
KATA
mclloyd
PRO
32
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Producing Creativity
orderedlist
PRO
347
40k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ϑδϫϥϢλ 4FNBOUJD6* ΛͬͯΛ͔͚ͣʹαʔϏε։ൃ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ϑδϫϥϢλ !'VKJZBNB@:VUB ˙+BWB4DSJQU ࡇΓॳΊͯ ˙ࣄɿ4PGUXBSF&OHJOFFS ˙झຯɿχονͳαʔϏεΛີ͔ʹӡ༻
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ࡈɛක䜅㗌ሳբ THE BINGO BLOCK CLOCK ɾVuejs ɾSemanticUI
ɾFirebase ΧϯλϯʹϏϯΰେձ͕։࠵Ͱ͖Δ 8FC αʔϏε 仕事中に Twitter をついつい見てしまう人にオススメ! ɾChromeAPIs ɾSemanticUI IUUQTUIFCJOHPKQ 4/4 Λ ͚ؒͩ։͚ͳ͍Α͏ʹ͢Δ $ISPNF ֦ு
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ॆࠦͦ㗫՟㘊ଡ଼㘓㗧㗄㘋ࡈɛ㘨㖽㙆㘬 IUUQTP⒏DFDMPDLXPSL 会話形式で勤怠管理ができる LINEBOT PC・スマートフォンで勤怠管理ができる WEB サービス
-*/& ͱ 8FC Ͱۈଵཧ͕Ͱ͖ΔαʔϏε
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 αʔϏε։ൃͷ 6* ෦ͰཔΓʹ͍ͯ͠Δ 4FNBOUJD6* Λ͝հ͠·͢ʂ ຊͷ -5
ʂ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ˙4FNBOUJD6* Λ͏͖͔͚ͬ ˙$44 ϑϨʔϜϫʔΫΛൺͯΈͨ ˙4FNBOUJD6*ͷ֓ཁ ˙4FNBOUJD6*ΛͬͯΈΔ ˙αʔϏεΛ࡞Δ·Ͱͷաఔ
˙·ͱΊ ͉˚༑㗙㗓㗨
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 㗍㗣㗋㗑 6* σβΠϯ ϚʔΫΞοϓ ϑϩϯτΤϯυ αʔόʔαΠυ ʰϑϩϯτΤϯυʱͷ։ൃΛ͓ئ͍͠·͢ɻ
という仕事を請け負った
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 㗍㗣㗋㗑 6* σβΠϯ ϚʔΫΞοϓ ϑϩϯτΤϯυ αʔόʔαΠυ ϨεϙϯγϒͰ͓ئ͍͠·͢ɻ
コーディングとフロントエンドを含んだ発注だった
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ৭ʑௐͯΈͨɻ ϚʔΫΞοϓࣗ৴ͳ͍͠ɺσβΠφʔͰͳ͍͠ ͳ͍͠Ͳ͏͠Α͏͔ ɻ ͦ͏ͩɺϑϨʔϜϫʔΫʹཔΖ͏ʂ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 $44 㙈㙟㖽㙓㙢㖽㘢ઓ㵤ࣛ˾ 4FNBOUJD6* ˒ #PPUTUSBQ ˒
#6-." ˒ ˞˒(JUIVC ξτ⑲ .BUFSJBM%FTJHO ˒ .BUFSJBMJ[F ˒ 'PVOEBUJPO ˒
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6* 㗮त ˙ಛ ͳΜͰἧ͍ͬͯΔΓΓͷ ϑϨʔϜϫʔΫ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ࠠඎช㗮㗂㘋㙈㙟㖽㙓㙢㖽㘢 #PPUTUSBQ CPPUTUSBQCVOEMFNJOKTɿ,# CPPUTUSBQNJODTTɿ,# 4FNBOUJD6* TFNBOUJDNJOKTɿ,# TFNBOUJDNJODTTɿ,#
#6-." CVMNBNJODTTɿ,# ৴ͷํΛߟ͑ͳ͍ͱ͘ͳΔɻ ᶃඞཁͳίϯϙʔωϯτͷΈಡΈࠐΈ ᶄ$%/ ͔Β৴
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6*Ò7VFe3FBDUe3JPU ˙4FNBOUJD6*7VF IUUQTHJUIVCDPN4FNBOUJD6*7VF4FNBOUJD6*7VF ˙4FNBOUJD6*3FBDU IUUQTHJUIVCDPN4FNBOUJD0SH4FNBOUJD6*3FBDU ˙4FNBOUJD6*3JPU IUUQTHJUIVCDPNCMBDLUSPPQFSTFNBOUJDVJSJPU
!CMBDL@USPPQFS ͞Μ͕։ൃத
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 'PNBOUJD6* ݱࡏ 4FNBOUJD6* ߋ৽͞Ε͓ͯΒͣɺ GPML ͯ͠࡞ΒΕͨ 'PNBOUJD6*
ͷํʹ৽͍͠Ϟδϡʔϧ ɺόάͷվम͕Ճ͞Ε͍ͯΔɻ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ͪΐͬͱએ 4FNBOUJD6* ʹ͍ͭͯͷهࣄΛॻ͍͍ͯ·͢ɻ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6* ΛͬͯΈΔ 4FNBOUJD6* ΛͬͨαʔϏεΛࣄྫʹ͠·͢ɻ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 0''*$&$-0$, -*/& ͱ 8FC Ͱۈଵཧ͕Ͱ͖ΔαʔϏε EJWDMBTTGPVSXJEFDPMVNO EJWDMBTTUXFMWFXJEFDPMVNO
41 ϨΠΞτ 1$ ϨΠΞτ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ΧελϚΠζ͕؆୯ʂ %BUF1JDLFS 㗌㘝㘬㘬㙔l औಘ ݄औಘ ੜ݄औಘ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 5)&#*/(0 ˙&MFNFOUT IFBEFS CVUUPO NFTTBHF MBCFM JDPO
˙.PEVMF %SPQEQXO .PEBM 4IBQF ؆୯ʹϏϯΰେձ͕։࠵Ͱ͖Δ 8FC αʔϏε
!'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(); } }); }
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 αʔϏεΛ࡞Δ·Ͱͷఔ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ᶃࢴʹͷΠϝʔδʢϨΠΞτɾใઃܭʣ ᶄϞοΫΞοϓ࡞ʢ)5.-ɾ$44ʣ ᶅ։ൃڥɾΠϯϑϥߏங ᶆϑϩϯτΤϯυɾɹαʔόʔαΠυ࣮ ᶇϦϦʔεʂ ᶈଧ্ͪ͛ʂ ։ൃखॱʢݸਓ։ൃʣ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 Ǻ ɾ ᶄҁϓҖ㗮㘗㙔㖽㘫㘒ࣣ㗍̈㗙 ᶃϨΠΞτΛܾΊΔʢ1$ɾ41ʣ ᶄใઃܭʢ"1* ઃܭʣ
!'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
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ಈ͘ͷΛ։ൃ͍ͯ͠Δͱ͖͕Ұ൪ָ͍͠ɻ ϚʔΫΞοϓϑϨʔϜϫʔΫΛͬͯɺ Λ͔͚ͣ։ൃΛ͢͢ΊΔͱྑͦ͞͏ɻ
!'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
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ໌֬ʹ࡞Γ͍ͨͷ͕͋ΔͷͰ͋Εɺ 714 Λθϩ͔Βߏங͢ΔΑΓɺ'JSFCBTFɾ"84"NQMJGZ ΛͬͯγϣʔτΧοτ͢Δํ͕ྑͦ͞͏ɻ ͨͩɺۀͰ -JOVY Λ͏͜ͱ͕ଟ͍ͷͰɺ714
Ͱθϩ͔Β ΠϯϑϥΛߏஙͯ͠ΈΔͷ͍͍ͱࢥ͍·͢ɻ ʢࣗۀͰΠϯϑϥΛ৮Δ͜ͱ͕ͳ͍ͷͰͱͯษڧʹͳ͍ͬͯΔʣ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ·ͱΊ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ϑϧεΫϥονͰ $44 Λॻ͚Δํ͕ྑ͍˕ ɹ ʢͱɺࢲࢥ͍·͢ʣ ·ͱΊᶃ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ͨͩɺਓྨʹͱͬͯ $44 ͱ͍ͯ͠ͷͰɺ ࣗΈɺ͘͠αʔϏεͷίϯηϓτʹ߹͍ͬͯΔ ϑϨʔϜϫʔΫΛΧελϚΠζͯ͠։ൃ͢Δͷ͕ɺ ࠓͷࣗʹ߹͍ͬͯͦ͏ͩɻ ·ͱΊᶄ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 4FNBOUJD6* ؚΊɺ৭ʑͳΦʔϓϯιʔεϓϩδΣΫτͷ ԸܙΛड͚ͳ͕ΒαʔϏεΛ։ൃ͍ͯ͠ΔͷͰɺ ࣗϓϧϦΫग़͢ͳͲɾൃ৴͢ΔͳͲͰߩݙ͍͔ͯ͠ͳ͚Ε ͱࢥ͍ͬͯ·͢ɻ ·ͱΊᶅ
!'VKJZBNB@:VUB +BWB4DSJQU ୄ㘊 ɿ!'VKJZBNB@:VUB ɿ!:VUB@'VKJXBSB ϑδϫϥϢλ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ