記事一覧

スタンプ売り上げを自動収集!!

日々のスタンプ売り上げを自動収集しますよ~!

Lineスタンプクリエイター活動休止中のurajoです♪
また台風が来てますね~、大変なことにならないといいけど。



さて、今日は、スタンプの売り上げの自動収集について書きます。
2日ほど前からうまく動かなくなり、原因分析と対策に取り組んでいました。



■まず、前提となる条件は、過去の記事を見てください!
っていうのもなんですから、ちょっとだけポイントだけ書きます。
・RasberryPIを使って毎日時刻起動して収集してます。
・seleniumっていうスクレイピングツールを使ってます。
・ブラウザは、PhantomJSっていうヘッドレスブラウザを使ってました。
・収集したデータは、GoogleDriveのスプレッドシートに書き込みます。
という感じです。

ということで、
・RasberryPIって何?
・seleniumって何?どうやっていインストールするの?
・phantomJSって何?どうやってインストールするの?
っていう人は、googleで検索して調べてください。
世の中にはたくさんの解説記事があります。
私もそれを見て何とか作りましたので。笑

■発生したエラー
今回何が発生したかというと、seleniumから「売上/送金」ボタンが見つからなかったというエラー。
つい数日前まで動いていたのにね。
そういえば、1か月ほど前に同じような事象が発生し、調査しているうちに回復したので、放置してました。
やっぱり、問題を抱えたままだったのか。。。



■原因は何か?
まず疑われるのは、これまで動いていたものが急に動かなくなったわけですから、
LINEのWebページの作り方が変わったのだろう、ということ。
あとは、rasberryPIのOSやミドルウェアをバージョンアップしたので、
phantomJSがうまく動かなくなったということ。

エラー直前の画面をキャプチャしてみたら、ちょっと画面が崩れている。
phamtomJSの問題か?
ということで、いろいろ調査した結果、
phantomJS → Chrome
に変更してみることにしました。
今年の夏くらいに、Chrome driverがでていて、seleniumから自動操作できるようになったらしい。



■Chrome driverのインストール
これは、googleで調べたら簡単に見つかりました。
======================
# chromeブラウザインストール(2018.7.10時点でv65)
$ sudo apt-get install chromium-browser

# v65のChromeに対応したChromeDriveをインストール
$ sudo apt-get install chromium-chromedriver
======================
それぞれ、apt-getコマンド一つで完了!!

さらに、
seleniumのプログラムをphantomJSから、chromeに変更して、対策完了!!
コードは省略(※googleで検索したら参考になるコードがたくさん見つかりますから)



■試してみたら、やっぱり駄目だった
早速、改修したプログラムで試してみた。
結果、やっぱり駄目でした。エラーは同じ。「売上/送金」が見つからない。
何でだろう?

こういうときは、画面キャプチャした結果を見てみる。
↓これです。



何と、キャンペーンのポップアップダイアログが出てる。そして、英語だ。
この画面が邪魔して、後ろにある「売上/送金」ボタンが押せないのだ!

この原因特定に至るまでに、ヘッドレスモードでないChromeを使いながら、
何が問題なのかを調べました。

まず、ヘッドレスモードでないChromeで試してみたら、英語→日本語表示になりました。
そして、この画面が出たタイミングで、手動でマウス操作して、ポップアップ画面を消して、
そのあと、続きのコードを実行したら、ちゃんと「売上/送金」ボタンを自動クリックできました。

ボタンが画面に隠れているだけで、ボタンが押せないのです。
原因は特定できました。
以前、同じ問題が発生したときも、これが原因だったのですね。
そして、自然回復したのは、ポップアップ画面が表示されなくなったからだね。
納得、納得。

ということで、やることはきまりました。
ポップアップ画面を消す操作をseleniumに追加すればいいんだ。



■ポップアップ画面を消してみる
まずは、ポップアップ画面がどうやって表示されているのか調べないとね。
いつものようにChromeのデバッグ用のツールでソースを表示してみた。

↓これが、該当するポップアップ画面の部分(抜粋)
====================
<!-- ngRepeat: popupData in popupModels --><div ng-repeat="popupData in popupModels" class="MdPOP01Modal ExBackdrop MdNonDisp FnGenericPopup4" lcm-fixed-backdrop="">
<div class="mdPOP01Window mdPOP01Window03">
<div class="MdPop22CampaignBasic">
<div class="MdPop22CampaignBasicTitle">
<h1 class="ng-binding">LINE Creators Collaboration 第二弾は「初音ミク&ピアプロキャラクターズ」</h1>
</div>
<div class="MdPop22CampaignFloatBody">
<div class="mdPop22CampaignFloatBodySpacer"></div>
<img class="mdPop22CampaignFloatBodyImage" ng-src="https://creator.line.me/api/popup/4/images/JP" src="https://creator.line.me/api/popup/4/images/JP">
<div class="mdPop22CampaignFloatBodyDesc ng-binding" ng-bind-html="popupData.meta.description">人気キャラクターを利用したスタンプの販売ができるLINE Creators Collaborationの第二弾として「初音ミク&ピアプロキャラクターズ」が決定。<br>クリエイターの皆さまによる彼女たちへの愛にあふれたスタンプを、この機会にぜひ販売してください。<br><br><b>審査の申請手順</b><br>1.「初音ミク&ピアプロキャラクターズ」のキャラクターを使った新規スタンプをつくります。<br>2. スタンプの編集画面>販売情報の中にある「LINE Creators Collaboration」で「LINE Creators Collaborationのスタンプです」をチェックします。<br>3. プルダウンから「初音ミク&ピアプロキャラクターズ」を選択します。<br>4. スタンプの審査をリクエストします。<br><br><b>審査受付期間</b><br>2018年8月31日(金) 11:00~(GMT+9)<br><br><b>販売可能期間</b><br>2018年10月15日(月)11:00~2019年10月14日(月)23:59(GMT+9)</div>
<!-- ngIf: popupData.meta.url --><div ng-if="popupData.meta.url" class="mdPop22CampaignFloatBodyDesc ng-scope" lcm-link-replacement="https://creator.line.me/my/announce/article?id=20091815">詳細は<a href="https://creator.line.me/my/announce/article?id=20091815" target="_blank">こちら</a>からご覧ください。</div><!-- end ngIf: popupData.meta.url -->
<div class="mdPop22CampaignBasicBodyFootnote"></div>
<div class="mdPop22CampaignFloatBodyFootSpacer"></div>
</div>
<div class="
MdPop22CampaignBasicControl"> <!-- Control -->
<div>
<label><input name="check" ng-click="genericPopups[popupData.id].toggleDisablement()" type="checkbox">今後、この画面を表示しない</label>
</div>
<div class="MdBtn01 mdBtn01Cr01">
<button class="FnCloseDialogBtn mdBtn">閉じる</button>

</div>
</div>
</div>
</div>

====================

この最後の部分にあるボタンが押したい。
↓ここです
<div class="MdBtn01 mdBtn01Cr01">
<button class="FnCloseDialogBtn mdBtn">閉じる</button>


ということで、seleniumのコードに以下を追加。
driver.find_elements_by_class_name('FnCloseDialogBtn mdBtn')

ところが、これがseleniumから見つからない。何でかはわからない。

とにかくこの画面のどこかをクリックしたい。
実際に画面をマウスで操作してみると、必ずしもボタンを押さなくても、画面をクリックしたら画面が消える。
何とかして、クリックしたい。ということで、順番にいろんなclassを試してみた。
そして、見つけました!!

driver.find_elements_by_class_name('MdPop22CampaignBasicControl')

です。全部で、9個のエレメントが返ってきました。
なぜ9個もあるのかというと、過去のポップアップ画面含めて、複数画面が重なっているからですね。
順番に、クリックしてみました。
dialog = driver.find_elements_by_class_name('MdPop22CampaignBasicControl')
dialog[0].click()
dialog[1].click()
・・・

って感じで、0番~8番までクリックしてみた。

最初の方は、エラーが返ってくる。

selenium.common.exceptions.ElementNotVisibleException: Message: element not visible

なるほど。画面が表示されていないから、クリックできないんだ。
でも、6番目以降は、めでたく、ポップアップ画面が消えました!!
これはうまくいきそうです!!

ということで、プログラム化しました。該当部分はこんな感じ。赤字の部分が追加したコード。
====================
#右上のマイページをクリックしてログインページに移動
driver.find_element_by_link_text(u"マイページ").click()
time.sleep(2)

#ログインする(※xxxxは、それぞれのユーザIDとパスワードを埋めます)
driver.find_element_by_id("id").send_keys("xxxxxx")
driver.find_element_by_id("passwd").send_keys("xxxxxxxx")
driver.find_element_by_class_name('MdBtn03Login').click()
time.sleep(10)

driver.save_screenshot("result1.png") # capture result page

#キャンペーンダイアログがでていたら消す
dialog = driver.find_elements_by_class_name('MdPop22CampaignBasicControl')
list_len = len(dialog)
print("dialog list= " + str(list_len))

for i in range(list_len):
try:
dialog[i].click()
except:
print("dialog:" + str(i) + " not found")
else:
print("dialog:" + str(i) + " is clicked !")


#売上メニューを開く
try:
botton = driver.find_element_by_link_text(u"売上/送金")

※以下省略
====================
print文はデバッグ用に入っているだけなので気にしないでください。

ポップアップ画面を順番にクリックしていくだけです。
exceptionが出ても次に進むようにしてくださいね。except:文を書かないと止まっちゃいますよ。

ここまでできて、無事、ヘッドレスモードでないchromeから自動収集できるようになりました。



■ところが、またまたエラーが出た
ヘッドレスモードで時刻起動するようにcron設定しておいたのですが、翌日見たら、またエラー。
エラー内容は、「売上/送金」が見つからない。またか。。。

いつものように画面キャプチャしてみた。



なるほど。忘れてた。英語問題だ。画面ありモードだと日本語になっていたので油断してた。
でも、ポップアップ画面はちゃんと消せている。いいね。

ヘッドレスモードでは英語になっているから、「売上/送金」が見つからないのだ。日本語表示じゃないからね。

ということで、googleで検索。
ヘッドレスモードで動かすときの言語設定ができるらしい。
ついでに画面サイズも大きくできるらしい。

Chrome driverを起動するときにオプションで指定しました。
#selenium crome setting
options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--lang=ja')
options.add_argument('--window-size=1024,768')
driver = webdriver.Chrome(executable_path="/usr/lib/chromium-browser/chromedriver", chrome_options=options)

って感じですね。

↓この結果、ちゃんと日本語表示になりました。



↓さらに、ポップアップ画面も無事消せるようになりました。



めでたし、めでたし。
これで、また今日から自動収集してくれるようになります。



PS.
ところで、このデバッグのためにLINEのサイトに何度もアクセスしているうちに、これを発見しました!!

↓これです。



なんかすごいことが追加されていますね。
クリエイターの承諾なしに、こんなことができるようになってしまったのですね。。。

はい、今回の報告は以上!

ぜひ、urajoのスタンプを観てください。気に入ったら、買ってください。
気に入らなくても買ってくれたらうれしいです(笑)
https://store.line.me/stickershop/author/43163/ja


関連記事

コメント

コメントの投稿

非公開コメント

ブログ村

プロフィール

urajo

Author:urajo
Line(ライン)のスタンプを作成している週末クリエイターのurajoです♪
イラストソフトがなくても、パワーポイントでスタンプが作れるんです。
クリエイターズスタンプって売れるのか?儲かるのか?もう遅いのか?
そんな疑問に応えるべく、自らスタンプ作成に挑戦しています!
スタンプの売上数、送信数、分配金などを報告していきます♪

訪問してくれた人

つぶやき♪

アクセスランキング

[ジャンルランキング]
趣味・実用
4737位
アクセスランキングを見る>>

[サブジャンルランキング]
手芸・ハンドクラフト
885位
アクセスランキングを見る>>

ブログ村

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ キャラクターデザインへ
にほんブログ村 小遣いブログ お小遣い稼ぎで節約へ