Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Panty Patch WebApp

joniburn
August 20, 2019
1.2k

Panty Patch WebApp

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

joniburn

August 20, 2019
Tweet

Transcript

  1. ソースコード(抜粋) /** * 変換後パンツの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(); }
  2. ソースコード(抜粋) /** * 現在選択しているパンツが表示範囲内に入るようにスクロールする */ 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); }
  3. ソースコード(抜粋) @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';