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
RatingWatch
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Shu Kakihana
April 18, 2017
Programming
0
83
RatingWatch
学校の授業で発表したやつの公開版です
Shu Kakihana
April 18, 2017
Tweet
Share
More Decks by Shu Kakihana
See All by Shu Kakihana
第28回高専プロコン競技部門に出場しました
kurokoji
0
77
Vimのはなし(LT)
kurokoji
1
140
競プロのおはなし
kurokoji
0
120
冴島清美が最近キてる
kurokoji
1
130
Q:忍野忍ですか? A:いいえ,工藤忍です
kurokoji
0
720
Other Decks in Programming
See All in Programming
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
260
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
7.4k
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
370
Oxlintはいいぞ
yug1224
5
1.3k
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
200
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
4
590
AI巻き込み型コードレビューのススメ
nealle
1
210
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
130
Oxlint JS plugins
kazupon
1
920
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
1.1k
Featured
See All Featured
エンジニアに許された特別な時間の終わり
watany
106
230k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
730
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
66
Designing for Performance
lara
610
70k
How to Ace a Technical Interview
jacobian
281
24k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
Designing Powerful Visuals for Engaging Learning
tmiket
0
230
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Visualization
eitanlees
150
17k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
250
Transcript
RatingWatch Kurokoji,mito,Luz,nemusou
競技プログラミング ご存知ですか?
数学的な問題などを プログラミングによって正確に解く
情報オリンピックがその一例
他にどんなの?
AtCoder • AtCoder(https://atcoder.jp/) • 大体週一回にコンテストが開かれる(日本語/英語) • コンテストの結果によってレートが変動する
None
競プロerは勝負の世界に生きている • 世界中で競プロは行われている • 順位やレートで他の人よりも上に行くために日々精進
競プロerは勝負の世界に生きている • 世界中で競プロは行われている • 順位やレートで他の人よりも上に行くために日々精進 ➢ ライバルとレート比較すればさらに向上心が…?
RatingWatch
機能 • AtCoderでの今までのレート,現在レート等取得 • 最大二人まで同時にグラフ表示可能 • 今こいつに勝ってる,負けてるというのがひと目でわかる • Tweet機能実装済み
実演
楽したところ • Bootstrap というCSSフレームワークを使うといい感じになった • Chart.js を用いたグラフ表示 • jquery.xdomainajax.js を用いたスクレイピング
大変だったこと • AtCoderにはUser情報を取得できる公式APIが存在しない • そこでUserのページからJSONを抽出した(スクレイピング) • Jquery.xdomainajax.js を使用して抽出を試みるも,<script>タグ の部分が取得できなかった •
コードを見ると<script>タグの部分だけ削除するようにされていた • 該当部分を削除すると取得できた • 非同期処理なので色々と大変 • 2人のグラフ表示
最後に • 視覚的に刺激があるのでJavascript面白い • だけど非同期処理の闇めっちゃ深そう • もしかしたらWebに公開するかも(追記:公開しました) • https://kurokoji.github.io/RatingWatch