Panty Patch WebApp

パンツAPIを叩くウェブアプリを作った話(LT用資料)

Transcript

1. パンツAPIを叩く ウェブアプリを作った話 @joniburn
2. キッシュちゃんパンツパッチ • TenteEEEE (@tenteeeee_vrc) さんが 開発しているアプリ • 日替わりパンツをCCライセンスで公開
3. 夏のある日…
4. 夏のある日…
5. パンツAPI • https://pantie-patch.herokuapp.com/ • GET /api/convert/<model>/<path> • 例：GET /api/convert/mishe/0255.png 0255.png 変換後
6. そこにAPIがあったので
7. そこにAPIがあったので
8. そこにAPIがあったので
9. 使ったもの(1) • Angular • Angular Material Angularはいいぞ
10. 使ったもの(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へのデプロイを 自動化
11. ソースコード(抜粋) /** * 変換後パンツの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(); }
12. ソースコード(抜粋) /** * 現在選択しているパンツが表示範囲内に入るようにスクロールする */ 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); }
13. ソースコード(抜粋) @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';
14. おわり 2019 パンツプログラミングの夏