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

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

Uchida Yuma
September 20, 2017

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

Uchida Yuma

September 20, 2017
Tweet

Other Decks in Education

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