JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン

2016/7/22の勉強会資料

Transcript

1. JavaScript(AngularJSɾReact.js)Ͱ࡞Δ iOSɾAndroidΞϓϦϋϯζΦϯɹɹ
2. ࣗݾ঺հ ɾ٢ຊ࿨߂ ɾגࣜձࣾϏζϦʔνॴଐ ɾαʔόʔαΠυΤϯδχΞ ɾ࢓ࣄͰ࢖͍ͬͯΔٕज़ ɹɹJavaɺJavaScript(jQuery)ɺHTMLɺCSS ɹɹMySQLɺAWSɺLinux ɹɹiOSΞϓϦ(Objective-C,Swift)ɺAndroidΞϓϦ(Java) ɹɹzuknow – ༑ୡͱΫΠζͰڝ͑ΔֶशΞϓϦ ɹɹɹhttps://www.zuknow.net/ ɹɹΩϟϦΞτϨοΫ–Ϩίϝϯυܕస৬αΠτ ɹɹɹhttps://www.careertrek.com/
3. ࠓճऔΓѻ͏಺༰ AngularΞϓϦ(Monaca) ɾϋΠϒϦουΞϓϦ ɾAngularJS 1ܥͰ։ൃ ReactΞϓϦ(Meteor) ɾWebΞϓϦ ɾReact.jsɺES6Ͱ։ൃ ɾMeteorͰϋΠϒϦουΞϓϦԽ΋Մೳ →αϯϓϧͷઆ໌ɺ؆қ൛Λ࡞੒ →؆қ൛αϯϓϧͷઆ໌
4. AngularΞϓϦ(Monaca)ͷαϯϓϧ ɾαϯϓϧϓϩδΣΫτΛΠϯϙʔτ ɾ ͙ΔͳͼAPIͷkeyIDΛઃఆ(index.html) ɹɹɹvar keyid = ‘ˎˎˎ';
5. Monacaͱ͸ ɾΫϥ΢υϕʔεͷ։ൃϓϥοτϑΥʔϜ ɹɹ→؀ڥߏஙෆཁɺIDEͷػೳ΋ॆ࣮ ɾHTML5ͱJavaScriptΛ༻͍Δ͜ͱͰɺ ɹɹiOSͱAndroidͷ྆OSʹରԠͨ͠ ɹɹΫϩεϓϥοτϑΥʔϜͳΞϓϦ։ൃΛ࣮ݱ ɹɹɹ→WEB։ൃͷεΩϧͰΞϓϦ։ൃ͕Ͱ͖Δ ɾReact.jsɺAngularJS2ܥɺES6(Babel)Ͱ։ൃ͢Δ ɹ৔߹͸ɺLocalKit(༗ྉ൛ɺϩʔΧϧͷ։ൃ؀ڥ)͕ඞཁ
6. αϯϓϧΞϓϦͷ࢓༷ ɾݱࡏ஍पลͷҿ৯ళͷҰཡΛදࣔ ɾҰཡʹදࣔ͞Εͨҿ৯ళΛ ɹ͓ؾʹೖΓʹ௥ՃͰ͖Δ ɾ͓ؾʹೖΓҰཡΛදࣔ ɾ͓ؾʹೖΓΛΫϦΞͰ͖Δ
7. Onsen UIͱAngularJS1ܥ [Onsen UI] ɹɾAngularJSΛϕʔεʹϞόΠϧΞϓϦ࡞੒ʹ ɹɹඞཁͳUIΛఏڙ ɹɾଟ࠼ͳUIίϯϙʔωϯτ ɹɾHTMLΛ֦ு͠ɺλάܗࣜͰఏڙ [Angular JS] ɹɾGoogleʹΑͬͯ։ൃ͞ΕͨJavaScriptͷ ɹɹMVCϑϨʔϜϫʔΫ ɹɾෳࡶԽ͢ΔWebΞϓϦͷϑϩϯτ෦෼Λޮ཰తʹ ɹɹ͢Δػೳ͕ॆ࣮
8. Onsen UIͷߏ੒ <ons-page ng-controller="AppController as app"> <ons-tabbar> <ons-tab page=“search.html"></ons-tab> <ons-tab page=“like.html”></ons-tab> </ons-tabbar> </ons-page> <ons-template id=“search.html"> ɾɾɾ </ons-template> <ons-template id=“like.html”> ɾɾɾ </ons-template> <ons-template id=“result.html”> ɾɾɾ </ons-template> JSͰ੾Γସ͑
9. Onsen UIʢ̍ʣ ɾons-template ɹɹhtmlͷςϯϓϨʔτΛఆٛ͢Δ ɹɹݺͼग़͢ͱ͖ʹɺςϯϓϨʔτͷIDΛࢦఆɹɹ <ons-template id="foobar.html"> ... </ons-template> ɾons-tabbar ɹɹࢠཁૉons-tabͷpageଐੑʹ ɹɹλϒͰදࣔ͢ΔϖʔδΛࢦఆ͢Δɹɹ <ons-tabbar> <ons-tab page=”tab1.html" active="true”></ons-tab> <ons-tab page=”tab2.html" active="true”></ons-tab> </ons-tab>
10. Onsen UIʢ̎ʣ ɾons-listɺons-list-item ɹɹϦετΛදݱ͢ΔͨΊͷίϯϙʔωϯτ <ons-list> <ons-list-header>Header Text</ons-list-header> <ons-list-item>Item1</ons-list-item> <ons-list-item>Item2</ons-list-item> </ons-list> ৄ͘͠͸ɺ ɹɾʮOnsen UI 1.xΨΠυʯ(೔ຊޠ)ɹ(https://ja.onsen.io/v1/guide.html) ɹɾʮOnsen UI 2 Docsʯʢӳޠʣɹ(https://onsen.io/v2/docs/js.html)
11. AngularJSͷߏ੒ ons.bootstrap().controller('AppController', function($scope, $http) { ɹɹɹɾɾɾ } AppControllerΛఆٛ͢Δ index.html $scope.searchShops =[shop1, shop2, ɾɾɾ]; $scope.likeShops =[shop1, shop2, ɾɾɾ]; Shop{ name,image_url,isLiked } ΦϒδΣΫτͷߏ੒
12. AngularJSͷαʔϏε ແ໊ؔ਺ͷҾ਺ʹࢦఆͨ͠ม਺໊Λݩʹɺ ඞཁͳαʔϏεΛม਺ʹ౉͢ɻ ্هͷ৔߹͸ɺ$scopeαʔϏεͱ$httpαʔϏεɻ module.controller('AppController', function($scope, $http) { ɹ$scope.search = function() { ɾɾɾ ɹ}; }; αʔϏεͱ͸ ɾWebΞϓϦέʔγϣϯڞ௨ͷಛఆͷλεΫΛ࣮ߦ͢Δؔ਺܈ ɾγϯάϧτϯΦϒδΣΫτ ɾ૊ΈࠐΈαʔϏε͸ʮ$ʯ͔Β࢝·Δ ɾಠࣗͷΧελϜαʔϏεΛ࡞Δ͜ͱ΋Ͱ͖Δ
13. $scopeαʔϏεͱ$httpαʔϏε $scopeαʔϏε ɹɾΞϓϦέʔγϣϯͷϞσϧΛ ɹɹࢀর͢ΔΦϒδΣΫτ ɹɾσʔλόΠϯσΟϯάͷ؊ͱͳΔ ɹɹɹ→ৄ͘͠͸ɺ࣍ͷεϥΠυͰ $httpαʔϏε ɹɾXMLHttpRequestΦϒδΣΫτɺJSONP ɹɹΛ௨ͯ͡ɺhttp௨৴Λ͢Δ
14. σʔλ(js) σʔλόΠϯσΟϯάʢ̍ʣʢAngularJSʣ ը໘(html) {{ data }} σʔλΛมߋ ද͕ࣔมߋ͞ΕΔ $scope.data
15. σʔλ(js) σʔλόΠϯσΟϯάʢ̎ʣʢAngularJSʣ ը໘(html) <ons-list-item ng-repeat="shop in searchShops”> ɹɹ{{ shop.name }} ɹɹ{{ shop.address }} </ons-list-item> <ons-list-item ng-repeat="shop in likeShops”> ɹɹ{{ shop.name }} ɹɹ{{ shop.address }} </ons-list-item> $scopeͷσʔλΛมߋ͢Δͱɺ ද͕ࣔมߋ͞ΕΔ $scope. searchShops $scope. likeShops
16. σΟϨΫςΟϒʢ̍ʣ ɾng-repeat ɹɹ഑ྻʹ܁Γฦ͠ॲཧΛ࣮ࢪ͠ɺ ɹɹల։ͨ͠σʔλΛදࣔ͢Δ <ons-list> <ons-list-item ng-repeat=“data in dataList”> {{ data }} </ons-list-item> </ons-list> ɾng-show ɹɹ৚͕݅trueͷ৔߹ʹදࣔ͢Δ <ons-list> <ons-list-item ng-repeat=“data in dataList”> <span ng-show=“dataList.length > 0”>{{ data}} </span> </ons-list-item> </ons-list>
17. σΟϨΫςΟϒʢ̎ʣ ɾng-click ɹɹΫϦοΫ࣌ʹࢦఆͨ͠είʔϓʹ ɹɹఆٛ͞Εͨؔ਺Λݺͼग़͢ <ons-button ng-click="search()"> ɹݕࡧ͢Δ </ons-button> $scope.search = function() { ɾɾɾ }; ৄ͘͠͸ɺ js STUDIO(http://js.studio-kingdom.com/angularjs)
18. ϩʔΧϧετϨʔδ(HTML5) ɾ஋Λอଘ͢Δ ɹɹwindow.localStrage.setItem([Ωʔ໊],[஋]) ɾ஋Λऔಘ͢Δ ɹɹwindow.localStrage.getItem([Ωʔ໊]) ɾอଘ͢ΔσʔλΛΩʔόϦϡʔͰ؅ཧ ɾ͢΂ͯͷiOSͱAndroidͰར༻Ͱ͖Δ [ར༻ྫ]
19. Cordovaʢ̍ʣ HTMLϨΠϠʔ (JavaScript) ɾMonacaͰ։ൃͨ͠౥ࡌ͞ΕΔϑϨʔϜϫʔΫ ɾσόΠεػೳʹΞΫηε͢ΔͨΊͷ ɹ࢓૊ΈΛఏڙ ωΠςΟϒϨΠϠʔ (Objective-CɺSwiftɺJava) ݺͼग़͠
20. Cordovaʢ̎ʣ ɾInAppBrowser ɹɹΞϓϦ಺Ͱϒϥ΢βΛ։͘ ɾGeolocation ɹɹҐஔ৘ใͷऔಘ navigator.geolocation.getCurrentPosition (geolocationSuccess, [geolocationError],[geolocationOptions]); window.open(url, '_blank', 'location=no'); ɾDevice ɹɹՃ଎౓ηϯαʔ΁ͷΞΫηε ɾMedia ɹɹΦʔσΟΦϑΝΠϧͷ࠶ੜɺ࿥Ի
21. ͙ΔͳͼAPI [ϦΫΤετύϥϝλ] ɹɾkeyid: ΞΫηεΩʔ ɹɾformat: ʮjsonʯ(ϦΫΤετͷσʔλܗࣜ) ɹɾlatitude: ݱࡏ஍ͷҢ౓ ɹɾlongitude: ݱࡏ஍ͷܦ౓ ɹɾrange: ʮ1ʯ(ݕࡧൣғΛ൪߸Ͱࢦఆɻʮ1ʯ͸ɺ300m) ɾݕࡧ݁ՌΛදࣔ ɾ͓ؾʹೖΓҰཡΛදࣔ [ϦΫΤετύϥϝλ] ɹɾkeyid: ΞΫηεΩʔ ɹɾformat: ʮjsonʯ(ϦΫΤετͷσʔλܗࣜ) ɹɾid: දࣔ͢ΔళฮIDʢܗࣜ͸ɺʮ1,2,3ʯʣ
22. ϓϩδΣΫτͷ࡞੒ ɾςϯϓϨʔτ ɹʮOnsen UI V2 Angular1 Tabbarʯ ɾCordovaϓϥάΠϯͷ؅ཧ ɹɹԼهͷઃఆΛ༗ޮʹ͢Δ ɹɹɹʮGeolocationʯ ɹɹɹʮInAppBrowserʯ
23. ReactΞϓϦ(Meteor)ͷαϯϓϧ ɾMeteorΛΠϯετʔϧ ɹɹcurl https://install.meteor.com/ | sh ɾgithub͔ΒΫϩʔϯ ɹɹgit clone https://github.com/KazuhiroYoshimoto/react-sample ɾNode.jsͷreact,react-domϞδϡʔϧΛΠϯετʔϧ ɹɹmeteor npm install --save react react-dom ɾMeteorΛىಈ ɹɹmeteor
24. Meteorͱ͸ ɾnode.jsΛϕʔεͱͨ͠ ɹϑϧελοΫϑϨʔϜϫʔΫ ɾWebΞϓϦέʔγϣϯ։ൃΛૉૣ͘ ɹ௿ίετͰߦ͑Δ ɾiOSΞϓϦ΍AndroidΞϓϦʹ ɹ͢Δ͜ͱ΋Ͱ͖Δ
25. React.js ɾFacebook͕࡞ͬͨViewͷϥΠϒϥϦ ɾϑϨʔϜϫʔΫͰͳ͘ɺUIϥΠϒϥϦ ɾVirtual DOM ɹɹDOMͷঢ়ଶΛσʔλͱͯ࣋ͪ͠ɺ ɹɹঢ়ଶ͕มԽͨ͠ΒDOMΛ࠶ੜ੒͢Δ ɹɹʢࠩ෼Λ࡞੒ʣ ɾίϯϙʔωϯτϕʔε ɾσʔλόΠσΟϯάʢpropsʣ ɾঢ়ଶ؅ཧ(state) React.jsͰVirtual DOMΛఆٛ͢Δ
26. ίϯϙʔωϯτϕʔε - App.jsx ɹ-Shop.jsx export default class Shop extends Component { render() { return ( ɹɹɾɾɾ ); } }); ίϯϙʔωϯτʹ DOMΛఆٛ͠ɺίϯ ϙʔωϯτΛ૊Έ߹Θ ͤΔɻ ίϯϙʔωϯτͷఆٛ ʹै͍ɺDOM͕ੜ੒ ͞ΕΔɻ export default class App extends Component { render() { return ( <div className="commentBox"> ɾɾɾ <Shop /> </div> ); } });
27. props export default class App extends Component { return ( <div className=”contaner"> <h1>Comments</h1> <Shop shop={this.data} /> </div> ); } }); export default class Shop extends Component { return ( <div className=“Comment"> ɹɹɹɹ{this.props.shop} </div> ); } }); App.jsx Shop.jsx ɾdataͷ஋Λड͚౉͢ ɾAppͰdataΛߋ৽ͨ͠Βɺ ɹࣗಈతʹdataͷ஋Λड͚౉͢
28. state export default class App extends Component { constructor(props) { super(props); this.state = { isResult: false, shops : Array() }; } render:() { return ( ɾɾɾ ); } }); ɾίϯϙʔωϯτͷঢ়ଶΛ΋ͭɺϛϡʔλϒϧʢෆมʣͳ஋ ɾίϯϙʔωϯτࣗ਎ͷঢ়ଶΛ΋ͭ { shops =[data1, data2] } stateʹରͯ͠ɺ ɾprops ͸ΠϛϡʔλϒϧʢՄมʣͳ஋ ɾprops͸਌ͷঢ়ଶΛ΋ͭ
29. propsͱstate export default class App extends Component { render () { return ( <div className=”container"> <Shop shop={this.state.data} /> </div> ); } }); {data: “͓ళ̍”} this.setState({data: “͓ళ2”}); export default class Shop extends Component { render() { return ( <li> <p> {this.props.shop} </p> </li> ); } } {data: “͓ళ2”} <div>͓ళ1</div> <div>͓ళ2</div> state DOM
30. ɾMeteorΛΠϯετʔϧ ɹɹcurl https://install.meteor.com/ | sh ɾNode.jsͷreact,react-domϞδϡʔϧΛΠϯετʔϧ ɹɹmeteor npm install --save react react-dom ɾmeteorΛىಈ ɹɹmeteor ϓϩδΣΫτͷ࡞੒