$30 off During Our Annual Pro Sale. View Details »

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

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

kiharu sasaki

October 01, 2016
Tweet

More Decks by kiharu sasaki

Other Decks in Technology

Transcript

  1. FirebaseΛ࢖ͬͨ

    αʔόʔϨε

    WebΞϓϦέʔγϣϯ։ൃ
    KIHARU SASAKI
    2016.Oct
    ServerlessConf TOKYO

    View Slide

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

    View Slide

  3. What is Firebase?
    'JSFCBTFהכ

    View Slide

  4. 'JSFCBTFהכ
    2011೥ɹ؟٦ؽأꟚ㨣
    2014೥ɹ(PPHMFח״׶顠 
    2016೥ɹ#BB4ך倜فٓحزؿؓ٦ي

    խխխխה׃ג鹌⻉
    BaaS
    (Backend as a Service)
    ♰➂⟃♳ךركٗحػ٦ָⵃ欽

    View Slide

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

    View Slide

  6. 'JSFCBTFך׉ך➭؟٦ؽأ GPS.PCJMF"QQT

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

    View Slide

  7. Overview
    ؟٦ؽأ嚊銲

    View Slide

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

    View Slide

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

    View Slide

  10. 3FBMUJNF%BUBCBTF
    /P42-EBUBCBTF
    ๏ /P42-,74
    ๏ Ⰻر٦ة׾אך+40/ח呓秛
    ๏ ر٦ة圓鸡ָ׉ךתת3&45"1*ח
    ๏ ر٦ةך،ؙإإٔ٦ٕ׾鏣㹀〳腉

    إُؗٔذ؍ٕ٦ٕ

    {  
    "users":  {  
    "uid001":  {  
    "name":  "Fujiwara"  
    }  
    },  
    "messages":  {  
    "id-­‐001":  {  
    "name":  "Fujiwara",  
    "text":  "hello!"  
    },  
    ......  
    }  
    }

    View Slide

  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  
    });
    【データ追加 例】

    View Slide

  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  
    });
    【例】

    View Slide

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

    View Slide

  14. "VUIFOUJDBUJPO
    ๏ ぐفٗغ؎ت،ؕؐٝزח״׷钠鏾ֶ
    ״ןِ٦ؠ盖椚

    0"VUIؿٗ٦إحءّٝ盖椚

    ๏ ؕأةي钠鏾堣腉ח״׶荈⵸؟٦ؽأ
    ،ؕؐٝزדךؚٗ؎ٝ׮〳腉
    ๏ ،ؕؐٝزח醱侧ך钠鏾فٗغ؎ت׾
    ׇׁؙٔٝ׷ֿה׮〳腉
    ! 
    # $
    % &
    FNBJMQBTTXPSEؚٗ؎ٝ׮〳

    View Slide

  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
    ֿ׸׌ֽ

    View Slide

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

    ๏ $-*ח״׶؝وٝسאדرفٗ؎
    ๏ ؝ٝا٦ٕ♳דرفٗ؎㾶娖ך然钠ծ
    ٗ٦ٕغحؙ׮〳腉

    View Slide

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

    'JSFCBTFTUPSBHFإُؗٔذ؍ٕ٦ٕ

    View Slide

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

    View Slide

  19. /P42-%BUBCBTF
    ๏ 3%#ך״ֲזؙؒٔ乼⡲כדֹזְ

    ⢽MJLF BWFSBHF

    ๏ ر٦ة圓鸡כ〳腉זꣲ׶ؿٓحزח׃ծ
    ז׷ץֻطأزׇׁזְ

    姻鋉⻉׮〳腉זꣲ׶ׇ׆ءٝفٕח

    /P42-ך暴䚍׾崞ַ׃׋ⵃ欽׾䗰ָֽ׷

    膴3%#膷

    View Slide

  20. أذ٦آؚٝ橆㞮זו
    ๏ 'JSFCBTFךمأذ؍ؚٝחכ

    %FWFMPQNFOU4UBHJOH1SPEVDUJPO

    הְ׏׋橆㞮כ暴ח欽䠐ׁ׸גְזְ
    ךדծ׉׸׊׸ⴽךفٗآؙؑزה׃
    ג⡲䧭ׅ׷
    ׉ך׋׭ך搀俱فٓٝ

    View Slide

  21. ؟٦غ٦؟؎سⳢ椚
    ๏ ؟٦غ٦؟؎سדךⳢ椚׾䗳銲הׅ׷׮ך
    כծ(PPHMF$MPVE'VODUJPOTװ׉ך➭
    ($1ך堣腉׾ⵃ欽ׅ׷ֿהדծ؟٦غ٦ٖ
    أז麊欽׾㹋植

    ׋׌׃($'כ植㖈،ٕؿ؋晛˟䎃剢植㖈

    ⢽$MPVE7JTJPO"1*ה'VODUJPOT׾ⵃ欽׃׋歗⫷鍑匿ך؟ٝفٕ

    IUUQTHJUIVCDPNNDEPOBNQBNJOHTQFDT

    View Slide

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

    IUUQTTFOEHSJEDPNEPDT*OUFHSBUF5VUPSJBMT;BQJFS
    TFOEJOH@XIFO@OFX@SFCBTF@DIJME@SFDPSET@BEEFEIUNM

    View Slide

  23. Enjoy your 

    serverless LIFE!
    KIHARU SASAKI
    2016.Oct
    ServerlessConf TOKYO

    View Slide