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

ࢁຊ ༟հ @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") // ࢦఆͨ͠ΩʔϫʔυͷϧʔϓಈըͷURL println(gifs.images.looping.mp4) }

௨஌Λग़͢

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

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

ࡶʹॻ͍ͨฐࣾͷ࣮ࡍͷΞʔΩςΫνϟ ϒϥ΢β Nginx Spring Boot Click! STOMP over WebSocket Push.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 nginx proxy_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͸͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ ௨஌ͨ͠Γ͢Δͷ͸࣮༻্΋େม༗ҙٛͳͷͰΦεεϝ