$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

久保田光則

February 13, 2014
Tweet

More Decks by 久保田光則

Other Decks in Technology

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