#006 ハンドメイド販売サイトの在庫連携をどうしていますか？⑤(Creema操作編)

2022年2月3日 12:32

在庫連携の目次

「在庫連携」の記事が長いため、複数の記事に分けて投稿しています。
一連の流れになっていますので、①から読んでいただけると助かります。

①(在庫連携につついて) https://note.com/tamaworks/n/n911d62818345
②(ブラウザ操作編) https://note.com/tamaworks/n/nbe954b7b6412
③(selenium導入編) https://note.com/tamaworks/n/nd0c40ef1a2fd
④(minne操作編) https://note.com/tamaworks/n/nd6262ea6c583
⑤(Creema操作編) 現在の記事
⑥(完成編) https://note.com/tamaworks/n/n54975f0c257a

Creemaの操作

(1) ログイン画面の自動操作

前回のminneの操作と同様に、まずはログイン画面からログインを行う必要があります。
Creemaでもログイン画面(https://www.creema.jp/user/login)を開いて、メールアドレスとパスワードを入力します。
FacebookやTwitterを使ったログインについては今回は検証していません💦

Creemaにログインするためのソースコードは以下の通りです。
メールアドレスとパスワードはダミーの値を使用しています。
他は基本的に前回に使った関数と同様です。

from selenium import webdriver
driver = webdriver.Chrome()

# minneのメールアドレスとパスワード
creemaMail = 'xxxx@xxxx.com'
creemaPassword = 'yyyyy'

# creemaのログイン
driver.get("https://www.creema.jp/user/login")

# Creemaのメールアドレス入力
driver.find_element_by_id("login-email").send_keys(creemaMail)

# Creemaのパスワード入力
# driver.find_element_by_id("login-password").send_keys(creemaPassword)

# Creemaのメールアドレスとパスワードの送信
button = driver.find_element_by_xpath("//*[@id='pagebody']/main/article/div/div/div[2]/div[1]/form/div[3]/input")
button.submit()

(2) 在庫数の操作

ログインに成功したら、get()関数の引数にCreemaの作品登録ページのURLを入力して、登録ページに移動します。

# 作品登録ページに移動
driver.get("https://www.creema.jp/my/item/12860807/update")

在庫管理に必要となる在庫数の箇所を確認してみます。

今回取得する在庫数の箇所ですが、HTMLで言うところのセレクトボックスになっています。
在庫数をクリックすると1～250までの数字が出てきて選択する形式です。

HTMLの中身を確認すると<select>タブに囲まれて1～250まで数字が並んでいる状態で特に特徴はありません。

<select name="item[stock]" class="c-form-select js-validation js-attach-stock" data-validation-required="">
<option 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>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>

ここから選択されている在庫数(今回は2個)を取得したいと思います。
Seleniumではセレクト要素に対しての操作も用意されています。
SeleniumのSelectクラスを使ってセレクト要素を取得します。
サンプルは以下の通りです。

# Selectクラスのインポート
from selenium.webdriver.support.ui import Select
# XPathを使ってセレクト要素の取得
element = driver.find_element_by_xpath('//*[@id="js-item-form"]/div[2]/div[7]/div[1]/div/select')
# 選択した要素から一番上の項目を選択する
target = Select(element).all_selected_options[0].text
# コンソールに取得した結果を表示する 2と表示
print(target)

次に個数を変更する場合です。
何通りか変更する方法はありますが、HTMLを確認すると<option value="1">1</option>とvalue属性の値と、表示されている値が同じなためvalueを使って変更をします。
select_by_value()メソッドの引数に変更したいvalueの値を入れることで、セレクトボックスに選ばれている個数を変更可能です。

# 個数を5に変更したい場合
Select(element).select_by_value("5")

これで作品の在庫数の取得と、変更が可能になりました。
あと大事な箇所でminneにもありましたが、販売をする(しない)の設定があります。
展示をするの場合は、実質在庫が0の状況と考えます。
※Creemaの場合、仕様で在庫数の選択から0を選択することができません。
HTMLに<option value="0">がないことからもわかります。

minneの時と同じく、cssの疑似要素が使われていて、「販売する」と「展示する」を選ぶ毎に、「display: block;」と「display: none;」の間でcssが切り替わり、価格以降の表示がオンオフされます。

幸いなことにminneと違ってinputのラジオボタンなので取得は比較的簡単です。それぞれidがあるので要素はidで取得します。

販売するのid："form-item-status-onsale"
展示するのid："form-item-status-display"

選択されているかはis_selected()メソッドを使用します。
選択されている場合はtrue、されていない場合はfalseを返します。
販売されているか判断するソースは以下の通りです。

# idから要素を取得
input1 = driver.find_element_by_id("form-item-status-onsale")

# 販売する=True、展示する=False
print(input1.is_selected())

次に自動で選択を行う場合です。「販売する」と「展示する」それぞれに要素を取得して、click()メソッドで選択を行います。

#「販売する」と「展示する」の要素を取得する
input1 = driver.find_element_by_id("form-item-status-onsale")
input2 = driver.find_element_by_id("form-item-status-display")

#「販売する」のラジオボックスを選択
input1.click()

#「 展示する」のラジオボックスを選択
input2.click()

在庫数に関する操作を一通り確認したら「入力内容の確認」ボタンをクリックします。これまで通りXPathを使った方法で簡単に取得可能です。

button1 = driver.find_element_by_xpath('//*[@id="pagebody"]/main/div[2]/input[2]')
button1.click()

「入力内容の確認」ボタンを押すと最後に「出品する」ボタンが出現します。(個人的にはこの1工程下手して欲しい‥)
「出品する」ボタンもXPathで取得‥できない(あれ？)
最後の最後で謎の現象が起きたのですが、困ったときのお約束で、取得前にスリープ処理を数秒掛けると問題なく処理してくれました。
販売サイトが重い場合は他にもスリープが必要になるかもしれません(※要検討)

# スリープのインポート
from time import sleep

# 取得前のスリープ処理(5秒)
sleep(5)

# 「出品する」ボタンの取得
button2 = driver.find_element_by_xpath('//*[@id="js-item-detail-preview-ctrl"]/div/input[2]')

# 取得したボタンのクリック
button2.click()

在庫処理に関しては、あとはminneの在庫数とCreemaの在庫数を比較して、どちらかが少ない場合は、少ない方の販売サイトの在庫数を合わせることになります。
Creemaで在庫0個の場合は、「展示をする」に変更する必要があります。
次回完成したプログラムを紹介できたらと思います。

(3) おまけ

CreemaのサイトをChrome等の開発ツールで覗くと、コンソールに「コーディングは好きですか？」のメッセージと謎のURLが表示がされます。

コードを覗いてお怒りなのかなと、恐る恐るURLを開いてみると、Creemaさんの求人ページに飛びました。(※まったく同じURLは無くなっていてしばらくすると求人ページのトップに飛びます。)
なんかアメリカの企業が行いそうな、お茶目な求人広告です(*'▽')ｵﾁｬﾒ
(「HTMLをコンソール画面で見て求人に応募しました」と面接にいって採用されるかは知りませんが‥。)

この記事が気に入ったらサポートをしてみませんか？