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
550
社内システムを楽しくする 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
日本語プログラミングとSpring Bootアプリケーション開発 #kanjava
yusuke
2
470
Python開発環境 - PyCharmとAI #stapy
yusuke
1
48
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
6
1.6k
PhpStorm超絶技巧20分集中講座 #phpcon_odawara #kama
yusuke
2
910
PHPカンファレンス北海道 - PhpStorm最新情報 #phpcondo
yusuke
1
170
PhpStorm最新情報 AIとnew UI、便利プラグイン #phpcon_okinawa
yusuke
0
390
最新JavaとIDE #jjug
yusuke
1
410
企業システムにおけるTwitter API適用事例とTwitter4Jアップデート #TwitterDevJP
yusuke
0
230
#projava #jjug 転生したらプロのJavaだった件
yusuke
1
320
Other Decks in Technology
See All in Technology
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
520
OpenHands🤲にContributeしてみた
kotauchisunsun
1
420
A2Aのクライアントを自作する
rynsuke
1
170
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
3
460
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
260
解析の定理証明実践@Lean 4
dec9ue
0
170
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.4k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
IIWレポートからみるID業界で話題のMCP
fujie
0
780
Featured
See All Featured
Designing for Performance
lara
609
69k
Site-Speed That Sticks
csswizardry
10
660
Designing Experiences People Love
moore
142
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Code Reviewing Like a Champion
maltzj
524
40k
How GitHub (no longer) Works
holman
314
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Navigating Team Friction
lara
187
15k
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͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ ௨ͨ͠Γ͢Δͷ࣮༻্େม༗ҙٛͳͷͰΦεεϝ