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

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

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≠鰔鰗鰼猳
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();
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猳 鰰鱄鰛猳㎦⬒ↅ稰鰈鰹鯷鰍猳猳