Slide 1

Slide 1 text

JavaScript(AngularJSɾReact.js)Ͱ࡞Δ iOSɾAndroidΞϓϦϋϯζΦϯɹɹ

Slide 2

Slide 2 text

ࣗݾ঺հ ɾ٢ຊ࿨߂ ɾגࣜձࣾϏζϦʔνॴଐ ɾαʔόʔαΠυΤϯδχΞ ɾ࢓ࣄͰ࢖͍ͬͯΔٕज़ ɹɹJavaɺJavaScript(jQuery)ɺHTMLɺCSS ɹɹMySQLɺAWSɺLinux ɹɹiOSΞϓϦ(Objective-C,Swift)ɺAndroidΞϓϦ(Java) ɹɹzuknow – ༑ୡͱΫΠζͰڝ͑ΔֶशΞϓϦ ɹɹɹhttps://www.zuknow.net/ ɹɹΩϟϦΞτϨοΫ–Ϩίϝϯυܕస৬αΠτ ɹɹɹhttps://www.careertrek.com/

Slide 3

Slide 3 text

ࠓճऔΓѻ͏಺༰ AngularΞϓϦ(Monaca) ɾϋΠϒϦουΞϓϦ ɾAngularJS 1ܥͰ։ൃ ReactΞϓϦ(Meteor) ɾWebΞϓϦ ɾReact.jsɺES6Ͱ։ൃ ɾMeteorͰϋΠϒϦουΞϓϦԽ΋Մೳ →αϯϓϧͷઆ໌ɺ؆қ൛Λ࡞੒ →؆қ൛αϯϓϧͷઆ໌

Slide 4

Slide 4 text

AngularΞϓϦ(Monaca)ͷαϯϓϧ ɾαϯϓϧϓϩδΣΫτΛΠϯϙʔτ ɾ ͙ΔͳͼAPIͷkeyIDΛઃఆ(index.html) ɹɹɹvar keyid = ‘ˎˎˎ';

Slide 5

Slide 5 text

Monacaͱ͸ ɾΫϥ΢υϕʔεͷ։ൃϓϥοτϑΥʔϜ ɹɹ→؀ڥߏஙෆཁɺIDEͷػೳ΋ॆ࣮ ɾHTML5ͱJavaScriptΛ༻͍Δ͜ͱͰɺ ɹɹiOSͱAndroidͷ྆OSʹରԠͨ͠ ɹɹΫϩεϓϥοτϑΥʔϜͳΞϓϦ։ൃΛ࣮ݱ ɹɹɹ→WEB։ൃͷεΩϧͰΞϓϦ։ൃ͕Ͱ͖Δ ɾReact.jsɺAngularJS2ܥɺES6(Babel)Ͱ։ൃ͢Δ ɹ৔߹͸ɺLocalKit(༗ྉ൛ɺϩʔΧϧͷ։ൃ؀ڥ)͕ඞཁ

Slide 6

Slide 6 text

αϯϓϧΞϓϦͷ࢓༷ ɾݱࡏ஍पลͷҿ৯ళͷҰཡΛදࣔ ɾҰཡʹදࣔ͞Εͨҿ৯ళΛ ɹ͓ؾʹೖΓʹ௥ՃͰ͖Δ ɾ͓ؾʹೖΓҰཡΛදࣔ ɾ͓ؾʹೖΓΛΫϦΞͰ͖Δ

Slide 7

Slide 7 text

Onsen UIͱAngularJS1ܥ [Onsen UI] ɹɾAngularJSΛϕʔεʹϞόΠϧΞϓϦ࡞੒ʹ ɹɹඞཁͳUIΛఏڙ ɹɾଟ࠼ͳUIίϯϙʔωϯτ ɹɾHTMLΛ֦ு͠ɺλάܗࣜͰఏڙ [Angular JS] ɹɾGoogleʹΑͬͯ։ൃ͞ΕͨJavaScriptͷ ɹɹMVCϑϨʔϜϫʔΫ ɹɾෳࡶԽ͢ΔWebΞϓϦͷϑϩϯτ෦෼Λޮ཰తʹ ɹɹ͢Δػೳ͕ॆ࣮

Slide 8

Slide 8 text

Onsen UIͷߏ੒ ɾɾɾ ɾɾɾ ɾɾɾ JSͰ੾Γସ͑

Slide 9

Slide 9 text

Onsen UIʢ̍ʣ ɾons-template ɹɹhtmlͷςϯϓϨʔτΛఆٛ͢Δ ɹɹݺͼग़͢ͱ͖ʹɺςϯϓϨʔτͷIDΛࢦఆɹɹ ... ɾons-tabbar ɹɹࢠཁૉons-tabͷpageଐੑʹ ɹɹλϒͰදࣔ͢ΔϖʔδΛࢦఆ͢Δɹɹ

Slide 10

Slide 10 text

Onsen UIʢ̎ʣ ɾons-listɺons-list-item ɹɹϦετΛදݱ͢ΔͨΊͷίϯϙʔωϯτ Header Text Item1 Item2 ৄ͘͠͸ɺ ɹɾʮOnsen UI 1.xΨΠυʯ(೔ຊޠ)ɹ(https://ja.onsen.io/v1/guide.html) ɹɾʮOnsen UI 2 Docsʯʢӳޠʣɹ(https://onsen.io/v2/docs/js.html)

Slide 11

Slide 11 text

AngularJSͷߏ੒ ons.bootstrap().controller('AppController', function($scope, $http) { ɹɹɹɾɾɾ } AppControllerΛఆٛ͢Δ index.html $scope.searchShops =[shop1, shop2, ɾɾɾ]; $scope.likeShops =[shop1, shop2, ɾɾɾ]; Shop{ name,image_url,isLiked } ΦϒδΣΫτͷߏ੒

Slide 12

Slide 12 text

AngularJSͷαʔϏε ແ໊ؔ਺ͷҾ਺ʹࢦఆͨ͠ม਺໊Λݩʹɺ ඞཁͳαʔϏεΛม਺ʹ౉͢ɻ ্هͷ৔߹͸ɺ$scopeαʔϏεͱ$httpαʔϏεɻ module.controller('AppController', function($scope, $http) { ɹ$scope.search = function() { ɾɾɾ ɹ}; }; αʔϏεͱ͸ ɾWebΞϓϦέʔγϣϯڞ௨ͷಛఆͷλεΫΛ࣮ߦ͢Δؔ਺܈ ɾγϯάϧτϯΦϒδΣΫτ ɾ૊ΈࠐΈαʔϏε͸ʮ$ʯ͔Β࢝·Δ ɾಠࣗͷΧελϜαʔϏεΛ࡞Δ͜ͱ΋Ͱ͖Δ

Slide 13

Slide 13 text

$scopeαʔϏεͱ$httpαʔϏε $scopeαʔϏε ɹɾΞϓϦέʔγϣϯͷϞσϧΛ ɹɹࢀর͢ΔΦϒδΣΫτ ɹɾσʔλόΠϯσΟϯάͷ؊ͱͳΔ ɹɹɹ→ৄ͘͠͸ɺ࣍ͷεϥΠυͰ $httpαʔϏε ɹɾXMLHttpRequestΦϒδΣΫτɺJSONP ɹɹΛ௨ͯ͡ɺhttp௨৴Λ͢Δ

Slide 14

Slide 14 text

σʔλ(js) σʔλόΠϯσΟϯάʢ̍ʣʢAngularJSʣ ը໘(html) {{ data }} σʔλΛมߋ ද͕ࣔมߋ͞ΕΔ $scope.data

Slide 15

Slide 15 text

σʔλ(js) σʔλόΠϯσΟϯάʢ̎ʣʢAngularJSʣ ը໘(html) ɹɹ{{ shop.name }} ɹɹ{{ shop.address }} $scopeͷσʔλΛมߋ͢Δͱɺ ද͕ࣔมߋ͞ΕΔ $scope. searchShops $scope. likeShops

Slide 16

Slide 16 text

σΟϨΫςΟϒʢ̍ʣ ɾng-repeat ɹɹ഑ྻʹ܁Γฦ͠ॲཧΛ࣮ࢪ͠ɺ ɹɹల։ͨ͠σʔλΛදࣔ͢Δ {{ data }} ɾng-show ɹɹ৚͕݅trueͷ৔߹ʹදࣔ͢Δ 0”>{{ data}}

Slide 17

Slide 17 text

σΟϨΫςΟϒʢ̎ʣ ɾng-click ɹɹΫϦοΫ࣌ʹࢦఆͨ͠είʔϓʹ ɹɹఆٛ͞Εͨؔ਺Λݺͼग़͢ ɹݕࡧ͢Δ $scope.search = function() { ɾɾɾ }; ৄ͘͠͸ɺ js STUDIO(http://js.studio-kingdom.com/angularjs)

Slide 18

Slide 18 text

ϩʔΧϧετϨʔδ(HTML5) ɾ஋Λอଘ͢Δ ɹɹwindow.localStrage.setItem([Ωʔ໊],[஋]) ɾ஋Λऔಘ͢Δ ɹɹwindow.localStrage.getItem([Ωʔ໊]) ɾอଘ͢ΔσʔλΛΩʔόϦϡʔͰ؅ཧ ɾ͢΂ͯͷiOSͱAndroidͰར༻Ͱ͖Δ [ར༻ྫ]

Slide 19

Slide 19 text

Cordovaʢ̍ʣ HTMLϨΠϠʔ (JavaScript) ɾMonacaͰ։ൃͨ͠౥ࡌ͞ΕΔϑϨʔϜϫʔΫ ɾσόΠεػೳʹΞΫηε͢ΔͨΊͷ ɹ࢓૊ΈΛఏڙ ωΠςΟϒϨΠϠʔ (Objective-CɺSwiftɺJava) ݺͼग़͠

Slide 20

Slide 20 text

Cordovaʢ̎ʣ ɾInAppBrowser ɹɹΞϓϦ಺Ͱϒϥ΢βΛ։͘ ɾGeolocation ɹɹҐஔ৘ใͷऔಘ navigator.geolocation.getCurrentPosition (geolocationSuccess, [geolocationError],[geolocationOptions]); window.open(url, '_blank', 'location=no'); ɾDevice ɹɹՃ଎౓ηϯαʔ΁ͷΞΫηε ɾMedia ɹɹΦʔσΟΦϑΝΠϧͷ࠶ੜɺ࿥Ի

Slide 21

Slide 21 text

͙ΔͳͼAPI [ϦΫΤετύϥϝλ] ɹɾkeyid: ΞΫηεΩʔ ɹɾformat: ʮjsonʯ(ϦΫΤετͷσʔλܗࣜ) ɹɾlatitude: ݱࡏ஍ͷҢ౓ ɹɾlongitude: ݱࡏ஍ͷܦ౓ ɹɾrange: ʮ1ʯ(ݕࡧൣғΛ൪߸Ͱࢦఆɻʮ1ʯ͸ɺ300m) ɾݕࡧ݁ՌΛදࣔ ɾ͓ؾʹೖΓҰཡΛදࣔ [ϦΫΤετύϥϝλ] ɹɾkeyid: ΞΫηεΩʔ ɹɾformat: ʮjsonʯ(ϦΫΤετͷσʔλܗࣜ) ɹɾid: දࣔ͢ΔళฮIDʢܗࣜ͸ɺʮ1,2,3ʯʣ

Slide 22

Slide 22 text

ϓϩδΣΫτͷ࡞੒ ɾςϯϓϨʔτ ɹʮOnsen UI V2 Angular1 Tabbarʯ ɾCordovaϓϥάΠϯͷ؅ཧ ɹɹԼهͷઃఆΛ༗ޮʹ͢Δ ɹɹɹʮGeolocationʯ ɹɹɹʮInAppBrowserʯ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Meteorͱ͸ ɾnode.jsΛϕʔεͱͨ͠ ɹϑϧελοΫϑϨʔϜϫʔΫ ɾWebΞϓϦέʔγϣϯ։ൃΛૉૣ͘ ɹ௿ίετͰߦ͑Δ ɾiOSΞϓϦ΍AndroidΞϓϦʹ ɹ͢Δ͜ͱ΋Ͱ͖Δ

Slide 25

Slide 25 text

React.js ɾFacebook͕࡞ͬͨViewͷϥΠϒϥϦ ɾϑϨʔϜϫʔΫͰͳ͘ɺUIϥΠϒϥϦ ɾVirtual DOM ɹɹDOMͷঢ়ଶΛσʔλͱͯ࣋ͪ͠ɺ ɹɹঢ়ଶ͕มԽͨ͠ΒDOMΛ࠶ੜ੒͢Δ ɹɹʢࠩ෼Λ࡞੒ʣ ɾίϯϙʔωϯτϕʔε ɾσʔλόΠσΟϯάʢpropsʣ ɾঢ়ଶ؅ཧ(state) React.jsͰVirtual DOMΛఆٛ͢Δ

Slide 26

Slide 26 text

ίϯϙʔωϯτϕʔε - App.jsx ɹ-Shop.jsx export default class Shop extends Component { render() { return ( ɹɹɾɾɾ ); } }); ίϯϙʔωϯτʹ DOMΛఆٛ͠ɺίϯ ϙʔωϯτΛ૊Έ߹Θ ͤΔɻ ίϯϙʔωϯτͷఆٛ ʹै͍ɺDOM͕ੜ੒ ͞ΕΔɻ export default class App extends Component { render() { return (

ɾɾɾ

); } });

Slide 27

Slide 27 text

props export default class App extends Component { return (

Comments

); } }); export default class Shop extends Component { return (

ɹɹɹɹ{this.props.shop}

); } }); App.jsx Shop.jsx ɾdataͷ஋Λड͚౉͢ ɾAppͰdataΛߋ৽ͨ͠Βɺ ɹࣗಈతʹdataͷ஋Λड͚౉͢

Slide 28

Slide 28 text

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͸਌ͷঢ়ଶΛ΋ͭ

Slide 29

Slide 29 text

propsͱstate export default class App extends Component { render () { return (

); } }); {data: “͓ళ̍”} this.setState({data: “͓ళ2”}); export default class Shop extends Component { render() { return (

{this.props.shop}

); } } {data: “͓ళ2”}

͓ళ1

͓ళ2

state DOM

Slide 30

Slide 30 text

ɾMeteorΛΠϯετʔϧ ɹɹcurl https://install.meteor.com/ | sh ɾNode.jsͷreact,react-domϞδϡʔϧΛΠϯετʔϧ ɹɹmeteor npm install --save react react-dom ɾmeteorΛىಈ ɹɹmeteor ϓϩδΣΫτͷ࡞੒