AngularとOnsen UI 2で モバイルアプリを作る話

Transcript

1. AngularͱOnsen UI 2Ͱ ϞόΠϧΞϓϦΛ࡞Δ࿩ Զͷ࿩Λฉ͚ʂʂLTେձ #3
 2017/06/14
2. ࣗݾ঺հ • ৽෱ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϨείʢچ: ϕʔλιϑτʣ • ϑϩϯτΤϯυେ޷͖ʂ
 https://github.com/puku0x
3. ։ൃதͷϓϩμΫτ
4. എܠ • ৽͍͠ΞϓϦΛ࡞Ζ͏ʂ • ϋΠϒϦουΞϓϦͰ࡞Ζ͏ʂ • ϑϨʔϜϫʔΫ࡮৽͠Α͏ʂ
5. Angular
6. Angular 4.x • Google੡ͷMVˎϑϨʔϜϫʔΫ • CLI׬උͰ։ൃޮ཰˕ • AngularJSͱ͸ผ෺
7. Angularͷಛ௃ • ίϯϙʔωϯτࢦ޲ • ޮ཰తͳมߋݕ஌ • AoTίϯύΠϧ "OHVMBS+4ΑΓ
 ϞόΠϧ޲͚
8. ϞόΠϧͷUIͲ͏͢Δʁ
9. ग़དྷΔݶΓωΠςΟϒ
 ʹ͚͍ۙͮͨʂ
10. Onsen UI 2
11. Onsen UI 2 • Web ComponentsͰ࣮૷ • ϞόΠϧ࠷దԽ͞ΕͨUIϥΠϒϥϦ • ࠃ࢈ˍ೔ຊޠυΩϡϝϯτ༗
12. ରԠϑϨʔϜϫʔΫ • Angular / React / VueʹରԠ • ΋ͪΖΜVanilla JSͰ΋ॻ͚Δʂ
13. ࣗಈͰελΠϧมߋ https://ja.onsen.io/samples/
14. ։ൃ؀ڥΛ࡞Ζ͏
15. ։ൃ؀ڥ • Angular CLIϕʔεʢਪ঑ʣ • ࣗྗͰWebpack • Monaca CLIʢެ͕ࣜͩඇਪ঑ʣ
16. Angular CLIϕʔεʢਪ঑ʣ • PhoneGap/CordovaͰ৽͍͠
 ϓϩδΣΫτΛ࡞੒ • Angular CLIͰ্ॻ͖ • ngx-onsenui Λ૊ΈࠐΉ
17. 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
    ͷΠϯϙʔτͱ
    εΩʔϚͷઃఆ
18. Qiitaهࣄॻ͖·ͨ͠ http://qiita.com/puku0x/items/f12e23aa15a36f439e79
19. WebpackͰϏϧυ • npm + Webpack + PhoneGap/Cordova https://github.com/puku0x/angular-onsenui2-webpack2 /src /www Ϗϧυ มߋݕ஌ มߋݕ஌ .html .ts .scss ϩʔμͷઃఆ͸ng ejectͨ͠ޙͷwebpack.config.js ࢀߟ
20. Webpack࢖༻࣌ͷ஫ҙ • ng generate ࢖͑ͳ͍ • Ϣχοτςετ΍AoTίϯύΠϧ͸ ࣗ෼ͰઃఆΛ૊ΈࠐΉඞཁ͕͋Δ
21. Monaca CLIʢඇਪ঑ʣ • ެࣜHP͸͜ͷํ๏ • AngularΛར༻͢Δ৔߹͸ػೳෆ଍
22. ։ൃ؀ڥͰ͖ͨʂ
23. ࣮ࡍͷΞϓϦ͸
 ͲΜͳײ͡ʁ
24. ϞόΠϧిࢠΧϧςʢࢼ࡞඼ʣ
25. Λ࢖ͬͯΈ·͠ΐ͏ʂ ×
26. એ఻