Slide 1

Slide 1 text

$ISPNFσϕϩούʔπʔϧΛ ࣗ෼৭ʹછΊΔ !KVNQFJ@JLFHBNJ   !8F"SF+BWB4DSJQUFST!UI

Slide 2

Slide 2 text

ࣗݾ঺հ w !KVNQFJ@JLFHBNJ w ݩ$0#0-FS!෋࢜௨ w גࣜձࣾϓϨΠυ$9&OHJOFFS w /PEFKT 7VFKT w ϙουΩϟελʔʢʮ͕͠ͳ͍ϥδΦʯύʔιφϦςΟʣ w ޷͖ͳϒΩ͸ɺʮϓϩϞσϥʔ.(ʯ

Slide 3

Slide 3 text

ࣗݾ঺հ w !KVNQFJ@JLFHBNJ w ݩ$0#0-FS!෋࢜௨ w גࣜձࣾϓϨΠυ$9&OHJOFFS w /PEFKT 7VFKT w ϙουΩϟελʔʢʮ͕͠ͳ͍ϥδΦʯύʔιφϦςΟʣ w ޷͖ͳϒΩ͸ɺʮϓϩϞσϥʔ.(ʯ

Slide 4

Slide 4 text

ࠓ೔͢Δ࿩

Slide 5

Slide 5 text

$ISPNFσϕϩούʔπʔϧ֦ு ָ͍͠Αʂ

Slide 6

Slide 6 text

$ISPNFσϕϩούʔπʔϧͱ͸

Slide 7

Slide 7 text

͜Ε

Slide 8

Slide 8 text

σϕϩούʔπʔϧͰΑ͘΍Δ͜ͱ w &MFNFOUTλϒ w %0.ΛݟΔ

Slide 9

Slide 9 text

σϕϩούʔπʔϧͰΑ͘΍Δ͜ͱ w $POTPMFλϒ w +4Λ࣮ߦ

Slide 10

Slide 10 text

σϕϩούʔπʔϧͰΑ͘΍Δ͜ͱ w /FUXPSLλϒ w ϦΫΤετͷத਎ΛݟΔ

Slide 11

Slide 11 text

ΊͬͪΌศརʂ

Slide 12

Slide 12 text

͔͠͠ɺ

Slide 13

Slide 13 text

ͭΒΈ ࣗ෼͕୳͍ͯ͠Δ৘ใʹ ͨͲΓͭ͘ͷ͕େม ಛʹɺ/FUXPSLλϒͭΒ͍

Slide 14

Slide 14 text

ཧ૝ ࣗ෼͕ݟ͍ͨ৘ใ͚ͩΛ ࣗ෼͕ݟ͍ͨܗࣜͰ ද͍ࣔͨ͠

Slide 15

Slide 15 text

֦ ு ͦ ͏ ͩ ɺ ɻ ͠ Α ͏

Slide 16

Slide 16 text

$ISPNFσϕϩούʔπʔϧ֦ுྫ

Slide 17

Slide 17 text

7VFKTEFWUPPMT w 7VFͷ$PNQPOFOUΛՄࢹԽ

Slide 18

Slide 18 text

,"35&"DUJPO7JFXFS w ,"35&ͷτϥοΩϯάσʔλΛՄࢹԽ w ࢓ࣄͰ7VFKT࢖ͬͯॻ͍ͨ

Slide 19

Slide 19 text

8FC5PPMT%FUFDUPS w ࠓճͷษڧձͷͨΊʹॻ͍ͨ w ͜͜ͰσϞ

Slide 20

Slide 20 text

$ISPNF֦ுͷ֓೦ਤ

Slide 21

Slide 21 text

$ISPNF֦ுͷ֓೦ਤ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $POUFOUTDSJQUT #BDLHSPVOEQBHF %FW5PPMTQBHF 1BOFM 1BOFM ɾɾɾ

Slide 22

Slide 22 text

#BDLHSPVOEQBHF %FWUPPMTQBHF 1BOFM 1BOFM ɾɾɾ $POUFOUTDSJQUT wର৅ϖʔδͷ%0.΍%0.Πϕϯτʹ ΞΫηεͰ͖Δ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $ISPNF֦ுͷ֓೦ਤ

Slide 23

Slide 23 text

$POUFOUTDSJQUT %FWUPPMTQBHF 1BOFM 1BOFM ɾɾɾ #BDLHSPVOEQBHF w$POUFOUTDSJQUTͱ%FW5PPMTQBHFͷ ڮ౉͠Λ͢Δ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $ISPNF֦ுͷ֓೦ਤ

Slide 24

Slide 24 text

#BDLHSPVOEQBHF $POUFOUTDSJQUT %FWUPPMTQBHF 1BOFM 1BOFM ɾɾɾ w%FW5PPMT"1*ʹΞΫηεͰ͖Δ ʢ/FUXPSLΛ؂ࢹͨ͠Γʣ w1BOFM λϒ Λෳ਺΋ͭ ࢀߟIUUQTEFWFMPQFSDISPNFDPNFYUFOTJPOTEFWUPPMT $ISPNF֦ுͷ֓೦ਤ

Slide 25

Slide 25 text

ॳΊͯͷ $ISPNF%FW5PPMT֦ு

Slide 26

Slide 26 text

࠷খϑΝΠϧߏ੒  NBOJGFTUKTPO  EFWUPPMTIUNM  EFWUPPMTKT  QBOFMIUNM  QBOFMKT  QBOFMDTT

Slide 27

Slide 27 text

࠷খϑΝΠϧߏ੒  NBOJGFTUKTPO  EFWUPPMTIUNM  EFWUPPMTKT  QBOFMIUNM  QBOFMKT  QBOFMDTT { "name": "Web Tools Detector", "manifest_version": 2, "version": "1", “devtools_page": "devtools.html" } w $ISPNF֦ுͱͯ͠ͷઃఆΛهड़ w EFWUPPMTIUNMΛΤϯτϦʔϙΠϯτʹࢦఆ

Slide 28

Slide 28 text

࠷খϑΝΠϧߏ੒  NBOJGFTUKTPO  EFWUPPMTIUNM  EFWUPPMTKT  QBOFMIUNM  QBOFMKT  QBOFMDTT w EFWUPPMTKTΛಡΈࠐΉ chrome.devtools.panels.create( “WebTools", // Tab Title "", "./panel.html", (panel) => {} ); w QBOFMIUNMΛ౉ͯ͠ɺ1BOFMΛੜ੒

Slide 29

Slide 29 text

࠷খϑΝΠϧߏ੒  NBOJGFTUKTPO  EFWUPPMTIUNM  EFWUPPMTKT  QBOFMIUNM  QBOFMKT  QBOFMDTT

Web Tools Detactor

w 1BOFM಺ͷදࣔΛ)5.-Ͱهड़ w QBOFMKTΛಡΈࠐΉ w QBOFMDTTΛಡΈࠐΉ

Slide 30

Slide 30 text

͜ΕΛ͜͏ͯ͠ʜ ʈТʈ  㲇㱭㱬㲇

Slide 31

Slide 31 text

͜͏͡Ό ʈТʈ  㱭㱬

Slide 32

Slide 32 text

ࡉ͔͍͚Ͳॏཁͳ͜ͱ w $ISPNFͰ͸ɺϖʔδʹର͚ͯͩ͠Ͱ͸ͳ͘ɺσϕϩο ύʔπʔϧʹରͯ͠΋σϕϩούʔπʔϧ͕։͚Δ w VOEPDL͠ɺσϕϩούʔπʔϧʹϑΥʔΧεΛ౰ͯͯ ͔ΒɺDNE PQUJPO J .BD Ͱ։͘

Slide 33

Slide 33 text

$ISPNFσϕϩούʔπʔϧΛ ࣗ෼৭ʹછΊΔ

Slide 34

Slide 34 text

͓΋ΉΖʹ7VFKTΛಋೖ  7VFͷ$41ରԠ൛Λ%- ͠ɺσΟϨΫτϦ಺ʹ഑ ஔ  QBOFMIUNM಺ͰTDSJQUλ άΛ͔ͭͬͯಡΈࠐΉ  QBOFMKT಺Ͱ7VFΠϯε λϯεΛੜ੒

{{msg}}

new Vue({ el: "#container", data: { msg: “hoge” }, created: function() { /* ॳظॲཧ */ }, methods: { /* ϝιου */ } });

Slide 35

Slide 35 text

ϦΫΤετΛ؂ࢹ  7VFͷDSFBUFEͷதͰɺ$ISPNF͕ఏڙ͢Δ PO3FRVFTU'JOJTIFEΠϕϯτʹΠϕϯτϦεφΛొ࿥  ಛఆͷ৚݅ʹ߹க͢ΔϦΫΤετ͕͋ͬͨΒԿ͔͢Δ … created: function() { chrome.devtools.network.onRequestFinished.addListener((req) => { const url = req.request.url; if (url.indexOf("google-analytics.com") !== -1) { this.msg = "͜ͷαΠτ͔ΒɺGoogleAnalyticsͷ߳Γ͕͢ΔͰήι"; } }); }, …

Slide 36

Slide 36 text

ը໘ભҠ࣌ʹදࣔΛΫϦΞ  ಉ༷ʹɺ$ISPNF͕ఏڙ͢ΔPO/BWJHBUFEΠϕϯτʹΠ ϕϯτϦεφΛొ࿥  ը໘ભҠ΍ը໘ߋ৽͕͋ͬͨΒɺදࣔΛΫϦΞ͢Δ … created: function() { … // ը໘ભҠ/ը໘ߋ৽࣌ chrome.devtools.network.onNavigated.addListener((url) => { this.msg = ""; } ); }, …

Slide 37

Slide 37 text

8FC5PPMT%FUFDUPSͷ࣮૷ w ֤πʔϧͷϦΫΤετઌυϝΠϯͷϦετΛ͓͖࣋ͬͯɺ ͦͷυϝΠϯ΁ͷϦΫΤετ͕͋ͬͨΒDMBTTΛ෇༩

Slide 38

Slide 38 text

ΊͬͪΌ؆୯ʂ

Slide 39

Slide 39 text

ଞʹ࡞Εͦ͏ͳ΋ͷ

Slide 40

Slide 40 text

ଞʹ࡞Εͦ͏ͳ΋ͷ w8FCαΠτ্ͷ4/4ຒΊࠐΈݕ஌ wϒϥ΢βήʔϜ)BDL w8FCϖʔδͷఴ࡟

Slide 41

Slide 41 text

օ͞Μ΋ɺ֦ுͯ͠Έͯ͸ʁ

Slide 42

Slide 42 text

એ఻

Slide 43

Slide 43 text

એ఻ w ຊ೔ͷιʔείʔυ͸ͪ͜Β w KVNUFDIXFC@UPPM@EFUFDUPSc(JU)VC w ձࣾͷΤϯδχΞϒϩάͰಉ͡ωλΛॻ͍ͯ·͢ w $ISPNFσϕϩούʔπʔϧʹಠࣗػೳΛ௥Ճ͢Δͭͷεςο ϓc1-"*%FOHJOFFSCMPH w ϙουΩϟετͰ΋࿩ͯ͠·͢ w FQָ͍͠$ISPNF)BDLc͕͠ͳ͍ϥδΦ w 8F+4ओ࠵ͷUBNJ͞ΜήετճϙουΩϟετ΋͋Γ·͢ w TQBʲήετUB@@NJZBOʳָ͍͠ηϒౡΤϯδχΞཹֶc ͕͠ͳ͍ϥδΦ

Slide 44

Slide 44 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ