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

by puku0x

Slide 1

Slide 1 text

AngularͱOnsen UI 2Ͱ ϞόΠϧΞϓϦΛ࡞Δ࿩ Զͷ࿩Λฉ͚ʂʂLTେձ #3  2017/06/14

Slide 2

Slide 2 text

ࣗݾ঺հ • ৽෱ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϨείʢچ: ϕʔλιϑτʣ • ϑϩϯτΤϯυେ޷͖ʂ  https://github.com/puku0x

Slide 3

Slide 3 text

։ൃதͷϓϩμΫτ

Slide 4

Slide 4 text

എܠ • ৽͍͠ΞϓϦΛ࡞Ζ͏ʂ • ϋΠϒϦουΞϓϦͰ࡞Ζ͏ʂ • ϑϨʔϜϫʔΫ࡮৽͠Α͏ʂ

Slide 5

Slide 5 text

Angular

Slide 6

Slide 6 text

Angular 4.x • Google੡ͷMVˎϑϨʔϜϫʔΫ • CLI׬උͰ։ൃޮ཰˕ • AngularJSͱ͸ผ෺

Slide 7

Slide 7 text

Angularͷಛ௃ • ίϯϙʔωϯτࢦ޲ • ޮ཰తͳมߋݕ஌ • AoTίϯύΠϧ "OHVMBS+4ΑΓ  ϞόΠϧ޲͚

Slide 8

Slide 8 text

ϞόΠϧͷUIͲ͏͢Δʁ

Slide 9

Slide 9 text

ग़དྷΔݶΓωΠςΟϒ  ʹ͚͍ۙͮͨʂ

Slide 10

Slide 10 text

Onsen UI 2

Slide 11

Slide 11 text

Onsen UI 2 • Web ComponentsͰ࣮૷ • ϞόΠϧ࠷దԽ͞ΕͨUIϥΠϒϥϦ • ࠃ࢈ˍ೔ຊޠυΩϡϝϯτ༗

Slide 12

Slide 12 text

ରԠϑϨʔϜϫʔΫ • Angular / React / VueʹରԠ • ΋ͪΖΜVanilla JSͰ΋ॻ͚Δʂ

Slide 13

Slide 13 text

ࣗಈͰελΠϧมߋ https://ja.onsen.io/samples/

Slide 14

Slide 14 text

։ൃ؀ڥΛ࡞Ζ͏

Slide 15

Slide 15 text

։ൃ؀ڥ • Angular CLIϕʔεʢਪ঑ʣ • ࣗྗͰWebpack • Monaca CLIʢެ͕ࣜͩඇਪ঑ʣ

Slide 16

Slide 16 text

Angular CLIϕʔεʢਪ঑ʣ • PhoneGap/CordovaͰ৽͍͠  ϓϩδΣΫτΛ࡞੒ • Angular CLIͰ্ॻ͖ • ngx-onsenui Λ૊ΈࠐΉ

Slide 17

Slide 17 text

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 ͷΠϯϙʔτͱ εΩʔϚͷઃఆ

Slide 18

Slide 18 text

Qiitaهࣄॻ͖·ͨ͠ http://qiita.com/puku0x/items/f12e23aa15a36f439e79

Slide 19

Slide 19 text

WebpackͰϏϧυ • npm + Webpack + PhoneGap/Cordova https://github.com/puku0x/angular-onsenui2-webpack2 /src /www Ϗϧυ มߋݕ஌ มߋݕ஌ .html .ts .scss ϩʔμͷઃఆ͸ng ejectͨ͠ޙͷwebpack.config.js ࢀߟ

Slide 20

Slide 20 text

Webpack࢖༻࣌ͷ஫ҙ • ng generate ࢖͑ͳ͍ • Ϣχοτςετ΍AoTίϯύΠϧ͸ ࣗ෼ͰઃఆΛ૊ΈࠐΉඞཁ͕͋Δ

Slide 21

Slide 21 text

Monaca CLIʢඇਪ঑ʣ • ެࣜHP͸͜ͷํ๏ • AngularΛར༻͢Δ৔߹͸ػೳෆ଍