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

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

Transcript

1. ࣾ಺γεςϜΛָ͘͢͠Δ
   3ͭͷίπ
   

   View Slide

2. ࢁຊ ༟հ @yusuke
   

   View Slide

3. ࣾ಺γεςϜ
   

   View Slide

4. ฐࣾࣾ಺γεςϜ
   (μϛʔσʔλ)
   

   View Slide

5. ʢαϜϥΠζϜʣࣾ಺γεςϜͷ՝୊
   • ຯؾͳ͍σβΠϯ : Bootstrapؙग़͠
   • ࡶͳ࡞Γɺ༷ʑͳʮӡ༻ͰΧόʔʯ
   • ʮ͜͜͸ߋ৽ͨ͠ΒUndoग़དྷͳ͍ͷͰؾΛ͚ͭͯʯ
   • ʮ͜ͷϘλϯԡ͢ͱ2෼͘Β͍଴ͨ͞ΕΔ͚Ͳɺ଴ͬͯʯ
   • ʮ଴ͬͯΔؒʹೋ౓ԡ͢͠ΔͱԿ͔ྑ͘ͳ͍͜ͱ͕ى͖Δʯ
   • ʮॲཧ͕׬͔ྃͨ͠Ͳ͏͔͸ը໘࠶ϩʔυͯ֬͠ೝͯ͠Ͷʯ
   

   View Slide

6. ͳͥࣾ಺γεςϜ͸ࡶͳͷ͔
   ར༻ऀ͕গͳ͍
   ࡞ΓࠐΉΑΓར༻ऀΛ஁͑Δํ͕खͬऔΓૣ͍ɻ
   ϑʔϧϓϧʔϑͳ࣮૷ίετ > खಈϩʔϧόοΫ͢Δίετ
   

   View Slide

7. ͦͯ͠ࡶͳ࡞Γͷࣾ಺γεςϜ͸
   ࢖ָ͍ͬͯͯ͘͠ͳ͍
   

   View Slide

8. ͦ͜Ͱ
   গ͠Ͱ΋ָࣾ͘͠಺γεςϜΛར༻Ͱ͖Δ޻෉Λ͠·ͨ͠
   

   View Slide

9. σϞ
   

   View Slide

10. αϜϥΠζϜࣾ಺γεςϜͰ΍ͬͨ͜ͱ
    ɾ༷ʑͳΠϕϯτͰԻ͕໐Δʂ
    → ָ͍͠ʂ / ଟॏԡ͠๷ࢭ
    ɾ଴ͭ৔໘ͰGIFಈը͕ग़Δ
    → ָ͍͠ʂ
    ɾ௨஌͕ग़Δ
    → ௕͍ॲཧ࣌ɺը໘ϦϩʔυΛ܁Γฦ͞ͳͯ͘΋ਐḿ͕෼͔Δ
    

    View Slide

11. ԻΛग़͢
    

    View Slide

12. ԻΛग़͢ - Web Audio API (1/2)
    
    
    
    

    View Slide

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

    View Slide

14. ԻΛग़͢ - ஶ࡞ݖ͸ʁ
    ख࣋ͪͷૉࡐΛࣾ಺ͰඇӦརʹԻΛग़͢෼ʹ͸ஶ
    ࡞ݖ๏ୈ38৚ʹΑΓ໰୊ͳͦ͞͏ɻ
    དྷ٬ऀ޲͚ͳͲɺӦར໨తͰྲྀ͢৔߹͸؅ཧஂମʹ૬ஊΛɻ
    ʢͪ͜Β͸ૉਓ͕ௐ΂ͨݶΓͷ৘ใͰ͢ɻ࣮ࡍʹ͸ઐ໳Ոʹ
    ͝૬ஊ͍ͩ͘͞)
    

    View Slide

15. GIFಈըΛग़͢
    

    View Slide

16. GIFಈըΛදࣔ͢Δ
    • ଴͍ͬͯΔָ͍ؒ͠(?)GIFಈըΛදࣔ
    • ιʔε͸ giphy.com (API͋Γ·͢)
    • ݕࡧAPIͰ "waiting"ͰϚονͨ͠ಈըΛද͍ࣔͯ͠
    Δ
    

    View Slide

17. giphy.comͷAPIΛ࢖͏ʹ͋ͨͬͯ
    

    View Slide

18. Giphy4JΛ࡞Γ·ͨ͠
    • https://github.com/yusuke/GIPHY4J
    •
    

    View Slide

19. ੕͍ͩ͘͞
    • https://github.com/yusuke/GIPHY4J
    •
    

    View Slide

20. Giphy4Jͱ͸
    • Java / Kotlin͔Β؆୯ɺܕ҆શʹGiphy APIΛ࢖͑Δ
    Javaίʔυྫ)
    class Giphy4JExample{
    public static void main(String... args){
    String apiKey = "myapikey";
    Giphy4J giphy4j = new Giphy4J(apiKey);
    List gifs = giphy4j.search("sponge bob");
    }
    }
    

    View Slide

21. Giphy4Jར༻ྫ
    Kotlinίʔυྫ)
    fun main(args: Array) {
    val giphy4K = Giphy4K("apikey")
    val gifs = giphy4K.random(tag = "sponge bob")
    // ࢦఆͨ͠ΩʔϫʔυͷϧʔϓಈըͷURL
    println(gifs.images.looping.mp4)
    }
    

    View Slide

22. ௨஌Λग़͢
    

    View Slide

23. Push.js
    • https://pushjs.org
    • Web Notification APIϥού
    • ੜWeb Notification APIΛ௚઀ୟ͘ΑΓ΋؆୯(Β͍͠)
    

    View Slide

24. Push.jsར༻Πϝʔδ
    
    <br/>let ϝοηʔδ = "௨஌͢Δϝοηʔδ"<br/>Push.create("Yabumi", {<br/>body: ϝοηʔδ,<br/>icon: 'https://' + location.host + '/images/icon.png',<br/>timeout: 4000,<br/>onClick: function () {<br/>window.focus();<br/>this.close();<br/>}<br/>});<br/>
    •
    ஫)SafariͰ͸ΞΠίϯ͸දࣔ͞Εͳ͍
    ஫)4ඵఔ౓ͰOS͕ফͯ͠͠·͏ɻ4ඵҎ্දࣔ
    ͠ଓ͚Δ௨஌͸࡞Εͳͦ͞͏ɻ
    

    View Slide

25. ࡶʹॻ͍ͨฐࣾͷ࣮ࡍͷΞʔΩςΫνϟ
    ϒϥ΢β Nginx Spring Boot
    Click!
    STOMP over WebSocket
    Push.js
    αʔό͔Βͷ௨஌͸STOMP over WebSocketΛ௨ͯ͠ϓογϡ
    

    View Slide

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ͷϓϩΩγʹඞཁ
    

    View Slide

27. ·ͱΊ
    Web Audio APIͰࣾ಺γεςϜ͸ָ͘͠ͳΔ
    GiphyͰࣾ಺γεςϜ͸ָ͘͠ͳΔ
    Web Notification APIͰࣾ಺γεςϜ͸ָ͘͠ͳΔ
    Giphy͸͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ
    ௨஌ͨ͠Γ͢Δͷ͸࣮༻্΋େม༗ҙٛͳͷͰΦεεϝ
    

    View Slide