Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
building HTML hybrid app with ionic
Search
bonar
March 11, 2018
Technology
0
30
building HTML hybrid app with ionic
bonar
March 11, 2018
Tweet
Share
More Decks by bonar
See All by bonar
VUI on IoT Device
bonar
1
570
Introducing Atmoph
bonar
0
35
Lean Startup Hardware
bonar
0
470
Other Decks in Technology
See All in Technology
AWS認定を取る中で感じたこと
siromi
1
170
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.1k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
240
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
120
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
MobileActOsaka_250704.pdf
akaitadaaki
0
110
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
200
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
160
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Automating Front-end Workflow
addyosmani
1370
200k
How to Ace a Technical Interview
jacobian
277
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Site-Speed That Sticks
csswizardry
10
680
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
A Tale of Four Properties
chriscoyier
160
23k
Faster Mobile Websites
deanohume
307
31k
Facilitating Awesome Meetings
lara
54
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
building HTML hybrid app with ionic @bonar
Nakano Kyohei Software Engineer Co-founder at @atmoph twitter: @bonar facebook:
nakano.kyohei
None
None
building HTML hybrid app with ionic
Frontend != Web Service
HTML hybrid app
HTML Hybrid app w 8FCٕज़Λͬͯ࡞ΒΕͨϞόΠϧΞϓϦ w )5.-$44+BWB4DSJQUͰ6*Λ࡞Γɺ8FC7JFX ίϯϙʔωϯτϒϥβ্Ͱಈ͔͢ w ωΠςΟϒͷػೳ+BWB4DSJQUܦ༝Ͱݺͼग़͢
None
None
None
building HTML hybrid app
Frontend Chaos Package management • npm • bower • component
Task runner • grunt • gulp altJS • CoffeeScript • TypeScript JavaScript Framework • jQuery • AngularJS • vue.js • backbone.js…. CSS Style • SASS • LESS CSS Framework • bootstrap • PURE • Foundation...
None
hybrid app ಛ༗ͷ՝ w 6*ͷϓϩτλΠϐϯά w σόΠε࣮ػ্ʢ༷ʑͳղ૾ʣͰͷ֬ೝ w ΞϓϦετΞʹఏग़ग़དྷΔωΠςΟϒΞϓϦͷੜ
None
ionic • AngularJS based UI Framework (CSS/JavaScript) • UI ύʔπ
directive ͱͯ͠දݱ͞ΕΔ • Apache Cordova Λಉࠝͯ͠ iOS/Android ΞϓϦ࡞ΕΔ • ionic ίϚϯυΛͬͨܗੜ • ionic view ΞϓϦΛ࣮ͬͨػ֬ೝ
demo 1. UI Λͬ͟ͱΣϒ্Ͱ࡞Δ 2. ϩʔΧϧʹνΣοΫΞτ 3. ։ൃ & ςετ
4. σόΠεʹμϯϩʔυͯ֬͠ೝ
$ ionic platform add (ios|android) $ ionic build ios build
native app
None
ionic • HTML hybrid app ͷτʔλϧͳ։ൃϑϩʔΛࢧԉ͢Δ • ϓϩδΣΫτͷܗΛ؆୯ʹੜ • ionic
creator ΛͬͯΣϒ্Ͱͬ͟ͱUIΛ࡞Δ • ionic view ͰσόΠε্ͰͷݟͨΛ֬ೝ • ΞΠσΟΞΛମݧͰ͖Δܗ·Ͱૣ࣋ͬͯ͘ߦ͘ࣄ͕Ͱ͖Δ • ionic ͷ UI AngularJS ࣗମ͕͖͡Όͳ͍ͱਏ͍͔
Thank you follow @bonar