HTML5でiOSアプリAndroidアプリを作ろう 〜HTML5ハイブリッドアプリ開発入門〜

HTML5でiOSアプリAndroidアプリを作ろう 〜HTML5ハイブリッドアプリ開発入門〜

ヒカラボ(ウェブ技術でiOS/Androidアプリ開発!!~HTML5ハイブリッドアプリ開発[実践]入門~)での発表スライドです。

書籍『HTML5ハイブリッドアプリ開発[実践]入門』には、このスライドに載っていないCordovaの使い方、最適化のためのノウハウやテクニック、ジェスチャやviewportなどのモバイル特有の事情への配慮、ハイブリッドアプリで利用できるストレージ、デバッグ手法やセキュリティ、ネイティブとHTML5間のブリッジの仕組み、WebViewの扱い方などのHTML5ハイブリッドアプリ開発を網羅した内容をまとめています。
http://www.amazon.co.jp/dp/4774162116

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

February 13, 2014
Tweet

Transcript

  1. )5.-ͰJ04ΞϓϦ "OESPJEΞϓϦΛ࡞Ζ͏ ʙ)5.-ϋΠϒϦουΞϓϦ։ൃೖ໳ʙ ೥݄೔ ໦

  2. ٱอాޫଇ ‣ BLB!BOBUPP ‣ ΞγΞϧגࣜձࣾॴଐ ‣ 6*69σβΠφʔ
 ݉ιϑτ΢ΤΞΤϯδχΞ ‣ ࣾ಺ࡶ༻܎

     
  3.   ΞγΞϧגࣜձࣾ ‣ )5.-ΤϯδχΞूஂ ‣ ϋΠϒϦουΞϓϦ։ൃ
 ϓϥοτϑΥʔϜग़ͯ͠·͢ ‣ IUUQNPOBDBNPCJ

  4. ࠓ೔࿩͢͜ͱ

  5. ࠓ೔࿩͢͜ͱ ‣ )5.-ϋΠϒϦουΞϓϦͬͯԿ  ‣ ։ൃͷํ๏ ‣ ϊ΢ϋ΢ɾςΫχοΫ  

  6. ຊͷ಺༰͔Β࿩͠·͢ ‣ ઈࢍൃചத  

  7. )5.-ϋΠϒϦουΞϓϦͬͯԿ

  8. ΞϓϦͷछྨ   +BWB PS 0CKFDUJWF$ ΞϓϦ ΞϓϦ ωΠςΟϒΞϓϦ ϋΠϒϦουΞϓϦ

    ΢ΣϒΞϓϦ
  9. ωΠςΟϒΞϓϦ ‣ ͍ΘΏΔʮී௨ͷΞϓϦʯ   +BWB PS 0CKFDUJWF$ +BWB PS

    0CKFDUJWF$ ΞϓϦ
  10. ΢ΣϒΞϓϦ ‣ ϒϥ΢β্Ͱಈ͘ΞϓϦ ‣ ཁ͢Δʹ΢Σϒϖʔδ  

  11. ͲͪΒΛબͿ ‣ ͲͪΒ΋௕୹͋Δ   +BWB PS 0CKFDUJWF$ +BWB PS

    0CKFDUJWF$ ΞϓϦ PS
  12. )5.-ϋΠϒϦουΞϓϦ ‣ ΢Σϒٕज़ ωΠςΟϒͷϋΠϒϦου   ΞϓϦ ωΠςΟϒ૚ )5.-

  13. ී௨ͷΞϓϦͱԿ͕ҧ͏   ωΠςΟϒΞϓϦ ϋΠϒϦουΞϓϦ +BWB PS 0CKFDUJWF$ ΞϓϦ ΞϓϦ

  14. ‣ ετΞ͔ΒΠϯετʔϧͰ͖Δ ‣ ϒϥ΢β্ཱ͕͕ͪΔΘ͚Ͱ΋ͳ͍ ‣ ωοτʹܨ͕ͬͯͳͯ͘΋ىಈͰ͖Δ  

  15.   Ϣʔβ͔Β͢Δͱɺ ͲͪΒ΋ʮී௨ͷΞϓϦʯ ΞϓϦ ΞϓϦ ωΠςΟϒΞϓϦ ϋΠϒϦουΞϓϦ

  16. ࢓૊Έ ‣ ΞϓϦ಺ʹ8FC7JFXΛදࣔ ‣ 8FC7JFX͸ύοέʔδ಺ͷ)5.-ΛಡΈࠐΈ   ΞϓϦ )5.- ಡΈࠐΈ

    8FC7JFX
  17. ϋΠϒϦουΞϓϦͷར఺   ී௨ͷΞϓϦͱҰॹͳͷʹͳͥϋΠϒϦουʹ͢Δ

  18. ΫϩεϓϥοτϑΥʔϜੑ   "OESPJE J04

  19. "OESPJEͱJ04͸ҧ͏   "OESPJE J04 ‣ ಉ͡ΞϓϦΛ04͝ͱʹผʑʹ։ൃ͢Δͷ͸େม ‣ )5.-Ͱॻ͘ͱɺ྆ํͰಈ͘ ‣

    ͨͩ͠ࡉ͔͍ڍಈͷҧ͍͸͋Δ ‣ +BWB ‣ "OESPJE4%,͕ඞཁ ‣ ։ൃ؀ڥ͸&DMJQTF ‣ 0CKFDUJWF$ ‣ ։ൃ؀ڥ͸9DPEF ‣ .BD049͡Όͳ͍ͱμϝ
  20. ΢Σϒٕज़͕࢖͑Δ ‣ ೃછΈͷ͋Δ΢Σϒٕज़Ͱ։ൃͰ͖Δ ‣ ΢Σϒٕज़ͷΤίγεςϜΛར༻Ͱ͖Δ  

  21. ΤίγεςϜ   × ‣ ܦݧͷ͋Δ։ൃऀ͕ͨ͘͞Μ͍Δ ‣ ୔ࢁͷਓ͕ϊ΢ϋ΢Λڞ༗͍͋ͬͯ͠Δ ‣ ଞਓ͕։ൃͨ͠ΦʔϓϯιʔεͷϥΠϒϥϦ͕๛෋

  22. ετΞͰ഑෍Ͱ͖Δ ‣ ͍ΘΏΔʮී௨ͷΞϓϦʯͱಉ͡Α͏ʹ഑෍Ͱ͖Δ ‣ ϒϥ΢βΛ্ཱͪ͛Δඞཁͳ͠  

  23. ·ͱΊ ‣ )5.-ϋΠϒϦουΞϓϦ͸ɺ
 ωΠςΟϒͱ΢Τϒͷྑ͍ॴΛऔΓೖΕ͍ͯΔ   +BWB PS 0CKFDUJWF$ ΞϓϦ

    ΞϓϦ ϋΠϒϦουΞϓϦ
  24. ࣮ࡍʹ։ൃ͢Δࡍ͸ Ͳ͏΍Δͷ  

  25. ։ൃͷํ๏

  26. ϑϨʔϜϫʔΫΛ࢖͏   ‣ "QBDIF$PSEPWB 1IPOF(BQ ͕࠷΋ϝδϟʔ ‣ ଞʹ͸5SJBJOBɺ5SJHHFSJPͳͲ

  27. ϑϨʔϜϫʔΫ   ‣ )5.-ΛΞϓϦͱͯ͠แΈɺ)5.-ଆͱ04ଆΛܨ͙ ΞϓϦ J04"OESPJE ϑϨʔϜϫʔΫ

  28. +BWB4DSJQU͔Β 04ωΠςΟϒͷػೳ͕࢖͑Δ   "OESPJEJ04 "1*

  29. $PSEPWBͷఏڙ"1*   ‣ $PSEPWBϓϥάΠϯͷ
 ࢓૊ΈΛ࢖͑͹͜ΕҎ֎ͷ͜ͱ΋Մೳ ϑΝΠϧετϨʔδɺΧϝϥɺίϯύε Ճ଎౓ηϯαʔɺίϯλΫτϦετɺ Ґஔ৘ใऔಘɺωοτϫʔΫɺ#MVFUPPUI௨৴ɺ "OESPJEͷΠϯςϯτɺΞϓϦ಺ϒϥ΢βɺ

    (14ɺ/'$ɺFUDʜ
  30. ϑϨʔϜϫʔΫͷϝϦοτ   ‣ )5.-͚ͩͰ͙͢ʹ։ൃΛ࢝ΊΒΕΔ ‣ 04ػೳΛ)5.-͔Βར༻Ͱ͖Δ

  31. ϑϨʔϜϫʔΫΛ ࢖Θͳ͍બ୒ࢶ   ‣ ࣗલͰ8FC7JFXΛΞϓϦʹ૊ΈࠐΉ ‣ ΞϓϦͷҰ෦ͷΈΛ)5.-Ͱهड़͢ΔΑ͏ͳ࣌ ‣ ͢ͰʹωΠςΟϒΞϓϦ͕͋Δ৔߹ͳͲʹ༗ޮ

    ×
  32. ࣮ࡍͷಋೖखॱ͸

  33. ։ൃ؀ڥͷߏங   ‣ ֤ϓϥοτϑΥʔϜ༻ͷ։ൃ؀ڥߏங͸ඞਢ "OESPJE J04

  34.   ‣ .BDϚγϯങͬͯ͘Δ.BD049͕ඞཁ ‣ "QQMFͷαΠτͰ։ൃऀొ࿥ ࣮ػ֬ೝͩͱ༗ྉ  ‣ 9DPEFΛΠϯετʔϧ

    J04 J04ΞϓϦ։ൃ؀ڥΛ࡞Δखॱ
  35.   ‣ 8JOEPXTͰ΋.BDͰ΋-JOVYͰ΋Մ ‣ &DMJQTFͱ"OESPJE4%,ΛΠϯετʔϧ "OESPJE "OESPJEΞϓϦ
 ։ൃ؀ڥΛ࡞Δखॱ

  36. ݁ߏΊΜͲ͍͘͞   ‣ Ұ౓؀ڥΛ࡞Ε͹ऴΘΓ ‣ ऴΘͬͨΒ$PSEPWBϑϨʔϜϫʔΫΛΠϯετʔϧ ‣ ։ൃ؀ڥ͕Ͱ͖ͨΒɺૣ଎։ൃ։࢝

  37. ςΫχοΫɾϊ΢ϋ΢

  38. ࣮ࡍʹ։ൃΛ࢝ΊΔͱ ༷ʑͳ໰୊͕ʜ  

  39. Α͋͘Δ໰୊ ‣ ඳը΍ಈ࡞͕஗͍ ‣ ΞϓϦͬΆ͘ͳΒͳ͍  

  40. ΫϦοΫΠϕϯτΛ࢖Θͳ͍   ‣ Bཁૉ΍DMJDLΠϕϯτ͸NT஗Ԇ͕ൃੜ ‣ UBQQBCMF΍GBTUDMJDL࢖͍·͠ΐ͏ ºDMJDLΠϕϯτ ºBཁૉ UPVDIΠϕϯτͰॲཧ

  41. $44ΞχϝʔγϣϯΛ࢖͏   ‣ Ξχϝʔγϣϯʹ$445SBOTJUJPOΛ࢖͏ ‣ +BWB4DSJQUͰ௚઀΍ΔΑΓ͸Δ͔ʹ଎͍ ‣ TFU*OUFSWBMͰΞχϝʔγϣϯ͢ΔͷΛஔ͖׵͑Δ

  42. ͙͢Θ͔Δ$445SBOTJUJPO   .foobar { background-color: white; } .foobar:hover {

    -webkit-transition: background-color 1s linear; background-color: red; } GPPCBSΫϥεͷཁૉ GPPCBSΫϥεͷཁૉ
  43. K2VFSZͰ͸ͳ͘;FQUPKT࢖͏   ‣ [FQUPKT͸ϞόΠϧʹ࠷దԽ ‣ K2VFSZͷޓ׵"1*Λఏڙ

  44. ಈ࡞֬ೝ͸஗͍ํʹ߹ΘͤΔ   ‣ 8FC7JFX͸"OESPJEΑΓ΋J04ͷํ͕͸Δ͔ʹ଎͍ ‣ ಈ࡞֬ೝ͸஗͍ํͷϓϥοτϑΥʔϜʹ߹ΘͤΔ ‣ ޙ͔Βνϡʔχϯάͯ͠मਖ਼͢Δͷ͸େม 

     iOS
  45. ͳΔ΂͘ϦϑϩʔΛى͜͞ͳ͍   ‣ %0.πϦʔͷϨΠΞ΢τͷ࠶ܭࢉ ‣ Ϧϑϩʔ͢Δ͝ͱʹɺ
 ը໘શମͷϨΠΞ΢τͷ࠶ܭࢉॲཧ͕૸Δ

  46. Կ͕ϦϑϩʔΛҾ͖ى͜͢   ‣ ಺෦ςΩετͷมߋɺJOQVUཁૉ΁ͷೖྗ ‣ %0.πϦʔͷૢ࡞ ‣ XJEUI IFJHIU

    NBSHJO QBEEJOH CPSEFS౳ͷมߋ ‣ Ϋϥεଐੑ΍ελΠϧγʔτͷมߋ΋ؚΉ
  47. ϦϑϩʔͷίετΛ
 ཈͑Δͷ΋ॏཁ   ‣ ΞϓϦͷΠϯλϥΫγϣϯʹ%0.ૢ࡞͸ඞਢ ‣ Ͳ͏ͯ͠΋Ϧϑϩʔ͸ى͖Δ৔߹͕͋Δ ‣ ϦϑϩʔͷίετΛԼ͛Δ

  48. ϦϑϩʔͷίετΛԼ͛Δʹ͸   ‣ ཁૉͷXJEUIɺIFJHIUΛࢦఆ͢Δ ‣ ϑϩʔϕʔεͷϨΠΞ΢τΛආ͚Δ ‣ QPTJUJPOBCTPMVUF pYFEΛੵۃతʹ࢖͏

    ‣ ཁૉҐஔ΍େ͖͞Λม͑Δʹ͸ɺUSBOTGPSNΛ࢖͏ ίετΛԼ͛Δ
  49. ϦϑϩʔΛ൐͏ ΞχϝʔγϣϯΛͤ͞ͳ͍   ‣ $44ΞχϝʔγϣϯͰ΋ϦϑϩʔΛى͜͢ͱ஗͘ͳΔ ‣ ϦϑϩʔΛى͜͢ΞχϝʔγϣϯΛආ͚Δ

  50. %0.%PDVNFOU'SBHNFOUT Λ࢖͏   ‣ %0.ཁૉΛ͘Γ͔͑͠%0.πϦʔʹૠೖ͠ͳ͍ var fragment = document.createDocumentFragment();

  51. ѱ͍ྫ   var div = document.getElementsByTagName("div"); for (var i

    = 0; i < div.length; i++) { for (var e = 0; e < elems.length; e++) { div[i].appendChild(elems[e].cloneNode(true)); } } ܁Γฦ͠%0.πϦʔʹૠೖ IUUQFKPIOPSHCMPHEPNEPDVNFOUGSBHNFOUTΑΓҾ༻
  52. %PDVNFOU'SBHNFOUTͷྫ   var div = document.getElementsByTagName("div"); var fragment =

    document.createDocumentFragment(); for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } for (var i = 0; i < div.length; i++) { div[i].appendChild(fragment.cloneNode(true)); } ࠷ޙʹҰ౓͚ͩ%0.πϦʔʹૠೖ IUUQFKPIOPSHCMPHEPNEPDVNFOUGSBHNFOUTΑΓҾ༻
  53. ·ͱΊ   ‣ ΞϓϦͱͯܰ͠շʹಈ࡞͢Δඞཁ͋Γ ‣ ࠷దԽͷςΫχοΫΛ೺Ѳ͓ͯ͘͜͠ͱ͕ॏཁ

  54. .POBDBʹ͍ͭͯ

  55. ʮ$PSEPWBͱ͔9DPEFͱ͔ "OESPJE4%,ͱ͔ ೖΕͨΓ͢Δͷ໘౗͍͘͞ʯ  

  56. ͦΜͳਓͷͨΊʹ IUUQNPOBDBNPCJ

  57.   ‣ ϒϥ΢βͰίʔσΟϯάɾ։ൃ ‣ "OESPJE J04Ͱͷ࣮ػ֬ೝແྉ ‣ ෼ͰΞϓϦ։ൃ։࢝

  58. ࠷ޙʹ

  59. ৄࡉͦͷଞॾʑ   શ෦ॻ͍ͯ·͢ɻ

  60. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ऴΘΓ