Web Audio API Giphy API Web Notification API を使って社内システムを実用的に楽しくした話です。
ࣾγεςϜΛָ͘͢͠Δ3ͭͷίπ
View Slide
ࢁຊ ༟հ @yusuke
ࣾγεςϜ
ฐࣾࣾγεςϜ(μϛʔσʔλ)
ʢαϜϥΠζϜʣࣾγεςϜͷ՝• ຯؾͳ͍σβΠϯ : Bootstrapؙग़͠• ࡶͳ࡞Γɺ༷ʑͳʮӡ༻ͰΧόʔʯ• ʮ͜͜ߋ৽ͨ͠ΒUndoग़དྷͳ͍ͷͰؾΛ͚ͭͯʯ• ʮ͜ͷϘλϯԡ͢ͱ2͘Β͍ͨ͞ΕΔ͚Ͳɺͬͯʯ• ʮͬͯΔؒʹೋԡ͢͠ΔͱԿ͔ྑ͘ͳ͍͜ͱ͕ى͖Δʯ• ʮॲཧ͕͔ྃͨ͠Ͳ͏͔ը໘࠶ϩʔυͯ֬͠ೝͯ͠Ͷʯ
ͳͥࣾγεςϜࡶͳͷ͔ར༻ऀ͕গͳ͍࡞ΓࠐΉΑΓར༻ऀΛ͑Δํ͕खͬऔΓૣ͍ɻϑʔϧϓϧʔϑͳ࣮ίετ > खಈϩʔϧόοΫ͢Δίετ
ͦͯ͠ࡶͳ࡞ΓͷࣾγεςϜָ͍ͬͯͯ͘͠ͳ͍
ͦ͜Ͱগ͠Ͱָࣾ͘͠γεςϜΛར༻Ͱ͖ΔΛ͠·ͨ͠
σϞ
αϜϥΠζϜࣾγεςϜͰͬͨ͜ͱɾ༷ʑͳΠϕϯτͰԻ͕໐Δʂ→ ָ͍͠ʂ / ଟॏԡ͠ࢭɾͭ໘ͰGIFಈը͕ग़Δ→ ָ͍͠ʂɾ௨͕ग़Δ→ ͍ॲཧ࣌ɺը໘ϦϩʔυΛ܁Γฦ͞ͳͯ͘ਐḿ͕͔Δ
ԻΛग़͢
ԻΛग़͢ - Web Audio API (1/2)
ԻΛग़͢ - 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;}
ԻΛग़͢ - ஶ࡞ݖʁख࣋ͪͷૉࡐΛࣾͰඇӦརʹԻΛग़͢ʹஶ࡞ݖ๏ୈ38ʹΑΓͳͦ͞͏ɻདྷ٬ऀ͚ͳͲɺӦརతͰྲྀ͢߹ཧஂମʹ૬ஊΛɻʢͪ͜Βૉਓ͕ௐͨݶΓͷใͰ͢ɻ࣮ࡍʹઐՈʹ͝૬ஊ͍ͩ͘͞)
GIFಈըΛग़͢
GIFಈըΛදࣔ͢Δ• ͍ͬͯΔָ͍ؒ͠(?)GIFಈըΛදࣔ• ιʔε giphy.com (API͋Γ·͢)• ݕࡧAPIͰ "waiting"ͰϚονͨ͠ಈըΛද͍ࣔͯ͠Δ
giphy.comͷAPIΛ͏ʹ͋ͨͬͯ
Giphy4JΛ࡞Γ·ͨ͠• https://github.com/yusuke/GIPHY4J•
͍ͩ͘͞• https://github.com/yusuke/GIPHY4J•
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");}}
Giphy4Jར༻ྫKotlinίʔυྫ)fun main(args: Array) {val giphy4K = Giphy4K("apikey")val gifs = giphy4K.random(tag = "sponge bob")// ࢦఆͨ͠ΩʔϫʔυͷϧʔϓಈըͷURLprintln(gifs.images.looping.mp4)}
௨Λग़͢
Push.js• https://pushjs.org• Web Notification APIϥού• ੜWeb Notification APIΛୟ͘ΑΓ؆୯(Β͍͠)
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ඵҎ্දࣔ͠ଓ͚Δ௨࡞Εͳͦ͞͏ɻ
ࡶʹॻ͍ͨฐࣾͷ࣮ࡍͷΞʔΩςΫνϟϒϥβ Nginx Spring BootClick!STOMP over WebSocketPush.jsαʔό͔Βͷ௨STOMP over WebSocketΛ௨ͯ͠ϓογϡ
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 nginxproxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_pass_header Sec-Websocket-Extensions;proxy_pass http://backend:8080;}}çWebSocketͷϓϩΩγʹඞཁ
·ͱΊWeb Audio APIͰࣾγεςϜָ͘͠ͳΔGiphyͰࣾγεςϜָ͘͠ͳΔWeb Notification APIͰࣾγεςϜָ͘͠ͳΔGiphy͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ௨ͨ͠Γ͢Δͷ࣮༻্େม༗ҙٛͳͷͰΦεεϝ