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

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͸͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ ௨஌ͨ͠Γ͢Δͷ͸࣮༻্΋େม༗ҙٛͳͷͰΦεεϝ