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
Ionic Framework is good for creating apps
Search
kkeeth
November 21, 2018
Programming
1
130
Ionic Framework is good for creating apps
kkeeth
November 21, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
20
とある EM の初めての育休からの学び
clown0082
1
3.7k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
170
Visually experience the beauty of mathematics with p5.js
clown0082
1
3k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.6k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
620
JavaScript × Mathematics go to Digital Art
clown0082
1
390
In-house study group at YUMEMI
clown0082
0
210
Playing Ionic Logo by p5.js
clown0082
0
280
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
22
9k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
240
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
180
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
GPUを計算資源として使おう!
primenumber
1
200
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
TypeScriptでDXを上げろ! Hono編
yusukebe
3
650
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
840
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
A designer walks into a library…
pauljervisheath
207
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Thoughts on Productivity
jonyablonski
69
4.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Done Done
chrislema
184
16k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Typedesign – Prime Four
hannesfritz
42
2.7k
Code Reviewing Like a Champion
maltzj
524
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Transcript
Ionic Framework is good for creating apps k-kuwahara @kuwahara_jsri clown0082
About me
About me const my_info = { Name: ‘܂ݪਔ’, Workplace: ‘Yumemi
Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }
Communities collaborator translator staff staff
Communities github.com/k-kuwahara
Let’s start the today’s Ionic talks !!
In the past: Web First ↓ Currently: Mobile First
Mobile First …?
Mobile First …? It’s Responsive!!
Mobile First = Responsive
Mobile First = Responsive ×
Mobile First ⊃ Responsive
Mobile First is … Optimizing UI/UX design for mobile
Mobile first example ‣ Design tailored to each terminal
Mobile first example 'JSTU1BJOU 'JSTU$POUFOUGVM1BJOU 'JSTU.FBOJOHGVM1BJOU 'VMMZ-PBEFE ‣ First view
optimized for mobile
For more mobile first ⚡AMP (Accelerated Mobile Pages) PWA (Progressive
Web Apps)
‣ Served over HTTPS PWA examples ‣ Add to home
screen APP
PWA examples ‣ Offline Experience ‣ Push Notifications
How to make it PWA? See “Progressive Web App Checklist”.
URL: https://developers.google.com/web/progressive-web-apps/checklist See “Your First Progressive Web App”. URL: https://codelabs.developers.google.com/codelabs/your-first-pwapp/ index.html?index=..%2F..%2Findex#0
Web with PWA ≒ Mobile Application
In recently years, Develop applications with HTML5
So, how about “Ionic Framework” ?
What is “Ionic Framework”?
What is “Ionic Framework” ? image by: https://ionicframework.com/
What is “Ionic Framework” ? image by: https://ionicframework.com/
What is “Ionic Framework” ? +
What is “Ionic Framework” ? Android iOS Web
What is “Ionic Framework” ? UI Base WebView
What is “Ionic Framework” ? UI Base WebView Ionic Native
Native API Cordova API
Ionic v4 + other frameworks
Ionic + other frameworks +
Ionic + other frameworks +
Q. How do we get started?
Step1: install nodejs Please install
Step2: execute the following commands
For example
Step3: place component in html file image by: https://ionicframework.com/docs/components/
Step4: write the logic to the ts file
See also: for details URL: https://qiita.com/clown0082/items/5405c53eb955f985edda
Q. What are the features of Ionic framework?
Summary of Ionic features 1. PWA(by default) 2. It's fun
to develop 3. Support of slack is profound 4. Clean, simple, and functional 5. Abundant API to native function
Q. But, it's really difficult, isn’t it?
A. It is roughly No. (The difficult point is Angular)
Application Example: ʮϗϏϯΰʯ Web URL: https://app.houbingo.com App URL : https://play.google.com/store/apps/details?id=com.houbingo
This app was developed by a designer about 3 days.
with this book ↓
Let’s Create Mobile Application by Ionic Framework!!
None