Ionicを使ってスマホアプリを作ってみた

Ionicを使えば、Android と iOS 両方のスマホアプリが簡単に開発出来ます。
今回は、Ionicを使ったスマホアプリの開発についてご紹介させて頂きます。

Transcript

1.        Copyright (C) 2019 Toranoana Inc. All Right Reserved. Ionic  
   
   ΦλΫ͕࠷৽ٕज़Λ௥͏ϥΠτχϯάτʔΫΠϕϯτ ճ໨   
2. 
    
    
    
    
    
    Copyright (C) 2019 Toranoana Inc. All Right Reserved. 2       ‣ ދͷ݀௨ൢαΠτΛ։ൃ ‣ લ৬ɿۚ༥ܥ4*FS ޷͖ͳ࡞඼ ‣ ϥϒϥΠϒʂγϦʔζ ‣ #BO(
   %SFBNʢόϯυϦʂʣγϦʔζ
3. 
    
    
    
    
    
    Copyright (C) 2019 Toranoana Inc. All Right Reserved. ΋͘͡  *POJDͱ͸ 
   ࠓճ࡞ΔΞϓϦͷ಺༰  *POJDͰͷΞϓϦ։ൃ 
   ࣮ࡍʹΞϓϦΛಈ͔ͯ͠ΈΔ 3
4.       Copyright (C) 2019 Toranoana Inc. All Right Reserved. *POJDͱ͸ *POJDͱ͸ɺ(PPHMFࣾͷ"OHVMBSΛϕʔεʹɺ Apache Cordova 
    +BWB4DSJQUϑϨʔϜϫʔΫ 4
5. 
    
    
    
    
    
    Copyright (C) 2019 Toranoana Inc. All Right Reserved. *POJDͷίί͕εΰ͍ʂ )5.-ͱ+BWB4DSJQUʢ"OHVMBS
   
   5ZQF4DSJQUʣͰɺ "OESPJEΞϓϦͱJ04ΞϓϦ͕ಉ࣌ʹ։ൃ͕Մೳɻ ʢ͍ΘΏΔϋΠϒϦου։ൃʣ 5
6.        Copyright (C) 2019 Toranoana Inc. All Right Reserved. Ionic node.js  Ionic  Cordova  Git  → Ionic   
    Git 
    6 $ npm install ionic cordova -g $ ionic -v
7. >; >; >; >; > ; >; Copyright (C) 2019 Toranoana Inc. All Right Reserved. IonicA8 5?D ,(E $%),47 0.9@ B5? D !&- 0.9@1=E +Android Studio (Android"' 0 32) +Xcode (iOS"' 0 32)  A8#*Mac C D
    /:  MacBook Pro6< E 7
8. .+ .+ .+ .+ . + .+ Copyright (C) 2019 Toranoana Inc. All Right Reserved. 8  '   &$
   (1
   %1, 0* WEB" /  Web  !2)-
   API #3  https://campaign.toranoana.jp/ ͱΒͷ͋ͳΩϟϯϖʔϯαΠτ
9. 
    
    
    
    
    
    Copyright (C) 2019 Toranoana Inc. All Right Reserved. ͱΒͷ͋ͳΩϟϯϖʔϯαΠτ ͱΒͷ͋ͳΩϟϯϖʔϯαΠτ"1*Ͱग़དྷΔ͜ͱ ɾԠืՄೳͳΩϟϯϖʔϯͷҰཡΛऔಘ ɾΩϟϯϖʔϯͷৄࡉ৘ใͷऔಘ 9
10. 
     
     
     
     
     
     Copyright (C) 2019 Toranoana Inc. All Right Reserved. ͱΒͷ͋ͳΩϟϯϖʔϯαΠτ ͱΒͷ͋ͳΩϟϯϖʔϯαΠτ"1*Ͱग़དྷΔ͜ͱ ɾԠืՄೳͳΩϟϯϖʔϯͷҰཡΛऔಘ ˠ
    ԠืՄೳͳΩϟϯϖʔϯͷҰཡΛදࣔ͢ΔΞϓϦ ɾΩϟϯϖʔϯͷৄࡉ৘ใͷऔಘ 10
11. "! "! "! "! " ! "! Copyright (C) 2019 Toranoana Inc. All Right Reserved. Ionic %    #  
     $ Android / iOS 11
12. / . / . / . / . / . / . Copyright (C) 2019 Toranoana Inc. All Right Reserved. "' !  "' 2
    xxxx $(%3 *-1  +&  )#0, 12 $ ionic start xxxx
13.       Copyright (C) 2019 Toranoana Inc. All Right Reserved. API
     13
14. 87 87 87 87 8 7 87 Copyright (C) 2019 Toranoana Inc. All Right Reserved. API/-=.1: *ionViewDidEnter Ionic 52 
    #'%+965& !($)   %+0,;<
    43" / 14
15. =; =; =; =; = ; =; Copyright (C) 2019 Toranoana Inc. All Right Reserved. 7B27A,/@ (HTML) 15 HTML(6 
    Ionic 5<)-%!'% CD61  &ion-thumbnail "$7 *6%!'%7* "$
    430 0 ?:  &ion-label 1>.6# $?: %!' % C+ A,98D
16. ! ! ! ! !  ! Copyright (C) 2019 Toranoana Inc. All Right Reserved.  $  "   
    iOS/Android# $ 16 $ ionic serve --lab
17.        Copyright (C) 2019 Toranoana Inc. All Right Reserved.  
     17
18. 
     
     
     
     
     
     Copyright (C) 2019 Toranoana Inc. All Right Reserved. 18
19. ) ( ) ( ) ( ) ( ) ( ) ( Copyright (C) 2019 Toranoana Inc. All Right Reserved. Android / iOS& "$ '
    Android / iOS& # Android  → Android&%! 
     Android Studio*  iOS d → .xcodeproj  %! 
     Xcode* 19 $ ionic cordova build ios --prod $ ionic cordova build Android --prod
20.        Copyright (C) 2019 Toranoana Inc. All Right Reserved.   
     20
21. 
     
     
     
     
     
     Copyright (C) 2019 Toranoana Inc. All Right Reserved. 21 Android iOS
22. % $ % $ % $ % $ % $ % $ Copyright (C) 2019 Toranoana Inc. All Right Reserved.  Ionic
    JavaScript'#! " Ionic
    Android / iOS '#  !" '# & ( 22