Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

More Decks by 虎の穴ラボ株式会社

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ʢ"OHVMBS5ZQF4DSJQUʣͰɺ "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'#! " IonicAndroid / iOS '#  !" '# & ( 22