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.6k
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.1k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Designing for Performance
lara
610
69k
Navigating Team Friction
lara
187
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Six Lessons from altMBA
skipperchong
28
3.9k
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 パンツプログラミングの夏