社内システムを楽しくする 3つのコツ #charity_lt_kansai

Web Audio API
Giphy API
Web Notification API
を使って社内システムを実用的に楽しくした話です。

Transcript

1. ࣾ಺γεςϜΛָ͘͢͠Δ 3ͭͷίπ
2. ࢁຊ ༟հ @yusuke
3. ࣾ಺γεςϜ
4. ฐࣾࣾ಺γεςϜ (μϛʔσʔλ)
5. ʢαϜϥΠζϜʣࣾ಺γεςϜͷ՝୊ • ຯؾͳ͍σβΠϯ : Bootstrapؙग़͠ • ࡶͳ࡞Γɺ༷ʑͳʮӡ༻ͰΧόʔʯ • ʮ͜͜͸ߋ৽ͨ͠ΒUndoग़དྷͳ͍ͷͰؾΛ͚ͭͯʯ • ʮ͜ͷϘλϯԡ͢ͱ2෼͘Β͍଴ͨ͞ΕΔ͚Ͳɺ଴ͬͯʯ • ʮ଴ͬͯΔؒʹೋ౓ԡ͢͠ΔͱԿ͔ྑ͘ͳ͍͜ͱ͕ى͖Δʯ • ʮॲཧ͕׬͔ྃͨ͠Ͳ͏͔͸ը໘࠶ϩʔυͯ֬͠ೝͯ͠Ͷʯ
6. ͳͥࣾ಺γεςϜ͸ࡶͳͷ͔ ར༻ऀ͕গͳ͍ ࡞ΓࠐΉΑΓར༻ऀΛ஁͑Δํ͕खͬऔΓૣ͍ɻ ϑʔϧϓϧʔϑͳ࣮૷ίετ > खಈϩʔϧόοΫ͢Δίετ
7. ͦͯ͠ࡶͳ࡞Γͷࣾ಺γεςϜ͸ ࢖ָ͍ͬͯͯ͘͠ͳ͍
8. ͦ͜Ͱ গ͠Ͱ΋ָࣾ͘͠಺γεςϜΛར༻Ͱ͖Δ޻෉Λ͠·ͨ͠
9. σϞ
10. αϜϥΠζϜࣾ಺γεςϜͰ΍ͬͨ͜ͱ ɾ༷ʑͳΠϕϯτͰԻ͕໐Δʂ → ָ͍͠ʂ / ଟॏԡ͠๷ࢭ ɾ଴ͭ৔໘ͰGIFಈը͕ग़Δ → ָ͍͠ʂ ɾ௨஌͕ग़Δ → ௕͍ॲཧ࣌ɺը໘ϦϩʔυΛ܁Γฦ͞ͳͯ͘΋ਐḿ͕෼͔Δ
11. ԻΛग़͢
12. ԻΛग़͢ - Web Audio API (1/2) <audio id="coinsound" preload="auto"> <source src="/sounds/smb_coin.wav" type="audio/wav"> </audio> <form action="./ProcessCommand" method="POST" onsubmit="return confirmWithSound('ாථΛෳ੡ͯ͠ྑ͍Ͱ͔͢ʁ', 'powerup')" style="display:inline"
13. ԻΛग़͢ - Web Audio API (2/2) function confirmWithSound(message, effectName){ if (confirm(message)) { const soundEffect = document.getElementById(effectName); soundEffect.play(); const d1 = new Date(); while (true) { const d2 = new Date(); if (d2 - d1 > (soundEffect.duration * 1000)) { break; } } return true; } return false; }
14. ԻΛग़͢ - ஶ࡞ݖ͸ʁ ख࣋ͪͷૉࡐΛࣾ಺ͰඇӦརʹԻΛग़͢෼ʹ͸ஶ ࡞ݖ๏ୈ38৚ʹΑΓ໰୊ͳͦ͞͏ɻ དྷ٬ऀ޲͚ͳͲɺӦར໨తͰྲྀ͢৔߹͸؅ཧஂମʹ૬ஊΛɻ ʢͪ͜Β͸ૉਓ͕ௐ΂ͨݶΓͷ৘ใͰ͢ɻ࣮ࡍʹ͸ઐ໳Ոʹ ͝૬ஊ͍ͩ͘͞)
15. GIFಈըΛग़͢
16. GIFಈըΛදࣔ͢Δ • ଴͍ͬͯΔָ͍ؒ͠(?)GIFಈըΛදࣔ • ιʔε͸ giphy.com (API͋Γ·͢) • ݕࡧAPIͰ "waiting"ͰϚονͨ͠ಈըΛද͍ࣔͯ͠ Δ
17. giphy.comͷAPIΛ࢖͏ʹ͋ͨͬͯ
18. Giphy4JΛ࡞Γ·ͨ͠ • https://github.com/yusuke/GIPHY4J •
19. ੕͍ͩ͘͞ • https://github.com/yusuke/GIPHY4J •
20. Giphy4Jͱ͸ • Java / Kotlin͔Β؆୯ɺܕ҆શʹGiphy APIΛ࢖͑Δ Javaίʔυྫ) class Giphy4JExample{ public static void main(String... args){ String apiKey = "myapikey"; Giphy4J giphy4j = new Giphy4J(apiKey); List<Gif> gifs = giphy4j.search("sponge bob"); } }
21. Giphy4Jར༻ྫ Kotlinίʔυྫ) fun main(args: Array<String>) { val giphy4K = Giphy4K("apikey") val gifs = giphy4K.random(tag = "sponge bob") // ࢦఆͨ͠ΩʔϫʔυͷϧʔϓಈըͷURL println(gifs.images.looping.mp4) }
22. ௨஌Λग़͢
23. Push.js • https://pushjs.org • Web Notification APIϥού • ੜWeb Notification APIΛ௚઀ୟ͘ΑΓ΋؆୯(Β͍͠)
24. Push.jsར༻Πϝʔδ <script src="./js/push.js"></script> <script> let ϝοηʔδ = "௨஌͢Δϝοηʔδ" Push.create("Yabumi", { body: ϝοηʔδ, icon: 'https://' + location.host + '/images/icon.png', timeout: 4000, onClick: function () { window.focus(); this.close(); } }); </script> • ஫)SafariͰ͸ΞΠίϯ͸දࣔ͞Εͳ͍ ஫)4ඵఔ౓ͰOS͕ফͯ͠͠·͏ɻ4ඵҎ্දࣔ ͠ଓ͚Δ௨஌͸࡞Εͳͦ͞͏ɻ
25. ࡶʹॻ͍ͨฐࣾͷ࣮ࡍͷΞʔΩςΫνϟ ϒϥ΢β Nginx Spring Boot Click! STOMP over WebSocket Push.js αʔό͔Βͷ௨஌͸STOMP over WebSocketΛ௨ͯ͠ϓογϡ
26. Nginxͷઃఆ server { listen 80; server_name localhost; location / { proxy_set_header X-Forwarded-Host $http_host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_http_version 1.1; # to proxy WebSockets in nginx proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_pass_header Sec-Websocket-Extensions; proxy_pass http://backend:8080; } }ç WebSocketͷϓϩΩγʹඞཁ
27. ·ͱΊ Web Audio APIͰࣾ಺γεςϜ͸ָ͘͠ͳΔ GiphyͰࣾ಺γεςϜ͸ָ͘͠ͳΔ Web Notification APIͰࣾ಺γεςϜ͸ָ͘͠ͳΔ Giphy͸͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ ௨஌ͨ͠Γ͢Δͷ͸࣮༻্΋େม༗ҙٛͳͷͰΦεεϝ