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
530
社内システムを楽しくする 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
5
1k
PhpStorm超絶技巧20分集中講座 #phpcon_odawara #kama
yusuke
2
670
PHPカンファレンス北海道 - PhpStorm最新情報 #phpcondo
yusuke
1
100
PhpStorm最新情報 AIとnew UI、便利プラグイン #phpcon_okinawa
yusuke
0
300
最新JavaとIDE #jjug
yusuke
1
360
企業システムにおけるTwitter API適用事例とTwitter4Jアップデート #TwitterDevJP
yusuke
0
180
#projava #jjug 転生したらプロのJavaだった件
yusuke
1
260
まだ間に合うMaven(再)入門 #jjug
yusuke
2
1.9k
JANコード/バーコードの仕組み #zadrvnlt
yusuke
1
560
Other Decks in Technology
See All in Technology
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
AOAI Dev Day - Opening Session
yoshidashingo
2
470
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
簡単に始めるSnowflakeの機械学習
nayuts
1
190
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
170
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Building an army of robots
kneath
301
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Unsuck your backbone
ammeep
666
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
GitHub's CSS Performance
jonrohan
1026
450k
How to Think Like a Performance Engineer
csswizardry
4
590
Building Adaptive Systems
keathley
34
2k
Docker and Python
trallard
37
2.9k
The World Runs on Bad Software
bkeepers
PRO
63
11k
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͓͖ͯ͞ɺ༷ʑͳΠϕϯτͰԻΛ໐Βͨ͠Γ ௨ͨ͠Γ͢Δͷ࣮༻্େม༗ҙٛͳͷͰΦεεϝ