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.-ϋΠϒϦουΞϓϦ։ൃೖ໳ʙ
   ೥݄೔ ໦
   
   

   View Slide

2. ٱอాޫଇ
   ‣ BLB!BOBUPP
   ‣ ΞγΞϧגࣜձࣾॴଐ
   ‣ 6*69σβΠφʔ

   ݉ιϑτ΢ΤΞΤϯδχΞ
   ‣ ࣾ಺ࡶ༻܎
   
   
   

   View Slide

3. 
   
   ΞγΞϧגࣜձࣾ
   ‣ )5.-ΤϯδχΞूஂ
   ‣ ϋΠϒϦουΞϓϦ։ൃ

   ϓϥοτϑΥʔϜग़ͯ͠·͢
   ‣ IUUQNPOBDBNPCJ
   

   View Slide

4. ࠓ೔࿩͢͜ͱ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. "OESPJEͱJ04͸ҧ͏
    
    
    "OESPJE J04
    ‣ ಉ͡ΞϓϦΛ04͝ͱʹผʑʹ։ൃ͢Δͷ͸େม
    ‣ )5.-Ͱॻ͘ͱɺ྆ํͰಈ͘
    ‣ ͨͩ͠ࡉ͔͍ڍಈͷҧ͍͸͋Δ
    ‣ +BWB
    ‣ "OESPJE4%,͕ඞཁ
    ‣ ։ൃ؀ڥ͸&DMJQTF
    ‣ 0CKFDUJWF$
    ‣ ։ൃ؀ڥ͸9DPEF
    ‣ .BD049͡Όͳ͍ͱμϝ
    

    View Slide

20. ΢Σϒٕज़͕࢖͑Δ
    ‣ ೃછΈͷ͋Δ΢Σϒٕज़Ͱ։ൃͰ͖Δ
    ‣ ΢Σϒٕज़ͷΤίγεςϜΛར༻Ͱ͖Δ
    
    
    

    View Slide

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

    View Slide

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

    View Slide

23. ·ͱΊ
    ‣ )5.-ϋΠϒϦουΞϓϦ͸ɺ

    ωΠςΟϒͱ΢Τϒͷྑ͍ॴΛऔΓೖΕ͍ͯΔ
    
    
    +BWB
    PS
    0CKFDUJWF$
    ΞϓϦ
    ΞϓϦ
    ϋΠϒϦουΞϓϦ
    

    View Slide

24. ࣮ࡍʹ։ൃ͢Δࡍ͸
    Ͳ͏΍Δͷ
    
    
    

    View Slide

25. ։ൃͷํ๏
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. $PSEPWBͷఏڙ"1*
    
    
    ‣ $PSEPWBϓϥάΠϯͷ

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

    View Slide

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

    View Slide

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

    View Slide

32. ࣮ࡍͷಋೖखॱ͸
    

    View Slide

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

    View Slide

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

    View Slide

35. 
    
    ‣ 8JOEPXTͰ΋.BDͰ΋-JOVYͰ΋Մ
    ‣ &DMJQTFͱ"OESPJE4%,ΛΠϯετʔϧ
    "OESPJE
    "OESPJEΞϓϦ

    ։ൃ؀ڥΛ࡞Δखॱ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. ͙͢Θ͔Δ$445SBOTJUJPO
    
    
    .foobar {
    background-color: white;
    }
    .foobar:hover {
    -webkit-transition: background-color 1s linear;
    background-color: red;
    }
    GPPCBSΫϥεͷཁૉ GPPCBSΫϥεͷཁૉ
    

    View Slide

43. K2VFSZͰ͸ͳ͘;FQUPKT࢖͏
    
    
    ‣ [FQUPKT͸ϞόΠϧʹ࠷దԽ
    ‣ K2VFSZͷޓ׵"1*Λఏڙ
    

    View Slide

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

    View Slide

45. ͳΔ΂͘ϦϑϩʔΛى͜͞ͳ͍
    
    
    ‣ %0.πϦʔͷϨΠΞ΢τͷ࠶ܭࢉ
    ‣ Ϧϑϩʔ͢Δ͝ͱʹɺ

    ը໘શମͷϨΠΞ΢τͷ࠶ܭࢉॲཧ͕૸Δ
    

    View Slide

46. Կ͕ϦϑϩʔΛҾ͖ى͜͢
    
    
    ‣ ಺෦ςΩετͷมߋɺJOQVUཁૉ΁ͷೖྗ
    ‣ %0.πϦʔͷૢ࡞
    ‣ XJEUI IFJHIU NBSHJO QBEEJOH CPSEFS౳ͷมߋ
    ‣ Ϋϥεଐੑ΍ελΠϧγʔτͷมߋ΋ؚΉ
    

    View Slide

47. ϦϑϩʔͷίετΛ

    ཈͑Δͷ΋ॏཁ
    
    
    ‣ ΞϓϦͷΠϯλϥΫγϣϯʹ%0.ૢ࡞͸ඞਢ
    ‣ Ͳ͏ͯ͠΋Ϧϑϩʔ͸ى͖Δ৔߹͕͋Δ
    ‣ ϦϑϩʔͷίετΛԼ͛Δ
    

    View Slide

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

    View Slide

49. ϦϑϩʔΛ൐͏
    ΞχϝʔγϣϯΛͤ͞ͳ͍
    
    
    ‣ $44ΞχϝʔγϣϯͰ΋ϦϑϩʔΛى͜͢ͱ஗͘ͳΔ
    ‣ ϦϑϩʔΛى͜͢ΞχϝʔγϣϯΛආ͚Δ
    

    View Slide

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

    View Slide

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ΑΓҾ༻
    

    View Slide

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ΑΓҾ༻
    

    View Slide

53. ·ͱΊ
    
    
    ‣ ΞϓϦͱͯܰ͠շʹಈ࡞͢Δඞཁ͋Γ
    ‣ ࠷దԽͷςΫχοΫΛ೺Ѳ͓ͯ͘͜͠ͱ͕ॏཁ
    

    View Slide

54. .POBDBʹ͍ͭͯ
    

    View Slide

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

    View Slide

56. ͦΜͳਓͷͨΊʹ
    IUUQNPOBDBNPCJ
    

    View Slide

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

    View Slide

58. ࠷ޙʹ
    

    View Slide

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

    View Slide

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

    View Slide