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
540
社内システムを楽しくする 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
380
Python開発環境 - PyCharmとAI #stapy
yusuke
1
26
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
6
1.2k
PhpStorm超絶技巧20分集中講座 #phpcon_odawara #kama
yusuke
2
840
PHPカンファレンス北海道 - PhpStorm最新情報 #phpcondo
yusuke
1
150
PhpStorm最新情報 AIとnew UI、便利プラグイン #phpcon_okinawa
yusuke
0
360
最新JavaとIDE #jjug
yusuke
1
390
企業システムにおけるTwitter API適用事例とTwitter4Jアップデート #TwitterDevJP
yusuke
0
210
#projava #jjug 転生したらプロのJavaだった件
yusuke
1
290
Other Decks in Technology
See All in Technology
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
230
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
240
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
110
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
520
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
360
Platform Engineeringは自由のめまい
nwiizo
4
2.1k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.3k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.3k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.8k
RECRUIT TECH CONFERENCE 2025 プレイベント【高橋】
recruitengineers
PRO
0
160
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
600
Goで作って学ぶWebSocket
ryuichi1208
0
150
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building an army of robots
kneath
303
45k
How to Ace a Technical Interview
jacobian
276
23k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
How GitHub (no longer) Works
holman
314
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Why Our Code Smells
bkeepers
PRO
336
57k
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͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ ௨ͨ͠Γ͢Δͷ࣮༻্େม༗ҙٛͳͷͰΦεεϝ