超初心者向けWebアプリ開発講座

Transcript

1. ະܦݧ͔Β͸͡ΊΔ
   WebΞϓϦ։ൃ
   גࣜձࣾϧʔτϓϥεɹଧా༟അ
   
   

   View Slide

2. ຊ೔ͷϝχϡʔ
   1.ΠϯτϩμΫγϣϯ(40෼)
   2.։ൃ؀ڥͷηοτΞοϓ(20෼)
   3.PHPͰͷίʔσΟϯά(60෼)
   4.࣍ճ༧ࠂ(10෼)
   5.࣭໰ɺ΋͘΋͘λΠϜ(40෼)
   
   

   View Slide

3. • גࣜձࣾΛܦӦɹɹɹɹɹɹɹ
   ୅දऔక໾ ࣾ௕
   • 1988೥ੜ·Εͷ28ࡀ
   • ཧՊͷڭһ໔ڐΛॴ࣋
   ࣗݾ঺հ
   ଧా༟അ
   • ໺ٿɺࣗసंڝٕ
   *ࣸਅ͸෋࢜ࢁώϧΫϥΠϜϨʔε
   • WebΞϓϦ։ൃ
   • ࠷ۙ͸σβΠϯ΋ڵຯ͋Γ
   ܦྺ
   • 2012೥3݄ ೔ຊେֶ޻ֶ෦ԽֶՊ ଔۀ
   • 2012೥4݄ʙ 2016೥8݄
   ΩϠϊϯʢגʣͰϓϦϯλʔͷ৽੡඼։ൃɺɹɹɹ
   ඼࣭؅ཧʹैࣄ
   • 2016೥9݄ גࣜձࣾϧʔτϓϥεΛઃཱ
   ϦΫΤετܕΠϯλʔϯγοϓ৘ใαΠτΛϩʔϯν
   झຯ
   

   View Slide

4. ϓϩάϥϛϯάεΩϧʹ͍ͭͯ
   • WebΞϓϦͷ։ൃ
   • ΦϒδΣΫτࢦ޲ϓϩάϥϛϯά
   • ֎෦APIΛ࢖ͬͨ։ൃ
   Ͱ͖Δ͜ͱ
   ܦྺ
   2015/11݄
   )5.-$44
   .Z42-1)1 खଓ͖ܕ
   
   *ϓϩάϥϛϯάΛ։࢝
   2016/6݄
   *α൛׬੒
   1)1 ΦϒδΣΫτࢦ޲
   
   2016/9݄
   *ϩʔϯν
   Ϋϥ΢υαʔόʔ
   Ͱͷ্ཱͪ͛
   ֎෦"1*ͷར༻
   2017/3݄
   ϑϨʔϜϫʔΫ
   ͷར༻
   +"7"
   &DMJQTF
   
   2016/12݄
   *SNSϩάΠϯͳͲ
   ػೳ௥Ճ
   

   View Slide

5. ϓϩάϥϛϯάܦྺʹ͍ͭͯ
   ࠳ંVer
   26ࡀ
   
   23ࡀ
   "OESPJEΞϓϦɹ࠳ંʼʻ
   24ࡀ
   8FC੍࡞ɹ࠳ંʼʻ
   3VCZPO3BJMTɹ࠳ંʼʻ
   25ࡀ
   +"7"࠳ંɹʼʻ
   Mac & iPhoneߪೖ J1IPOFΞϓϦɹ࠳ંʼʻ PHPελʔτ
   ίπ͕෼͔Ε͹୭Ͱ΋ϓϩάϥϚʔ
   

   View Slide

6. ͳͥϓϩάϥϛϯάʹ࠳ં͢Δ͔
   • Կ͔Β࢝ΊΕ͹͍͍͔Θ͔Βͳ͍
   • ։ൃ؀ڥͷߏஙͰ᪴͘(ϓϩάϥϛϯάͷ४උ)
   • Τϥʔͷղܾํ๏͕Θ͔Βͳ͍
   ϓϩάϥϜΛॻ͘ࣄҎ֎Ͱͷ͖͕᪴ཧ༝
   ΋͍ͬͨͳ͍ʂ
   
   

   View Slide

7. ຊ೔ͷ໨ඪ
   • WebΞϓϦͷ࢓૊ΈΛཧղ͢Δ
   • PHPΛ࢖ͬͯจࣈͷग़ྗ͕Ͱ͖Δ
   ࣗྗͰϓϩάϥϛϯάֶश͕Ͱ͖ΔΑ͏ʹͳΔ
   
   

   View Slide

8. ͜Μͳ࢓ࣄ͕Ͱ͖·͢
   ϓϩάϥϛϯάڭҭ
   WebΞϓϦ։ൃ
   ๏ਓͰͷறࡏҊ݅
   ݪ॓ͷ๭ϕϯνϟʔاۀ
   ϝσΟΞӡӦ
   ݪ॓ͷ๭ϕϯνϟʔاۀ
   ϦΫΤετܕ
   Πϯλʔϯγοϓ৘ใαΠτ
   ϚονϯάܥαʔϏεͷ
   ґཔ͕ଟ͍Ͱ͢
   ʙϓϩάϥϛϯάΛֶͿͱ͜ΜͳϝϦοτ͕ʙ
   

   View Slide

9. WebΞϓϦέʔγϣϯͱ͸ʁ
   • Πϯλʔωοτ઀ଓΛલఏͱͨ͠ΞϓϦ
   • Webϒϥ΢βͱWebαʔόʔ্Ͱಈ࡞͢Δ
   • ձһػೳ౳Λ࣋ͭΞϓϦ΋ଟ਺ଘࡏ͢Δ
   
   

   View Slide

10. WebΞϓϦ΁ͷ઀ଓ
    Ϣʔβʔ
    ϒϥ΢βΛ௨ͯ͡
    ϦΫΤετ
    ϦΫΤετʹԠͯ͡
    ϖʔδ৘ใΛฦ͢
    Webαʔόʔ DBαʔόʔ
    ඞཁʹԠͯ͡
    αʔόʔಉ͕࢜௨৴
    
    

    View Slide

11. WebΞϓϦέʔγϣϯͷ࢓૊Έ
    σʔλϕʔε͔Βͷग़͠ೖΕ
    σʔλͷग़͠ೖΕ
    σʔλͷड͚౉͠
    Webϒϥ΢β σʔλϕʔε
    Webݴޠ͕஥հ
    
    

    View Slide

12. FacebookͰֶͿ࢓૊Έ
    σʔλϕʔεͷத਎ΛςϯϓϨʔτʹදࣔ
    ݻ༗*% OBNF DPNQBOZ MBTU@DPNQBOZ BEESFTT QPTU@UJNF QPTU@DPOUFOU
    ଧా༟അ
    גࣜձࣾ
    ϧʔτϓϥε
    ΩϠϊϯגࣜձࣾ ౦ژ౎࿅അ۠ ݄೔ ͜ͷ౓ɺגɾɾɾ
    σʔλϕʔεʢΠϝʔδʣ
    ݻ༗IDͰ
    ϢʔβʔΛࣝผ
    
    

    View Slide

13. FacebookͰͷ֤ݴޠͷ໾ׂ
    ݻ༗*% OBNF DPNQBOZ
    ଧా༟അ
    גࣜձࣾ
    ϧʔτϓϥε
    BEESFTT QPTU@UJNF
    ౦ژ౎࿅അ۠ ݄೔
    ݟͨ໨Λ࡞Δ σʔλͷ؅ཧ
    Ϣʔβʔ͔Βड͚औΔ
    σʔλͷอଘ
    σʔλͷऔΓग़͠
    ϒϥ΢βɺWebݴޠɺDB͕໾ׂΛ࣋ͬͯಈ͘
    
    

    View Slide

14. WebΞϓϦ։ൃͷྲྀΕ
    1. اըɾཁ݅ఆٛ
    2. ։ൃ؀ڥͷηοτΞοϓ
    3. ϩʔΧϧ؀ڥͰͷ։ൃ
    4. Webαʔόʔʹઃஔ
    5. ςετ
    6. ެ։
    ཁ݅ఆٛ
    ࠓ೔ͷϝΠϯ
    
    

    View Slide

15. ී௨ͷ։ൃ؀ڥ(ϩʔΧϧ؀ڥ)ͱ͸
    ࣗ෼ͷPC্ͰΠϯλʔωοτ઀ଓΛ࠶ݱ
    ٖࣅαʔόʔ
    1$ͷதʹ1$Λ࡞Δ
    ΞΫηε
    
    

    View Slide

16. ϩʔΧϧ։ൃ؀ڥͷߏஙखॱ
    
    ൥ࡶͳͨΊɺॳ৺ऀ͸࠳ં͠΍͍͢
    1.Ծ૝ϚγϯΛઃஔ
    2.ίϚϯυϥΠϯ͔ΒԾ૝ϚγϯΛૢ࡞
    3.OS(Linux)ΛΠϯετʔϧ
    4.ϛυϧ΢ΣΞ(Mysql,PHPͳͲͷιϑτ)Λɹ
    Πϯετʔϧ
    5.FTPιϑτͰԾ૝ϚγϯʹΞΫηε
    

    View Slide

17. ͱ͍͏͜ͱͳͷͰʂ
    ϩʔΧϧ։ൃ؀ڥ͔Βಀ͛·͢
    

    View Slide

18. ͜Ε͔ΒΫϥ΢υ։ൃ؀ڥΛ
    ηοτΞοϓ͍͖ͯ͠·͠ΐ͏ʂ
    
    

    View Slide

19. Ϋϥ΢υ։ൃ؀ڥ
    ʙϩʔΧϧ։ൃ؀ڥΛϒϥ΢βͷதʹ࠶ݱʙ
    ٖࣅαʔόʔ
    1$ͷதʹ1$Λ࡞Δ
    ΞΫηε
    
    

    View Slide

20. Cloud9ͱ͸
    ϒϥ΢βͷதʹϩʔΧϧ؀ڥΛ࠶ݱͰ͖ΔαʔϏε
    ݁ՌදࣔΤϦΞ
    ։ൃΤϦΞ
    ϑΝΠϧ؅ཧ
    ΤϦΞ
    
    

    View Slide

21. Cloud9Ͱ͓खܰ։ൃ
    ʙϩʔΧϧ։ൃ؀ڥߏஙͱͷൺֱʙ
    $MPVE ϩʔΧϧ։ൃ؀ڥ
    ηοτΞοϓ࣌ؒ ෼ ؙ೔
    ࢖༻πʔϧ
    ίϚϯυૢ࡞ ͳ͠ ඞཁ
    ৄࡉઃఆ
    ϓϩάϥϛϯάΛֶश໨తͳΒCloud։ൃ؀ڥ
    ϒϥ΢β όʔνϟϧϘοΫε
    ʴϕΠάϥϯτ
    
    

    View Slide

22. Ϋϥ΢υ9΁ͷձһొ࿥
    ϝʔϧΞυϨε ΫϦοΫ
    ϝʔϧΞυϨεͰ؆୯ʹొ࿥Ͱ͖·͢
    
    

    View Slide

23. Ϋϥ΢υ9΁ͷϩάΠϯ
    ϝʔϧΞυϨε
    ύεϫʔυ
    ઌ΄ͲͷϝʔϧΞυϨεͱύεϫʔυͰϩάΠϯ
    
    

    View Slide

24. ࡞ۀεϖʔεͷηοτΞοϓ
    ϩάΠϯޙ͜ͷը໘Ͱ͋Δ͜ͱΛ֬ೝ
    ʴΛΫϦοΫ
    WorkSpaceͷʴΛΫϦοΫͯ͠࡞ۀεϖʔεΛ࡞੒
    
    

    View Slide

25. ඞཁ߲໨ͷೖྗ
    ϓϩάϥϜͷ໊લ
    PHPΛબͿ
    ྘ͷϘλϯΛΫϦοΫ
    ͨͬͨ3εςοϓͰOK
    1. ໊લΛೖྗ
    2. ࢖͏ݴޠΛબͿ
    3. OKϘλϯΛԡ͢
    ۭനͰOK
    ۭനͰOK
    
    

    View Slide

26. ։ൃ؀ڥ͕׬੒
    ೖྗͨ͠ϓϩάϥϜ໊ͷϑΥϧμ͕ଘࡏ͢Ε͹OK
    
    

    View Slide

27. PHPͰϓϩάϥϜΛॻ͜͏ʂ
    
    

    View Slide

28. ࠓ೔ͷษڧձͰѻ͏ൣғ
    σʔλͷग़͠ೖΕ
    σʔλͷड͚౉͠
    
    

    View Slide

29. ࠓ೔ͷ໨ඪ
    PHPͰจࣈΛग़ྗͰ͖Δ
    PHPͱHTMLΛ૊Έ߹ΘͤͯίʔσΟϯάͰ͖Δ
    HTML͔Βड͚औͬͨจࣈΛPHPͰ࢖͑Δ
    
    

    View Slide

30. ͜ͷϓϩάϥϜΛ࡞͍͖ͬͯ·͢
    
    

    View Slide

31. PHPϑΝΠϧͷ४උ
    1.Կ΋ͳ͍ॴͰӈΫϦοΫ
    2.New File
    3.index.phpͱೖྗ
    ʙαΠτʹΞΫηεͨ͠ࡍʹಡΈࠐ·ΕΔϑΝΠϧΛ࡞੒ʙ
    index.php͕࠷ॳʹಡΈࠐ·ΕΔ
    
    

    View Slide

32. HTMLͷ४උ
    ~PHPʹσʔλΛૹΔͨΊͷϑΥʔϜΛ༻ҙ͍͖ͯ͠·͢~
    ೔ຊޠ
    จࣈͷॲཧํ๏
    ϒϥ΢βͷදࣔ͞ΕΔλΠτϧ
    bodyλάͷؒʹ
    ॻ͔Εͨ΋ͷ͕
    ϒϥ΢βʹදࣔ͞ΕΔ
    formλά͸ॏཁͳͷͰ࣍ϖʔδͰৄ͘͠ղઆ
    
    

    View Slide

33. formλάͷղઆ
    ~formλάͰPHPͱ࿈ܞ~
    ࣍͸formͷத਎Λॻ͍͍͖ͯ·͢
    formλάͱ͸ʁ
    σʔλΛૹ৴͢ΔͨΊͷϑΥʔϜΛ
    ࡞ΔͨΊͷλά
    ࠓճ࢖͏formλάͷॻ͖ํ
    
    
    •action:ૹ৴ͨ࣌͠ͷಈ͖
    •method:σʔλͷૹ৴ํ๏
    ಉ͡ϖʔδͰσʔλΛड͚औΔͷͰۭ
    postͱget͕͋Δɻࠓ೔͸POSTΛ࢖༻
    
    

    View Slide

34. 
    
    
    formͷத਎Λ࡞Ζ͏
    จࣈྻ σʔλͷϥϕϧ(೚ҙʹܾΊΒΕΔ)
    σʔλͷϥϕϧ(೚ҙʹܾΊΒΕΔ)
    ϑΥʔϜσʔλͷૹ৴
    
    

    View Slide

35. PHPͰσʔλΛड͚औΖ͏
    
    
    
    
    ͜ͷϑΥʔϜ(postϝιου)ʹೖྗͨ͠σʔλ͸
    PHPͰ࢖͏ࡍʹ$_POST[“data”]Ͱड͚औΔ͜ͱͰ͖Δ
    ˎHTMLϑΥʔϜͰૹ৴ͨ͠σʔλ͸PHPͷม਺$_POSTʹ֨ೲ͞ΕΔ
    
    

    View Slide

36. echo $_POST[“data”];
    ?>
    ड͚औͬͨσʔλΛPHPͰදࣔ
    ~PHPͰจࣈྻΛදࣔ͢Δʹ͸ʁ
    HTMLͷதʹPHPΛॻ͘ʹ͸
    จࣈྻΛग़ྗ͢Δ໋ྩ
    ൒֯εϖʔε HTML͔Βड͚औͬͨσʔλ
    ໋ྩͷ࠷ޙ͸ηϛίϩϯ
    
    

    View Slide

37. PHPͰϒϥ΢βʹจࣈΛදࣔ͠Α͏
    
    
    σʔλड͚औΓϓϩάϥϜ
    ໊͓લΛೖྗ͍ͯͩ͘͠͞
    
    
    
    
    echo $_POST["data"];
    ?>
    
    

    View Slide

38. ࣍ճ༧ࠂ
    
    

    View Slide

39. σʔλϕʔεૢ࡞ฤ
    σʔλͷग़͠ೖΕ
    σʔλͷड͚౉͠
    
    

    View Slide