Firebase を使った Web アプリケーション開発/serverless

1.

FirebaseΛ࢖ͬͨ αʔόʔϨε WebΞϓϦέʔγϣϯ։ൃ KIHARU SASAKI 2016.Oct ServerlessConf TOKYO

2.

Freelance bump.hatenablog.com @bump_of_kiharu ⡟ղ加ֹכ׷ ,JIBSV4BTBLJ 崧׃ךؿٗٝزؒٝسؒٝآص، ԍ"OHVMBS7VF"84'JSFCBTF 4*FS̔ꆃ輐禸؝ٝ؟ٕ̔8FCرؠ؎ش̔崧׃ ➙؝؝

3.

What is Firebase? 'JSFCBTFהכ

4.

'JSFCBTFהכ 2011೥ɹ؟٦ؽأꟚ㨣 2014೥ɹ(PPHMFח״׶顠　 2016೥ɹ#BB4ך倜فٓحزؿؓ٦ي  խխխխה׃ג鹌⻉ BaaS (Backend as a Service)
♰➂⟃♳ךركٗحػ٦ָⵃ欽

5.

8FC"QQדⵃ欽ׅ׷'JSFCBTFך⚺ז؟٦ؽأ "VUI ؟٦غ٦؟؎سךꟚ涪搀 ׃חծぐفٗغ؎تך ِ٦ؠ٦钠鏾ֶ״ןِ٦ ؠ٦盖椚׾遤ֲ )PTUJOH إُؗ،זؚٗ٦غٕطح زٙ٦ؙ׾⢪欽׃ծؐؑ ـٌغ؎ٕؐؑـך،ف
ٔ׾侧猱דرفٗ؎ 4UPSBHF 歗⫷ծ갈㡮ծ⹛歗זוծ ؝ٝذٝخך،حفٗ٦ س⥂㶷ֶ״ןر٦ةך《䖤׾遤ֲ 3FBMUJNF%# 䱸竲ׁ׸גְ׷ׅץגךؙ ٓ؎،ٝزח㼎׃ծر٦ ةך⥂㶷הず劍׾ٔ،ٕ ة؎يד㹋植ׅ׷

6.

'JSFCBTFך׉ך➭؟٦ؽأ GPS.PCJMF"QQT "OBMZUJDT ٌغ؎ٕ欽،شٔذ؍ؙأ /PUJDBUJPO QVTI鸐濼 5FTU-BC 暟椚畭劣ח״׷"OESPJE، فٔךذأز׾㹋倵 "E.PC
.PCJMF"QQ欽䎢デ邌爙 3FNPUF$POH 鏣㹀ػًٓ٦ةח״׶،فٔך⹛ ⡲׾ؕأةو؎ؤ %ZOBNJD-JOLT ،فٔך؎ٝأز٦ٕ剣搀חַַ ׻׵׆،فٔⰻך暴㹀皘䨽פ钷㼪 $SBTI3FQPSUJOH ،فٔךؙٓحءُ䞔㜠׾　꧊ ׃ծ䕦갟䏝瘝ךⴓ匿׾遤ֲ

7.

Overview ؟٦ؽأ嚊銲

8.

%&.0 bit.ly/demo-chat 'JSFCBTFך$PEFMBCדⰕꟚׁ׸גְ׷؝٦س ׾♧鿇㢌刿׃ג⢪欽׃גְתׅ

9.

3FBMUJNF%BUBCBTF 0OMJOF0JOF ๏ 侧ىٔ猱⟃ⰻחⰋגךؙٓ؎،ٝزחず劍 ๏ 䗁䌓䖓ח荈⹛涸חر٦ةず劍 ๏ ؔؿٓ؎ٝ儗ך⥂㶷갫׮笝䭯ׁ׸׷ ؔؿٓ؎ٝ儗
ؔٝٓ؎ٝ儗 ؔٝٓ؎ٝ䗁䌓 ๏ ر٦ةך⥂㶷ָ〳腉ٗ٦ٍٕؕؗحءُ ๏ ِ٦ؠ٦ָ乼⡲׾竰竲ׅ׷ֿהָ〳腉 ๏ ؔٝٓ؎ٝ朐䡾ך㢌刿嗚濼ָ〳腉侧ىٔ猱⟃ⰻדず劍 ؔؿٓ؎ٝ儗׮ر٦ة׾⥂䭯

10.

3FBMUJNF%BUBCBTF /P42-EBUBCBTF ๏ /P42-,74 ๏ Ⰻر٦ة׾אך+40/ח呓秛 ๏ ر٦ة圓鸡ָ׉ךתת3&45"1*ח ๏
ر٦ةך،ؙإإٔ٦ٕ׾鏣㹀〳腉  إُؗٔذ؍ٕ٦ٕ { "users": { "uid001": { "name": "Fujiwara" } }, "messages": { "id-‐001": { "name": "Fujiwara", "text": "hello!" }, ...... } }

11.

3FBMUJNF%BUBCBTF %BUBBDDFTT ๏ ر٦ةך刿倜כծ鷄⸇٥㢌刿٥⵴ ꤐ欽"1*׾⢪欽 ๏ ر٦ةך朐䡾㢌⻉כぐ؎كٝز׾ 飑铣׃ג嗚濼 ๏
♧鿇ך"1*כ1SPNJTF׾鵤ׅ ๏ زٓٝؠؙءّٝ׮㼎䘔 var db = firebase.database(); var ref = db.ref('messages');  ref.push({ name: "Sasaki", text: "Hello world" }).then(function() { // do something }).catch(function(err) { // do something }); 【データ追加例】

12.

3FBMUJNF%BUBCBTF 2VFSJFT ๏ ⚛ן갫ծ《䖤⟝侧ծ眔㔲䭷㹀׾遤ֲًاحس׾ⵃ欽ׅ׷ ๏ ًاحسثؑ٦ٝד勴⟝׾醱侧籬־ג䭷㹀〳腉 ๏ POPPODFر٦ة㢌刿ך؎كٝزٔأش٦ך涫ꐮ٥鍑ꤐ var
db = firebase.database(); var ref = db.ref('messages'); ref.limitToLast(50).on('child_added', function(data) { // do something }); 【例】

13.

3FBMUJNF%BUBCBTF 3&45GVM"1* curl 'https://<YOUR-‐FIREBASE-‐APP>.firebaseio.com/users/uid001.json' 【GET例】 { "users": {
"uid001": { "name": "Fujiwara" } }, ...... } ๏ ر٦ةךꥡ㾴圓鸡ח״׶ծぐر٦ةח ♧䠐ך63-ָ♷ִ׵׸ծ3&45ؒٝسه ؎ٝزה׃ג⢪欽דֹ׷

14.

"VUIFOUJDBUJPO ๏ ぐفٗغ؎ت،ؕؐٝزח״׷钠鏾ֶ ״ןِ٦ؠ盖椚  0"VUIؿٗ٦إحءّٝ盖椚 ๏ ؕأةي钠鏾堣腉ח״׶荈⵸؟٦ؽأ ،ؕؐٝزדךؚٗ؎ٝ׮〳腉 ๏
،ؕؐٝزח醱侧ך钠鏾فٗغ؎ت׾ ׇׁؙٔٝ׷ֿה׮〳腉 !  # $ % & FNBJMQBTTXPSEؚٗ؎ٝ׮〳

15.

var auth = firebase.auth(); // Sign in Firebase using
popup (Google account) var provider = new firebase.auth.GoogleAuthProvider(); auth.signInWithPopup(provider); // Sign out auth.signOut(); 【Google アカウントによるOAuth 例】 "VUIFOUJDBUJPO ֿ׸׌ֽ

16.

)PTUJOH 搀俱فٓٝד׮44- )551 杝荈 سً؎ٝךⵃ欽ָⵃ欽〳腉 ๏ (PPHMFךؚٗ٦غٕז$%/ח佄ִ׵׸ ׋⚅歲鋉垷ךٗ٦سٖ؎ذٝء ๏ 44-
)551ָرؿٕؓزד䱰欽 ๏ 杝荈سً؎ٝךⵃ欽׮〳腉搀俱 ๏ $-*ח״׶؝وٝسאדرفٗ؎ ๏ ؝ٝا٦ٕ♳דرفٗ؎㾶娖ך然钠ծ ٗ٦ٕغحؙ׮〳腉

17.

4UPSBHF (PPHMF$MPVE4UPSBHFחر٦ةָ 呓秛ׁ׸׷׋׭ծ($1׾⢪欽׃ג ؟٦غ٦؟؎سדךⳢ椚׮〳腉 ๏ ِ٦ؠ٦ך歗⫷װ⹛歗ծ갈㡮瘝ך؝ٝذ ٝخ׾⥂盖կلةغ؎ز鋉垷ך؝ٝذٝ خ׾،حفٗ٦سדֹ׷ ๏ (PPHMF$MPVE4UPSBHFךغ؛حزח呓秛
ׁ׸׷׋׭ծ($4"1*׾⢪ֲֿהד圫ղ זⵖ䖴׮〳腉 ๏ ر٦ةח㼎׃،ؙإإٔ٦ٕ׾鏣㹀〳腉  'JSFCBTFTUPSBHFإُؗٔذ؍ٕ٦ٕ

18.

Caution points Ꟛ涪٥麊欽儗ך殅䠐挿

19.

/P42-%BUBCBTF ๏ 3%#ך״ֲזؙؒٔ乼⡲כדֹזְ  ⢽MJLF BWFSBHF ๏ ر٦ة圓鸡כ〳腉זꣲ׶ؿٓحزח׃ծ ז׷ץֻطأزׇׁזְ  姻鋉⻉׮〳腉זꣲ׶ׇ׆ءٝفٕח
/P42-ך暴䚍׾崞ַ׃׋ⵃ欽׾䗰ָֽ׷  膴3%#膷

20.

أذ٦آؚٝ橆㞮זו ๏ 'JSFCBTFךمأذ؍ؚٝחכ  %FWFMPQNFOU4UBHJOH1SPEVDUJPO  הְ׏׋橆㞮כ暴ח欽䠐ׁ׸גְזְ ךדծ׉׸׊׸ⴽךفٗآؙؑزה׃ ג⡲䧭ׅ׷ ׉ך׋׭ך搀俱فٓٝ

21.

؟٦غ٦؟؎سⳢ椚 ๏ ؟٦غ٦؟؎سדךⳢ椚׾䗳銲הׅ׷׮ך כծ(PPHMF$MPVE'VODUJPOTװ׉ך➭ ($1ך堣腉׾ⵃ欽ׅ׷ֿהדծ؟٦غ٦ٖ أז麊欽׾㹋植  ׋׌׃($'כ植㖈،ٕؿ؋晛˟䎃剢植㖈 ⢽$MPVE7JTJPO"1*ה'VODUJPOT׾ⵃ欽׃׋歗⫷鍑匿ך؟ٝفٕ  IUUQTHJUIVCDPNNDEPOBNQBNJOHTQFDT

22.

ً٦ٕ鷏⥋ ๏ ً٦ٕ،سٖأ钠鏾⟃㢩דً٦ٕ鷏⥋׾ 遤ְ׋ְ㜥さכծ㢩鿇ךؙٓؐس؟٦ؽ أ׾穈׫さ׻ׇ׷ֿהד؟٦غ٦ٖأז 麊欽׾㹋植 ⢽;BQJFSה4FOEHSJE׾ⵃ欽׃ծر٦ة鷄⸇ךة؎ىؚٝדً٦ٕ׾ꂁ⥋ׅ׷  IUUQTTFOEHSJEDPNEPDT*OUFHSBUF5VUPSJBMT;BQJFS TFOEJOH@XIFO@OFX@SFCBTF@DIJME@SFDPSET@BEEFEIUNM

23.

Enjoy your   serverless LIFE! KIHARU SASAKI 2016.Oct ServerlessConf TOKYO

Firebase を使った Web アプリケーション開発/serverless

Firebase を使った Web アプリケーション開発/serverless

kiharu sasaki

Want more?

Transcript

FirebaseΛ࢖ͬͨ αʔόʔϨε WebΞϓϦέʔγϣϯ։ൃ KIHARU SASAKI 2016.Oct ServerlessConf TOKYO

Freelance bump.hatenablog.com @bump_of_kiharu ⡟ղ加ֹכ׷ ,JIBSV4BTBLJ 崧׃ךؿٗٝزؒٝسؒٝآص، ԍ"OHVMBS7VF"84'JSFCBTF 4*FS̔ꆃ輐禸؝ٝ؟ٕ̔8FCرؠ؎ش̔崧׃ ➙؝؝

What is Firebase? 'JSFCBTFהכ

'JSFCBTFהכ 2011೥ɹ؟٦ؽأꟚ㨣 2014೥ɹ(PPHMFח״׶顠　 2016೥ɹ#BB4ך倜فٓحزؿؓ٦ي  խխխխה׃ג鹌⻉ BaaS (Backend as a Service)

8FC"QQדⵃ欽ׅ׷'JSFCBTFך⚺ז؟٦ؽأ "VUI ؟٦غ٦؟؎سךꟚ涪搀 ׃חծぐفٗغ؎تך ِ٦ؠ٦钠鏾ֶ״ןِ٦ ؠ٦盖椚׾遤ֲ )PTUJOH إُؗ،זؚٗ٦غٕطح زٙ٦ؙ׾⢪欽׃ծؐؑ ـٌغ؎ٕؐؑـך،ف

'JSFCBTFך׉ך➭؟٦ؽأ GPS.PCJMF"QQT "OBMZUJDT ٌغ؎ٕ欽،شٔذ؍ؙأ /PUJDBUJPO QVTI鸐濼 5FTU-BC 暟椚畭劣ח״׷"OESPJE، فٔךذأز׾㹋倵 "E.PC

Overview ؟٦ؽأ嚊銲

%&.0 bit.ly/demo-chat 'JSFCBTFך$PEFMBCדⰕꟚׁ׸גְ׷؝٦س ׾♧鿇㢌刿׃ג⢪欽׃גְתׅ

3FBMUJNF%BUBCBTF 0OMJOF0JOF ๏ 侧ىٔ猱⟃ⰻחⰋגךؙٓ؎،ٝزחず劍 ๏ 䗁䌓䖓ח荈⹛涸חر٦ةず劍 ๏ ؔؿٓ؎ٝ儗ך⥂㶷갫׮笝䭯ׁ׸׷ ؔؿٓ؎ٝ儗

3FBMUJNF%BUBCBTF /P42-EBUBCBTF ๏ /P42-,74 ๏ Ⰻر٦ة׾אך+40/ח呓秛 ๏ ر٦ة圓鸡ָ׉ךתת3&45"1*ח ๏

3FBMUJNF%BUBCBTF %BUBBDDFTT ๏ ر٦ةך刿倜כծ鷄⸇٥㢌刿٥⵴ ꤐ欽"1*׾⢪欽 ๏ ر٦ةך朐䡾㢌⻉כぐ؎كٝز׾ 飑铣׃ג嗚濼 ๏

3FBMUJNF%BUBCBTF 2VFSJFT ๏ ⚛ן갫ծ《䖤⟝侧ծ眔㔲䭷㹀׾遤ֲًاحس׾ⵃ欽ׅ׷ ๏ ًاحسثؑ٦ٝד勴⟝׾醱侧籬־ג䭷㹀〳腉 ๏ POPPODFر٦ة㢌刿ך؎كٝزٔأش٦ך涫ꐮ٥鍑ꤐ var

3FBMUJNF%BUBCBTF 3&45GVM"1* curl 'https://<YOUR-‐FIREBASE-‐APP>.firebaseio.com/users/uid001.json' 【GET例】 { "users": {

"VUIFOUJDBUJPO ๏ ぐفٗغ؎ت،ؕؐٝزח״׷钠鏾ֶ ״ןِ٦ؠ盖椚  0"VUIؿٗ٦إحءّٝ盖椚 ๏ ؕأةي钠鏾堣腉ח״׶荈⵸؟٦ؽأ ،ؕؐٝزדךؚٗ؎ٝ׮〳腉 ๏

var auth = firebase.auth(); // Sign in Firebase using

)PTUJOH 搀俱فٓٝד׮44- )551 杝荈 سً؎ٝךⵃ欽ָⵃ欽〳腉 ๏ (PPHMFךؚٗ٦غٕז$%/ח佄ִ׵׸ ׋⚅歲鋉垷ךٗ٦سٖ؎ذٝء ๏ 44-

4UPSBHF (PPHMF$MPVE4UPSBHFחر٦ةָ 呓秛ׁ׸׷׋׭ծ($1׾⢪欽׃ג ؟٦غ٦؟؎سדךⳢ椚׮〳腉 ๏ ِ٦ؠ٦ך歗⫷װ⹛歗ծ갈㡮瘝ך؝ٝذ ٝخ׾⥂盖կلةغ؎ز鋉垷ך؝ٝذٝ خ׾،حفٗ٦سדֹ׷ ๏ (PPHMF$MPVE4UPSBHFךغ؛حزח呓秛

Caution points Ꟛ涪٥麊欽儗ך殅䠐挿

/P42-%BUBCBTF ๏ 3%#ך״ֲזؙؒٔ乼⡲כדֹזְ  ⢽MJLF BWFSBHF ๏ ر٦ة圓鸡כ〳腉זꣲ׶ؿٓحزח׃ծ ז׷ץֻطأزׇׁזְ  姻鋉⻉׮〳腉זꣲ׶ׇ׆ءٝفٕח

أذ٦آؚٝ橆㞮זו ๏ 'JSFCBTFךمأذ؍ؚٝחכ  %FWFMPQNFOU4UBHJOH1SPEVDUJPO  הְ׏׋橆㞮כ暴ח欽䠐ׁ׸גְזְ ךדծ׉׸׊׸ⴽךفٗآؙؑزה׃ ג⡲䧭ׅ׷ ׉ך׋׭ך搀俱فٓٝ

Enjoy your   serverless LIFE! KIHARU SASAKI 2016.Oct ServerlessConf TOKYO