Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
AngularとOnsen UI 2で モバイルアプリを作る話
puku0x
June 14, 2017
Technology
0
310
AngularとOnsen UI 2で モバイルアプリを作る話
puku0x
June 14, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
320
Nxはいいぞ
puku0x
0
470
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
160
Scully: Angular SSG
puku0x
0
97
Managing Monorepos with Nx - Nrwl/Nxの近況 -
puku0x
0
94
Ionicでモバイルアプリ開発のむずかしいを簡単に
puku0x
0
190
NgRx v8を使ってみよう
puku0x
1
550
「What's new in Angular」について
puku0x
1
150
Angular使いがReactでアプリ組んだらこうなった
puku0x
5
1.6k
Other Decks in Technology
See All in Technology
A3-1 IBM Championが本音で語る「IBM Cloud」
kolinz
0
290
Settlement simulation testing to ensure correct settlement processing
applepine1125
1
240
データサイエンティスト・プロジェクトマネージャー二人三脚の小売DX
ko_fujita1
0
280
ジョブ管理システムをAWS Step Functionsに移行する時の勘所
non97
0
450
DeepDive into Modern Development with AWS
mokocm
1
300
金融領域のマルチプロダクトを効率よく開発・運用するためのシステム基盤と組織設計について / 2022-07-28-multi-product-platform
stajima
0
130
ここが好きだよAWS管理ポリシー_devio2022/i_am_iam_lover
yukihirochiba
0
2.9k
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
7
1.6k
Amplifyで Webアプリケーションの 堅固な土台をサクッと構築する方法
kawasakiteruo
0
190
OpenShiftのサポートを始めるぞ!高頻度で更新されるOSSを効果的にキャッチアップする仕組みを考えました!
loftkun
0
320
Learning to Solve Hard Minimal Problems
takmin
1
160
ソフトウェアアーキテクチャの基礎: Software Architecture in a Nutshell
snoozer05
25
7.7k
Featured
See All Featured
Optimizing for Happiness
mojombo
365
63k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Building an army of robots
kneath
299
40k
Building Adaptive Systems
keathley
25
1.1k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.4k
What's in a price? How to price your products and services
michaelherold
229
9.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
107
16k
Teambox: Starting and Learning
jrom
123
7.7k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
WebSockets: Embracing the real-time Web
robhawkes
57
5.5k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Transcript
AngularͱOnsen UI 2Ͱ ϞόΠϧΞϓϦΛ࡞Δ ԶͷΛฉ͚ʂʂLTେձ #3 2017/06/14
ࣗݾհ • ৽ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϨείʢچ: ϕʔλιϑτʣ •
ϑϩϯτΤϯυେ͖ʂ https://github.com/puku0x
։ൃதͷϓϩμΫτ
എܠ • ৽͍͠ΞϓϦΛ࡞Ζ͏ʂ • ϋΠϒϦουΞϓϦͰ࡞Ζ͏ʂ • ϑϨʔϜϫʔΫ৽͠Α͏ʂ
Angular
Angular 4.x • GoogleͷMVˎϑϨʔϜϫʔΫ • CLIඋͰ։ൃޮ˕ • AngularJSͱผ
Angularͷಛ • ίϯϙʔωϯτࢦ • ޮతͳมߋݕ • AoTίϯύΠϧ "OHVMBS+4ΑΓ ϞόΠϧ͚
ϞόΠϧͷUIͲ͏͢Δʁ
ग़དྷΔݶΓωΠςΟϒ ʹ͚͍ۙͮͨʂ
Onsen UI 2
Onsen UI 2 • Web ComponentsͰ࣮ • ϞόΠϧ࠷దԽ͞ΕͨUIϥΠϒϥϦ • ࠃ࢈ˍຊޠυΩϡϝϯτ༗
ରԠϑϨʔϜϫʔΫ • Angular / React / VueʹରԠ • ͪΖΜVanilla JSͰॻ͚Δʂ
ࣗಈͰελΠϧมߋ https://ja.onsen.io/samples/
։ൃڥΛ࡞Ζ͏
։ൃڥ • Angular CLIϕʔεʢਪʣ • ࣗྗͰWebpack • Monaca CLIʢެ͕ࣜͩඇਪʣ
Angular CLIϕʔεʢਪʣ • PhoneGap/CordovaͰ৽͍͠ ϓϩδΣΫτΛ࡞ • Angular CLIͰ্ॻ͖ • ngx-onsenui
ΛΈࠐΉ
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 ͷΠϯϙʔτͱ εΩʔϚͷઃఆ
Qiitaهࣄॻ͖·ͨ͠ http://qiita.com/puku0x/items/f12e23aa15a36f439e79
WebpackͰϏϧυ • npm + Webpack + PhoneGap/Cordova https://github.com/puku0x/angular-onsenui2-webpack2 /src /www
Ϗϧυ มߋݕ มߋݕ .html .ts .scss ϩʔμͷઃఆng ejectͨ͠ޙͷwebpack.config.js ࢀߟ
Webpack༻࣌ͷҙ • ng generate ͑ͳ͍ • ϢχοτςετAoTίϯύΠϧ ࣗͰઃఆΛΈࠐΉඞཁ͕͋Δ
Monaca CLIʢඇਪʣ • ެࣜHP͜ͷํ๏ • AngularΛར༻͢Δ߹ػೳෆ
։ൃڥͰ͖ͨʂ
࣮ࡍͷΞϓϦ ͲΜͳײ͡ʁ
ϞόΠϧిࢠΧϧςʢࢼ࡞ʣ
ΛͬͯΈ·͠ΐ͏ʂ ×
એ
None