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
Panty Patch WebApp
Search
joniburn
August 20, 2019
1
1.4k
Panty Patch WebApp
パンツAPIを叩くウェブアプリを作った話(LT用資料)
joniburn
August 20, 2019
Tweet
Share
More Decks by joniburn
See All by joniburn
Getting Started with VRChat Udon
joniburn
0
1.3k
VRChat World Optimization
joniburn
0
1.7k
Customize Avatar Textures using Clip Studio Paint
joniburn
0
1.5k
VRChat VRC_Panorama Slide System
joniburn
2
2.1k
VRChat Avatar Optimization
joniburn
1
3.2k
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
6
250
YesSQL, Process and Tooling at Scale
rocio
173
14k
Why Our Code Smells
bkeepers
PRO
340
57k
Done Done
chrislema
185
16k
The Invisible Side of Design
smashingmag
302
51k
Visualization
eitanlees
149
16k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Writing Fast Ruby
sferik
629
62k
Agile that works and the tools we love
rasmusluckow
331
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Transcript
パンツAPIを叩く ウェブアプリを作った話 @joniburn
キッシュちゃんパンツパッチ • TenteEEEE (@tenteeeee_vrc) さんが 開発しているアプリ • 日替わりパンツをCCライセンスで公開
夏のある日…
夏のある日…
パンツAPI • https://pantie-patch.herokuapp.com/ • GET /api/convert/<model>/<path> • 例:GET /api/convert/mishe/0255.png 0255.png
変換後
そこにAPIがあったので
そこにAPIがあったので
そこにAPIがあったので
使ったもの(1) • Angular • Angular Material Angularはいいぞ
使ったもの(2) • GitHub Pages ◦ gh-pagesブランチにindex.htmlとかを配置 ◦ https://github.com/joniburn/quiche-pantie-patch-gui ◦ https://joniburn.github.io/quiche-pantie-patch-gui/
• CircleCI ◦ ビルドとGitHub Pagesへのデプロイを 自動化
ソースコード(抜粋) /** * 変換後パンツのURLを返す。 * * @param model 変換対象モデル *
@param path パンツのファイル名 * @param options 変換オプション */ convertedPantyUrl(model: string, path: string, options: {[key: string]: string}): string { const url = new URL(`${BASE_URL}/api/convert/${model}/${path}`); const params = url.searchParams; Object.entries(options).forEach((e) => { params.append(e[0], e[1]); }); return url.toString(); }
ソースコード(抜粋) /** * 現在選択しているパンツが表示範囲内に入るようにスクロールする */ focusCurrentPanty() { // 選択中の要素を取得 const
current = this.pantycards.find(elm => elm.nativeElement.dataset.path === this.path); if (!current) { return; } // スクロール const listTop = this.pantyList.nativeElement.getBoundingClientRect().top; const targetTop = current.nativeElement.getBoundingClientRect().top; this.pantyList.nativeElement.scrollBy(0, targetTop - listTop - 81); }
ソースコード(抜粋) @Component({ selector: 'qpp-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export
class AppComponent implements OnInit { panties$: Observable<string[]>; allPanties$: Observable<string[]>; convertersList: [string, Converter][]; convertersMap: {[key: string]: Converter}; pantySize: 'small' | 'medium' | 'large' | 'original' = 'medium';
おわり 2019 パンツプログラミングの夏