webアプリを AngularJS × Codeigniterでつくった話

FuelPHP＆CodeIgniter ユーザの集い #8（ https://atnd.org/events/64731 ）のセッションで発表したプレゼンテーション資料です。

Transcript

1. XFCΞϓϦΛ
   "OHVMBS+4
   º
   $PEFJHOJUFSͰͭͬͨ͘࿩ FuelPHPˍCodeIgniter Ϣʔβͷू͍ #8
2. ͜Μͳ͜ͱ஻ΔΑʂ 
   ϑϩϯτΤϯυͱόοΫΤϯυ

   օ͞Μ͝ଘ஌ͩͱࢥ͍·͕͢ɺͬ͘͞ͱ͓͞Β͍
   
   "OHVMBS+4Ͱ΍Γ͍ͨ͜ͱɾͰ͖Δ͜ͱ

   ΍ͬͯΈ͍ͨ͜ͱͰ࣮૷͢ΔͱɺԌ্Ҋ݅௚ߦίʔεʁʂ
    εςοϓผ"OHVMBS+4࣮૷ํ๏ (C) 2011 Relation Design Lab.
3. ஻Δͷ͸͜ΜͳਓͰ͢ (C) 2011 Area Innovation Alliance w ΋ͱ΋ͱຊۀ͸ʮ·ͪͮ͘Γʯ
   w ΠϕϯτӡӦ΍ͬͨΓɺ౷ܭௐࠪ΍ͬͨΓɺ ಈը੍࡞ͨ͠ΓɺϦϊϕʔγϣϯࣄۀʢෆಈ ࢈ࣄۀʣͨ͠Γɺ/10্ཱͪ͛ࢧԉͨ͠ Γɻ
   w Ͱ΋ؾ͍ͮͨΒɺϓϩάϥϚʔͷੈքʹย ଍Λͭͬ͜Έɺࢥ͍ฦ͢ͱ࠷ۙίʔυͳ͓ ࢓ࣄ͔͍ͯ͠͠ͳ͍ؾ΋ɻ Ұൠࣾஂ๏ਓ3%
   ୅දཧࣄ Ұൠࣾஂ๏ਓ"*"
   $50 Ḇݪণ඙
4. (C) 2011 Area Innovation Alliance WordPressͰwebαΠτͭͬͨ͘Γ
5. (C) 2011 Area Innovation Alliance ΦϨΦϨϑϨʔϜϫʔΫͰWebAppͭͬͨ͘Γ
6. (C) 2011 Area Innovation Alliance Codeigniter×AngularJSͰWebAppͭͬͨ͘Γ
7. (C) 2011 Area Innovation Alliance ̍ɽϑϩϯτΤϯυͱόοΫΤϯυ
8. (C) 2011 Area Innovation Alliance HTML CSS JavaScript PHP Perl Ruby Webٕज़ͷେ·͔ͳ෼ྨ
9. (C) 2011 Area Innovation Alliance HTML CSS JavaScript PHP Perl Ruby ϑϩϯτΤϯυ όοΫΤϯυ αʔόɾΠϯϑϥ Webٕज़ͷେ·͔ͳ෼ྨ ※ ࠷ۙ͸JavaScriptͰόοΫΤϯυߏங΋Ͱ͖ΔΒ͍͠Ͱ͢
10. (C) 2011 Area Innovation Alliance ϑϩϯτΤϯυࠓੲ ʙ೥ͷٕज़
 ɹɾɹ֨޷͍͍8FCσβΠϯ͕ɺࢴࣳډͷΑ͏ʹಈ͘
 ɹɾɹIUNMͱDTTΛ෼཭͖ͯ͠Ε͍ͳίʔυͰॻ͚Ε͹0,ʂ
 ɹɾɹࠓߟ͑Δͱɺຊ౰ָͩͬͨɾɾɾɻ
    ʙ೥͋ͨΓ
 ɹɾɹK2VFSZ͕Ͱ͖ͯͯɺ͍Ζ͍ΖͳαΠτʹ࢖ΘΕͩ͢
 ɹɾɹ8FC͕ʹΎΔʹΎΔಈ͍ͨΓɺͻΎͬͱมΘΔ
 ɹɾɹIUNMͱDTTΛ্֮͑ͨͰɺK2VFSZ΋ඞਢٕೳʹ
 ɹɾɹ͜͜Β΁ΜͰ୤མ͢Δਓ΋ʌ Чʆ˓
    

11. (C) 2011 Area Innovation Alliance ϑϩϯτΤϯυࠓੲ ࠷ۙ
 ɹɾɹதݎXFCΞϓϦͩͱɺK2VFSZ͸ίʔυͷอक͕ͭΒ͍
 ɹɾɹͱ͍͏͔ɺ΍ͬͯΒΕΔ͔ʌ ʆЧ ůz
 ɹɾɹૉͷ1)1Λ࢖ͬͯதݎن໛ͷ։ൃΛ΍Δ͕͝ͱ͠
 ɹɹɹˠ
    DPEFJHOJUFSGVFM1)1Έ͍ͨͳϑϨʔϜϫʔΫ࢖͍͍ͨ
 ɹɾɹͱ͍͏χʔζʹΑΓɺ+BWB4DSJQUϑϨʔϜϫʔΫ஀ੜ
    
12. (C) 2011 Area Innovation Alliance ϑϩϯτΤϯυࠓੲ ࠷ۙ
 ɹɾɹதݎXFCΞϓϦͩͱɺK2VFSZ͸ίʔυͷอक͕ͭΒ͍
 ɹɾɹͱ͍͏͔ɺ΍ͬͯΒΕΔ͔ʌ ʆЧ ůz
 ɹɾɹૉͷ1)1Λ࢖ͬͯதݎن໛ͷ։ൃΛ΍Δ͕͝ͱ͠
 ɹɹɹˠ
    DPEFJHOJUFSGVFM1)1Έ͍ͨͳϑϨʔϜϫʔΫ࢖͍͍ͨ
 ɹɾɹͱ͍͏χʔζʹΑΓɺ+BWB4DSJQUϑϨʔϜϫʔΫ஀ੜ
    AngularJS Ember.js Knockout.js Backbone.js React.js Polymer
13. (C) 2011 Area Innovation Alliance ϑϩϯτΤϯυࠓੲ ࠷ۙ
 ɹɾɹதݎXFCΞϓϦͩͱɺK2VFSZ͸ίʔυͷอक͕ͭΒ͍
 ɹɾɹͱ͍͏͔ɺ΍ͬͯΒΕΔ͔ʌ ʆЧ ůz
 ɹɾɹૉͷ1)1Λ࢖ͬͯதݎن໛ͷ։ൃΛ΍Δ͕͝ͱ͠
 ɹɹɹˠ
    DPEFJHOJUFSGVFM1)1Έ͍ͨͳϑϨʔϜϫʔΫ࢖͍͍ͨ
 ɹɾɹͱ͍͏χʔζʹΑΓɺ+BWB4DSJQUϑϨʔϜϫʔΫ஀ੜ
    AngularJS ※ ࠓճ͸ࢲ͕࢖ͬͨͷͰɺAngularJS͚ͩͷ࿩Λ͠·͢ Googleۘ੡ʗ஌Γ߹͍͕࢖ͬͯͨʗϢʔβ͕ଟͦ͏
 υΩϡϝϯτ͕ωοτʹͦͦ͋ͬͨ͜͜ʗnote.mu͕࢖ͬͯͨ
14. (C) 2011 Area Innovation Alliance ̎ɽ"OHVMBS+4Ͱ΍Γ͍ͨ͜ͱɾͰ͖Δ͜ͱ
15. (C) 2011 Area Innovation Alliance ̍ɽϧʔςΟϯά΍ͬͯΈ͍ͨʂ note.muΈ͍ͨͳײ͡Ͱʂ
16. (C) 2011 Area Innovation Alliance ̍ɽϧʔςΟϯά΍ͬͯΈ͍ͨʂ ʮҰ෦ͷ%0.ͷஔ͖׵͑Ͱɺը໘ભҠͰ͖Δʂʯ
    ʮຖճɺDTT΍ΒKTΛಡΈࠐ·ͳ͍͍͔ͯ͘Βૣ͍Αʂʯ
    ʮͻΎΜͻΎΜભҠͰ͖ͯɺ69తʹૉ੖Β͍͠ʂʯ

17. (C) 2011 Area Innovation Alliance ̎ɽςϯϓϨʔτΤϯδϯ࢖ͬͯΈ͍ͨ ʮKTPOͳͲऔಘͨ͠σʔλΛ؆୯ʹUBCMF΍MJʹʂʯ
    ʮ%0.Ͱऔಘ͢Δͱ௨৴͔͔࣌ؒΔ͚Ͳɺ͜Ε͸͍ܰʂʯ
    ʮͲ͏ͤKTϑϨʔϜϫʔΫ࢖͏Μ͔ͩΒɺపఈతʹʂʯ

18. (C) 2011 Area Innovation Alliance Ԍ্͠·͢ΑͶ
19. (C) 2011 Area Innovation Alliance ͪͳΈʹɺԌ্Ұྫ ɹɾɹ8PSE1SFTTʹ"OHVMBS+4ΛೖΕͯɺϧʔςΟϯά͠Α͏ʂ
 ɹɹɹˠ
    ৐Γ੾Γ·͕ͨ͠ɺ։ൃ޻਺͸ഒҎ্ʹ
    ! ! ! ɹɾɹطଘΞϓϦΛશ෦࡞Γସ͑ͯ"OHVMBS+4ΞϓϦʹ͠Α͏
 ɹɹɹˠ
    ऴΘΔؾ഑͕ͳ͔ͬͨͷͰஅ೦ɻ
 ɹɹɹˠ
    ౰࣌ɺߥΕͨπΠʔτΛͯ͠·ͨ͠
20. (C) 2011 Area Innovation Alliance $PEFJHOJUFS'VFM1)1
    ˣ
    ʢجຊతʹʣIFMQFSͱ͔-JCSBSZͱ͔ɺ
 ࢖͑͹ɺ࢖͏΄ͲʹɺָͰ͖Δ͠ίʔυͷอकੑ΋ྑ͘ͳΔ Ͱɺ͕Μ͹ͬͯϢʔβΨΠυΈͯશػೳ͞ΒͬͯΈͨΓɻ
21. (C) 2011 Area Innovation Alliance AngularJS Codeigniter/FuelPHP ajax RestAPI / no view ʢjsonൃߦ/POSTड͚ʣ ಉ͡Α͏ʹશྗͰAngularJSΛ࢖͏ͱ json Template htmlςϯϓϨʔτ html
22. (C) 2011 Area Innovation Alliance ࢮΜ͡Ό͏ɻ
23. (C) 2011 Area Innovation Alliance "OHVMBS+4
    ˣ
    શͯͷ%0.ૢ࡞ΛK2VFSZͰ΍Γͨ͘ͳ͍Α͏ʹɺ
 Ұ෦Λָʹͨ͠Γ69ΛΑ͘͢ΔͨΊʹ࢖͏ͱ։͖௚Δ΂͖ɻ
24. (C) 2011 Area Innovation Alliance ̏ɽεςοϓผ"OHVMBS+4࣮૷ํ๏
25. (C) 2011 Area Innovation Alliance εςοϓ̍ɿϑΥʔϜόϦσʔγϣϯ ɾGPSNͷϦΞϧλΠϜೖྗ஋νΣοΫ
 ɾશ͕ͯUSVFʹͳΒͳ͍ͱTVCNJU͕ԡͤͳ͍
 ɾKTϑΝΠϧΛॻ͔ͳͯ͘΋ར༻Մೳʂʂ
26. (C) 2011 Area Innovation Alliance εςοϓ̍ɿϑΥʔϜόϦσʔγϣϯ ̍ɽIUNMએݴ෦ʹʮOHBQQʯΛ௥Ճ
    ɹIUNM
    ɹˠɹIUNM
    OHBQQ
    ̎ɽBOHVMBSKTϑΝΠϧΛಡΈࠐΈʢHPPHMF
    BQJΛར༻ʣ
    ɹTDSJQU
    TSDIUUQTBKBYHPPHMFBQJTDPNBKBYMJCTBOHVMBSKT BOHVMBSNJOKTTDSJQU
    ̏ɽGPSNʹɺʮOBNFʯͱʮOPWBMJEBUFʯΛ௥Ճ
    ɹGPSN
    OBNFGPSN
    OPWBMJEBUFOPWBMJEBUF
    NFUIPEQPTU
    
27. (C) 2011 Area Innovation Alliance εςοϓ̍ɿϑΥʔϜόϦσʔγϣϯ ̐ɽJOQVUʹOBNFͱOHNPEFMΛ௥Ճʢಉ͡஋Λਪ঑ʣ
 ̑ɽWBMVFͱಉ͡஋ΛOHJOJUʹ௥ՃʢOHJOJUͷ஋͕ɺzNPEFM໊b`zʹͳ Δ͜ͱʹ஫ҙʣ
    ɹJOQVU
    OBNFbFBTF`
    WBMVFIPHF
    
    ɹɹɹɹɹɹɹɹɹɹɹɹˣ
    ɹJOQVU
    OBNFbFBTF
    OHNPEFMFBTF
    
 " WBMVFbIPHF
    OHJOJUlFBTFbIPHF
    
    
28. (C) 2011 Area Innovation Alliance ४උ׬ྃ εςοϓ̍ɿϑΥʔϜόϦσʔγϣϯ
29. (C) 2011 Area Innovation Alliance εςοϓ̍ɿϑΥʔϜόϦσʔγϣϯ ࣍ʹɺόϦσʔγϣϯύλʔϯΛॻ͖·͢ɻ
    όϦσʔγϣϯύλʔϯྫ
    JOQVU
    
    ʜ

    UZQFlFNBJMz
    ɹɹɹɹɹɹɹ
    
    ɾɾɾϝʔϧܗࣜ

    OHNJOMFOHUI
    ɹɹɹɹɹ
    ɾɾɾ࠷௿จࣈ਺

    OHNBYMFOHUI
    ɹɹɹɹ
    ɾɾɾ࠷େจࣈ਺

    OHQBUUFSOʢਖ਼نදݱʣ
    
    ɾɾɾਖ਼نදݱ

    SFRVJSFE
    ɹɹɹɹɹɹɹɹ
    
    ɾɾɾೖྗඞਢ
    શͯΛຬ͍ͨͯ͠ͳ͍ͱɺUSVFʹͳΒͳ͍ͷͰɺTVCNJU͸ԡͤͳ͍ɻ
    
30. (C) 2011 Area Innovation Alliance εςοϓ̍ɿϑΥʔϜόϦσʔγϣϯ ࠷ޙʹɺόϦσʔγϣϯʹରԠ͢Δܯࠂจͷ࡞੒ɻ
 OHTIPX͸ɺTIPX͞ΕΔ࣌ͷύλʔϯ
    TNBMM
    OHTIPXGPSNFBTFFSSPSFNBJMϝʔϧΞυϨεΛ͝ೖྗԼ͍͞ TNBMM
 TNBMM
    OHTIPXGPSNFBTFFSSPSNJOMFOHUIจࣈҎ্͝ೖྗԼ͍͞ TNBMM
 TNBMM
    OHTIPXGPSNFBTFFSSPSNBYMFOHUIจࣈҎ಺Ͱ͝ೖྗԼ͞ ͍TNBMM
 TNBMM
    OHTIPXGPSNFBTFFSSPSQBUUFSOਖ਼نදݱͷ௨Γ͝ೖྗԼ͍͞ TNBMM
 TNBMM
    OHTIPXGPSNFBTFWBMJEೖྗ੒ޭTNBMM
31. εςοϓ̍ɿϑΥʔϜόϦσʔγϣϯ https://github.com/rdlabo/Ease_crud_CI3 $36%γεςϜ΋ඥ͍ͭͯ"OHVMBS+4ίʔυΛࣗಈੜ੒͢Δ΋ ͷ࡞ͬͨͷͰɺ·ͨݟͯԼ͍͞ɻ
32. (C) 2011 Area Innovation Alliance εςοϓ̎ɿίϯτϩʔϥʔͰjsΛࢦఆ ɾ"OHVMBS+4ίϯτϩʔϥʔΛࢦఆ͢Δͱɺݺͼग़͢KTΛ੍ݶͰ͖Δ
 ɾάϩʔόϧͰؔ਺͕࣮ߦ͞ΕΔͱ͍͏͜ͱΛճආ
 ɹɹϓϥάΠϯΛݺͼग़ͯ͠
 ɹɹ%0.໊ͰϓϥάΠϯΛ࣮ߦͯ͠
 ɹɹ%0.͕ଘࡏ͠ͳ͍ϖʔδͰ͸ಈ࡞͠ͳ͍ͱ͔ɺؾ࣋ͪѱ͘ͳ͍ʁ
    ɾ͜ΕҎ߱ͷεςοϓʹਐΉͨΊʹίϯτϩʔϥʔ͸ඞਢ
 ɾͪͳΈʹɺΦϦδφϧͰKTϑΝΠϧΛ༻ҙ͢Δඞཁ͕͋Γ·͢
33. (C) 2011 Area Innovation Alliance ̍ɽʮOHBQQʯʹ໊લΛ͚ͭΔ
    ɹIUNM
    OHBQQɹˠɹIUNM
    OHBQQl"QQz
    ̎ɽΦϦδφϧͷKTϑΝΠϧΛಡΈࠐΈ
    ɹTDSJQU
    TSDlBQQKTTDSJQU
    ̏ɽૢ࡞͢ΔEPNͷେ͖͍ൣғʹίϯτϩʔϥʔ໊Λ௥Ճ
    ɹEJWɹˠɹEJW
    OHDPOUSPMMFSb$USM`
    εςοϓ̎ɿίϯτϩʔϥʔͰjsΛࢦఆ
34. (C) 2011 Area Innovation Alliance ̐ɽBQQKTΛ࡞੒
    WBS
    "QQ
    
    BOHVMBSNPEVMF "QQ
    <> 
    "QQDPOUSPMMFS $USM
    GVODUJPO TDPQF 
 \

    
    
    
    ͜͜ʹKTΛॻ͘ͱɺίϯτϩʔϥʔͷ%0.ͷൣғͷΈʹӨڹ
 ɹ
    ؔ਺܈͚ͩάϩʔόϧʹॻ͍ͯɺ͜͜Ͱ࣮ߦͱ͔ͨ͠Β͍͍Α
 ^ 
    " " εςοϓ̎ɿίϯτϩʔϥʔͰjsΛࢦఆ
35. (C) 2011 Area Innovation Alliance ଓ͖ͱͯ͠͸
    
    εςοϓ̏ɿOHTVCNJUͰGPSNͷૹ৴Λ͠Α͏ʂ
    
    εςοϓ̐ɿແݶϩʔυΛBKBYΛར༻ͯ͠΍ͬͯΈΑ͏

    
    
    
    
    ʢϖʔδ
    ωʔγϣϯෆཁԽʣ
    ͱ͔͋ΔͷͰ͕͢ɺ࣌ؒͷ໰୊Ͱ͜ΕͰऴྃͱ͠·͢ɻ
 ͥͻɺϑΥʔϜόϦσʔγϣϯͷΤϥʔදࣔΛָʹͨ͠ΓɺKTίʔυ੔ ཧͷͨΊʹ"OHVMBS+4Λ࢖ͬͯΈ͍ͯͩ͘͞·ͤɻ
    " " ଓ͖ͷεςοϓ