Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

yusuke
October 12, 2018

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

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

yusuke

October 12, 2018
Tweet

More Decks by yusuke

Other Decks in Technology

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