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

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

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

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
    ‣ "OESPJE
    4%,͕ඞཁ
    ‣ ։ൃ؀ڥ͸&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ωΠςΟϒͷػೳ͕࢖͑Δ
     "OESPJE
    
    J04 "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ͱ"OESPJE
    4%,ΛΠϯετʔϧ "OESPJE "OESPJEΞϓϦ
 ։ൃ؀ڥΛ࡞Δखॱ
36. ݁ߏΊΜͲ͍͘͞
     ‣ Ұ౓؀ڥΛ࡞Ε͹ऴΘΓ
    ‣ ऴΘͬͨΒ$PSEPWBϑϨʔϜϫʔΫΛΠϯετʔϧ
    ‣ ։ൃ؀ڥ͕Ͱ͖ͨΒɺૣ଎։ൃ։࢝
37. ςΫχοΫɾϊ΢ϋ΢
38. ࣮ࡍʹ։ൃΛ࢝ΊΔͱ
    ༷ʑͳ໰୊͕ʜ
    
39. Α͋͘Δ໰୊ ‣ ඳը΍ಈ࡞͕஗͍
    ‣ ΞϓϦͬΆ͘ͳΒͳ͍
    
40. ΫϦοΫΠϕϯτΛ࢖Θͳ͍
     ‣ Bཁૉ΍DMJDLΠϕϯτ͸NT஗Ԇ͕ൃੜ
    ‣ UBQQBCMF΍GBTUDMJDL࢖͍·͠ΐ͏ º
    DMJDLΠϕϯτ
    
    º
    Bཁૉ
    
    
    
    UPVDIΠϕϯτͰॲཧ
41. $44ΞχϝʔγϣϯΛ࢖͏
     ‣ Ξχϝʔγϣϯʹ$44
    5SBOTJUJPOΛ࢖͏
    ‣ +BWB4DSJQUͰ௚઀΍ΔΑΓ͸Δ͔ʹ଎͍
    ‣ TFU*OUFSWBMͰΞχϝʔγϣϯ͢ΔͷΛஔ͖׵͑Δ
42. ͙͢Θ͔Δ$44
    5SBOTJUJPO
     .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Λࢦఆ͢Δ
    ‣ ϑϩʔϕʔεͷϨΠΞ΢τΛආ͚Δ
    ‣ QPTJUJPO
    BCTPMVUF
    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ͱ͔
    
    
    
    "OESPJE
    4%,ͱ͔
    
    
    
    ೖΕͨΓ͢Δͷ໘౗͍͘͞ʯ
    
56. ͦΜͳਓͷͨΊʹ IUUQNPOBDBNPCJ
57. 
     ‣ ϒϥ΢βͰίʔσΟϯάɾ։ൃ
    ‣ "OESPJE
    J04Ͱͷ࣮ػ֬ೝແྉ
    ‣ ෼ͰΞϓϦ։ൃ։࢝
58. ࠷ޙʹ
59. ৄࡉͦͷଞॾʑ
     શ෦ॻ͍ͯ·͢ɻ
60. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ऴΘΓ