Slide 1
Slide 1 text
パンツAPIを叩く
ウェブアプリを作った話
@joniburn
Slide 2
Slide 2 text
キッシュちゃんパンツパッチ
● TenteEEEE (@tenteeeee_vrc) さんが
開発しているアプリ
● 日替わりパンツをCCライセンスで公開
Slide 3
Slide 3 text
夏のある日…
Slide 4
Slide 4 text
夏のある日…
Slide 5
Slide 5 text
パンツAPI
● https://pantie-patch.herokuapp.com/
● GET /api/convert//
● 例：GET /api/convert/mishe/0255.png
0255.png 変換後
Slide 6
Slide 6 text
そこにAPIがあったので
Slide 7
Slide 7 text
そこにAPIがあったので
Slide 8
Slide 8 text
そこにAPIがあったので
Slide 9
Slide 9 text
使ったもの(1)
● Angular
● Angular Material
Angularはいいぞ
Slide 10
Slide 10 text
使ったもの(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へのデプロイを
自動化
Slide 11
Slide 11 text
ソースコード(抜粋)
/**
* 変換後パンツの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();
}
Slide 12
Slide 12 text
ソースコード(抜粋)
/**
* 現在選択しているパンツが表示範囲内に入るようにスクロールする
*/
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);
}
Slide 13
Slide 13 text
ソースコード(抜粋)
@Component({
selector: 'qpp-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
panties$: Observable;
allPanties$: Observable;
convertersList: [string, Converter][];
convertersMap: {[key: string]: Converter};
pantySize: 'small' | 'medium' | 'large' | 'original' = 'medium';
Slide 14
Slide 14 text
おわり
2019
パンツプログラミングの夏