Successfully reported this slideshow.
Your SlideShare is downloading. ×

Cordovaで業務アプリを作る 〜その事例とノウハウ〜

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 50 Ad

Cordovaで業務アプリを作る 〜その事例とノウハウ〜

Download to read offline

第1回Cordova勉強会(2014/11/5)で発表しました。
2013年2月から開発開始、2013年9月から本稼働した、Cordovaで開発した業務アプリの事例とノウハウを紹介します。

第1回Cordova勉強会(2014/11/5)で発表しました。
2013年2月から開発開始、2013年9月から本稼働した、Cordovaで開発した業務アプリの事例とノウハウを紹介します。

Advertisement
Advertisement

More Related Content

Similar to Cordovaで業務アプリを作る 〜その事例とノウハウ〜 (20)

More from Kenichi Inoue (16)

Advertisement

Recently uploaded (20)

Cordovaで業務アプリを作る 〜その事例とノウハウ〜

  1. 1. cutting edge motivation engineering move your heart ➨1ᅇ Cordovaຮᙉ఍ (2014/11/5) Cordova䛷ᴗົ䜰䝥䝸䜢స䜛 䚷ࠥ䛭䛾஦౛䛸䝜䜴䝝䜴ࠥ 䜰䝹䝔䜱䝄䞁䜶䝑䝆ྜྠ఍♫䚷஭ୖ ◊୍
  2. 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. 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. 4. 䜰䝆䜵䞁䝎 1. ᴗົ䜰䝥䝸஦౛⤂௓ 2. 䜰䞊䜻䝔䜽䝏䝱 3. 䝥䝷䜾䜲䞁 4. KNOW HOW! KNOW HOW! KNOW HOW! 5. 䜎䛸䜑
  5. 5. ὀព஦㡯䟿 ௒ᅇ䛤⤂௓䛩䜛䛾䛿䚸2013ᖺ2᭶䛛䜙㛤Ⓨ䜢ጞ䜑䛯஦౛䛸䚸䛭 䛾஦౛䛷⵳✚䛥䜜䛯䝜䜴䝝䜴䛻䛴䛔䛶䛷䛩䚹 ⌧᫬Ⅼ䠄2014ᖺ11᭶䠅䛷䛿䜒䛳䛸Ⰻ䛔タィ䜔䝒䞊䝹䛜䛒䜛䛸ᛮ 䛔䜎䛩䛧䚸௒䛸䛺䛳䛶䛿䝞䝑䝖䝜䜴䝝䜴䛻┦ᙜ䛩䜛䜒䛾䜒䛒䜛䛷 䛧䜗䛖䚹 䛭䛾䛯䜑䚸௒ᅇ䛿䛂Ύ⃮䛒䜟䛫㣧䜐ぬᝅ䟿䛃䛷䚸⪺䛔䛶䛔䛯䛰 䛡䜜䜀䛸ᛮ䛔䜎䛩䚹
  6. 6. ᴗົ䜰䝥䝸஦౛⤂௓
  7. 7. SMS (Serviceman Management System) ● 〇㐀ᴗT♫ྥ䛡䛾䝃䞊䝡䝇䝬䞁ᨭ᥼䝅䝇䝔䝮䚹 ○ 2013ᖺ2᭶㛤Ⓨ㛤ጞ䚸2013ᖺ9᭶ᮏ✌ാ䚹 ○ 2015ᖺ㡭䛻䛿T♫䜾䝹䞊䝥䛾ᾏእᣐⅬ䜈䛾ᑟධ䜒᳨ウ䚹 ● ᪥ᮏ඲ᅜ䛷400ே䜋䛹䛾䝃䞊䝡䝇䝬䞁䛜䚸᪥䚻䛾ಟ⌮䞉Ⅼ ᳨ᴗົ䛷౑䛳䛶䛔䜛䚹 ○ 䝃䞊䝡䝇䝬䞁䛾ὴ㐵ᣦ♧ࠥ⌧ᆅゼၥࠥゼၥሗ࿌᭩䛾సᡂ䛸㢳ᐈ䛾⨫ྡ䛺 䛹䜢䜰䝥䝸䛷⾜䛳䛶䛔䜛䚹 ○ T♫䛾䝡䝑䜾䝴䞊䝄䛷䛾Ⅼ᳨ᴗົ⏝䛻ᑓ⏝䛾⏬㠃䞉ᖒ⚊䛾సᡂ䜒䚹 ● iPhone5 / iPad mini 2䜢୍ᩧᑟධ䛧䛶㐠⏝䚹 ○ 䜰䝥䝸䜒iOS∧䛾䜏䜢㛤Ⓨ䛧䛶䛔䜛䚹
  8. 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. 9. 䝬䜲䜰䜽䝅䝵䞁⏬㠃 MapKitView (Plugin) 䝸䝇䝖䝡䝳䞊 䝟䝛䝹
  10. 10. ಶู䛾䜰䜽䝅䝵䞁⏬㠃 ActionSheet (Plugin) 1⏬㠃䠖5䝍䝤 䝣䝑䝍䞊 䝘䝡䝀䞊䝅䝵䞁 䝞䞊
  11. 11. ⨫ྡ⏬㠃 Canvas (HTML5)
  12. 12. ゼၥሗ࿌᭩ ᧜ᙳ⏬ീ ⨫ྡ
  13. 13. 䛭䛾௚䛾ᶵ⬟ ● ぢ✚᭩䚸ᶵჾデ᩿᭩䛾సᡂ䠄⏬㠃䞉ᖒ⚊䠅 ● ୍ᣓ⦅㞟ᶵ⬟ ● PUSH㏻▱䛾ཷಙ䠄᪂つὴ㐵౫㢗➼䠅 ● BackgroundFetch䠄᭦᪂䝕䞊䝍䛾⮬ືྲྀᚓ䠅 ○ iOS7䝸䝸䞊䝇ᚋ䛻ᑐᛂ䛧䛯䚹 ● ⌧ᅾ఩⨨᝟ሗ䛾㏦ಙ䚸㏆㞄䜰䜽䝅䝵䞁䛾᳨⣴ ● 䜸䝣䝷䜲䞁䛷䛾᧯స ○ 䜸䝣䝷䜲䞁᫬䛾ධຊ䝕䞊䝍䛿䝻䞊䜹䝹䛷ಖᏑ䚹䜸䞁䝷䜲䞁䛻䛺䛳䛯ᚋ䛾᧯స 䛷୍ᣓྠᮇ䚹
  14. 14. ᐇ㝿䛻ື䛟⏬㠃䛿䡡䡡䡡 ᠓ぶ఍䛷䛚ぢ䛫䛧䜎䛩䟿
  15. 15. 䛺䛬䚸Cordova䜢౑䛳䛯䛾䛛䠛 䠘㛤Ⓨ䝥䝻䝆䜵䜽䝖㛤ጞ௨๓䠚 ● 䝍䝤䝺䝑䝖ᑟධ䛿Ỵ䜎䛳䛶䛔䛯䛜䚸iOS䚸Android䚸Windows 䛾䛔䛪䜜䛻䛩䜛䛛䛜Ỵ䜎䛳䛶䛔䛺䛛䛳䛯䚹 ● 䛔䛱᪩䛟䚸⤒Ⴀᒙ䜔᝟ሗ䝅䝇䝔䝮㒊㛛䛻䝥䝺䝊䞁䛩䜛ᚲせ 䛜䛒䛳䛯䚹 ○ ᡃ䚻䛿䚸⌧ᴗ㒊㛛ෆ䛾㛤Ⓨ䝏䞊䝮䛺䛾䛷䞉䞉䞉 ○ 䝥䝺䝊䞁䛩䜛䛺䜙䛂᪤䛻ື䛟⏬㠃䛃䛜䛒䛳䛯᪉䛜ຠᯝⓗ䟿 ● 㛤Ⓨ䝏䞊䝮䛿Web䝅䝇䝔䝮㛤Ⓨ䛾⤒㦂⪅䜀䛛䜚䚹 ○ 䝛䜲䝔䜱䝤䛾iOS / Android䜰䝥䝸䛾㛤Ⓨ⤒㦂⪅䛿1ே䛰䛡䚹
  16. 16. 䛺䛬䚸Cordova䜢౑䛳䛯䛾䛛䠛 䠘㛤Ⓨ䝥䝻䝆䜵䜽䝖㛤ጞ௨ᚋ䠚 ● 䝛䜲䝔䜱䝤䜋䛹䛾䜰䝥䝸䛿ฟ᮶䛺䛔䛛䜒䛧䜜䛺䛔䛜䚸ᴗົ䜰 䝥䝸䛸䛧䛶ᚲせ༑ศ䛺䜰䝥䝸䛿ฟ᮶䜛䚹 ● Web䝅䝇䝔䝮㛤Ⓨ⤒㦂⪅䛺䜙䚸ẚ㍑ⓗ䝇䝢䞊䝕䜱䛻㛤Ⓨ䛷 䛝䜛䚹 ○ 䝣䝻䞁䝖ഃ䛾ᢏ⾡䠄HTML5䚸JavaScript䠅䛾⤒㦂⪅䛾ሙྜ䚹 ● ᴗົ䜰䝥䝸䛿ᑑ࿨䛜㛗䛟䛺䜛䛣䛸䛜ண᝿䛥䜜䜛䛾䛷䚸≉ᐃ OS䜈䛾䝻䝑䜽䜸䞁䛿ฟ᮶䜛䛰䛡㑊䛡䛯䛔䚹 ○ ୍ᣓᑟධ䛧䛯iPad䜔iPhone䛾䝞䝑䝔䝸䞊䜒䚸2ᖺ⤒䛶䜀䜈䛯䛳䛶䛟䜛䛰䜝䛖 䛧䡡䡡䡡䚹
  17. 17. 䜰䞊䜻䝔䜽䝏䝱
  18. 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. 19. jQuery Mobile jQuery Mobile 䜢౑䛖䛸䞉䞉䞉 䛣䜜䛜䚸 䛣䛖䛺䜛䚹
  20. 20. jQuery Mobile 䠘䝯䝸䝑䝖䠚 ● HTML䛷䝍䝤䝺䝑䝖䜔䝇䝬䝩䛷䛾᧯స䛻㐺䛧䛯⏬㠃䜢స䜛䛣 䛸䛜ฟ᮶䜛䚹 ● 䝍䝤䝺䝑䝖䛸䝇䝬䝩䛷ู䛾⏬㠃䜢స䜛ᚲせ䛜䠄ᇶᮏⓗ䛻䠅䛺 䛔䚹 䠘䝕䝯䝸䝑䝖䠚 ● ㍍㔞䛸䛿䛔䛘䛺䛔䚹䛱䜗䛳䛸䝰䝃䝰䝃䛧䛯ື䛝䚹
  21. 21. Backbone.js䜢౑䛳䛯䛣䛸䛾䝯䝸䝑䝖 ● Model (Collection)䛸View䚸HTML䛷䛾ฎ⌮䛾ษ䜚ศ䛡䛜 ฟ᮶䛯䚹 ● Model䛸View䛾཮᪉䛷ඹ㏻ฎ⌮䜢䝇䞊䝟䞊䜽䝷䝇䛻⨨䛟䛣䛸 䛷䚸ఝ䛯䜘䛖䛺せ௳䛾㏣ຍ⏬㠃䜢䝇䝢䞊䝕䜱䛻㛤Ⓨฟ᮶䜛䜘 䛖䛻䛺䛳䛯䚹 ○ ఝ䛯䜘䛖䛺せ௳䛾⏬㠃䛺䜙䚸2ࠥ3᪥䜒䛒䜜䜀ᙧ䛻䛺䜛≧ែ䚹 ● Backbone.sync䛷䝕䞊䝍䛾䜔䜚ྲྀ䜚䜢䝃䞊䝞䛸┤᥋䜔䜛 䜿䞊䝇䛸䚸䝻䞊䜹䝹䛾SQLite䜢⤒⏤䛩䜛䜿䞊䝇䛾୧᪉䜢౑ 䛔ศ䛡䜛䛣䛸䛜ฟ᮶䛯䚹
  22. 22. Backbone.js䠇jQuery Mobile ┦ᛶ䛿Ⰻ䛟䛺䛔䛛䜒䡡䡡䡡 䠘㑄⛣ඖ䠚 䠘㑄⛣ඛ䠚 ⏬㠃㑄⛣䛾㛤ጞ 㑄⛣ඛ䛾View䛾᭷↓☜ㄆ䞉⏕ᡂ 㑄⛣ඛ䛾View䛾render()࿧ฟ render()䛷⏬㠃⾲♧‽ഛ ⏬㠃䛾ษ᭰ changePage() pagebeforeshow䛾Ⓨⅆ Backbone.js jQuery Mobile ⏬㠃㑄⛣䛾᏶஢ 䞉⾲♧᝟ሗ䛾ྲྀᚓ 䞉DOM䜈䛾཯ᫎ 䈜䛣䛾᫬Ⅼ䛷jQuery Mobile䛾䝯 䝋䝑䝗䜢౑䛖䛸䜶䝷䞊䛻䛺䜛 䞉jQuery Mobile䛾䝯䝋䝑䝗౑⏝
  23. 23. 䝛䜲䝔䜱䝤䛸JavaScript䛾౑䛔ศ䛡 䠘JavaScript䠚 ● 䛩䜉䛶䛾⏬㠃䛸䝡䝆䝛䝇䝻䝆䝑䜽 ● 䝃䞊䝞䛸䛾䝕䞊䝍䛾䜔䜚ྲྀ䜚䠄୍㒊䜢㝖䛟䠅 䠘Cordova䝥䝷䜾䜲䞁䠄JavaScript䠇䝛䜲䝔䜱䝤䠅䠚 ● JavaScript䛷ᐇ⌧䛷䛝䛺䛔UI䠄MapKit䛺䛹䠅䚸Geolocation䛺䛹 ● 䝥䝷䜾䜲䞁䛻䛴䛔䛶䛿䚸ᚋ䛷ヲ䛧䛟䛚ヰ䛧䛧䜎䛩䟿 䠘䝛䜲䝔䜱䝤䠚 ● PUSH㏻▱䛾ไᚚ ● BackgroundFetch䛷䛾䝃䞊䝞䛛䜙䛾䝕䞊䝍ཷಙ
  24. 24. 䝥䝷䜾䜲䞁
  25. 25. ౑䛳䛯䝥䝷䜾䜲䞁 ● Cordovaබᘧ䝥䝷䜾䜲䞁 ○ Geolocation ○ Camera ● Cordovaබᘧ௨እ䛾䝥䝷䜾䜲䞁 ○ ActionSheet ○ MapKitView ○ EmailComposer
  26. 26. ActionSheet 䝛䜲䝔䜱䝤䛾䜰䜽䝅䝵䞁䝅䞊䝖UI䜢౑⏝䛩䜛䝥䝷 䜾䜲䞁䚹 DEPRECATED! https://github.com/phonegap/phonegap-plugins/ tree/DEPRECATED/iOS/ActionSheet
  27. 27. MapKitView 䝛䜲䝔䜱䝤䛾MapKitView䜢⾲ ♧䛩䜛䝥䝷䜾䜲䞁䚹 http://plugins.cordova. io/#/package/com.phonegap.plugins. mapkit MapKitView (Plugin)
  28. 28. EmailComposer iOSᶆ‽䛾Mail.app䜢౑䛳䛶 䝯䞊䝹䜢㏦ಙ䛩䜛䛯䜑䛾䝥䝷 䜾䜲䞁䚹 䠄㏦ಙ䝯䞊䝹⏬㠃䛜㛤䛟䠅 http://plugins.cordova. io/#/package/emailcomposer
  29. 29. స䛳䛯䝥䝷䜾䜲䞁 (1) ● ZbarcodeScanner ○ ZBar䜢౑䛖䝞䞊䝁䞊䝗䝇䜻䝱䝘 ● MultiImageViewer ○ 」ᩘ䛾⏬ീ䜢ษ䜚᭰䛘䛶⾲♧䛩䜛䚷⨫ྡ⏬㠃䜈䛾㐃ᦠᶵ⬟䛒䜚 ● NativeSync ○ 䝛䜲䝔䜱䝤䝁䞊䝗䛷䝃䞊䝞䛸㏻ಙ䛧SQLite䛻ಖᏑ䛩䜛 ● NetworkActivityIndicator ○ 䜲䞁䝆䜿䞊䝍䜢⾲♧䛩䜛 ● OpenCustomURL ○ ఩⨨᝟ሗྲྀᚓ䠇ᆅᅗ䜰䝥䝸䠄Apple Map or Google Map䠅䛾䜸䞊䝥䞁
  30. 30. స䛳䛯䝥䝷䜾䜲䞁 (2) ● ReportMaker ○ HTML䠇jQuery䝧䞊䝇䛷ᖒ⚊䜢స䜚䚸PDF or JPEG䛷ಖᏑ ● SaveToPhotoAlbum ○ JPEG䛷సᡂ䛧䛯ᖒ⚊⏬ീ䜢䜹䝯䝷䝻䞊䝹䛻ಖᏑ ● TCamera ○ ྎᙧ⿵ṇᶵ⬟௜䛝䛾䜹䝯䝷䠇䝨䜲䞁䝖 ● UniqueIdentifier ○ UUID䛾ྲྀᚓ ● UserDefaults ○ UserDefauts䛾್䜢JavaScript䛷ㄞ䜏᭩䛝䛩䜛
  31. 31. ZbarcodeScanner ● barcodescanner䛸䛔䛖䝥䝷䜾䜲䞁䛜䛒䜛 䛜䚸CODE39䛾ㄞ䜏ྲྀ䜚⢭ᗘ䛜ప䛔䚹 䠄ZXing䝷䜲䝤䝷䝸䜢౑⏝䠅 ● ZBar䝷䜲䝤䝷䝸䜢౑䛳䛯䝥䝷䜾䜲䞁䜢⮬ స䛧䚸CODE39䛾ㄞ䜏ྲྀ䜚⢭ᗘ䜢ྥୖ䚹 ○ https://github.com/inoccu/phonegap-ios-zbarcodescanner
  32. 32. NativeSync ● 䝕䞊䝍䜢ྲྀᚓ䛩䜛䛯䜑䛾䝥䝷䜾䜲䞁䚹 ○ 䝃䞊䝞→SQLite ○ SQLite→JavaScript䠄JSON䠅 ● Backbone.sync䛾୰䛛䜙࿧䜃ฟ䛧䛶䛔䜛䚹 ● 䝃䞊䝞→SQLite䛾䝕䞊䝍ྲྀᚓ䜢⾜䛖䝻䝆䝑䜽䠄Obj-C䠅䛿䚸 BackgroundFetch䛷䜒౑⏝䛧䛶䛔䜛䚹
  33. 33. ReportMaker ● ᖒ⚊䜢సᡂ䛩䜛䛯䜑䛾䝥 䝷䜾䜲䞁䚹 ● 䝔䞁䝥䝺䞊䝖䜢HTML䛷స 䜚䚸jQuery䛷್䜢ὶ䛧㎸ 䜐䚹 ● PDF䚸JPEG䛷䛾ฟຊ䛜 ྍ⬟䚹
  34. 34. ReportMaker 䜰䞊䜻䝔䜽䝏䝱 ReportMaker.js makePDF() makeJPEG() ReportMaker.m (Objective-C) Resource HTML printContextWebView template (UIWebView) PDF or JPEG templateྡ ฟຊ್ ᒎ㛤 ฟຊ್ 䝉䝑䝖
  35. 35. TCamera ● ᡭ᭩䛝ሗ࿌᭩䜢᧜ᙳ䛩䜛㝿䛾ྎᙧ ⿵ṇ䚸Ⰽㄪ⿵ṇ䜢⾜䛖䚹 ● ᧜ᙳ䛧䛯⏬ീ䠄䜶䝡䝕䞁䝇➼䠅䛻ᑐ 䛧䛶䚸䝨䜲䞁䝖䜔䝖䝸䝭䞁䜾䜢⾜䛖䚹 ● 㛤Ⓨ䛿ᰴᘧ఍♫䝖䝹䜽䝇䛥䜣䛻䛚 㢪䛔䛧䛯䚹 http://torques.jp
  36. 36. KNOW HOW! KNOW HOW! KNOW HOW!
  37. 37. 㛤Ⓨ䛻䛒䛯䛳䛶ᅔ䛳䛯䛣䛸 䛂Cordova䛰䛛䜙ᅔ䛳䛯䛃䛸䛔䛖䛣䛸䛿䚸䛒䜎䜚䛺䛔䚹 䠄iOS∧䛰䛡䜢స䛳䛯䛛䜙䛛䜒䡡䡡䡡䠅 Cordova䛷䛾㛤Ⓨ䛿䚸HTML5䠇JavaScript䛾䝝䝬䝸䛹䛣䜝䛸䚸 䝛䜲䝔䜱䝤䛾䝝䝬䝸䛹䛣䜝䛾୧᪉䛻䝝䝬䛳䛶䛧䜎䛖䚹 ពእ䛸䜸䞊䝹䝬䜲䝔䜱䛺ᢏ⾡ຊ䛜ᚲせ䛺䛾䛛䜒䛧䜜䛺䛔䚹 ● HTML5䠇JavaScript䛷䛾ᅔ䛳䛯䛣䛸 ● iOS SDK䛷䛾ᅔ䛳䛯䛣䛸
  38. 38. JavaScript䛾䝻䜾䛸Obj-C䛾䝻䜾 ● JavaScript䛾䝻䜾䛸Obj-C䛾䝻䜾䜢䜎䛸䜑䛶ᢅ䛔䛯䛔䚹 ● 䝻䜾䜢䝣䜯䜲䝹䛻ྤ䛝ฟ䛧䛯䛔䚹 ↓ ● Console䝥䝷䜾䜲䞁䠄org.apache.cordova.console䠅䜢ධ䜜 䜛䛸䚸JavaScript䛷䛾console.log䛾ฟຊ䛜䚸Obj-Cഃ䛾䝁䞁 䝋䞊䝹䛻䜒ฟຊ䛥䜜䜛䜘䛖䛻䛺䜛䚹 ● Obj-C䛷freopen㛵ᩘ䜢౑䛔䚸ฟຊඛ䜢䝣䜯䜲䝹䛻ኚ᭦䛩䜛 䛣䛸䛜ฟ᮶䜛䚹
  39. 39. JavaScript䛾䝕䝞䝑䜾䛜䛧䛯䛔䟿 ● Xcode䛾䝁䞁䝋䞊䝹䛻ὶ䜜䜛䝻䜾䛻䛿䚸JavaScript䛾 undefined䜶䝷䞊䛾䝻䜾䛜ฟ䛶䛣䛺䛔䚹 ↓ ● Macୖ䛾Safari䛷䛂㛤Ⓨ䛃䝯䝙䝳䞊䜢᭷ຠ䛻䛧䚸iOSഃ䛷 Safari䛾䜲䞁䝇䝨䜽䝅䝵䞁䜢チྍ䛩䜛䚹 ● Cordova䜰䝥䝸䛷䜒䝸䝰䞊䝖䝕䝞䝑䜾䛿ྍ⬟䛺䛾䛷䚸 JavaScript䛷ฟ䜛䛩䜉䛶䛾䝻䜾䛜⾲♧䛥䜜䜛䚹
  40. 40. JavaScript䛾㠀ྠᮇືస䛸䛾ᡓ䛔 ● 䝃䞊䝞䛸䛾ajax㏻ಙ䜔䚸Geolocation䛷䛾఩⨨᝟ሗ䛾ྲྀᚓ 䛺䛹䚸᫬㛫䛾䛛䛛䜛ฎ⌮䛿ᇶᮏⓗ䛻㠀ྠᮇฎ⌮䛸䛧䛶ᐇ⿦ 䛥䜜䛶䛔䜛䚹 ● せ௳ୖ䚸䝖䝷䞁䝄䜽䝅䝵䞁䛾㛵ಀ䛷ྠᮇฎ⌮䛸䛧䛶ᐇ⿦䛧䛺 䛔䛸䛔䛡䛺䛔䜿䞊䝇䛜䛒䜛䚹 ↓ ● jQuery.Deferred䜢㥑౑䛧䛶ゎỴ䟿 䠘ཧ⪃䠚 Yahoo! JAPAN 䝕䜱䝧䝻䝑䝟䞊䝛䝑䝖䝽䞊䜽䛂⇿㏿䛷䜟䛛䜛 jQuery.Deffered㉸ධ㛛䛃 http://techblog.yahoo.co.jp/programming/jquery-deferred/
  41. 41. UI䜢ᅜ㝿໬(i18n)ᑐᛂ䛧䛯䛔 ● Cordova䛾Globalizationᶵ⬟䛷䛿䚸⏬㠃඲య䜢ⱥㄒ໬䚸᪥ ᮏㄒ໬䡡䡡䡡䛩䜛䜘䛖䛺䜒䛾䛷䛿䛺䛔䚹 ↓ ● i18next䜢౑䛖䚹 ○ http://i18next.com/ ● HTML䜔JavaScript䛾䝁䞊䝗䛷i18next䜢౑䛖䜘䛖䛻䛧䛶䛚䛡 䜀䚸iOS⮬య䛾ゝㄒタᐃ䛻ྜ䜟䛫䛶䚸⩻ヂ䝣䜯䜲䝹䜢౑䛔 ศ䛡䛶⾲♧䛧䛶䛟䜜䜛䚹
  42. 42. 䝥䝻䜾䝺䝇䝞䞊䝎䜲䜰䝻䜾䜢 ⾲♧䛧䛯䛔 ● 䝥䝻䜾䝺䝇䝞䞊䝎䜲䜰䝻䜾䜢స䜚䛯䛔䛡䛹䚸㠃ಽ䡡䡡䡡䚹 ↓ ● jQuery-Mobile-Progress-Bar-with-Percentage䜢౑䛖䚹 ○ https://github.com/tolis-e/jQuery-Mobile-Progress-Bar-with-Percentage ● jQuery Mobile䛾䝥䝷䜾䜲䞁䜢᥈䛩䛸䚸ఱ䛛ぢ䛴䛛䜛䛣䛸䛜 䛒䜛䚹
  43. 43. UIWebView䛾䜻䝱䝑䝅䝳䛸䛾ᡓ䛔 ● Cordova䛾Camera䝥䝷䜾䜲䞁䛷᧜ᙳ䛩䜛䛸䚸 䛂cdv_photo_㐃␒.jpg䛃䛸䛔䛖䝣䜯䜲䝹ྡ䛻䛺䜛䚹 ○ ᧜ᙳ䛸๐㝖䜢⧞䜚㏉䛩䛸䚸ྠ䛨䝣䜯䜲䝹ྡ䛷䝣䜯䜲䝹䛜⏕ᡂ䛥䜜䜛䚹 ● ᧜ᙳ䛧䛯⏬ീ䜢HTML5䛾⏬㠃䛷⾲♧䛩䜛䛸䚸⏬ീ䝣䜯䜲䝹 䛜䜻䝱䝑䝅䝳䛥䜜䛶䚸๐㝖῭䜏䛾⏬ീ䛜⾲♧䛥䜜䜛䛣䛸䛜䛒 䜛䚹 ↓ ● ᧜ᙳ⏬ീ䛾䝣䜯䜲䝹ྡ䛻䝷䞁䝎䝮䛺್䜢௜ຍ䛩䜛䚹 ● UIWebView䛾䜻䝱䝑䝅䝳䝫䝸䝅䞊䛾᳨ウ䚹
  44. 44. 䜰䝥䝸䜢䝞䞊䝆䝵䞁䜰䝑䝥䛩䜛䛸䚸 Cordova䝥䝷䜾䜲䞁䛷᧜ᙳ䛧䛯⏬ീ䛜ᾘ䛘䜛 ● Cordova䛾Camera䝥䝷䜾䜲䞁䛿䚸᧜ᙳ䛧䛯⏬ീ䜢/tmp㓄ୗ 䛻ಖᏑ䛩䜛䚹 ● 䜰䝥䝸䜢䝞䞊䝆䝵䞁䜰䝑䝥䛩䜛䛸䚸䝞䞊䝆䝵䞁䜰䝑䝥ඛ䛾䝕䜱䝺 䜽䝖䝸䛻/Documents㓄ୗ䛾䜏䜢䝁䝢䞊䛩䜛䛾䛷䚸/tmp㓄ୗ 䛾䝣䜯䜲䝹䛿ᾘ䛘䛶䛧䜎䛖䚹 ○ iOS䛾䜰䝥䝸䛿䝞䞊䝆䝵䞁ẖ䛻᪂䛧䛔䝕䜱䝺䜽䝖䝸䛜⏕ᡂ䛥䜜䜛䚹 ↓ ● ᧜ᙳ䛧䛯⏬ീ䛿/Documents㓄ୗ䛻䝁䝢䞊䛧䛶౑䛖䚹 ● 䝻䞊䜹䝹⏬ീ䛾URL䛿䚸┦ᑐ䝟䝇䛷⟶⌮䛩䜛䚹
  45. 45. 䝛䜲䝔䜱䝤䛾View䜢䚸 HTML5䛾ୖ䛻⾲♧䛩䜛䛸䡡䡡䡡 MainViewController : CDVViewController : UIViewController UIWebView index.html MapKitView MapKitView䛿HTML䛾ୖ䛻䚸⏬ 㠃⾲♧ୖ䚸஌䛳䛛䛳䛶䛔䜛䛰䛡䚹 HTMLഃ䛷⏬㠃㑄⛣䛧䛯䜚䚸 PUSH㏻▱䛻䜘䜛䝎䜲䜰䝻䜾⾲♧ 䛜䛒䛳䛯䜚䛩䜛䛸䚸䛭䛾䛯䜑䛻 MapKitView䛾⾲♧䜢ᾘ䛥䛺䛔䛸 䛔䛡䛺䛔䚹
  46. 46. Xcode䛷䛾䝡䝹䝗᫬䛻䚸 CoffeeScript䛾䝁䞁䝟䜲䝹䜢䛧䛯䛔 ● ᐇ䛿JavaScript䛿䛩䜉䛶CoffeeScript䛷᭩䛔䛶䛔䜎䛩䚹 ● CoffeeScript䝺䝧䝹䛷䝣䜯䜲䝹䜢ศ๭䛩䜛䛣䛸䛷䚸ぢ㏻䛧䛾 Ⰻ䛔䝋䞊䝇䝣䜯䜲䝹ᵓ㐀䛻䚹 ↓ ● Xcode䛾Build Phase䛻䚸CoffeeScript䛾䝁䞁䝟䜲䝹䜢㏣ ຍ䚹 ○ Sass䜢౑䛖ሙྜ䜒ྠᵝ䛻䚹
  47. 47. 䝯䝰䝸䛾ᾘ㈝㔞䛻䛴䛔䛶 ● 䛣䜜䛟䜙䛔䚹 ● ୍ᴫ䛻ከ䛔䛸䛛ᑡ䛺䛔䛸䛛ゝ䛖䛾䛿㞴䛧䛔䛷䛩䛜䚸⌧⾜䜰䝥䝸䜢䝯䝰䝸ᐜ㔞䛾ᑡ 䛺䛔iPad mini䠄ึ௦䠅䛷ື䛛䛩䛸䚸䝯䝰䝸䜸䞊䝞䞊䝣䝻䞊䛷ⴠ䛱䜛䛣䛸䛜䛒䜚䜎 䛩䚹䠄䜰䝥䝸䛾స䜚䛜ᝏ䛔䛾䛰䛸䛿ᛮ䛔䜎䛩䛜䡡䡡䡡䠅
  48. 48. 䜎䛸䜑
  49. 49. ᴗົ䜰䝥䝸㛤Ⓨ䛻Cordova䜢౑䛚䛖䟿 ● Web䛾䝣䝻䞁䝖⣔ᢏ⾡䛜䛒䜛ே䛺䜙䚸᭱ᑠ䛾䝁䝇䝖䛷iOS䜔 Android䛾䜰䝥䝸䛜ฟ᮶䜛䜘䛖䛻䛺䜛䚹 ○ ఱ䜒▱䜙䛺䛔ே䛺䜙䚸㏫䛻Swift䛸䛛䜔䛳䛯᪉䛜Ⰻ䛔䛛䜒䛧䜜䛺䛔䚹 ● 㛗ᑑ࿨䛻䛺䜚䛜䛱䛺ᴗົ䜰䝥䝸䛷䚸OS䜈䛾䝻䝑䜽䜲䞁䜢㑊䛡 䜛䛣䛸䛜ฟ᮶䜛䚹 ● ୙㊊䛧䛶䛔䜛ᶵ⬟䛿䝛䜲䝔䜱䝤䛷᭩䛡䜛䛾䛷䚸ฟ᮶䛺䛔䛣䛸 䛿ఱ䜒䛺䛔䠄䛸ᛮ䛖䚹䠅 ○ ణ䛧䚸OS䜈䛾䝻䝑䜽䜲䞁䛸䝖䝺䞊䝗䜸䝣䚹 ● ᴗົ䜰䝥䝸䛣䛭䚸Cordova䛷స䜝䛖䟿
  50. 50. 䛤㟼⫈䚸 䛒䜚䛜䛸䛖䛤䛦䛔䜎䛧䛯䚹 What’s your next action?

×