“モダン”ウェブアプリケーション〜アメブロ5ヶ年計画〜

ʠϞμϯʡ΢ΣϒΞϓϦέʔγϣϯ ʙΞϝϒϩϲ೥ܭըʙ )5.-$POGFSFODF ݪҰ੒!IFSBCMPH

Ξϝʔόϒϩά ೥։࢝ͷϒϩάαʔϏε ܳೳਓͷར༻͕ଟ͍ ܳೳਓҎ֎ͱͦΕҎ֎ͷ17͸൒ʑ

όοΫΤϯυγεςϜͷ࡮৽ *TPNPSQIJD+BWB4DSJQU ".1 IUUQT $PEFTQMJUUJOH /PEFKTW 3FBDU
18"

೥͔͚ͯʠϞμϯʡͳঢ়ଶʹ͢Δ

ʠϞμϯʡͰ͋Δ͜ͱ ΤίγεςϜͱͭͳ͕͍ͬͯΔ͜ͱ

ʠϞμϯʡͰ͋Δ͜ͱ ΤίγεςϜ͔ΒͷԸܙ ΤϯδχΞͷྲྀಈੑ ! "

ΤίγεςϜ͔ΒͷԸܙ ࠷৽ٕज़ΛऔΓࠐΈ΍͍͢ ੈքதͷΤϯδχΞͱڠྗͰ͖Δ !

ΤϯδχΞͷྲྀಈੑ एऀͷࢀՃΛଅ͠΍͍͢ ଐਓԽΛ๷͗΍͍͢ "

443ͱ41" 4FSWFS $MJFOU Database Services Presentation Logic Data Services DAO
Rendering

443ͱ41" 4FSWFS $MJFOU Database Services Presentation Logic Data Services DAO

443ͱ41" ॳظද͕ࣔ͸΍͍ ϖʔδભҠ͸஗Ί ϖʔδભҠ͕͸΍͍ ॳظදࣔ͸஗Ί 443 41"

IUUQTHPPHM,4-L 3FOEFSJOHPO(PPHMF4FBSDI

*TPNPSQIJD+BWB4DSJQU IUUQTHPPHMZ-[/

6OJWFSTBM+BWB4DSJQU IUUQTHPPHMYBL9"

*TPNPSQIJD+BWB4DSJQU ೥ɺΞϝϒϩͷγεςϜ࡮৽ 4FSWFS $MJFOU Database Services Presentation Logic Data Services
DAO Browser

*TPNPSQIJD+BWB4DSJQU 1SPT %BUBͱ6*ͷ੹຿Λ෼཭Ͱ͖Δ 6*͸ಉ͡ΤϯδχΞ͕ίϯτϩʔϧͰ͖Δ ॳظɾϥϯλΠϜ྆ํͷදࣔ଎౓ΛվળͰ͖Δ

*TPNPSQIJD+BWB4DSJQU ෳࡶ͕͞গ͠૿͢ ಛʹ443ͱ41"੾Ε໨ /PEFKTͷӡ༻࣮੷͕ඞཁ ͋Δͱྑ͍ શΞϓϦʹ޲͔ͳ͍ ࢀরܥʹ޲͘ $POT

*OJUJBM4QFFEXJUI443BOE41" Y'BTUFS

3VOUJNF4QFFEXJUI443BOE41" Y'BTUFS

*TPNPSQIJD+BWB4DSJQU ೥ɺΞϝϒϩͷγεςϜ࡮৽ 4FSWFS $MJFOU Database Services Presentation Logic Data Services
DAO Browser

3FBDU 3FOEFSJOH 5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU ίϯϙʔωϯτࢦ޲ αʔόʔɺΫϥΠΞϯτ྆ํͷϨϯμϦϯά ϥΠϑαΠΫϧϝιουͰ*TPNPSQIJDʹ͠΍͍͢

export class SampleComponent extends React.Component { componentWillMount() {} // αʔό༻ɻconstructorΛ࢖͏ͷ͕ਪ঑
componentDidMount() {} // ΫϥΠΞϯτ༻ɻॳճͷදࣔ࣌ componentDidUpdate() {} // ΫϥΠΞϯτ༻ɻSPAͷભҠ࣌ʹ࢖ΘΕΔ͜ͱ͕ଟ͍ componentWillUnmount() {} // ΫϥΠΞϯτ༻ɻλΠϚʔॲཧΛফ͢ͳͲ render() {} //αʔόαΠυɺΫϥΠΞϯταΠυ྆ํ } 3FBDU 3FOEFSJOH 5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU

3FEVY 4UBUFDPOUBJOFS 5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU 'MVYϕʔεͷঢ়ଶ؅ཧͷͨΊͷϑϨʔϜϫʔΫ ؔ਺ϕʔεͰ*TPNPSQIJD͠΍͍͢ ෭࡞༻ͳͲᐆດͳͱ͜Ζ͸ެࣜαΠτͷਪ঑ʹ߹ΘͤΔ

IUUQTHPPHMFT23T, )PXDBO*SFQSFTFOUʠTJEFF⒎FDUTʡ TVDIBT"+"9DBMMT

'FUDI"1* 'FUDIS 'FUDIJOH 5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU σʔλͷऔಘ͸ 'FUDI"1* CJUJOOOPEFGFUDI HJUIVCGFUDI 'FUDIS
ZBIPPGFUDIS Ͱ*TPNPQSIJDԽ

3FBDU3PVUFS 3PVUJOH 5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU ֤QBUI͝ͱʹରԠ͢ΔίϯϙʔωϯτΛݺͼग़͠ αʔόʔͰ͸ɺΤϥʔɾϦμΠϨΫτॲཧ ΫϥΠΞϯτͰ͸ɺώετϦʔɾεΫϩʔϧҐஔ؅ཧ ͳͲ͕ඞཁ

/PEFKT 8FCTFSWFS 5IF1BSUTPG*TPNPSQIJD+BWB4DSJQU *TPNPSQIJD͸/PEFKTͷਐԽɾ҆ఆͷࣀ෺ %PDLFSར༻͍ͯ͠ΔͨΊɺόʔδϣϯΞοϓ͸؆୯ جຊతʹ࠷৽൛Λར༻͢ΔΑ͏ʹ͍ͯ͠Δ

3FOFXBM1PMJDZ Ͱ͖Δ͚ͩʮελϯμʔυʯͳπʔϧΛ࢖͏ ࡞ͬͯ͸յ͢Λ܁Γฦ͢ ڞ௨Խɾ࠷దԽ͸࠷ऴஈ֊Ͱ͓͜ͳ͏ ͦͷ୅ΘΓɺύʔπΛ؆୯ʹऔΓআ͚ΔΑ͏ʹ͓ͯ͘͠

❝ૣ͗͢Δ࠷దԽ͸ॾѱͷࠜݯͰ͋Δ❞ %POBME,OVUI

IUUQTHPPHM2R#9 Ξϝϒϩ3FBDU3FEVYͰͭ͘Δ *TPNPSQIJDXFCBQQ IUUQTHPPHM(ZP;I ΞϝϒϩͰ3FBDU΍*TPNPSQIJD8FC"QQ Λ࠾༻ͨ͠ཧ༝ʕʕͦͷ੒Ռͱߏ੒ٕज़ IUUQTHPPHMY)EO Ξϝϒϩͷେن໛γεςϜ࡮৽ͱ ͦΕΛࢧ͑Δ4QSJOH

$BDIFT ߴෛՙͳαʔϏε΍ϋΠύϑΥʔϚϯεΛٻΊΔ৔߹ɺ αʔόʔαΠυͷΩϟογϡ͸ඞਢ Ξϝϒϩ͸ϒϩάαʔϏεͳͷͰΩϟογϡͱ૬ੑ͕ྑ͍

5FNQMBUF$BDIFT # $ % + ' SFOEFS5P4USJOH $MJFOU*OGP )5.- $BDIF

"1*$BDIFT ࠷ॳ͸ϘτϧωοΫʹͳΔ)5.-ͷΩϟογϡͷΈ "1*ʹ΋ద੾ʹΩϟογϡΛઃఆ

$BDIFT Y'BTUFS

$PEF4QMJUUJOH +BWB4DSJQUͷධՁ࣌ؒΛ୹ॖ͢ΔͨΊ NBJOKTͷތେԽΛ๷͙ͨΊ ͍͔ͭ͸ϑϧ41"ʹ͢Δ͔΋͠Εͳ͍ͨΊ

1FSGPSNBODF.FUSJDT

IUUQTHPPHM8B6-[T -FWFSBHJOHUIF1FSGPSNBODF.FUSJDT UIBU.PTU"⒎FDU6TFS&YQFSJFODF

8FCQBDL %ZOBNJD*NQPSUT %ZOBNJD*NQPSUTΛར༻ IUUQTHPPHM'XY "NFCBͰ͸"UPNJD%FTJHOͷ 0SHBOJTNT୯ҐͰ෼ׂ ࠓ͸ () => import(‘./organisms/Header.js’);

+BWB4DSJQUධՁ࣌ؒ Y'BTUFS

3FBDU 3FBDU'JCFS Y'BTUFS3FBDU #FUB WT

IUUQTHPPHM$Q⒎ Ξϝϒϩ*TPNQSIJDΞϓϦέʔγϣϯͷ ύϑΥʔϚϯεɾνϡʔχϯά IUUQTHPPHM8GZ5Q Ξϝϒϩ *TPNPSQIJD8FC"QQͷਐԽฤ

.POJUPSJOH ܧଓతʹϞχλϦϯάͰ͖Δ ඞཁʹԠͯ͡ϑΟʔυόοΫ Ξϥʔτ ΛઃఆͰ͖Δ "NFCBͰ͸શͯ4MBDLʹ௨஌͕དྷΔΑ͏ʹ͍ͯ͠Δ

αʔόʔΞϓϦέʔγϣϯͷ ϨεϙϯελΠϜΛϞχλϦϯά ϘτϧωοΫΛൃݟ͢Δ

ΞϓϦέʔγϣϯͷঢ়ଶΛ ϞχλϦϯά͢Δ ΧελϚΠζ༷ͯ͠ʑͳ .FUSJDTΛ࡞ΕΔ

4QFFE$VSWF ܧଓతʹύϑΥʔϚϯεܭଌ ຖ೔ܭଌɾ4MBDL௨஌ σϓϩΠ͝ͱʹܭଌɾ4MBDL௨஌

උ͑෇͚ͷϖʔδεϐʔυͷଞɺ ύϑΥʔϚϯε஋Λૹ৴ͯ͠෼ੳ 4QFFE*OEFY 810'PVOEBUJPO36.4QFFE*OEFY XJOEPXQFSGPSNBODF pSTUQBJOU pSTUDPOUFOUGVM
QBJOU

IUUQTHPPHMIGD[ 8FCύϑΥʔϚϯεͱϓϩμΫτ,1*ͷ૬ؔΛ ՄࢹԽ͢Δ࿩

)5514 )ZQFS5FYU5SBOTGFS1SPUPDPM4FDVSF ೥Նɺ͍ͭʹΞϝϒϩެ։໘ͷ)5514഑৴͕׬ྃ ηΩϡϦςΟ 4&0 4FSWJDF8PSLFSͳͲͷ৽ػೳར༻ ؍఺͔Β)5514Ͱͷ഑৴͸ඞਢ

$413FQPSU $POUFOU4FDVSJUZ1PMJDZ ϙϦγʔΛఆٛ͠ɺҧ൓ϦιʔεΛ ࣗಈతʹϨϙʔτ Ϩϙʔτઌ͸IUUQTSFQPSUVSJJP Λར༻

$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

$413FQPSU $POUFOU4FDVSJUZ1PMJDZ

)454 )5514USJDU5SBOTQPSU4FDVSJUZ )551ͷ୅ΘΓʹ)5514Λ࢖͏Α͏ 8FCϖʔδ͔Βϒϥ΢βʹ఻ୡ ঃʑʹظؒΛ޿͍͛ͯͬͨ Strict-Transport-Security: max-age=expireTimeSeconds

3FEJSFDU )454Ͱ໰୊͕ͳ͍͔֬ೝޙɺ IUUQ΁ͷΞΫηεΛIUUQT΁ڧ੍ϦμΠϨΫτ ߃ٱత ͰϦμΠϨΫτ͢Δ

)FBEFST .JYFE$POUFOUTΛ๷͙ͨΊʹ͸ɺҎԼͷϔομʔ͕༗ޮ 6QHSBEF*OTFDVSF3FRVFTUT ϒϥ΢β͸IUUQͷϦιʔεΛൃݟ͢ΔͱIUUQTʹม׵ͯ͠ϦΫΤετɻIUUQT ະରԠͷ৔߹͸ɺʹͳΔɻ #MPDL"MM.JYFE$POUFOU ϒϥ΢β͸ɺIUUQͷϦιʔεΛৗʹಡΈࠐ·ͳ͍Α͏ʹ͢Δɻ

3FGFSSFS1PMJDZ 63-ʹ͸ػີ৘ใؚ͕·Ε͍ͯΔ৔߹͕͋ΔͨΊɺ ηΩϡΞͰͳ͍ϖʔδ΁ͷϦΫΤετ࣌ʹϦϑΝϥ͸ແޮ "NFCBͰ͸ʮPSJHJOʯΛબ୒த <meta name="referrer" content="origin">

IUUQTHPPHM/H4EH Ξϝϒϩେن໛αʔϏεIUUQTԽ ʙ"MM(SFFOΛ໨ࢦͯ͠ʙ

".1 "DDFMFSBUFE.PCJMF1BHFT1SPKFDU 8FCදࣔ଎౓վળͷϓϩδΣΫτ ϗϫΠτϦετԽ͞Εͨ)5.- +4 $44͸IFBE಺ʹهड़ ݕࡧ݁Ռͱ".1ΧϧʔηϧʹࡌΔ

".1BU"NFCB Y4FTTJPOTGSPN.BSDI

".14QJLF ".1Χϧʔηϧ͔ΒͷಥൃతͳΞΫηε૿ ීஈͷݕࡧͱ͸ҧͬͨྲྀೖΛಘΒΕΔ ͋Δϒϩάͷ".1ϖʔδͷϖʔδϏϡʔਪҠ

".11FSGPSNBODF ࠷৽ٕज़ͷར༻ʹΑΓɺ҆ఆͨ͠ύϑΥʔϚϯε Ұ෦ϖʔδɺҰ෦ػೳͳͲஈ֊తʹಋೖ͢Δͷ΋͋Γ ΦϦδφϧαΠτͰ".1ͱಉ༷ͷύϑΥʔϚϯεΛ ୲อͰ͖Δ৔߹͸ɺར༻͠ͳ͍͍͔ͯ͘΋

BNQMJTU -B[Z-PBEXJUIBNQMJTU 9)3ͯ͠σʔλΛऔಘ NVTUBDIFͰςϯϓϨʔτهड़ -B[Z-PBEΛ؆୯ʹ࣮૷Ͱ͖Δ ݫີͳ$034ϧʔϧ

<amp-list layout=“fixed-height" height=“105" width="auto" src=“https://gamp.ameblo.jp/_api/recent-images” > <div fallback>σʔλ͕औಘͰ͖·ͤΜͰͨ͠ɻ</div> <template type="amp-mustache">
<amp-carousel height=“100" controls> {{#data}} <div> <p>{{entry_title}}</p> </div> {{/data}} </amp-carousel> </template> </amp-list> BNQMJTU -B[Z-PBEXJUIBNQMJTU

IUUQTHPPHM;%K "DUJPOTBOE&WFOUTJO".1 IUUQTHPPHM-KBQ $0343FRVFTUTJO".1

BNQCJOE "VUP4VHHFTUJPO4FBSDI#BSXJUIBNQCJOE BNQTUBUFͰॳظঢ়ଶΛઃఆ JOQVUೖྗʹԠͯ͡".1TFU4UBUF Ͱঢ়ଶΛߋ৽ BNQMJTUͰਪન݁ՌΛ࠶औಘ

BNQCJOE "VUP4VHHFTUJPO4FBSDI#BSXJUIBNQCJOE <amp-state id="searchState"> <script type="application/json"> { "autosuggest" : ""
} </script> </amp-state> <input class="search-bar__input" type="search" name="q" placeholder="ϒϩάΛݕࡧ" tabindex="0" on=“input-debounced:AMP.setState( { searchState: { autosuggest: event.value }})” />

BNQCJOE "VUP4VHHFTUJPO4FBSDI#BSXJUIBNQCJOE <amp-list layout="fixed-height" src="https://gamp.ameblo.jp/_api/autosuggest?limit=5&q=" [src]="'https://gamp.ameblo.jp/_api/autosuggest?limit=5&q=' + searchState.autosuggest" items=“." height=“225"
width="auto" > <template type="amp-mustache"> <a href="https://search.ameba.jp/search.html?q={{.}}">{{.}}</a> </template> </amp-list>

BNQGPSN -JLFBDUJPOTXJUIBNQGPSNBOEBNQCJOE BNQTUBUFͰॳظঢ়ଶΛऔಘ ϘλϯλοϓͰঢ়ଶΛ൓ө ϙοϓΞοϓ಺ͷϘλϯλοϓ͸ BNQGPSNͰ"1*ʹσʔλૹ৴

<amp-state id=“iineState” credentials="include" src=“https://iine.ameba.jp/web/display_iine.json > </amp-state> <button on="tap:iine-lightbox,AMP.setState({iineState: iineState})” >͍͍Ͷʂ</button>
<amp-lightbox id=“iine-lightbox” layout=“nodisplay”> <!— contents —> <button on=“tap:iine-lightbox.close”>Close</button> <amp-lightbox> BNQGPSN -JLFBDUJPOTXJUIBNQGPSNBOEBNQCJOE

<amp-lightbox id=“iine-lightbox” layout=“nodisplay”> <form method=“post" target=“_top” action-xhr=“https://iine.ameba.jp/web/exec_iine.json” on="submit-success:AMP.setState({iineState: {exist: true}})"
[class]="!iineState.exist ? 'visible' : 'hidden'" >͍͍Ͷʂ͢Δ</form> <form method=“post" target=“_top” action-xhr=“https://iine.ameba.jp/web/cancel_iine.json” on="submit-success:AMP.setState({iineState: {exist: false}})" [class]="iineState.exist ? 'visible' : 'hidden'" >͍͍ͶʂΛΩϟϯηϧ͢Δ</form> <amp-lightbox> BNQGPSN -JLFBDUJPOTXJUIBNQGPSNBOEBNQCJOE

BNQJOTUBMMTFSWJDFXPSLFS *OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS

<amp-install-serviceworker src=“https://gamp.ameblo.jp/service-worker.js" data-iframe-src=“https://ameblo.jp/_static/install-service-worker.html” layout=“nodisplay" ></amp-install-serviceworker> BNQJOTUBMMTFSWJDFXPSLFS *OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS

*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS ".1UP18" ॳظද͕ࣔ͸΍͍ ੩త ੍ݶ͞Εͨػೳ ϑϧػೳ͕࢖͑Δ ಈత ॳظදࣔ͸஗Ί ".1 18"

*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS ".1UP18" ".1 ( 18" ) * * * BNQJOTUBMMTFSWJDFXPSLFS
/BWJHBUFUP18"

*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS ".1XJUI18" ॳظද͕ࣔ͸΍͍ ੩త ੍ݶ͞Εͨػೳ ϑϧػೳ͕࢖͑Δ ಈత ॳظදࣔ͸஗Ί ".1 18"
ॳظද͕ࣔ͸΍͍ ϑϧػೳ͕࢖͑Δ ಈత *TPNPSQIJD

*OTUBMM4FSWJDF8PSLFSTXJUIBNQJOTUBMMTFSWJDFXPSLFS ".1XJUI18" ".1 ( *TPNPSQIJD ) * * * BNQJOTUBMMTFSWJDFXPSLFS
-JOLUP0SJHJOBM4JUF

18" 1SPHSFTTJWF8FC"QQ 8FCͷϢʔβʔΤΫεϖϦΤϯε /BUJWFͱ8FCͷ͍͍ͱ͜औΓΛ໨ࢦ͢ 3FMJBCMF 'BTU &OHBHJOH

*NBHF-JHIUCPY /BUJWF-JLF*NBHF-JHIUCPY ωΠςΟϒͷΑ͏ͳը૾MJHIUCPY εϜʔζʹը૾ΛӾཡͰ͖Δ EJNTFNFOPW1IPUP4XJQFΛར༻

"SUJDMF4FMFDUPS /BUJWF-JLF"SUJDMF4FMFDUPS هࣄιʔτػೳ ϞʔμϧදࣔͰ༷ʑͳιʔτΛ࣮ݱ

4FSWJDF8PSLFS 8FCϖʔδͱ͸ผʹόοΫάϥ΢ϯυͰಈ࡞͢ΔεΫϦϓτ 'FUDI $BDIF 1VTI #BDLHSPVOETZODʜ ϥΠϑαΠΫϧͷཧղ͕ॏཁ

4FSWJDF8PSLFS-JGFDZDMF είʔϓ಺ͷϖʔδ͕ಉ͡4FSWJDF8PSLFSͰ੍ޚ Ͱ͖ΔΑ͏ʹ͢Δ $ISPNFͷΞοϓσʔτʹࣅ͍ͯΔ

4FSWJDF8PSLFS-JGFDZDMF *OTUBMM + * * "DUJWBUF 8BJUJOH

4FSWJDF8PSLFS-JGFDZDMF *OTUBMM * * "DUJWBUF + 8BJUJOH

4FSWJDF8PSLFS-JGFDZDMF *OTUBMM * * "DUJWBUF + * 'FUDI$BDIF 8BJUJOH

4FSWJDF8PSLFS-JGFDZDMF *OTUBMM + * * "DUJWBUF + 8BJUJOH

4FSWJDF8PSLFS-JGFDZDMF *OTUBMM * + * "DUJWBUF + 8BJUJOH

4FSWJDF8PSLFS-JGFDZDMF *OTUBMM * 8BJUJOH * "DUJWBUF + * 'FUDI$BDIF

IUUQTHPPHM:,;N1, 4FSWJDF8PSLFSͷϥΠϑαΠΫϧ

1SFDBDIF 4FSWJDF8PSLFSͰΞηοτΛϓϨΩϟογϡ (PPHMF$ISPNF8PSLCPYΛར༻ 8FCQBDLϓϩηεʹ૊ΈࠐΈ औಘޙ͸ɺ࠶౓ωοτϫʔΫϦΫΤετ͠ͳ͍

self.AMEBLO_CDN = 'https://c.stat100.ameba.jp'; importScripts('https://c.stat100.ameba.jp/ameblo/assets/sp/ 20170914-3b91bd8/service-worker.js'); 1SFDBDIF ΫϩευϝΠϯରԠ

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 ΫϩευϝΠϯରԠ

1SFDBDIF

3VOUJNF$BDIF هࣄʹؔ࿈͢ΔϦιʔεΛΩϟογϡ FHը૾ هࣄσʔλ (PPHMF$ISPNF8PSLCPYΛར༻

3VOUJNF$BDIF4USBUFHZ $BDIF'JSTU Ұ౓Ωϟογϡͨ͠Βɺ࠶౓ωοτϫʔΫϦΫΤετ͠ͳ͍ɻ όʔδϣϯ෇͖ͷϦιʔεʹ༗ޮɻ /FUXPSL'JSTU ৗʹωοτϫʔΫΛ༏ઌ͢ΔɻऔಘͰ͖ͳ͔ͬͨ৔߹ͷΈΩϟογϡΛར༻ɻ "1*σʔλͳͲɺߋ৽ස౓͕ߴ͍΋ͷʹ༗ޮɻ

3VOUJNF$BDIF4USBUFHZ 4UBMF8IJMF3FWBMJEBUF 'BTUFTU Ωϟογϡ͕͋Δ৔߹͸ΩϟογϡΛར༻͠ɺωοτϫʔΫऔಘޙɺཪଆͰ ΩϟογϡΛߋ৽͢Δɻ ߋ৽౓ͷ௿͍ϦιʔεɺΞάϨογϒͳΩϟογϡʹ༗ޮɻ

{ 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

/FUXPSL$POTVNQUJPO Y$IFBQFS ,

(P:BLJOJLV

0⒐JOF/PUJpDBUJPO ΦϯϥΠϯΦϑϥΠϯͷมԽ࣌ ϊςΟϑΟέʔγϣϯΛදࣔ POMJOFP⒐JOFΠϕϯτ OBWJHBUPSPO-JOFϓϩύςΟ

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(‘Πϯλʔωοτʹ઀ଓͰ͖·ͤΜɻ’) } };

0⒐JOF"WBJMBCJMJUZ ΦϑϥΠϯͰ΋هࣄ͕ಡΊΔ 4FSWJDF8PSLFSͰهࣄʹඞཁͳ ΞηοτΛϓϨΩϟογϡ ϥϯλΠϜΩϟογϡ

0⒐JOF"WBJMBCJMJUZ هࣄʹඞཁͳΞηοτɿ "QQ4IFMM هࣄσʔλ "1* هࣄ಺ը૾

"QQ4IFMM ϖʔδʹඞཁͳ࠷௿ݶͷΞηοτ ݱ࣌఺ͷ"NFCBͰ͸ɺ41"Ϟʔυ ͱಉ౳ /BWJHBUJPO'BMMCBDLʹઃఆ

8FC"QQ.BOJGFTU 8FCΞϓϦͷϝλσʔλΛهड़ ϗʔϜը໘͔Βͷىಈ࣌ʹར༻͞ΕΔ

{ "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

"QQ*OTUBMM#BOOFST ඞਢ৚݅ มߋͷՄೳੑ͋Γ ɿ TIPSU@OBNF OBNF TUBSU@VSM 4FSWJDF8PSLFS )5514
YҎ্ͷQOHΞΠίϯ

"QQ*OTUBMM#BOOFST CFGPSFJOTUBMMQSPNQUΠϕϯτͰΠϯετʔϧόφʔΛ ίϯτϩʔϧͰ͖Δ όφʔදࣔ௚લΩϟϯηϧड͚ೖΕ ݱࡏɺ"NFCBͰ͸όφʔඇදࣔʹ͍ͯ͠Δ ࢼݧதͷͨΊ

"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 }); } });

IUUQTHPPHM)$SP; ΢ΣϒΞϓϦͷΠϯετʔϧόφʔ

OBWJHBUPSHFU*OTUBMMFE3FMBUFE"QQT ϒϥ΢β͔ΒΞϓϦͷΠϯετʔϧΛ֬ೝ͢Δ ʮΞϓϦ͕Πϯετʔϧ͞Ε͍ͯͨΒɺ"QQ*OTUBMM#BOOFS ग़͞ͳ͍ʯ࣮૷͕Ͱ͖Δ ΞϓϦͷ࣮૷΋গ͠ඞཁ $ISPNFͰ0SJHJO5SJBMத

<!— AndroidManifest.xml —> <meta-data android:name="asset_statements" android:resource="@string/ asset_statements" /> <!— strings.xml
—> <string name=“asset_statements"> [{ \"relation\": [\”delegate_permission/common.handle_all_urls\"], \"target\": { \"namespace\": \”web\", \"site\": \”https://ameblo.jp" } }] </string> OBWJHBUPSHFU*OTUBMMFE3FMBUFE"QQT "OESPJEͷ࣮૷

// 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ͷ࣮૷

IUUQTHPPHM$%IB %FUFDUJGZPVS/BUJWFBQQJTJOTUBMMFE GSPNZPVSXFCTJUF

"NFCB18" #FUB "EEUP)PNFTDSFFO͔Β ͓ࢼ͍͚ͨͩ͠·͢

/FYU.JMFTUPOFT $%/4USBUFHZ6QEBUFT *NBHF0QUJNJ[BUJPO )551 .PSF18" J1IPOF9FUDʜ

!IFSBCMPH

“モダン”ウェブアプリケーション 〜アメブロ5ヶ年計画〜

“モダン”ウェブアプリケーション 〜アメブロ5ヶ年計画〜

More Decks by Kazunari Hara

Other Decks in Technology

Featured

Transcript

“モダン”ウェブアプリケーション〜アメブロ5ヶ年計画〜

“モダン”ウェブアプリケーション〜アメブロ5ヶ年計画〜