Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
社内システムを楽しくする 3つのコツ #charity_lt_kansai
Search
yusuke
October 12, 2018
Technology
3
520
社内システムを楽しくする 3つのコツ #charity_lt_kansai
Web Audio API
Giphy API
Web Notification API
を使って社内システムを実用的に楽しくした話です。
yusuke
October 12, 2018
Tweet
Share
More Decks by yusuke
See All by yusuke
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
780
PhpStorm超絶技巧20分集中講座 #phpcon_odawara #kama
yusuke
2
570
PHPカンファレンス北海道 - PhpStorm最新情報 #phpcondo
yusuke
1
88
PhpStorm最新情報 AIとnew UI、便利プラグイン #phpcon_okinawa
yusuke
0
280
最新JavaとIDE #jjug
yusuke
1
360
企業システムにおけるTwitter API適用事例とTwitter4Jアップデート #TwitterDevJP
yusuke
0
180
#projava #jjug 転生したらプロのJavaだった件
yusuke
1
250
まだ間に合うMaven(再)入門 #jjug
yusuke
2
1.8k
JANコード/バーコードの仕組み #zadrvnlt
yusuke
1
540
Other Decks in Technology
See All in Technology
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
230
Dungeons and Dragons and Rails
joelq
0
230
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
36k
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
1
190
YJIT Makes Rails 1.7x faster / RubyKaigi 2024
k0kubun
3
480
Password cracking: past, present, future
openwall
0
270
AI JIMY - 登壇(インストール編)
hanacchi
0
150
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
130
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
300
本番環境で Cloudflareを 使ってみた話
miu_crescent
2
130
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
From here to resilience - a travel guide
ufried
1
160
Featured
See All Featured
Done Done
chrislema
178
15k
Teambox: Starting and Learning
jrom
128
8.4k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
The Brand Is Dead. Long Live the Brand.
mthomps
49
30k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
KATA
mclloyd
16
12k
Transcript
ࣾγεςϜΛָ͘͢͠Δ 3ͭͷίπ
ࢁຊ ༟հ @yusuke
ࣾγεςϜ
ฐࣾࣾγεςϜ (μϛʔσʔλ)
ʢαϜϥΠζϜʣࣾγεςϜͷ՝ • ຯؾͳ͍σβΠϯ : Bootstrapؙग़͠ • ࡶͳ࡞Γɺ༷ʑͳʮӡ༻ͰΧόʔʯ • ʮ͜͜ߋ৽ͨ͠ΒUndoग़དྷͳ͍ͷͰؾΛ͚ͭͯʯ •
ʮ͜ͷϘλϯԡ͢ͱ2͘Β͍ͨ͞ΕΔ͚Ͳɺͬͯʯ • ʮͬͯΔؒʹೋԡ͢͠ΔͱԿ͔ྑ͘ͳ͍͜ͱ͕ى͖Δʯ • ʮॲཧ͕͔ྃͨ͠Ͳ͏͔ը໘࠶ϩʔυͯ֬͠ೝͯ͠Ͷʯ
ͳͥࣾγεςϜࡶͳͷ͔ ར༻ऀ͕গͳ͍ ࡞ΓࠐΉΑΓར༻ऀΛ͑Δํ͕खͬऔΓૣ͍ɻ ϑʔϧϓϧʔϑͳ࣮ίετ > खಈϩʔϧόοΫ͢Δίετ
ͦͯ͠ࡶͳ࡞ΓͷࣾγεςϜ ָ͍ͬͯͯ͘͠ͳ͍
ͦ͜Ͱ গ͠Ͱָࣾ͘͠γεςϜΛར༻Ͱ͖ΔΛ͠·ͨ͠
σϞ
αϜϥΠζϜࣾγεςϜͰͬͨ͜ͱ ɾ༷ʑͳΠϕϯτͰԻ͕໐Δʂ → ָ͍͠ʂ / ଟॏԡ͠ࢭ ɾͭ໘ͰGIFಈը͕ग़Δ → ָ͍͠ʂ ɾ௨͕ग़Δ
→ ͍ॲཧ࣌ɺը໘ϦϩʔυΛ܁Γฦ͞ͳͯ͘ਐḿ͕͔Δ
ԻΛग़͢
ԻΛग़͢ - 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"
ԻΛग़͢ - 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<Gif> gifs = giphy4j.search("sponge bob"); } }
Giphy4Jར༻ྫ Kotlinίʔυྫ) fun main(args: Array<String>) { 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ར༻Πϝʔδ <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ඵҎ্දࣔ ͠ଓ͚Δ௨࡞Εͳͦ͞͏ɻ
ࡶʹॻ͍ͨฐࣾͷ࣮ࡍͷΞʔΩςΫνϟ ϒϥβ 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͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ ௨ͨ͠Γ͢Δͷ࣮༻্େม༗ҙٛͳͷͰΦεεϝ