Cordovaて?業務アフ?リを作る ?その事例とノウハウ?
?
24 likes?9,322 views
Cordova is a mobile application development framework that allows developers to use standard web technologies like HTML, CSS, and JavaScript to develop mobile applications for iOS, Android, and Windows Phone. The developer has created a service management system called SMS using Cordova that was launched in 2013 and now manages over 400 customer sites. The SMS app utilizes plugins to access device features like maps, action sheets, and push notifications and is constantly updated to support the latest OS features.
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
- 4. ????? 1. ????????? 2. ??????? 3. ????? 4. KNOW HOW! KNOW HOW! KNOW HOW! 5. ???
- 5. ????? ??????????2013?2?????????????? ???????????????????? ????2014?11?????????タィ????????? ???????????????????┦????????? ???? ????????????????ぬ??????????? ?????????
- 6. ?????????
- 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???
- 9. ????????? MapKitView (Plugin) ?????? ???
- 10. ?????????? ActionSheet (Plugin) 1???5?? ???? ??????? ??
- 12. ゼ???? ???? ??
- 13. ?????? ● ぢ?????デ???????????? ● ?????? ● PUSH???????つ?????? ● BackgroundFetch???????????? ○ iOS7??????????? ● ???????????????????? ● ????????? ○ ?????????????????????????????????? ??????
- 15. ???Cordova??????? ?????????????? ● ????????????????iOS?Android?Windows ??????????????????? ● ?????????????????????????せ ????? ○ ????????????????????? ○ ?????????????????????????? ● ??????Web?????????????? ○ ??????iOS / Android??????????1????
- 16. ???Cordova??????? ?????????????? ● ??????????????????????????? ??????せ??????????? ● Web???????????????????????? ??? ○ ?????????HTML5?JavaScript????????? ● ?????????????????????????? OS?????????????????? ○ ??????iPad?iPhone????????2????????????? ?????
- 17. ???????
- 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?????? ??????? ??????? ?ㄞ????? ???????
- 19. jQuery Mobile jQuery Mobile ??????? ???? ?????
- 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?????????????
- 24. ?????
- 25. ???????? ● Cordova??????? ○ Geolocation ○ Camera ● Cordova?????????? ○ ActionSheet ○ MapKitView ○ EmailComposer
- 26. ActionSheet ??????????????UI??????? ???? DEPRECATED! https://github.com/phonegap/phonegap-plugins/ tree/DEPRECATED/iOS/ActionSheet
- 27. MapKitView ??????MapKitView?? ????????? http://plugins.cordova. io/#/package/com.phonegap.plugins. mapkit MapKitView (Plugin)
- 28. EmailComposer iOS???Mail.app???? ????????????? ???? ???????????? http://plugins.cordova. io/#/package/emailcomposer
- 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?ㄞ?????
- 31. ZbarcodeScanner ● barcodescanner??????????? ??CODE39?ㄞ????????? ?ZXing????????? ● ZBar???????????????? ???CODE39?ㄞ????????? ○ https://github.com/inoccu/phonegap-ios-zbarcodescanner
- 32. NativeSync ● ????????????????? ○ ???→SQLite ○ SQLite→JavaScript?JSON? ● Backbone.sync???????????? ● ???→SQLite??????????????Obj-C??? BackgroundFetch?????????
- 33. ReportMaker ● ??????????? ????? ● ???????HTML?? ??jQuery?????? ?? ● PDF?JPEG????? ???
- 34. ReportMaker ??????? ReportMaker.js makePDF() makeJPEG() ReportMaker.m (Objective-C) Resource HTML printContextWebView template (UIWebView) PDF or JPEG template? ??? ?? ??? ???
- 35. TCamera ● ??????????????? ⿵????⿵????? ● ???????????????? ????????????????? ● ??????????????? ????? http://torques.jp
- 36. KNOW HOW! KNOW HOW! KNOW HOW!
- 37. ???????????? ?Cordova???????????????????? ?iOS∧?????????????? Cordova??????HTML5?JavaScript????????? ???????????????????????? ????????????????せ????????? ● HTML5?JavaScript??????? ● iOS SDK???????
- 38. JavaScript????Obj-C??? ● JavaScript????Obj-C????????????? ● ??????????????? ↓ ● Console??????org.apache.cordova.console???? ???JavaScript??console.log?????Obj-C???? ???????????????? ● Obj-C?freopen??????????????????? ???????
- 39. JavaScript?????????? ● Xcode???????????????JavaScript? undefined????????????? ↓ ● Mac??Safari???????????????iOS?? Safari??????????チ???? ● Cordova???????????????????? JavaScript????????????????
- 40. JavaScript?????????? ● ?????ajax????Geolocation????????? ?????????????????????????? ?????? ● せ?????????????????????????? ????????????? ↓ ● jQuery.Deferred?????ゎ?? ???? Yahoo! JAPAN ???????????????????? jQuery.Deffered???? http://techblog.yahoo.co.jp/programming/jquery-deferred/
- 41. UI????(i18n)????? ● Cordova?Globalization???????????ㄒ??? ?ㄒ???????????????? ↓ ● i18next???? ○ http://i18next.com/ ● HTML?JavaScript?????i18next?????????? ??iOS???ゝㄒタ????????ヂ??????? ???????????
- 42. ????????????? ????? ● ?????????????????????????? ↓ ● jQuery-Mobile-Progress-Bar-with-Percentage???? ○ https://github.com/tolis-e/jQuery-Mobile-Progress-Bar-with-Percentage ● jQuery Mobile?????????????ぢ?????? ???
- 43. UIWebView?????????? ● Cordova?Camera???????????? ?cdv_photo_??.jpg????????????? ○ ??????????????????????????????? ● ???????HTML5???????????????? ??????????????????????????? ?? ↓ ● ??????????????????????? ● UIWebView????????????ウ?
- 44. ???????????????? Cordova???????????????? ● Cordova?Camera??????????????/tmp?? ?????? ● ????????????????????????????? ????/Documents?????????????/tmp?? ????????????? ○ iOS???????????????????????????? ↓ ● ???????/Documents??????????? ● ???????URL??┦?????????
- 45. ??????View?? HTML5??????????? MainViewController : CDVViewController : UIViewController UIWebView index.html MapKitView MapKitView?HTML????? ??????????????? HTML?????????? PUSH???????????? ?????????????? MapKitView????????? ?????
- 46. Xcode???????? CoffeeScript?????????? ● ??JavaScript????CoffeeScript???????? ● CoffeeScript?????????????????ぢ??? ????????????? ↓ ● Xcode?Build Phase??CoffeeScript???????? ?? ○ Sass??????????
- 47. ??????????? ● ?????? ● ????????????ゝ??????????????????????? ??iPad mini?????????????????????????????? ?????????????????????????
- 48. ???
- 49. ????????Cordova????? ● Web??????????????????????iOS? Android?????????????? ○ ????????????Swift???????????????? ● ????????????????OS?????????? ???????? ● ??????????????????????????? ??????????? ○ ???OS??????????????? ● ????????Cordova?????
- 50. ???? ???????????? What’s your next action?