Chrome拡張機能でWeb運用をちょっとカイゼンした話

MCOpenLab.#10
https://memberscareer.connpass.com/event/121254/
デモやコード見せや喋りのみのもの等ありますがとりあえずスライドそのままあげんます

Transcript

1. Chrome֦ுػೳͰ
 Webӡ༻Λ ͪΐͬͱΧΠθϯͨ͠࿩ ൧ా ਹ೭
2. ࣗݾ঺հ
3. ൧ా ਹ೭ 1 • େࡕग़਎ɺߴઐઐ߈Պग़਎ • Rͱ͔C#ͱ͔PythonͰ໦ࡐͷઅݕ஌
4. ൧ా ਹ೭ 2 • 2018೥ 04݄ ϝϯόʔζೖࣾ(18৽ଔ) • Webӡ༻ • 2018೥ 10݄ ϝϯόʔζΩϟϦΞग़޲ • PHP
5. ͜͏͍͏
9. ΋͘͡ • ͳʹΛ͔ͨ͠ • Chrome֦ுػೳʹ͍ͭͯ • ޻෉ • ݁Ռ • ͍ͭͨ͑ͨ͜ͱ
10. ͳʹΛ͔ͨ͠
11. લఏ
12. Webӡ༻ • ೔෇Ͱ؅ཧ͍ͯ͠ΔաڈͷϖʔδΛසൟʹࢀর͢Δ • https://example.com/190423
 https://example.com/190424
 ɹɹɹɹɹɹɹɹɹɹɹ ︙ • ߋ৽͕සൟʹ͋ΔͨΊ
 ͢΂ͯϒοΫϚʔΫ͢ΔΘ͚ʹ͸͍͔ͣ
 खଧͪͰ๚໰
13. ͭͬͨ͘΋ͷ
14. Chrome֦ுػೳ • ೔෇Λೖྗ͢Δ͜ͱͰ
 ରԠͨ͠ϖʔδΛ։͘ • ਺छྨͷΧςΰϦ͝ͱɺ
 PC/SPผʹ΋ରԠ
15. ͍ͭͰʹ • ͦͷ ೔෇ & ΧςΰϦ & PC/SP Ͱͷ
 ϖʔδͷૉࡐ͕͋Δ
 αʔόʔ΁ͷύεΛίϐʔ • ϖʔδ։͖ / ύείϐʔ
 ΛͦΕͧΕ࣮ߦ͢Δ͔ͷબ୒Λ
 Ӭଓతʹอଘ
16. Chrome֦ுػೳ ʹ͍ͭͯ
17. Chrome֦ுػೳ ͸ ͔ΜͨΜʹͭ͘ΕΔ
18. WebαΠτͷߏ଄
19. WebαΠτͷߏ଄ images index.html script.js style.css
20. Chrome֦ுػೳͷߏ଄
21. Chrome֦ுػೳͷߏ଄ images popup.html script.js style.css manifest.json ࠓճͭͬͨ͘ ϒϥ΢βΞΫγϣϯ ͚ͩͷ΍ͭ
22. { "manifest_version": 2, "name": "kakutyou_kimnou_no_namae", "description": "setsumei", "version": “1.0", "icons": { "16": "images/icon_16.png", "48": "images/icon_48.png", "128": "images/icon_128.png" }, "browser_action": { "default_icon": { "19": "images/icon_19.png", "38": "images/icon_38.png" }, "default_popup": "popup.html" } } manifest.json
23. ࣗ࡞Chrome֦ுػೳ ͷ ͔͍͔ͭͨ
24. ʮ︙ʯˠʮͦͷଞͷπʔϧʯˠʮ֦ுػೳʯ
25. ON OFF
26. ·ͨ • ڞ༗ͷαʔόʔ͔ΒͷಡΈࠐΈ΋Մ • ։ͨ͘ΊͷγϣʔτΧοτΛઃఆͰ͖Δ
27. ޻෉
28. ຖ೔࢖͏΋ͷ ͳͷͰ ࢖༻ײ͕େࣄ
29. UX
30. User = ಉ͡νʔϜͷਓ
31. ετϨεϑϦʔ • ։͍ͨͱ͜Ζʹ࢖͍ํͷઆ໌จ • ΩʔϘʔυ͚ͩͰૢ࡞Մೳ
32. <!-- ςΩετϘοΫε --> <input id="input" type="text" value=""> ιʔεͷҰ෦ // ಡΈࠐ·ΕͨΒ window.onload = function() { // ϑΥʔΧεΛ౰ͯΔ (͙͢จࣈೖྗ͕Ͱ͖Δ) document.getElementById('input').focus(); }
33. ΄͔ʹ΋ • গਓ਺ʹҰ౓࢖ͬͯ΋Β͍ɺ
 ࢖༻ײͷ֬ೝ • ঢ়گʹԠͯ͡Ξοϓσʔτ • શࣾʹ޲͚ͯͷڞ༗
34. ݁Ռ
35. Α͔ͬͨ͜ͱ • ٕज़͕਎ʹͭ͘ • 9ϲ݄ͨͬͨࠓͰ΋࢖ΘΕ͍ͯΔ • ଞνʔϜʹ΋೾ٴ • ͏Ε͍͠ • ͜͏͍͏ωλʹ
36. ஌Βͳ͔ٕͬͨज़ • Chrome֦ுػೳ͸͔ΜͨΜʹͭ͘ΕΔ • JSͰΫϦοϓϘʔυʹίϐʔͤ͞ΒΕΔ • JSͰϒϥ΢βʹ৘ใΛอଘ(Ӭଓ)Ͱ͖Δ
37. ͍ͭͨ͑ͨ ͜ͱ
38. ͔Μͨ͜͡ͱ 1 • Chrome֦ுػೳΛ࢖͑͹
 JSͰྟػԠมʹରԠՄೳ • ͓΋͍΍Δ
39. ͔Μͨ͜͡ͱ 2 • 1͔Β࡞ΔΑΓݩͷԿ͔͕͋ͬͨ΄͏͕ḿΔ • ͲΜͳ͜ͱ͕Ͱ͖Δ͔ͬͯҙ֎ͱ
 ஌ΒΕͯͳ͔ͬͨΓ͢Δ
40. εΩϧ͸ͳ͍ ࣌ؒ͸͋Δ ͍͢͝ਓͷٯ
41. ͕࣌ؒ͋ΔͳΒ ͳΜ͔΍ͬͯΈΔ
42. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠