Ionicでアプリ作ったよ!開発方法の紹介

 Ionicでアプリ作ったよ!開発方法の紹介

【HTML5でアプリをつくる】Ionic 2+ ミートアップ大阪 #1
で発表した資料です。
https://ionic-jp.connpass.com/event/67042/

87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=128

Shinichi Kozake

October 28, 2017
Tweet

Transcript

  1. +QPKEͰ鱆鱻鲎∽鰔鰐鰹猳 桬鋶㢚㾶鰟倚↬

  2. 鲆鱴鱈鲏桬鋶鱃 鱌鲗鱜鲋鱈鰈鰗鰯鰊鯼ʙ猳猳

  3. &Q[QWMPQY+QPKE!

  4. #RCEJG%QTFQXC鰙#PIWNCT鱃倥鰰⛩鱀鰌鰐 鱳鱈鱺鲎鱧鱬鱆鱻鲎鱃∽㓱鰊鰼鰐鰲鰟 鱎鯮鱻鲗鱡鯮鱝鱹鲐鲄鲓鯮鱓 9GD㕡苏鱃䠉鯵鰗鱱鱈鱪鱇鱺鱆鱻鲎鰆鰛鯽鰺鰟 鱆鱻鲎鱕鯮鱛鲋鲗鱃∽㓱鰊鰼鰄鰙鯽鰘鯾鰼猳 +QPKEKU

  5. 㨍鱟鱧鱛鲋鲗鰘鰠 ɾ⎶鯽+QPKE鱃蓤⹻鰈鰐䛧䠒 ɾ+QPKE鰟盪鯾鰛筸聚 ɾ桬鋶㢚㾶 ɾ≠䠉鰈鰐鱻鲍鱔鱈鲗 倚↬鱃鰈鰐鯵鰙㋾鯵鰯鰊猳 鰄鰟ㆇ+QPKE鱃䠉鯵鰗 鲆鱴鱈鲏鱆鱻鲎鱃∽㓱鰈鰯鰈鰐猳

  6. +QPKEͰ鱆鱻鲎∽鰔鰐鰹猳 桬鋶㢚㾶鰟倚↬

  7. ;QOQQ 㨍鰹鰰鰟蒢㘸鱃屬鯹鰼疵鰊鰼鱆鱻鲎 鱤鱈鱌鱧鱬鱆鱻鲎鰜㉒櫠鱃鯷鰂鰗鰼 痓┮鰟鰷鰺鯵鰳啓鱄鰛㉒櫠鱃鯷鰂鰗

  8. ;QOQQ 㨍鰹鰰鰟蒢㘸鱃屬鯹鰼疵鰊鰼鱆鱻鲎 鱤鱈鱌鱧鱬鱆鱻鲎鰜㉒櫠鱃鯷鰂鰗鰼 痓┮鰟鰷鰺鯵鰳啓鱄鰛㉒櫠鱃鯷鰂鰗 鰑鰲偗⻟

  9. 鰬鱄鰙鰅鰲鱄鰛

  10. ;QOQQ 㨍鰹鰰鰟蒢㘸鱃屬鯹鰼疵鰊鰼鱆鱻鲎 鱤鱈鱌鱧鱬鱆鱻鲎鰜㉒櫠鱃鯷鰂鰗鰼 痓┮鰟鰷鰺鯵鰳啓鱄鰛㉒櫠鱃鯷鰂鰗

  11. +QPKEͰ鱆鱻鲎∽鰔鰐鰹猳 桬鋶㢚㾶鰟倚↬ ⋛鰐鰒鰟鰐鰐鯼鯵鰠眯鰯鰔鰐鰡鯼鰻鰑 鰂鰚鲎鲎鯮鱝鰘鯾鰗鯵鰛鯵 

  12. 哋ヒ倚↬ 痓┮獌鰄鰇鰂ֺ鰈鱄鯵鰒 VYKVVGT獌UAMQ\CMG 5+GT鰘鱛鱝鱪鲄鱆鯮鱑鱪鱓鱬鰵鰔鰗鰯鰊 ,CXC鰙鱷鯮鲏鰙诎鯽盪鯾

  13. 㨍㣆鰠鰄鰽鰑鰂嵒鰈鰐鯵鰙㋾鯵鰯鰊 ։ൃํ๏ *POJDΛબఆͨ͠ཧ༝ :PNPPͷ঺հ +QPKE鰟盪鯾鰛筸聚 ࢖༻ͨ͠ϓϥάΠϯ 桬鋶鰟篾鰽 䠉鯵鰐㕡苏ɾ桬鋶鱨鯮鲏

  14. ։ൃํ๏ *POJDΛબఆͨ͠ཧ༝ :PNPPͷ঺հ +QPKE鰟盪鯾鰛筸聚 ࢖༻ͨ͠ϓϥάΠϯ 桬鋶鰟篾鰽 䠉鯵鰐㕡苏ɾ桬鋶鱨鯮鲏

  15. &GOQ

  16. [QOQQ [QOQQAYGD K2JQPG#PFTQKF 2QUVITG53. 5GPF)TKF *GTQMW#FFQPU 2TQFWEV#FXGTVKUKPI#2+ WUG6YKVVGT U(CDTKE5&-

  17. [QOQQ [QOQQAYGD K2JQPG#PFTQKF 2QUVITG53. 5GPF)TKF *GTQMW#FFQPU 2TQFWEV#FXGTVKUKPI#2+ WUG6YKVVGT U(CDTKE5&-

  18. ։ൃํ๏ *POJDΛબఆͨ͠ཧ༝ :PNPPͷ঺հ +QPKE鰟盪鯾鰛筸聚 ࢖༻ͨ͠ϓϥάΠϯ 桬鋶鰟篾鰽 䠉鯵鰐㕡苏ɾ桬鋶鱨鯮鲏

  19. ɾ#PIWNCT ɾ%QTFQXC ɾ鱙鲗鱻鲏鯽弫⺭鰜䠉㏰ ⑍ㇰ鱙鱈鱬鰜鱙鲗鱻鲏鯽弫⺭ +QPKEUVCTV鰘∽㓱鰆鰽鰼鱙鲗鱻鲏鯵鯵 碨⹻禮鯳鰼 6[RG5ETKRV鯽倁㡖 碨⹻禮鰳飢償鯳鰼 42)鱨鱓鯮鲏/8鰳%QTFQXC≠鰔鰗鰼猳

  20. ɾ#PIWNCT ɾ%QTFQXC ɾ鱙鲗鱻鲏鯽弫⺭鰜䠉㏰ ⑍ㇰ鱙鱈鱬鰜鱙鲗鱻鲏鯽弫⺭ +QPKEUVCTV鰘∽㓱鰆鰽鰼鱙鲗鱻鲏鯵鯵 碨⹻禮鯳鰼 6[RG5ETKRV鯽倁㡖 碨⹻禮鰳飢償鯳鰼 42)鱨鱓鯮鲏/8鰳%QTFQXC≠鰔鰗鰼猳

  21. ⑍ㇰ鱭鱑鲉鲅鲗鱬鰜鱙鲗鱻鲏鯽弫⺭ 鰵鰻鰐鯵鰄鰙鯽鱗鯮鱭鰘稥鰌鰼

  22. ɾ#PIWNCT ɾ%QTFQXC ɾ鱙鲗鱻鲏鯽弫⺭鰜䠉㏰ ⑍ㇰ鱙鱈鱬鰜鱙鲗鱻鲏鯽弫⺭ +QPKEUVCTV鰘∽㓱鰆鰽鰼鱙鲗鱻鲏鯵鯵 碨⹻禮鯳鰼 6[RG5ETKRV鯽倁㡖 碨⹻禮鰳飢償鯳鰼 42)鱨鱓鯮鲏/8鰳%QTFQXC≠鰔鰗鰼猳

  23. KQPKEUVCTV鱗鲂鲗鱭鰘鱻鲑鱜鱋鱓鱬鰟榼㉃鱃蓤㕿

  24. UWRGT鱃蓤鱄鰑≬倁㡖鰛鱙鲗鱻鲏鯽餿勤鰜鰘鯾鰼

  25. ɾ#PIWNCT ɾ%QTFQXC ɾ鱙鲗鱻鲏鯽弫⺭鰜䠉㏰ ⑍ㇰ鱙鱈鱬鰜鱙鲗鱻鲏鯽弫⺭ +QPKEUVCTV鰘∽㓱鰆鰽鰼鱙鲗鱻鲏鯵鯵 碨⹻禮鯳鰼 6[RG5ETKRV鯽倁㡖 碨⹻禮鰳飢償鯳鰼 42)鱨鱓鯮鲏/8鰳%QTFQXC≠鰔鰗鰼猳

  26. #PIWNCT鰠珮)QQING鯽桬鋶鱃ℜ碿鰊鰼ׅ鲆鱤鲗9GD׆鰟鰐鰲鰟 鱆鱻鲎鱕鯮鱛鲋鲗桬鋶鱹鲐鯮鲄鲓鯮鱓 #PIWNCT,5猺XGTUKQP猻鰟祱偺鰙鰈鰗 ㅕ㧩鰜鲎鲎鯮鱝 #PIWNCT鰠#PIWNCT,5鰟祱偺鰑鯽ⅳ稰㌈鰠鰛鯵 #PIWNCTKU

  27. ɾ#PIWNCT ɾ%QTFQXC ɾ鱙鲗鱻鲏鯽弫⺭鰜䠉㏰ ⑍ㇰ鱙鱈鱬鰜鱙鲗鱻鲏鯽弫⺭ +QPKEUVCTV鰘∽㓱鰆鰽鰼鱙鲗鱻鲏鯵鯵 碨⹻禮鯳鰼 6[RG5ETKRV鯽倁㡖 碨⹻禮鰳飢償鯳鰼 42)鱨鱓鯮鲏/8鰳%QTFQXC≠鰔鰗鰼猳

  28. 鲂鱈鱓鲑鱡鱹鱬鰜鰹鰔鰗桬鋶鰆鰽鰐鱻鲑鱔鲍鲃鲗鱔峡嵿 6[RG5ETKRV鰠,CXC5ETKRV鰜⻟鰈鰗珮䧢䡆鰳⛐聚鰛樺䥥⩬↹鰂鰙 鱓鲍鱝鱽鯮鱝鱎鱺鱜鱋鱓鱬稊⛲鱃▁鯹鰐痊⺧鰛鱝鯮鱵鯮鱟鱧鱬 ,CXCUETKRV鰩鰟鱬鲍鲗鱝鱗鲗鱵鱈鲍 6[RGUETKRVKU ⩬⹻劊鰆鯵鰄鯷猳

  29. ɾ#PIWNCT ɾ%QTFQXC ɾ鱙鲗鱻鲏鯽弫⺭鰜䠉㏰ ⑍ㇰ鱙鱈鱬鰜鱙鲗鱻鲏鯽弫⺭ +QPKEUVCTV鰘∽㓱鰆鰽鰼鱙鲗鱻鲏鯵鯵 碨⹻禮鯳鰼 6[RG5ETKRV鯽倁㡖 碨⹻禮鰳飢償鯳鰼 42)鱨鱓鯮鲏/8鰳%QTFQXC≠鰔鰗鰼猳

  30. 鲆鱴鱈鲏鱆鱻鲎鱕鯮鱛鲋鲗桬鋶鱹鲐鯮鲄鲓鯮鱓珯 鲆鱴鱈鲏鱫鱴鱈鱝鰟鱺鲍鱊鱚鱷鲉鯮⃫ 9GD8KGY 鰘▶∽鰈 鲆鱴鱈鲏鱫鱴鱈鱝鰟#2+鰜鱆鱓鱟鱝鰊鰼㉃禷鰟鰐鰲 蒌ㄙ鰟9GD鱆鱻鲎桬鋶鰙⛭鰉鰹鯷鰜∽㓱鰘鯾鰼 %QTFQXCKU ㅕ鰜鱆鱭鱷鯽2JQPG)CR鰟鱡鯮鱝鱗鯮鱭鱃 #RCEJG(QWPFCVKQP鰜⺥↹ #RCEJG%QTFQXC鰙鯵鯷155鯽䠀鰯鰽鰐

  31. ɾ#PIWNCT ɾ%QTFQXC ɾ鱙鲗鱻鲏鯽弫⺭鰜䠉㏰ ⑍ㇰ鱙鱈鱬鰜鱙鲗鱻鲏鯽弫⺭ +QPKEUVCTV鰘∽㓱鰆鰽鰼鱙鲗鱻鲏鯵鯵 碨⹻禮鯳鰼 6[RG5ETKRV鯽倁㡖 碨⹻禮鰳飢償鯳鰼 42)鱨鱓鯮鲏/8鰳%QTFQXC≠鰔鰗鰼猳

  32. None
  33. 鱖鯮鲄俜 㱎疫鱆鱻鲎俜 ㎦⬒俜 鲂鲏鱥鲅鱫鱇鱆俜 鱳鱈鱺鲎鱧鱭鱆鱻鲎 鰟蚘⫀ 鱝鲂鯮鱬鱫鱴鱈鱝鰟㱎疫┊䠉鯽⭸鯹鰗鯵鰼ℎ 鰎鰟飢䛟㕡苏鰟竑╼⋺宽猳猳

  34. ։ൃํ๏ *POJDΛબఆͨ͠ཧ༝ :PNPPͷ঺հ +QPKE鰟盪鯾鰛筸聚 ࢖༻ͨ͠ϓϥάΠϯ 桬鋶鰟篾鰽 䠉鯵鰐㕡苏ɾ桬鋶鱨鯮鲏

  35. 0CX%QPVTQNNGT 鱾鯮鱜鱃▶䥥鰜鲑鯮鱭猺鱟鲐鱓鱣鯵鰺鰛鯵猻 鱝鱣鱧鱓⩬鰟鱾鯮鱜鱮鱷鱖鯮鱛鲋鲗 2WUJ 2WUJ 2QR 2QR 鱝鱣鱧鱓鰟␩欎鯽 锨橃鰜孉䰛鰆鰽鰗鯵鰼

  36. 2WUJ this.navCtrl.push('ReadingChartPage', this.book);

  37. 2QR this.navCtrl.pop();

  38. None
  39. ։ൃํ๏ *POJDΛબఆͨ͠ཧ༝ :PNPPͷ঺հ +QPKE鰟盪鯾鰛筸聚 ࢖༻ͨ͠ϓϥάΠϯ 桬鋶鰟篾鰽 䠉鯵鰐㕡苏ɾ桬鋶鱨鯮鲏

  40. 獈㧩☫鰡ʙ䛟⨉ 桬鋶㨀桴 瓹鰠ͣ紓 㨍㈴鰠鲎鲎鯮鱝鰈鰗鰼Ⅹ⹻鰑鰔鰐 Ⰸ↛鰟Ⅼ㎦鰘鰊

  41. 桬鋶鰟篾鰽

  42. 鰵鰻鰐鯵鰄鰙鱃㿸鯵ⓛ鰊 锨橃鱈鲅鯮鱜鱃㚰鯵鰗鰰鰼 㨍㬝桬鋶鰩猳猳 锨橃鲆鱧鱓鰕鰀鰼 鯵鰕鰳鰟↶Ⅼ鰟篾鰽鰛鰟鰘鰊

  43. 鰵鰻鰐鯵鰄鰙鱃㿸鯵ⓛ鰊 锨橃鱈鲅鯮鱜鱃㚰鯵鰗鰰鰼 锨橃鲆鱧鱓鰕鰀鰼 㨍㬝桬鋶鰩猳猳

  44. 锨橃鲆鱧鱓鰕鰀鰼 锨橃鲆鱧鱓鰕鰀鰼鰄鰙鰘珮+QPKE鰟䫆帹鯽萅鰜鰕鰀 ▪㈘鰜鰛鰼 鲆鱧鱓鲐鱽鲏鰘鯳鰽鰡珮鱙鲗鱻鲏鱃餿勤鰜伂☹鰜∽鰽鰼

  45. 鲆鱧鱓鯽鰘鯾鰼鰙▶鯼鰈鰐鰀鰛鰼猳 䫆鰺鱄鰂鰚 鯽鱄鰡鰾鯮猳 鰎鰈鰗㨍㬝桬鋶鰩猳猳

  46. 桬鋶㢚㾶

  47. [QOQQ [QOQQAYGD [QLJKRUGT ,&.HKNG LJKRUGTKORQTVKFN ,&.5VWFKQ FQYPNQCF KQPKEUVCTV UYCIIGTEQFGIGPIGPGTCVG #2+

  48. [QOQQ [QOQQAYGD [QLJKRUGT ,&.HKNG LJKRUGTKORQTVKFN ,&.5VWFKQ FQYPNQCF KQPKEUVCTV UYCIIGTEQFGIGPIGPGTCVG #2+

    +10+%鰟%.+鱃≠鯷鰄鰙鰘 鱆鱻鲎鰟榼㉃鯽伂☹鰜∽㓱鰘鯾鰼 ⯻窚鰟鱙鲗鱻鲏鰳䠉㏰鰆鰽鰗鯵鰼鰟鰘 飢赙鰳鰎鰽鱃餿勤鰜鰊鰼鰙伂☹猳
  49. [QOQQ [QOQQAYGD [QLJKRUGT ,&.HKNG LJKRUGTKORQTVKFN ,&.5VWFKQ FQYPNQCF KQPKEUVCTV UYCIIGTEQFGIGPIGPGTCVG #2+

    UYCIIGTEQFGIGP鱃䠉鯵鰼鰄鰙鰘珮 9GD#2+鰟⹻劊鯼鰺#PIWNCT鰟 *662蒌⋂鱗鯮鱭鱃哋▶䠀㓱猳⊠┊猳
  50. 桬鋶鱨鯮鲏

  51. 8KUWCN5VWFKQ%QFG 9GD5VQTO 8KUWCN5VWFKQ

  52. 8KUWCN5VWFKQ 9GD5VQTO ⎶鯽蓤鱄鰑鰟鰠鰄鰽 盪鯾鰛鰟≠鯻鯷猳 8KUWCN5VWFKQ%QFG

  53. ։ൃํ๏ *POJDΛબఆͨ͠ཧ༝ :PNPPͷ঺հ +QPKE鰟盪鯾鰛筸聚 ࢖༻ͨ͠ϓϥάΠϯ 桬鋶鰟篾鰽 䠉鯵鰐㕡苏ɾ桬鋶鱨鯮鲏

  54. EQTFQXCURNCUJ EQTFQXCKEQP 紝鰜⊠┊鰑鰙禮鰉鰐鰟鰠鰄鰟獄鰕 KEQPRPI URNCUJRPI ⛥鱻鲍鱧鱬鱹鱍鯮鲄ɾ䷐㨌鱙鱈鱞鰅鰙鰟 鱆鱈鱗鲗鰵鱝鱻鲍鱧鱛鲉锨畘鱃哋▶䠀㓱

  55. 鰯鰙鰲

  56. 疟鰙碨⹻鰈鰗鯵鰼 倱㲬碨⹻鰈鰗▶鰀 +QPKE鰟鱴鯮鱜鲋鲗鱆鱧鱻窸鰜鰒鰸鰔鰙嗇▕

  57. 鲐鱝鲁鲗鱝⠰欭鰛鰈猳 㱎疫鱆鱻鲎鲐鱽鲏鰘鯳鰽鰡鰄鰽鰘畳ⓧ猳 鰒鰸鰔鰙菈▶鯽蒴鰲獑䫆屬鰬鰈鯵

  58. 伂☹鰜鱝鱣鯮鱬鰘鯾鰼猳 鱈鲗鱝鱬鯮鲏鰈鰗KQPKEUVCTV伂☹猳 㑄鰽鰼鰙鲆鱧鱓鲐鱽鲏鰠鱙鱓鱙鱓∽鰽鰎鯷

  59. 9GD紓鰳鰄鰽鰘鯵鯵鰟鰘鰠猳 +QPKE鰘9GD鱆鱻鲎鰳∽鰽鰡鯵鯵鰟鰘鰠獑 ㏰屬ⓧ鯼鰽鰎鯷∽鰔鰐↛鯵鰽鰡窔鯹鰗猳

  60. /GGV7R猳+QPKE猳 鰰鱄鰛猳㎦⬒ↅ稰鰈鰹鯷鰍猳猳