【通販】【Adidas、Nike、Puma】スクリプトでカートイン - 新米エンジニアの失敗再発防止メモ

私は通販システムに関わる仕事をしておりますので、他社の通販サイトの作りをちょっと調べてみました。

主に、スクリプト対策はどうなっているのかを調べています。
超人気商品となると、通販で販売開始して数分とかで在庫がなくなってしまいます。
手動の人はほぼ買えなくて、スクリプトでほとんど刈り取られてしまったりしています。
これについて大手どころは対策をしてたりしてなかったりしています。

ということでアパレル系の有名どころの
アディダス（Adidas）、ナイキ（Nike）、プーマ（Puma）の３つを対象に、
ログインからカートインまでをするスクリプトを作ろうと試みてみました。
近いうちに注文完了まで作ろうと思っています。（作れればｗ）

前提として、スクリプトが有利な点

勝手にやってくれる。

人気商品の販売開始時に張り付いていなくちゃならないのは大変ですよね。
タイミングも人間がやると正確じゃないです。

画面操作によるタイムロスがない

ブラウザ上で操作して注文する場合、
まずサーバーと通信しページのソースを取得します。
そのあと、画面にデザインを描画をする処理が入り、
そのあとユーザーがボタンを押下したり購入個数や支払い方法を入力などの操作をすることになります。
スクリプトの場合、描画する処理が必要なく、各種項目も自動で一瞬で入力可能なのでタイムロスがないです。

並行して複数注文できる

自分は一人しかいません。複数の回線を用いて手動で注文するのは難しいです。
スクリプトならいくらでも並行できます。

本題、スクリプト作成の結果報告

アディダス（Adidas）のカートインスクリプト

スクリプト作成はできました。
f:id:maitakeramen:20180130002115p:plain

スクリプト作成の障害

Adidasは、商品ページにアクセスキーを埋め込んでいます。
よって一旦、商品ページを取得しなければなりません。タイムロスですね。
しかも直接埋め込まれてはおらず、hiddenにJavaScriptの処理をはさんで埋め込んでいました。
単純にHTMLスクレイピングするだけでは取得できませんでした。

普通に商品ページを取得すると、こんな感じです。JS実行前は「access_key_hash」のvalue値が空です。
ページ読み込み後、JavaScriptが起動して値が埋め込まれます。

<form name="form1" id="form1" method="post" action="https://shop.adidas.jp/pc/secure/cart/step01.cgi">
	</div><!-- pdp_btn_wrap -->
	<input type="hidden" name="itemBrcd" value="110">
	<input type="hidden" name="itemGrcd" value="110_EMV88">
	<input type="hidden" name="itemKcod" id="itemKcod" value="CD7725">
	<input type="hidden" name="itemSzcd" id="itemSzcd" value="04">
	<input type="hidden" name="color_mode" value="itemKcod">
	<input type="hidden" name="pdp_view_date" value="20180113">
	<input type="hidden" name="access_key_hash" value="">
</form>

ただ、スクリプト作成を諦めるほどのことではありません。
JavaScriptだろうとなんだろうと、ブラウザのデバッグモードで処理をたどれば解決です。

ナイキ（Nike）

スクリプト作成、できませんでした。
なぜか...

System.Net.WebException: 'リモート サーバーがエラーを返しました: (403) 使用不可能'

と出て、トップページのソースを取得すらできませんでした。
ChromeやIEなど、ブラウザであることを判別する何かがあるんでしょうかね...
ユーザーエージェントなどもChromeのものをコピーして使用したのですがダメで、諦めました。

プーマ（Puma）

これもまぁ、無理ってほどじゃないけど厄介でした。

<form action="/on/demandware.store/Sites-JP-Site/ja_JP/Cart-AddProduct" method="post" id="dwfrm_product_addtocart_d0ufjeaalkyn" class="pdpForm">
<div class="label">
数量
</div>
<select class="form-control pdp-selectpicker bootstrap-select-rendered" id="Quantity" name="Quantity" data-available="8" style="display: block;">
<option selected=""selected"" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select><input type="hidden" name="cartAction" id="cartAction" value="add">
<input type="hidden" name="pid" id="pid" value="4059505244552">
<input type="hidden" name="selectVariant" id="selectVariant" value="true">
<button id="add-to-cart" type="submit" title="カートに追加する" value="カートに追加する" class="btn btn-primary btn-lg add-to-cart">
カートに追加する
</button>
</form>

何がキツイっていうと、formのidですね。
「dwfrm_product_addtocart_d0ufjeaalkyn」
こんなん。
商品の種類、サイズや色などで「d0ufjeaalkyn」この部分が変化するみたいです。
でもやっぱり一度商品ページを取得してHTMLスクレイピングすればなんとかなる。