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
590
Introducing Atmoph
bonar
0
36
Lean Startup Hardware
bonar
0
480
Other Decks in Technology
See All in Technology
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
100
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
640
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
170
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
500
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
620
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
270
Railsの話をしよう
yahonda
0
130
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
260
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Designing for humans not robots
tammielis
254
26k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
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