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
510
社内システムを楽しくする 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超絶技巧20分集中講座 #phpcon_odawara #kama
yusuke
2
490
PHPカンファレンス北海道 - PhpStorm最新情報 #phpcondo
yusuke
1
84
PhpStorm最新情報 AIとnew UI、便利プラグイン #phpcon_okinawa
yusuke
0
270
最新JavaとIDE #jjug
yusuke
1
360
企業システムにおけるTwitter API適用事例とTwitter4Jアップデート #TwitterDevJP
yusuke
0
170
#projava #jjug 転生したらプロのJavaだった件
yusuke
1
250
まだ間に合うMaven(再)入門 #jjug
yusuke
2
1.8k
JANコード/バーコードの仕組み #zadrvnlt
yusuke
1
530
Spring Boot爆速開発超絶技巧 #jsug #boot / Spring Boot & IntelliJ IDEA technique
yusuke
14
15k
Other Decks in Technology
See All in Technology
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
180
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
500
On Your Data を超えていく!
hirotomotaguchi
2
670
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
反実仮想機械学習とは何か
usaito
PRO
11
4.4k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
270
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
アクセス制御にまつわる改善 / Improving access control
itkq
0
530
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
140
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
What the flash - Photography Introduction
edds
64
11k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Faster Mobile Websites
deanohume
299
30k
Building Applications with DynamoDB
mza
88
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Teambox: Starting and Learning
jrom
128
8.4k
Optimizing for Happiness
mojombo
370
69k
It's Worth the Effort
3n
180
27k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
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͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ ௨ͨ͠Γ͢Δͷ࣮༻্େม༗ҙٛͳͷͰΦεεϝ