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

by 久保田光則

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ຊͷ಺༰͔Β࿩͠·͢ ‣ ઈࢍൃചத

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

࣮ࡍʹ։ൃ͢Δࡍ͸ Ͳ͏΍Δͷ

Slide 25

Slide 25 text

։ൃͷํ๏

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

࣮ࡍͷಋೖखॱ͸

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ςΫχοΫɾϊ΢ϋ΢

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

.POBDBʹ͍ͭͯ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ͦΜͳਓͷͨΊʹ IUUQNPOBDBNPCJ

Slide 57

Slide 57 text

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