More Related Content
Similar to Cordovaで業務アプリを作る 〜その事例とノウハウ〜 (20)
More from Kenichi Inoue (16)
Cordovaで業務アプリを作る 〜その事例とノウハウ〜
- 1. cutting edge
motivation engineering
move your heart
➨1ᅇ Cordovaຮᙉ (2014/11/5)
Cordova䛷ᴗົ䜰䝥䝸䜢స䜛
䚷ࠥ䛭䛾䛸䝜䜴䝝䜴ࠥ
䜰䝹䝔䜱䝄䞁䜶䝑䝆ྜྠ♫䚷ୖ ◊୍
- 2. ⮬ᕫ⤂
ୖ ◊୍䚷@inoccu
䜰䝹䝔䜱䝄䞁䜶䝑䝆ྜྠ♫ ௦⾲♫ဨ䞉CEO
2012ᖺ7᭶䚷䝋䝻䝴䝙䝑䝖 Artisan Edge❧䛱ୖ䛢
2013ᖺ7᭶䚷䜰䝹䝔䜱䝄䞁䜶䝑䝆ྜྠ♫䜢タ❧䚷䠄⌧ᅾ䜒1ே䛷䠅
ᇶᮏⓗ䛻䚸ᴗົ⣔䛾Web䝅䝇䝔䝮㛤Ⓨ䜀䛛䜚䜔䛳䛶䛝䜎䛧䛯䚹
䠄2000ᖺࠥ䠅
Facebook䠖 https://www.facebook.com/kenichi.inoue
䝃䜲䝖䠖 http://artisanedge.jp䚷䝯䞊䝹䠖 inoue@artisanedge.jp
- 3. 䛭䛾䛾άື
● ㅮᖌάື
○ ㉸ึᚰ⪅䛾䛯䜑䛾IT䝇䜽䞊䝹 TECH GARDEN SCHOOL 䛻䛶䚸
䝥䝻䜾䝷䝭䞁䜾ㅮᗙ䠄CakePHP➼䠅䛾ㅮᖌ䛸䛧䛶άື䛧䛶䛔䜎䛩䚹
● 䝁䝭䝳䝙䝔䜱άື䞉䝯䝕䜱䜰䞉Ⓩቭ
○ ᪥ᮏJobScheduler䝴䞊䝄䜾䝹䞊䝥䛾䝯䞁䝞䞊䛸䛧䛶䚸@IT䛻ᐤ✏䛧䛯䚸
July Tech Festa➼䛾ᢏ⾡䜲䝧䞁䝖䛻Ⓩቭ䜒䛧䛶䛔䜎䛩䚹
䠘䝯䝕䜱䜰ᥖ㍕䠚
䠜IT Nagios䛸㐃ᦠ䛧䛶㐠⏝⮬ື䟿 䛸㐺⏝䝫䜲䞁䝖
http://www.atmarkit.co.jp/ait/articles/1401/20/news140.html
- 7. SMS
(Serviceman Management System)
● 〇㐀ᴗT♫ྥ䛡䛾䝃䞊䝡䝇䝬䞁ᨭ䝅䝇䝔䝮䚹
○ 2013ᖺ2᭶㛤Ⓨ㛤ጞ䚸2013ᖺ9᭶ᮏ✌ാ䚹
○ 2015ᖺ㡭䛻䛿T♫䜾䝹䞊䝥䛾ᾏእᣐⅬ䜈䛾ᑟධ䜒᳨ウ䚹
● ᪥ᮏᅜ䛷400ே䜋䛹䛾䝃䞊䝡䝇䝬䞁䛜䚸᪥䚻䛾ಟ⌮䞉Ⅼ
᳨ᴗົ䛷䛳䛶䛔䜛䚹
○ 䝃䞊䝡䝇䝬䞁䛾ὴ㐵ᣦ♧ࠥ⌧ᆅゼၥࠥゼၥሗ࿌᭩䛾సᡂ䛸㢳ᐈ䛾⨫ྡ䛺
䛹䜢䜰䝥䝸䛷⾜䛳䛶䛔䜛䚹
○ T♫䛾䝡䝑䜾䝴䞊䝄䛷䛾Ⅼ᳨ᴗົ⏝䛻ᑓ⏝䛾⏬㠃䞉ᖒ⚊䛾సᡂ䜒䚹
● iPhone5 / iPad mini 2䜢୍ᩧᑟධ䛧䛶㐠⏝䚹
○ 䜰䝥䝸䜒iOS∧䛾䜏䜢㛤Ⓨ䛧䛶䛔䜛䚹
- 8. 㛤Ⓨᮇ㛫䞉つᶍ
● iOS䜰䝥䝸
○ 2003ᖺ2᭶䚷㛤Ⓨ㛤ጞ䚷㛤Ⓨ䠖1ே
○ 2003ᖺ7᭶䚷䝟䜲䝻䝑䝖∧䠄䝃䞊䝡䝇䝬䞁10ே⛬ᗘ䠅䚷㛤Ⓨ䠖1ே
○ 2003ᖺ9᭶䚷ᮏ✌ാ䠄䝃䞊䝡䝇䝬䞁400ே⛬ᗘ䠅䚷㛤Ⓨ䠖1ࠥ2ே
○ ⌧ᅾ䚷ᘬ䛝⥆䛝ᶵ⬟㏣ຍ➼䛷㛤Ⓨ䛿⥆⾜䚷㛤Ⓨ䠖1ࠥ2ே
○ 䠘つᶍ䠚䚷16⏬㠃䠄ู䛻䝎䜲䜰䝻䜾7⏬㠃䠅䚸6ᖒ⚊
■ 1⏬㠃䛻4ࠥ5䝍䝤䛜䛒䛳䛶䚸ᐇ㉁ 4ࠥ5⏬㠃┦ᙜ䛻䛺䜛⏬㠃䜒䛒䜛䚹
● 䝃䞊䝞ഃ
○ ᇶᖿ䝅䝇䝔䝮䛸䛾㐃ᦠ䚸㏻ᖖ䛾Web䝅䝇䝔䝮䛸䛧䛶⊂⮬䛾ᶵ⬟
○ Ruby on Rails䛷㛤Ⓨ䚷㛤Ⓨ䝯䞁䝞䞊2ே⛬ᗘ
- 13. 䛭䛾䛾ᶵ⬟
● ぢ✚᭩䚸ᶵჾデ᩿᭩䛾సᡂ䠄⏬㠃䞉ᖒ⚊䠅
● ୍ᣓ⦅㞟ᶵ⬟
● PUSH㏻▱䛾ཷಙ䠄᪂つὴ㐵౫㢗➼䠅
● BackgroundFetch䠄᭦᪂䝕䞊䝍䛾⮬ືྲྀᚓ䠅
○ iOS7䝸䝸䞊䝇ᚋ䛻ᑐᛂ䛧䛯䚹
● ⌧ᅾ⨨ሗ䛾㏦ಙ䚸㏆㞄䜰䜽䝅䝵䞁䛾᳨⣴
● 䜸䝣䝷䜲䞁䛷䛾᧯స
○ 䜸䝣䝷䜲䞁䛾ධຊ䝕䞊䝍䛿䝻䞊䜹䝹䛷ಖᏑ䚹䜸䞁䝷䜲䞁䛻䛺䛳䛯ᚋ䛾᧯స
䛷୍ᣓྠᮇ䚹
- 15. 䛺䛬䚸Cordova䜢䛳䛯䛾䛛䠛
䠘㛤Ⓨ䝥䝻䝆䜵䜽䝖㛤ጞ௨๓䠚
● 䝍䝤䝺䝑䝖ᑟධ䛿Ỵ䜎䛳䛶䛔䛯䛜䚸iOS䚸Android䚸Windows
䛾䛔䛪䜜䛻䛩䜛䛛䛜Ỵ䜎䛳䛶䛔䛺䛛䛳䛯䚹
● 䛔䛱᪩䛟䚸⤒Ⴀᒙ䜔ሗ䝅䝇䝔䝮㒊㛛䛻䝥䝺䝊䞁䛩䜛ᚲせ
䛜䛒䛳䛯䚹
○ ᡃ䚻䛿䚸⌧ᴗ㒊㛛ෆ䛾㛤Ⓨ䝏䞊䝮䛺䛾䛷䞉䞉䞉
○ 䝥䝺䝊䞁䛩䜛䛺䜙䛂᪤䛻ື䛟⏬㠃䛃䛜䛒䛳䛯᪉䛜ຠᯝⓗ䟿
● 㛤Ⓨ䝏䞊䝮䛿Web䝅䝇䝔䝮㛤Ⓨ䛾⤒㦂⪅䜀䛛䜚䚹
○ 䝛䜲䝔䜱䝤䛾iOS / Android䜰䝥䝸䛾㛤Ⓨ⤒㦂⪅䛿1ே䛰䛡䚹
- 16. 䛺䛬䚸Cordova䜢䛳䛯䛾䛛䠛
䠘㛤Ⓨ䝥䝻䝆䜵䜽䝖㛤ጞ௨ᚋ䠚
● 䝛䜲䝔䜱䝤䜋䛹䛾䜰䝥䝸䛿ฟ᮶䛺䛔䛛䜒䛧䜜䛺䛔䛜䚸ᴗົ䜰
䝥䝸䛸䛧䛶ᚲせ༑ศ䛺䜰䝥䝸䛿ฟ᮶䜛䚹
● Web䝅䝇䝔䝮㛤Ⓨ⤒㦂⪅䛺䜙䚸ẚ㍑ⓗ䝇䝢䞊䝕䜱䛻㛤Ⓨ䛷
䛝䜛䚹
○ 䝣䝻䞁䝖ഃ䛾ᢏ⾡䠄HTML5䚸JavaScript䠅䛾⤒㦂⪅䛾ሙྜ䚹
● ᴗົ䜰䝥䝸䛿ᑑ䛜㛗䛟䛺䜛䛣䛸䛜ண䛥䜜䜛䛾䛷䚸≉ᐃ
OS䜈䛾䝻䝑䜽䜸䞁䛿ฟ᮶䜛䛰䛡㑊䛡䛯䛔䚹
○ ୍ᣓᑟධ䛧䛯iPad䜔iPhone䛾䝞䝑䝔䝸䞊䜒䚸2ᖺ⤒䛶䜀䜈䛯䛳䛶䛟䜛䛰䜝䛖
䛧䡡䡡䡡䚹
- 18. 䜰䞊䜻䝔䜽䝏䝱
Cordova䜰䝥䝸
Collection
(Backbone.js)
JavaScriptྠᮇ䠄䝬
䝇䝍䠅
SQLite
Model
(Backbone.js)
Model
(Backbone.js)
View
(Backbone.js)
index.html
(jQuery Mobile)
䝃䞊䝞ഃ
⏬㠃ẖ䛾
䝡䝆䝛䝇䝻䝆䝑䜽
⏬㠃䛾ᐃ⩏
1 JavaScript㓄ิ 䍦 1 JSON䝣䜯䜲䝹
1 JavaScript䜸䝤䝆䜵䜽䝖
䝛䜲䝔䜱䝤ྠᮇ
䠄䜰䜽䝅䝵䞁䠅
䈜ㄞ䜏㎸䜏䛾䜏
䜰䜽䝅䝵䞁ಖᏑ
- 20. jQuery Mobile
䠘䝯䝸䝑䝖䠚
● HTML䛷䝍䝤䝺䝑䝖䜔䝇䝬䝩䛷䛾᧯స䛻㐺䛧䛯⏬㠃䜢స䜛䛣
䛸䛜ฟ᮶䜛䚹
● 䝍䝤䝺䝑䝖䛸䝇䝬䝩䛷ู䛾⏬㠃䜢స䜛ᚲせ䛜䠄ᇶᮏⓗ䛻䠅䛺
䛔䚹
䠘䝕䝯䝸䝑䝖䠚
● ㍍㔞䛸䛿䛔䛘䛺䛔䚹䛱䜗䛳䛸䝰䝃䝰䝃䛧䛯ື䛝䚹
- 21. Backbone.js䜢䛳䛯䛣䛸䛾䝯䝸䝑䝖
● Model (Collection)䛸View䚸HTML䛷䛾ฎ⌮䛾ษ䜚ศ䛡䛜
ฟ᮶䛯䚹
● Model䛸View䛾᪉䛷ඹ㏻ฎ⌮䜢䝇䞊䝟䞊䜽䝷䝇䛻⨨䛟䛣䛸
䛷䚸ఝ䛯䜘䛖䛺せ௳䛾㏣ຍ⏬㠃䜢䝇䝢䞊䝕䜱䛻㛤Ⓨฟ᮶䜛䜘
䛖䛻䛺䛳䛯䚹
○ ఝ䛯䜘䛖䛺せ௳䛾⏬㠃䛺䜙䚸2ࠥ3᪥䜒䛒䜜䜀ᙧ䛻䛺䜛≧ែ䚹
● Backbone.sync䛷䝕䞊䝍䛾䜔䜚ྲྀ䜚䜢䝃䞊䝞䛸┤᥋䜔䜛
䜿䞊䝇䛸䚸䝻䞊䜹䝹䛾SQLite䜢⤒⏤䛩䜛䜿䞊䝇䛾୧᪉䜢
䛔ศ䛡䜛䛣䛸䛜ฟ᮶䛯䚹
- 22. Backbone.js䠇jQuery Mobile
┦ᛶ䛿Ⰻ䛟䛺䛔䛛䜒䡡䡡䡡
䠘㑄⛣ඖ䠚 䠘㑄⛣ඛ䠚
⏬㠃㑄⛣䛾㛤ጞ
㑄⛣ඛ䛾View䛾᭷↓☜ㄆ䞉⏕ᡂ
㑄⛣ඛ䛾View䛾render()ฟ
render()䛷⏬㠃⾲♧‽ഛ
⏬㠃䛾ษ᭰ changePage()
pagebeforeshow䛾Ⓨⅆ
Backbone.js jQuery Mobile ⏬㠃㑄⛣䛾
䞉⾲♧ሗ䛾ྲྀᚓ
䞉DOM䜈䛾ᫎ
䈜䛣䛾Ⅼ䛷jQuery Mobile䛾䝯
䝋䝑䝗䜢䛖䛸䜶䝷䞊䛻䛺䜛
䞉jQuery Mobile䛾䝯䝋䝑䝗⏝
- 23. 䝛䜲䝔䜱䝤䛸JavaScript䛾䛔ศ䛡
䠘JavaScript䠚
● 䛩䜉䛶䛾⏬㠃䛸䝡䝆䝛䝇䝻䝆䝑䜽
● 䝃䞊䝞䛸䛾䝕䞊䝍䛾䜔䜚ྲྀ䜚䠄୍㒊䜢㝖䛟䠅
䠘Cordova䝥䝷䜾䜲䞁䠄JavaScript䠇䝛䜲䝔䜱䝤䠅䠚
● JavaScript䛷ᐇ⌧䛷䛝䛺䛔UI䠄MapKit䛺䛹䠅䚸Geolocation䛺䛹
● 䝥䝷䜾䜲䞁䛻䛴䛔䛶䛿䚸ᚋ䛷ヲ䛧䛟䛚ヰ䛧䛧䜎䛩䟿
䠘䝛䜲䝔䜱䝤䠚
● PUSH㏻▱䛾ไᚚ
● BackgroundFetch䛷䛾䝃䞊䝞䛛䜙䛾䝕䞊䝍ཷಙ
- 29. స䛳䛯䝥䝷䜾䜲䞁 (1)
● ZbarcodeScanner
○ ZBar䜢䛖䝞䞊䝁䞊䝗䝇䜻䝱䝘
● MultiImageViewer
○ 」ᩘ䛾⏬ീ䜢ษ䜚᭰䛘䛶⾲♧䛩䜛䚷⨫ྡ⏬㠃䜈䛾㐃ᦠᶵ⬟䛒䜚
● NativeSync
○ 䝛䜲䝔䜱䝤䝁䞊䝗䛷䝃䞊䝞䛸㏻ಙ䛧SQLite䛻ಖᏑ䛩䜛
● NetworkActivityIndicator
○ 䜲䞁䝆䜿䞊䝍䜢⾲♧䛩䜛
● OpenCustomURL
○ ⨨ሗྲྀᚓ䠇ᆅᅗ䜰䝥䝸䠄Apple Map or Google Map䠅䛾䜸䞊䝥䞁
- 30. స䛳䛯䝥䝷䜾䜲䞁 (2)
● ReportMaker
○ HTML䠇jQuery䝧䞊䝇䛷ᖒ⚊䜢స䜚䚸PDF or JPEG䛷ಖᏑ
● SaveToPhotoAlbum
○ JPEG䛷సᡂ䛧䛯ᖒ⚊⏬ീ䜢䜹䝯䝷䝻䞊䝹䛻ಖᏑ
● TCamera
○ ྎᙧ⿵ṇᶵ⬟䛝䛾䜹䝯䝷䠇䝨䜲䞁䝖
● UniqueIdentifier
○ UUID䛾ྲྀᚓ
● UserDefaults
○ UserDefauts䛾್䜢JavaScript䛷ㄞ䜏᭩䛝䛩䜛
- 32. NativeSync
● 䝕䞊䝍䜢ྲྀᚓ䛩䜛䛯䜑䛾䝥䝷䜾䜲䞁䚹
○ 䝃䞊䝞→SQLite
○ SQLite→JavaScript䠄JSON䠅
● Backbone.sync䛾୰䛛䜙䜃ฟ䛧䛶䛔䜛䚹
● 䝃䞊䝞→SQLite䛾䝕䞊䝍ྲྀᚓ䜢⾜䛖䝻䝆䝑䜽䠄Obj-C䠅䛿䚸
BackgroundFetch䛷䜒⏝䛧䛶䛔䜛䚹
- 34. ReportMaker 䜰䞊䜻䝔䜽䝏䝱
ReportMaker.js
makePDF()
makeJPEG()
ReportMaker.m (Objective-C) Resource
HTML
printContextWebView template
(UIWebView)
PDF or
JPEG
templateྡ
ฟຊ್
ᒎ㛤
ฟຊ್
䝉䝑䝖
- 40. JavaScript䛾㠀ྠᮇືస䛸䛾ᡓ䛔
● 䝃䞊䝞䛸䛾ajax㏻ಙ䜔䚸Geolocation䛷䛾⨨ሗ䛾ྲྀᚓ
䛺䛹䚸㛫䛾䛛䛛䜛ฎ⌮䛿ᇶᮏⓗ䛻㠀ྠᮇฎ⌮䛸䛧䛶ᐇ
䛥䜜䛶䛔䜛䚹
● せ௳ୖ䚸䝖䝷䞁䝄䜽䝅䝵䞁䛾㛵ಀ䛷ྠᮇฎ⌮䛸䛧䛶ᐇ䛧䛺
䛔䛸䛔䛡䛺䛔䜿䞊䝇䛜䛒䜛䚹
↓
● jQuery.Deferred䜢㥑䛧䛶ゎỴ䟿
䠘ཧ⪃䠚 Yahoo! JAPAN 䝕䜱䝧䝻䝑䝟䞊䝛䝑䝖䝽䞊䜽䛂⇿㏿䛷䜟䛛䜛 jQuery.Deffered㉸ධ㛛䛃
http://techblog.yahoo.co.jp/programming/jquery-deferred/
- 42. 䝥䝻䜾䝺䝇䝞䞊䝎䜲䜰䝻䜾䜢
⾲♧䛧䛯䛔
● 䝥䝻䜾䝺䝇䝞䞊䝎䜲䜰䝻䜾䜢స䜚䛯䛔䛡䛹䚸㠃ಽ䡡䡡䡡䚹
↓
● jQuery-Mobile-Progress-Bar-with-Percentage䜢䛖䚹
○ https://github.com/tolis-e/jQuery-Mobile-Progress-Bar-with-Percentage
● jQuery Mobile䛾䝥䝷䜾䜲䞁䜢᥈䛩䛸䚸ఱ䛛ぢ䛴䛛䜛䛣䛸䛜
䛒䜛䚹
- 44. 䜰䝥䝸䜢䝞䞊䝆䝵䞁䜰䝑䝥䛩䜛䛸䚸
Cordova䝥䝷䜾䜲䞁䛷ᙳ䛧䛯⏬ീ䛜ᾘ䛘䜛
● Cordova䛾Camera䝥䝷䜾䜲䞁䛿䚸ᙳ䛧䛯⏬ീ䜢/tmp㓄ୗ
䛻ಖᏑ䛩䜛䚹
● 䜰䝥䝸䜢䝞䞊䝆䝵䞁䜰䝑䝥䛩䜛䛸䚸䝞䞊䝆䝵䞁䜰䝑䝥ඛ䛾䝕䜱䝺
䜽䝖䝸䛻/Documents㓄ୗ䛾䜏䜢䝁䝢䞊䛩䜛䛾䛷䚸/tmp㓄ୗ
䛾䝣䜯䜲䝹䛿ᾘ䛘䛶䛧䜎䛖䚹
○ iOS䛾䜰䝥䝸䛿䝞䞊䝆䝵䞁ẖ䛻᪂䛧䛔䝕䜱䝺䜽䝖䝸䛜⏕ᡂ䛥䜜䜛䚹
↓
● ᙳ䛧䛯⏬ീ䛿/Documents㓄ୗ䛻䝁䝢䞊䛧䛶䛖䚹
● 䝻䞊䜹䝹⏬ീ䛾URL䛿䚸┦ᑐ䝟䝇䛷⟶⌮䛩䜛䚹
- 46. Xcode䛷䛾䝡䝹䝗䛻䚸
CoffeeScript䛾䝁䞁䝟䜲䝹䜢䛧䛯䛔
● ᐇ䛿JavaScript䛿䛩䜉䛶CoffeeScript䛷᭩䛔䛶䛔䜎䛩䚹
● CoffeeScript䝺䝧䝹䛷䝣䜯䜲䝹䜢ศ䛩䜛䛣䛸䛷䚸ぢ㏻䛧䛾
Ⰻ䛔䝋䞊䝇䝣䜯䜲䝹ᵓ㐀䛻䚹
↓
● Xcode䛾Build Phase䛻䚸CoffeeScript䛾䝁䞁䝟䜲䝹䜢㏣
ຍ䚹
○ Sass䜢䛖ሙྜ䜒ྠᵝ䛻䚹
- 47. 䝯䝰䝸䛾ᾘ㈝㔞䛻䛴䛔䛶
● 䛣䜜䛟䜙䛔䚹
● ୍ᴫ䛻ከ䛔䛸䛛ᑡ䛺䛔䛸䛛ゝ䛖䛾䛿㞴䛧䛔䛷䛩䛜䚸⌧⾜䜰䝥䝸䜢䝯䝰䝸ᐜ㔞䛾ᑡ
䛺䛔iPad mini䠄ึ௦䠅䛷ື䛛䛩䛸䚸䝯䝰䝸䜸䞊䝞䞊䝣䝻䞊䛷ⴠ䛱䜛䛣䛸䛜䛒䜚䜎
䛩䚹䠄䜰䝥䝸䛾స䜚䛜ᝏ䛔䛾䛰䛸䛿ᛮ䛔䜎䛩䛜䡡䡡䡡䠅