Angularで作るモバイルアプリ

Transcript

1. AngularͰ࡞Δ ϞόΠϧΞϓϦ ng-fukuoka Angular Meetup #1
 2017/06/25
2. ࣗݾ঺հ • ৽෱ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϨεί • ϑϩϯτΤϯυେ޷͖
 https://github.com/puku0x
4. ։ൃதͷϓϩμΫτ
5. എܠ • ৽͍͠ΞϓϦ࡞Ζ͏ • AngularJS → Angular (2.xҎ߱)
6. Angular
7. Angular 4.x • Google੡ͷϑϨʔϜϫʔΫ • CLI׬උͰ։ൃޮ཰˕ • AngularJSͱ͸ผ෺
8. Angularͷಛ௃ • ϑϧελοΫ • ޮ཰తͳมߋݕ஌ • AoTίϯύΠϧɺSSR ౳
9. https://angular.io
10. Angular͸ϞόΠϧ
 ʹ΋࢖͑Δͧʂ
11. ϞόΠϧͷUIͲ͏͢Δʁ
12. Onsen UI 2
13. Onsen UI 2 • Web ComponentsͰ࣮૷ • ϞόΠϧ࠷దԽ͞ΕͨUIϥΠϒϥϦ • ࠃ࢈ˍ೔ຊޠυΩϡϝϯτ༗
14. ରԠϑϨʔϜϫʔΫ • Angular / React / VueʹରԠ • ΋ͪΖΜVanilla JSͰ΋ॻ͚Δʂ
15. ࣗಈελΠϧมߋͷྫ https://ja.onsen.io/samples/
16. νϡʔτϦΞϧ http://tutorial.onsen.io/
17. Ionic
18. Ionic 3 • Angular ComponentͰ࣮૷ • ౰વAngularͷΈରԠ • ೔ຊޠυΩϡϝϯτͳ͠
19. ը໘αϯϓϧ http://blog.ionic.io/
20. ։ൃ؀ڥ
21. ։ൃ؀ڥͷߏங • Angular CLI • ࣗྗWebpack • Ionic CLI
22. Angular CLIΛ࢖͏৔߹ • PhoneGap/CordovaͰ৽͍͠
 ϓϩδΣΫτΛ࡞੒ • Angular CLIͰ্ॻ͖ • ngx-onsenui Λ૊ΈࠐΉ
23. ngx-onsenui import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { OnsenModule } from 'ngx-onsenui'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, OnsenModule], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { } 0OTFO.PEVMF
    ͷΠϯϙʔτͱ
    εΩʔϚͷઃఆ
24. ৄࡉ͸ˣࢀর http://qiita.com/puku0x/items/f12e23aa15a36f439e79
25. WebpackͰϏϧυ • npm + Webpack + PhoneGap/Cordova https://github.com/puku0x/angular-onsenui2-webpack2/tree/no-angular-cli /src /www Ϗϧυ มߋݕ஌ มߋݕ஌ .html .ts .scss ϩʔμͷઃఆ͸ng ejectͨ͠ޙͷwebpack.config.js ࢀߟ
26. Ionic CLI • $ npm i -g ionic • $ ionic start ϓϩδΣΫτ໊ blank • $ ionic serve https://ionicframework.com/docs/cli/
27. ࣮ࡍͷΞϓϦ͸
 ͲΜͳײ͡ʁ
28. ϞόΠϧిࢠΧϧςʢࢼ࡞඼ʣ
29. ϞόΠϧిࢠΧϧςʢࢼ࡞඼ʣ
30. ·ͱΊ • AngularͰϞόΠϧΞϓϦΛ࡞ΔͳΒ • Onsen UI • Ionic • PWA༻͸ Angular Mobile Toolkit ※υΩϡϝϯτ͕ࢮΜͰΔͷͰ஫ҙ
31. Λ࢖ͬͯΈ·͠ΐ͏ʂ