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の概要と使いどころ/what-and-how-about-ionic
Search
Masahiko Sakakibara
November 06, 2017
2
510
Ionic Frameworkの概要と使いどころ/what-and-how-about-ionic
Masahiko Sakakibara
November 06, 2017
Tweet
Share
More Decks by Masahiko Sakakibara
See All by Masahiko Sakakibara
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
73
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
210
プライベートプロダクト戦略 - フロントエンドカンファレンス沖縄 / private_product_frontend
rdlabo
3
4.3k
GitHubをCMSとして使う話/ using_github_as_CMS
rdlabo
0
390
JavaScriptから デバイスの力を100%引き出すための Web APIとCapacitor入門 / power_from_javascript
rdlabo
0
500
Capacitor4_release
rdlabo
0
600
Web技術で稼ぐため選択肢を俯瞰しよう/options_to_earn_web_technology
rdlabo
0
120
Ionicモバイルアプリ制作入門/get_started_with_ionic
rdlabo
0
110
JavaScript から デバイスの力を 100%引き出すための Capacitor と Angular でのはじめかた。
rdlabo
2
1.8k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building Applications with DynamoDB
mza
93
6.2k
A designer walks into a library…
pauljervisheath
205
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Why Our Code Smells
bkeepers
PRO
336
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Statistics for Hackers
jakevdp
797
220k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
4 Signs Your Business is Dying
shpigford
182
22k
BBQ
matthewcrist
87
9.5k
Transcript
Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯݚڀॴ දཧࣄɹࡗݪণ *POJD'SBNFXPSLͷ֓ཁͱ͍Ͳ͜Ζ
ࣗݾհ ࡗݪণ Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ ݚڀॴදཧࣄ Ұൠࣾஂ๏ਓΤϦΞɾ ΠϊϕʔγϣϯɾΞϥΠΞϯε$50 ຊͷϋογϡλά #ionic_jp ߹ಉձࣾ/&$0.03* ಛผߨࢣ
)5.-ΞϓϦΛͭ͘ΔͨΊͷશ෦ ೖΓϑϨʔϜϫʔΫ w "OHVMBSʢ(PPHMFʣ͕ w λεΫϥϯφʔɺϥΠϒϦϩʔυ ͳͲͷ૯߹։ൃڥ͕σϑΥϧτ Ͱ༻ҙ͞Ε͍ͯͯ w $PSEPWBɺ18"ʹσϑΥϧτରԠ
w #PPUTUSBQͷΑ͏ͳ6*ίϯϙʔω ϯτΛ࣋ͪ *POJD'SBNFXPSLͱ
<֮͑ํ>VTFDBTF͔ΒֶͿ$POQPOFOUT IUUQJPOJDUFBNHJUIVCJPJPOJDDPOGFSFODFBQQXXX
ςοΫϑΟʔυʢ0QFO8FC5FDIOPMPHZ$PSQʣ
ήʔϚΨʢגࣜձࣾυϫϯΰʣ
)JCFFʢ&YDJUF+BQBO$P -UEʣ
$ npm install -g ionic cordova <= Ionicをはじめる準備(CLI) $ ionic
start ProjectName <= プロジェクトを作成 $ ionic serve <= 開発開始 ͡Ίํ
͞Βʹ JPOJDDPSEPWBCVJMEJPTBOESPJE w εϚϗΞϓϦͱͯ͠Մೳ w ϦιʔεͰෳΞϓϦϦϦʔε w J5VOFT4UPSF(PPHMF1MBZ 8JOEPXT1IPOF w
&MFDUSPOͰίϯύΠϧ͢Δͱσ εΫτοϓΞϓϦɻ $PSEPWBͰ8FCΛεϚϗΞϓϦ
ಉҰ8JpԼͰ *POJD%FW"QQΛىಈ͍ͯ͠Δͱ JPOJDTFSWFͰࣗಈతʹεϚϗϥΠϒϓϨϏϡʔ *POJD%FW"QQͰ࣮ػϓϨϏϡʔ JPOJDTFSWFͰ࣮ػϓϨϏϡʔ͕Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ IUUQTZPVUVCFUC5PG"+DD UT
18"Ͱ8FCΛΞϓϦԽ ΦϑϥΠϯදࣔ #BDLHSPVOE4ZOD 1VTI௨ ϗʔϜը໘ʹՃ
(14ΧϝϥͳͲͷ εϚϗػೳͷΞΫηε
w ͜ͷؒͰωΠςΟϒ։ൃ ͔Βݮগ w εϚʔτΥονͷ։ൃऀ͕ ͍ΔΒ͍͠ w "84ΑΓ'JSFCBTFͷํ͕Α͘ ΘΕ͍ͯΔʢϓογϡ௨Ͱ ɺͱʣ
w .JDSPTPGUͷ։ൃͨ͠7JTVBM 4UVEJP$PEF͕τοϓγΣΞ w *POJDΛબΜͩਓɺ6*ίϯϙʔ ωϯτͷσβΠϯ͕ؾʹೖͬͯ Δ w 8FC։ൃऀ͕ϞόΠϧΞϓϦ։ ൃऀͱҠߦͯ͠Δ *POJD%FWFMPQFS4FSWFZ ϑΥʔϥϜͰ$44ͷ࣭Λ͢ΔͬͯΔɻ
*POJDͷ͍Ͳ͜Ζ *POJDۜͷؙʹͳΔ͔
3FBDU/BUJWFͱ*POJDʢ+4ؒʣ 3FBDU/BUJWFʢ/BUJWF4DSJQUʣ *POJD දࣔͯ͢/BUJWFϨΠϠʔͰɺͦΕΛ+4Ͱ੍ޚɻ )5.-$44Ͱͳ͘/BUJWFίϯϙʔωϯτΛॻ͘ɻ+4ΛωΠςΟϒ։ൃʹ ࣋ͪࠐΜͩײ͡ɻ"1*ΞΫηεʹ3FBDU/BUJWFϓϥάΠϯΛར༻ɻ 3FBDU/BUJWFGPS8FC͋Δ͚ͲجຊతʹεϚϗΞϓϦɻ )5.-ϨΠϠʔΛ8FC7JFXͰΞϓϦͬΆ͘දࣔɻҰԠΞϥʔτͳͲ/BUJWF ϨΠϠʔΛݺͼग़͢͜ͱՄೳ͚ͩͲ։ൃ͠ʹ͍͔͘Β·ͣΒͳ͍ɻ /BUJWF"1*ͷΞΫηε$PSEPWBϓϥάΠϯΛར༻ɻ
18"εϚϗΞϓϦ
,PUMJOͱ*POJDʢωΠςΟϒؒʣ ,PUMJOʢGPS+4/BUJWFʣ 4XJGU ࣍ੈ+BWBͰɺ"OESPJEͷωΠςΟϒݴޠɻ͍ͭઌͷΧϯϑΝϨϯεͰJ04 ରԠɺ+4ରԠ͕ൃද͞Εͨɻ1)1+4ʹมͰ͖Δ࣌ͳͷͰ+4ʹ͍ͭͯ Կ͍Θͳ͍͚ͲJ04ରԠʹ͕ू·ΔɻϓϥάΠϯʹ͍ͭͯෆ໌ɻ ͨͩɺεϚϗΞϓϦʹເΈΔͳΒ݁ߏ͍ɻ ͝ଘɺJ04ͷωΠςΟϒݴޠɻҰ࣌ظɺ"OESPJEରԠͷظ͕͕͋ͬͨͦΕ ͔Β΄Ͳଓใͳ͠ɻ4XJGUGPS4FSWFSͱ͔ฉ͚͘ͲɺجຊతʹJ04ͷ ͨΊͷͷɻ
*POJDͷ͍Ͳ͜Ζ Ionic RN Kotlin Swift HTMLॻ͚Δ ̋ ☓ ☓ ☓
JSॻ͚Δ ̋ ̋ ˚ ☓ Ϛϧνϓϥοτ ϑΥʔϜ Web/εϚϗ εϚϗ εϚϗ ☓ ϨϯμϦϯά ˚ ̋ ̋ ̋
w 8FC੍࡞ऀ͕ΞϓϦ։ൃΛ͡ΊΔ w 18"ͩͯ͠ɺԠΛΈͳ͕ΒϚϧν ϓϥοτϑΥʔϜల։ w ϢʔβͷԠΛΈͳ͕Βػೳͷ֦ு আΛ͢Δ w ΞϓϦ͕҆ఆ͠ɺेͳϢʔβͱࢿ
͕ۚ֬อͰ͖ͨΒωΠςΟϒΞϓϦ ʹ࡞Γม͑Δ *POJDͷ͍Ͳ͜Ζ w 4XJGU։ൃऀ͕)5.-͔Β͡ΊΔ w ͍͖ͳΓϚϧνϓϥοτϑΥʔϜల ։ɻ w ࠷ॳʹͭ͘Γ͜ΜͰɺҎ߱όʔδϣ ϯΞοϓͷΈରԠ w ٸͨ͠ΞϓϦͰࢿۚͱਓࡐʹ༨ ྗ͕͋ͬͯ*POJDΛ͍ଓ͚Δ
w ຊग़͠·͢ɻങͬͯ΄͍͠ͱ ͍Θͳ͍ͷͰɺࠓɺπΠʔ τ͍ͯͩ͘͠͞ɻ w TMBDLͷΦʔϓϯνϟϯωϧ ʢIUUQTUDP ,TM.UWJʣ͋ΔͷͰɺ ͍࢝ΊͯΘ͔Βͳ͍͜ͱ͋ͬ ͨΒͥͻɻ
w ྆ํɺ63-ຊͷ $POOQBTTͷࢿྉʹΞοϓ͠ ͍ͯ·͢ɻ ฉ͘ɺͰऴΘΒͳ͍ͨΊʹ ݄ग़൛༧ఆʢઈࢍ༧डதʣ
None