Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

8bc941b1868dfc680dd1e11a797ca385?s=47 puku0x
June 14, 2017

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

8bc941b1868dfc680dd1e11a797ca385?s=128

puku0x

June 14, 2017
Tweet

More Decks by puku0x

Other Decks in Technology

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. એ఻

  27. None