Slide 1
Slide 1 text
ʠϞμϯʡΣϒΞϓϦέʔγϣϯ
ʙΞϝϒϩϲܭըʙ
)5.-$POGFSFODF
ݪҰ!IFSBCMPH
Slide 2
Slide 2 text
Ξϝʔόϒϩά
։࢝ͷϒϩάαʔϏε
ܳೳਓͷར༻͕ଟ͍
ܳೳਓҎ֎ͱͦΕҎ֎ͷ17ʑ
Slide 3
Slide 3 text
όοΫΤϯυγεςϜͷ৽
*TPNPSQIJD+BWB4DSJQU
".1
IUUQT
$PEFTQMJUUJOH
/PEFKTW
3FBDU
18"
Slide 4
Slide 4 text
͔͚ͯʠϞμϯʡͳঢ়ଶʹ͢Δ
Slide 5
Slide 5 text
ʠϞμϯʡͰ͋Δ͜ͱ
ΤίγεςϜͱͭͳ͕͍ͬͯΔ͜ͱ
Slide 6
Slide 6 text
ʠϞμϯʡͰ͋Δ͜ͱ
ΤίγεςϜ͔ΒͷԸܙ ΤϯδχΞͷྲྀಈੑ
! "
Slide 7
Slide 7 text
ΤίγεςϜ͔ΒͷԸܙ
࠷৽ٕज़ΛऔΓࠐΈ͍͢
ੈքதͷΤϯδχΞͱڠྗͰ͖Δ
!
Slide 8
Slide 8 text
ΤϯδχΞͷྲྀಈੑ
एऀͷࢀՃΛଅ͍͢͠
ଐਓԽΛ͍͗͢
"
Slide 9
Slide 9 text
443ͱ41"
4FSWFS
$MJFOU
Database
Services
Presentation
Logic
Data Services
DAO
Rendering
Slide 10
Slide 10 text
443ͱ41"
4FSWFS
$MJFOU
Database
Services
Presentation
Logic
Data Services
DAO
Slide 11
Slide 11 text
443ͱ41"
ॳظද͕͍ࣔ
ϖʔδભҠΊ
ϖʔδભҠ͕͍
ॳظදࣔΊ
443 41"
Slide 12
Slide 12 text
IUUQTHPPHM,4-L
3FOEFSJOHPO(PPHMF4FBSDI
Slide 13
Slide 13 text
*TPNPSQIJD+BWB4DSJQU
IUUQTHPPHMZ-[/
Slide 14
Slide 14 text
*TPNPSQIJD+BWB4DSJQU
IUUQTHPPHMZ-[/
Slide 15
Slide 15 text
6OJWFSTBM+BWB4DSJQU
IUUQTHPPHMYBL9"
Slide 16
Slide 16 text
*TPNPSQIJD+BWB4DSJQU
ɺΞϝϒϩͷγεςϜ৽
4FSWFS
$MJFOU
Database
Services
Presentation
Logic
Data Services
DAO
Browser
Slide 17
Slide 17 text
*TPNPSQIJD+BWB4DSJQU
1SPT
%BUBͱ6*ͷΛͰ͖Δ
6*ಉ͡ΤϯδχΞ͕ίϯτϩʔϧͰ͖Δ
ॳظɾϥϯλΠϜ྆ํͷදࣔΛվળͰ͖Δ
Slide 18
Slide 18 text
*TPNPSQIJD+BWB4DSJQU
ෳࡶ͕͞গ͠૿͢ ಛʹ443ͱ41"Ε
/PEFKTͷӡ༻࣮͕ඞཁ ͋Δͱྑ͍
શΞϓϦʹ͔ͳ͍ ࢀরܥʹ͘
$POT
Slide 19
Slide 19 text
*OJUJBM4QFFEXJUI443BOE41"
Y'BTUFS
Slide 20
Slide 20 text
3VOUJNF4QFFEXJUI443BOE41"
Y'BTUFS
Slide 21
Slide 21 text
*TPNPSQIJD+BWB4DSJQU
ɺΞϝϒϩͷγεςϜ৽
4FSWFS
$MJFOU
Database
Services
Presentation
Logic
Data Services
DAO
Browser
Slide 22
Slide 22 text
3FBDU 3FOEFSJOH
5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU
ίϯϙʔωϯτࢦ
αʔόʔɺΫϥΠΞϯτ྆ํͷϨϯμϦϯά
ϥΠϑαΠΫϧϝιουͰ*TPNPSQIJDʹ͍͢͠
Slide 23
Slide 23 text
export class SampleComponent extends React.Component {
componentWillMount() {} // αʔό༻ɻconstructorΛ͏ͷ͕ਪ
componentDidMount() {} // ΫϥΠΞϯτ༻ɻॳճͷදࣔ࣌
componentDidUpdate() {} // ΫϥΠΞϯτ༻ɻSPAͷભҠ࣌ʹΘΕΔ͜ͱ͕ଟ͍
componentWillUnmount() {} // ΫϥΠΞϯτ༻ɻλΠϚʔॲཧΛফ͢ͳͲ
render() {} //αʔόαΠυɺΫϥΠΞϯταΠυ྆ํ
}
3FBDU 3FOEFSJOH
5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU
Slide 24
Slide 24 text
3FEVY 4UBUFDPOUBJOFS
5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU
'MVYϕʔεͷঢ়ଶཧͷͨΊͷϑϨʔϜϫʔΫ
ؔϕʔεͰ*TPNPSQIJD͍͢͠
෭࡞༻ͳͲᐆດͳͱ͜ΖެࣜαΠτͷਪʹ߹ΘͤΔ
Slide 25
Slide 25 text
IUUQTHPPHMFT23T,
)PXDBO*SFQSFTFOUʠTJEFF⒎FDUTʡ
TVDIBT"+"9DBMMT
Slide 26
Slide 26 text
'FUDI"1*
'FUDIS 'FUDIJOH
5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU
σʔλͷऔಘ
'FUDI"1* CJUJOOOPEFGFUDI
HJUIVCGFUDI
'FUDIS ZBIPPGFUDIS
Ͱ*TPNPQSIJDԽ
Slide 27
Slide 27 text
3FBDU3PVUFS 3PVUJOH
5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU
֤QBUI͝ͱʹରԠ͢ΔίϯϙʔωϯτΛݺͼग़͠
αʔόʔͰɺΤϥʔɾϦμΠϨΫτॲཧ
ΫϥΠΞϯτͰɺώετϦʔɾεΫϩʔϧҐஔཧ
ͳͲ͕ඞཁ
Slide 28
Slide 28 text
/PEFKT 8FCTFSWFS
5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU
*TPNPSQIJD/PEFKTͷਐԽɾ҆ఆͷࣀ
%PDLFSར༻͍ͯ͠ΔͨΊɺόʔδϣϯΞοϓ؆୯
جຊతʹ࠷৽൛Λར༻͢ΔΑ͏ʹ͍ͯ͠Δ
Slide 29
Slide 29 text
3FOFXBM1PMJDZ
Ͱ͖Δ͚ͩʮελϯμʔυʯͳπʔϧΛ͏
࡞ͬͯյ͢Λ܁Γฦ͢
ڞ௨Խɾ࠷దԽ࠷ऴஈ֊Ͱ͓͜ͳ͏
ͦͷΘΓɺύʔπΛ؆୯ʹऔΓআ͚ΔΑ͏ʹ͓ͯ͘͠
Slide 30
Slide 30 text
❝ૣ͗͢Δ࠷దԽॾѱͷࠜݯͰ͋Δ❞
%POBME,OVUI
Slide 31
Slide 31 text
IUUQTHPPHM2R#9
Ξϝϒϩ3FBDU3FEVYͰͭ͘Δ
*TPNPSQIJDXFCBQQ
IUUQTHPPHM(ZP;I
ΞϝϒϩͰ3FBDU*TPNPSQIJD8FC"QQ
Λ࠾༻ͨ͠ཧ༝ʕʕͦͷՌͱߏٕज़
IUUQTHPPHMY)EO
ΞϝϒϩͷେنγεςϜ৽ͱ
ͦΕΛࢧ͑Δ4QSJOH
Slide 32
Slide 32 text
$BDIFT
ߴෛՙͳαʔϏεϋΠύϑΥʔϚϯεΛٻΊΔ߹ɺ
αʔόʔαΠυͷΩϟογϡඞਢ
ΞϝϒϩϒϩάαʔϏεͳͷͰΩϟογϡͱ૬ੑ͕ྑ͍
Slide 33
Slide 33 text
5FNQMBUF$BDIFT
# $ %
+
'
SFOEFS5P4USJOH
$MJFOU*OGP )5.-
$BDIF
Slide 34
Slide 34 text
"1*$BDIFT
࠷ॳϘτϧωοΫʹͳΔ)5.-ͷΩϟογϡͷΈ
"1*ʹదʹΩϟογϡΛઃఆ
Slide 35
Slide 35 text
$BDIFT
Y'BTUFS
Slide 36
Slide 36 text
$PEF4QMJUUJOH
+BWB4DSJQUͷධՁ࣌ؒΛॖ͢ΔͨΊ
NBJOKTͷތେԽΛ͙ͨΊ
͍͔ͭϑϧ41"ʹ͢Δ͔͠Εͳ͍ͨΊ
Slide 37
Slide 37 text
1FSGPSNBODF.FUSJDT
Slide 38
Slide 38 text
1FSGPSNBODF.FUSJDT
Slide 39
Slide 39 text
IUUQTHPPHM8B6-[T
-FWFSBHJOHUIF1FSGPSNBODF.FUSJDT
UIBU.PTU"⒎FDU6TFS&YQFSJFODF
Slide 40
Slide 40 text
8FCQBDL
%ZOBNJD*NQPSUT
%ZOBNJD*NQPSUTΛར༻
IUUQTHPPHM'XY
"NFCBͰ"UPNJD%FTJHOͷ
0SHBOJTNT୯ҐͰׂ ࠓ
() => import(‘./organisms/Header.js’);
Slide 41
Slide 41 text
+BWB4DSJQUධՁ࣌ؒ
Y'BTUFS
Slide 42
Slide 42 text
3FBDU
3FBDU'JCFS
Y'BTUFS3FBDU #FUB
WT
Slide 43
Slide 43 text
IUUQTHPPHM$Q⒎
Ξϝϒϩ*TPNQSIJDΞϓϦέʔγϣϯͷ
ύϑΥʔϚϯεɾνϡʔχϯά
IUUQTHPPHM8GZ5Q
Ξϝϒϩ
*TPNPSQIJD8FC"QQͷਐԽฤ
Slide 44
Slide 44 text
.POJUPSJOH
ܧଓతʹϞχλϦϯάͰ͖Δ
ඞཁʹԠͯ͡ϑΟʔυόοΫ Ξϥʔτ
ΛઃఆͰ͖Δ
"NFCBͰશͯ4MBDLʹ௨͕དྷΔΑ͏ʹ͍ͯ͠Δ
Slide 45
Slide 45 text
αʔόʔΞϓϦέʔγϣϯͷ
ϨεϙϯελΠϜΛϞχλϦϯά
ϘτϧωοΫΛൃݟ͢Δ
Slide 46
Slide 46 text
ΞϓϦέʔγϣϯͷঢ়ଶΛ
ϞχλϦϯά͢Δ
ΧελϚΠζ༷ͯ͠ʑͳ
.FUSJDTΛ࡞ΕΔ
Slide 47
Slide 47 text
4QFFE$VSWF
ܧଓతʹύϑΥʔϚϯεܭଌ
ຖܭଌɾ4MBDL௨
σϓϩΠ͝ͱʹܭଌɾ4MBDL௨
Slide 48
Slide 48 text
උ͚͑ͷϖʔδεϐʔυͷଞɺ
ύϑΥʔϚϯεΛૹ৴ͯ͠ੳ
4QFFE*OEFY 810'PVOEBUJPO36.4QFFE*OEFY
XJOEPXQFSGPSNBODF pSTUQBJOU
pSTUDPOUFOUGVM
QBJOU
Slide 49
Slide 49 text
IUUQTHPPHMIGD[
8FCύϑΥʔϚϯεͱϓϩμΫτ,1*ͷ૬ؔΛ
ՄࢹԽ͢Δ
Slide 50
Slide 50 text
)5514
)ZQFS5FYU5SBOTGFS1SPUPDPM4FDVSF
Նɺ͍ͭʹΞϝϒϩެ։໘ͷ)5514৴͕ྃ
ηΩϡϦςΟ
4&0
4FSWJDF8PSLFSͳͲͷ৽ػೳར༻
؍͔Β)5514Ͱͷ৴ඞਢ
Slide 51
Slide 51 text
$413FQPSU
$POUFOU4FDVSJUZ1PMJDZ
ϙϦγʔΛఆٛ͠ɺҧϦιʔεΛ
ࣗಈతʹϨϙʔτ
ϨϙʔτઌIUUQTSFQPSUVSJJP
Λར༻
Slide 52
Slide 52 text
$413FQPSU
$POUFOU4FDVSJUZ1PMJDZ
Content-Security-Policy-Report-Only:
default-src 'self' https:;
script-src 'self' https: 'unsafe-inline' ‘unsafe-eval';
img-src 'self' https: data:;
style-src 'self' https: ‘unsafe-inline';
font-src 'self' https: data:;
report-uri https://send-to-report-url
Slide 53
Slide 53 text
$413FQPSU
$POUFOU4FDVSJUZ1PMJDZ
Slide 54
Slide 54 text
)454
)5514USJDU5SBOTQPSU4FDVSJUZ
)551ͷΘΓʹ)5514Λ͏Α͏
8FCϖʔδ͔Βϒϥβʹୡ
ঃʑʹظؒΛ͍͛ͯͬͨ
Strict-Transport-Security: max-age=expireTimeSeconds
Slide 55
Slide 55 text
3FEJSFDU
)454Ͱ͕ͳ͍͔֬ೝޙɺ
IUUQͷΞΫηεΛIUUQTڧ੍ϦμΠϨΫτ
߃ٱత
ͰϦμΠϨΫτ͢Δ
Slide 56
Slide 56 text
)FBEFST
.JYFE$POUFOUTΛ͙ͨΊʹɺҎԼͷϔομʔ͕༗ޮ
6QHSBEF*OTFDVSF3FRVFTUT
ϒϥβIUUQͷϦιʔεΛൃݟ͢ΔͱIUUQTʹมͯ͠ϦΫΤετɻIUUQT
ະରԠͷ߹ɺʹͳΔɻ
#MPDL"MM.JYFE$POUFOU
ϒϥβɺIUUQͷϦιʔεΛৗʹಡΈࠐ·ͳ͍Α͏ʹ͢Δɻ
Slide 57
Slide 57 text
3FGFSSFS1PMJDZ
63-ʹػີใؚ͕·Ε͍ͯΔ߹͕͋ΔͨΊɺ
ηΩϡΞͰͳ͍ϖʔδͷϦΫΤετ࣌ʹϦϑΝϥແޮ
"NFCBͰʮPSJHJOʯΛબத
Slide 58
Slide 58 text
IUUQTHPPHM/H4EH
ΞϝϒϩେنαʔϏεIUUQTԽ
ʙ"MM(SFFOΛࢦͯ͠ʙ
Slide 59
Slide 59 text
".1
"DDFMFSBUFE.PCJMF1BHFT1SPKFDU
8FCදࣔվળͷϓϩδΣΫτ
ϗϫΠτϦετԽ͞Εͨ)5.-
+4
$44IFBEʹهड़
ݕࡧ݁Ռͱ".1ΧϧʔηϧʹࡌΔ
Slide 60
Slide 60 text
".1BU"NFCB
Y4FTTJPOTGSPN.BSDI
Slide 61
Slide 61 text
".14QJLF
".1Χϧʔηϧ͔ΒͷಥൃతͳΞΫηε૿
ීஈͷݕࡧͱҧͬͨྲྀೖΛಘΒΕΔ
͋Δϒϩάͷ".1ϖʔδͷϖʔδϏϡʔਪҠ
Slide 62
Slide 62 text
".11FSGPSNBODF
࠷৽ٕज़ͷར༻ʹΑΓɺ҆ఆͨ͠ύϑΥʔϚϯε
Ұ෦ϖʔδɺҰ෦ػೳͳͲஈ֊తʹಋೖ͢Δͷ͋Γ
ΦϦδφϧαΠτͰ".1ͱಉ༷ͷύϑΥʔϚϯεΛ
୲อͰ͖Δ߹ɺར༻͠ͳ͍͍͔ͯ͘
Slide 63
Slide 63 text
BNQMJTU
-B[Z-PBEXJUIBNQMJTU
9)3ͯ͠σʔλΛऔಘ
NVTUBDIFͰςϯϓϨʔτهड़
-B[Z-PBEΛ؆୯ʹ࣮Ͱ͖Δ
ݫີͳ$034ϧʔϧ
Slide 64
Slide 64 text
σʔλ͕औಘͰ͖·ͤΜͰͨ͠ɻ
{{#data}}
{{entry_title}}
Slide 65
Slide 65 text
IUUQTHPPHM;%K
"DUJPOTBOE&WFOUTJO".1
IUUQTHPPHM-KBQ
$0343FRVFTUTJO".1
Slide 66
Slide 66 text
BNQCJOE
"VUP4VHHFTUJPO4FBSDI#BSXJUIBNQCJOE
BNQTUBUFͰॳظঢ়ଶΛઃఆ
JOQVUೖྗʹԠͯ͡".1TFU4UBUF
Ͱঢ়ଶΛߋ৽
BNQMJTUͰਪન݁ՌΛ࠶औಘ
Slide 67
Slide 67 text
BNQCJOE
"VUP4VHHFTUJPO4FBSDI#BSXJUIBNQCJOE
{ "autosuggest" : "" }
Slide 69
Slide 69 text
BNQGPSN
-JLFBDUJPOTXJUIBNQGPSNBOEBNQCJOE
BNQTUBUFͰॳظঢ়ଶΛऔಘ
ϘλϯλοϓͰঢ়ଶΛө
ϙοϓΞοϓͷϘλϯλοϓ
BNQGPSNͰ"1*ʹσʔλૹ৴
Slide 70
Slide 70 text
Slide 71
Slide 71 text
͍͍Ͷʂ͢Δ
͍͍ͶʂΛΩϟϯηϧ͢Δ
BNQGPSN
-JLFBDUJPOTXJUIBNQGPSNBOEBNQCJOE
Slide 72
Slide 72 text
BNQJOTUBMMTFSWJDFXPSLFS
*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS
Slide 73
Slide 73 text
BNQJOTUBMMTFSWJDFXPSLFS
*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS
Slide 74
Slide 74 text
*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS
".1UP18"
ॳظද͕͍ࣔ
੩త
੍ݶ͞Εͨػೳ
ϑϧػೳ͕͑Δ
ಈత
ॳظදࣔΊ
".1 18"
Slide 75
Slide 75 text
*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS
".1UP18"
".1
(
18"
)
*
*
*
BNQJOTUBMMTFSWJDFXPSLFS
/BWJHBUFUP18"
Slide 76
Slide 76 text
*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS
".1XJUI18"
ॳظද͕͍ࣔ
੩త
੍ݶ͞Εͨػೳ
ϑϧػೳ͕͑Δ
ಈత
ॳظදࣔΊ
".1 18"
ॳظද͕͍ࣔ
ϑϧػೳ͕͑Δ
ಈత
*TPNPSQIJD
Slide 77
Slide 77 text
*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS
".1XJUI18"
".1
(
*TPNPSQIJD
)
*
*
*
BNQJOTUBMMTFSWJDFXPSLFS
-JOLUP0SJHJOBM4JUF
Slide 78
Slide 78 text
18"
1SPHSFTTJWF8FC"QQ
8FCͷϢʔβʔΤΫεϖϦΤϯε
/BUJWFͱ8FCͷ͍͍ͱ͜औΓΛࢦ͢
3FMJBCMF
'BTU
&OHBHJOH
Slide 79
Slide 79 text
*NBHF-JHIUCPY
/BUJWF-JLF*NBHF-JHIUCPY
ωΠςΟϒͷΑ͏ͳը૾MJHIUCPY
εϜʔζʹը૾ΛӾཡͰ͖Δ
EJNTFNFOPW1IPUP4XJQFΛར༻
Slide 80
Slide 80 text
"SUJDMF4FMFDUPS
/BUJWF-JLF"SUJDMF4FMFDUPS
هࣄιʔτػೳ
ϞʔμϧදࣔͰ༷ʑͳιʔτΛ࣮ݱ
Slide 81
Slide 81 text
4FSWJDF8PSLFS
8FCϖʔδͱผʹόοΫάϥϯυͰಈ࡞͢ΔεΫϦϓτ
'FUDI
$BDIF
1VTI
#BDLHSPVOETZODʜ
ϥΠϑαΠΫϧͷཧղ͕ॏཁ
Slide 82
Slide 82 text
4FSWJDF8PSLFS-JGFDZDMF
είʔϓͷϖʔδ͕ಉ͡4FSWJDF8PSLFSͰ੍ޚ
Ͱ͖ΔΑ͏ʹ͢Δ
$ISPNFͷΞοϓσʔτʹࣅ͍ͯΔ
Slide 83
Slide 83 text
4FSWJDF8PSLFS-JGFDZDMF
*OTUBMM
+ * *
"DUJWBUF
8BJUJOH
Slide 84
Slide 84 text
4FSWJDF8PSLFS-JGFDZDMF
*OTUBMM
* *
"DUJWBUF
+
8BJUJOH
Slide 85
Slide 85 text
4FSWJDF8PSLFS-JGFDZDMF
*OTUBMM
* *
"DUJWBUF
+
*
'FUDI$BDIF
8BJUJOH
Slide 86
Slide 86 text
4FSWJDF8PSLFS-JGFDZDMF
*OTUBMM
+ * *
"DUJWBUF
+
8BJUJOH
Slide 87
Slide 87 text
4FSWJDF8PSLFS-JGFDZDMF
*OTUBMM
*
+ *
"DUJWBUF
+
8BJUJOH
Slide 88
Slide 88 text
4FSWJDF8PSLFS-JGFDZDMF
*OTUBMM
*
8BJUJOH
*
"DUJWBUF
+
*
'FUDI$BDIF
Slide 89
Slide 89 text
IUUQTHPPHM:,;N1,
4FSWJDF8PSLFSͷϥΠϑαΠΫϧ
Slide 90
Slide 90 text
1SFDBDIF
4FSWJDF8PSLFSͰΞηοτΛϓϨΩϟογϡ
(PPHMF$ISPNF8PSLCPYΛར༻
8FCQBDLϓϩηεʹΈࠐΈ
औಘޙɺ࠶ωοτϫʔΫϦΫΤετ͠ͳ͍
Slide 91
Slide 91 text
self.AMEBLO_CDN = 'https://c.stat100.ameba.jp';
importScripts('https://c.stat100.ameba.jp/ameblo/assets/sp/
20170914-3b91bd8/service-worker.js');
1SFDBDIF
ΫϩευϝΠϯରԠ
Slide 92
Slide 92 text
const = fileManifest = [
{
url: self.AMEBLO_CDN + '/ameblo/assets/sp/20170914-3b91bd8/0.js'
},
{
url: self.AMEBLO_CDN + '/ameblo/assets/sp/20170914-3b91bd8/main.css'
},
{
url: ‘/shell/20170914-3b91bd8‘
}
];
workboxSW.precache(fileManifest);
1SFDBDIF
ΫϩευϝΠϯରԠ
Slide 93
Slide 93 text
1SFDBDIF
Slide 94
Slide 94 text
1SFDBDIF
Slide 95
Slide 95 text
3VOUJNF$BDIF
هࣄʹؔ࿈͢ΔϦιʔεΛΩϟογϡ
FHը૾
هࣄσʔλ
(PPHMF$ISPNF8PSLCPYΛར༻
Slide 96
Slide 96 text
3VOUJNF$BDIF4USBUFHZ
$BDIF'JSTU
ҰΩϟογϡͨ͠Βɺ࠶ωοτϫʔΫϦΫΤετ͠ͳ͍ɻ
όʔδϣϯ͖ͷϦιʔεʹ༗ޮɻ
/FUXPSL'JSTU
ৗʹωοτϫʔΫΛ༏ઌ͢ΔɻऔಘͰ͖ͳ͔ͬͨ߹ͷΈΩϟογϡΛར༻ɻ
"1*σʔλͳͲɺߋ৽ස͕ߴ͍ͷʹ༗ޮɻ
Slide 97
Slide 97 text
3VOUJNF$BDIF4USBUFHZ
4UBMF8IJMF3FWBMJEBUF 'BTUFTU
Ωϟογϡ͕͋Δ߹ΩϟογϡΛར༻͠ɺωοτϫʔΫऔಘޙɺཪଆͰ
ΩϟογϡΛߋ৽͢Δɻ
ߋ৽ͷ͍ϦιʔεɺΞάϨογϒͳΩϟογϡʹ༗ޮɻ
Slide 98
Slide 98 text
{
runtimeCaching: [
{
urlPattern: /\/_api\/.*/, // Data from API
handler: 'staleWhileRevalidate',
},
{
// Images in articles
urlPattern: /^https:\/\/.*stat\.ameba\.jp\/user_images\/.*/,
handler: ‘cacheFirst',
options: {
cache: { maxEntries: 100 },
},
}
]
}
3VOUJNF$BDIF
Slide 99
Slide 99 text
/FUXPSL$POTVNQUJPO
Y$IFBQFS
,
Slide 100
Slide 100 text
(P:BLJOJLV
Slide 101
Slide 101 text
0⒐JOF/PUJpDBUJPO
ΦϯϥΠϯΦϑϥΠϯͷมԽ࣌
ϊςΟϑΟέʔγϣϯΛදࣔ
POMJOFP⒐JOFΠϕϯτ
OBWJHBUPSPO-JOFϓϩύςΟ
Slide 102
Slide 102 text
0⒐JOF/PUJpDBUJPO
window.addEventListener('online', handleOnlineStatus, false);
window.addEventListener('offline', handleOnlineStatus, false);
const handleOnlineStatus = () => {
const online = window.navigator.onLine;
if (online) {
hideFloatingNotification();
} else {
showFloatingNotification(‘ΠϯλʔωοτʹଓͰ͖·ͤΜɻ’)
}
};
Slide 103
Slide 103 text
0⒐JOF"WBJMBCJMJUZ
ΦϑϥΠϯͰهࣄ͕ಡΊΔ
4FSWJDF8PSLFSͰهࣄʹඞཁͳ
ΞηοτΛϓϨΩϟογϡ
ϥϯλΠϜΩϟογϡ
Slide 104
Slide 104 text
0⒐JOF"WBJMBCJMJUZ
هࣄʹඞཁͳΞηοτɿ
"QQ4IFMM
هࣄσʔλ "1*
هࣄը૾
Slide 105
Slide 105 text
"QQ4IFMM
ϖʔδʹඞཁͳ࠷ݶͷΞηοτ
ݱ࣌ͷ"NFCBͰɺ41"Ϟʔυ
ͱಉ
/BWJHBUJPO'BMMCBDLʹઃఆ
Slide 106
Slide 106 text
8FC"QQ.BOJGFTU
8FCΞϓϦͷϝλσʔλΛهड़
ϗʔϜը໘͔Βͷىಈ࣌ʹར༻͞ΕΔ
Slide 107
Slide 107 text
{
"short_name": "ca-seo",
"name": "Ameba",
"icons": [{
“src": “https://c.stat100.ameba.jp/img/sp/web-app-icon.png",
"type": "image/png",
"sizes": "192x192"
}],
"start_url": "/ca-seo?precache=1&utm_medium=direct&utm_source=homescreen",
"background_color": "#efefef",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#efefef"
}
8FC"QQ.BOJGFTU
Slide 108
Slide 108 text
"QQ*OTUBMM#BOOFST
ඞਢ݅ มߋͷՄೳੑ͋Γ
ɿ
TIPSU@OBNF
OBNF
TUBSU@VSM
4FSWJDF8PSLFS
)5514
YҎ্ͷQOHΞΠίϯ
Slide 109
Slide 109 text
"QQ*OTUBMM#BOOFST
CFGPSFJOTUBMMQSPNQUΠϕϯτͰΠϯετʔϧόφʔΛ
ίϯτϩʔϧͰ͖Δ
όφʔදࣔલΩϟϯηϧड͚ೖΕ
ݱࡏɺ"NFCBͰόφʔඇදࣔʹ͍ͯ͠Δ ࢼݧதͷͨΊ
Slide 110
Slide 110 text
"QQ*OTUBMM#BOOFST
var deferredPrompt;
window.addEventListener(‘beforeinstallprompt', (e) => {
e.preventDefault(); // ϓϩϯϓτͷදࣔΛઌૹΓ͢Δ
deferredPrompt = e;
return false;
});
btnSave.addEventListener('click', () => {
if (deferredPrompt !== undefined) {
deferredPrompt.prompt(); // ϓϩϯϓτΛදࣔ
deferredPrompt.userChoice.then((choiceResult) => {
console.log(choiceResult.outcome); // dismissed or accepted
});
}
});
Slide 111
Slide 111 text
IUUQTHPPHM)$SP;
ΣϒΞϓϦͷΠϯετʔϧόφʔ
Slide 112
Slide 112 text
OBWJHBUPSHFU*OTUBMMFE3FMBUFE"QQT
ϒϥβ͔ΒΞϓϦͷΠϯετʔϧΛ֬ೝ͢Δ
ʮΞϓϦ͕Πϯετʔϧ͞Ε͍ͯͨΒɺ"QQ*OTUBMM#BOOFS
ग़͞ͳ͍ʯ࣮͕Ͱ͖Δ
ΞϓϦͷ࣮গ͠ඞཁ
$ISPNFͰ0SJHJO5SJBMத
Slide 113
Slide 113 text
[{
\"relation\": [\”delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \”web\",
\"site\": \”https://ameblo.jp"
}
}]
OBWJHBUPSHFU*OTUBMMFE3FMBUFE"QQT
"OESPJEͷ࣮
Slide 114
Slide 114 text
// manifest.json
{
...
"related_applications": [{
"platform": "play",
"id": “jp.ameba”
}],
...
}
// Your code
if (navigator.getInstalledRelatedApps) {
navigator.getInstalledRelatedApps().then(relatedApps => {
console.log(relatedApps.length); // 0: not installed
});
}
OBWJHBUPSHFU*OTUBMMFE3FMBUFE"QQT
8FCͷ࣮
Slide 115
Slide 115 text
IUUQTHPPHM$%IB
%FUFDUJGZPVS/BUJWFBQQJTJOTUBMMFE
GSPNZPVSXFCTJUF
Slide 116
Slide 116 text
"NFCB18" #FUB
"EEUP)PNFTDSFFO͔Β
͓ࢼ͍͚ͨͩ͠·͢
Slide 117
Slide 117 text
/FYU.JMFTUPOFT
$%/4USBUFHZ6QEBUFT
*NBHF0QUJNJ[BUJPO
)551
.PSF18"
J1IPOF9FUDʜ
Slide 118
Slide 118 text
!IFSBCMPH