目次
アムードの商品登録ポリシー変更について
最近アムードの商品登録ポリシーでこのような通達がありました。
中国輸入の場合、画像は仕入れ先のタオバオやアリババの画像を使っていることがほとんどだと思います。
しかし今回のポリシー変更では、アパレルの画像をすべて自分の撮影した画像に置き換えるよう求められており、かなり厳しい内容になっています。
ここで問題になっているのが、取引先から使用許可を得た画像であったとしても、ポリシーに違反するというところです。
使用許可を取っていれば問題ないという風に考えがちなのですが、おそらくアムードはタオバオの画像が自分のアムードの店舗にずらっと並んでいるという状態を避けたいのだと思います。
AIを活用した画像置き換える方法
この記事では大量の画像であったとしても、ChatGPTの画像生成機能とCode Xの自動ブラウザ操作機能を使って
①AIで画像を作成し直し
②アムードの1枚目の画像をAIで作った画像に差し替える
方法をご紹介します。
但し、すべての画像をAIで生成して置き換えるということは、技術的にも時間的にもかなり困難なので、まずは1枚目ということになります。
その辺りを了承した上で、このノウハウを使ってください。
このように、店舗の見た目が圧倒的に変わります。
統一感が出て、高級感を出すことが出来ています。
これなら、タオバオや1688の画像をそのまま使っている店舗と差別化を行う事が出来ます。
準備
VS Codeの導入
まずは、自動化を行うためにCodeXを利用できる環境を用意します。
ChatGPTで作業を行いますので、ChatGPTの有料プランに登録して下さい。
プランはCodeXを利用できるプラスプラン以上にしてください。
利用しているプランに「CodeX コーディングエージェント」と記載されていればOKです。
次に
VS Codeをダウンロードします
これは、CodeXを動かすための指令場所になります。
ダウンロードしてインストールしてください。
起動するとこんな画面が出てきます。
次に、ChatGPTと接続して、CodeXを使える状態にします。
赤枠で囲った四角が4つ並んだようなところをクリックします。
次に、検索窓に「CodeX」と入力して、「install」ボタンをクリックしてください。
Codexパネルを開くとログイン画面が出ます。
ここでChatGPTアカウントにログインします。
右上のところの「CODEX」というタブをクリックします。
次に、右下の「Next」をクリックして、最後はFinish か Doneまで進めてください。
次に、作業フォルダを作ります。
この作業フォルダで今後の全ての作業やファイルの管理を行います。
デスクトップに「sheet-image-downloader」というフォルダを作ります（フォルダ名は何でもいいです）
こんな感じです
次にこのフォルダをVS Codeで動かせるようにします。
手順
①左のメニュータブの一番上のアイコンをクリック
②一番上のメニューバーの「File」をクリック
③「Open Folser」をクリック
先ほど作ったフォルダをクリックして、右下の「Select folder」をクリック。
左側のExplorerに先ほどのフォルダ名が出てきたらこれで連結できています。
Pythonの導入
次にPythonを導入します。
今回は、自然言語ではなく、プログラムで動かします。
そのプログラムがPythonです。
こちらで全てのプログラムを用意しているので、ご安心ください。
まずはここをクリックしてpythonを自分のPCにダウンロード
これで最後まで作業を続けて、PCにダウンロードしてください。
これが出来たら、次にＶＳ Codeに導入します。
ＶＳ Codeの検索で「Python」と入力します。
これで、VS CodeでもPythonが動くようになりました。
実際に動くかテストしてみましょう。
※ここでは、テストファイルを作って動かしてみますが、Pythonのファイルを動かす方法はここから全て同じです。
最初は慣れないかもしれませんが、慣れれば簡単なので、やってみましょう。
まず、実行ファイルを追加します
先ほど作ったフォルダの名前の横のアイコンをクリックします。
そうすると、下の赤枠のような入力欄が出てきます。
ここで「test.py」と入力します。
この「.py」というのがpyhonの実行ファイルです。
ここに、プログラムを書いていきます。
こんな感じになりました。
※プログラムを書いたら必ず「ctr+S」をこまめに押してセーブしましょう（macの場合はcmmand+S)
※※ここで作ったファイルなどは、最初に作った「sheet-image-downloader」のフォルダに自動で作成されます。
VS Codeでデスクトップを操作している感じが分かると思います。
さっき作ったファイルに
print(“Hello World”)
と入力します。
実行します。
上のメニューバーの「terminal」をクリック
その下の「New Terminal」をクリックします
これがTerminalです。
ここでファイルを実行します。
この状態でTerminalで
python test.py
と入力してEnterを押します。
※Pythonの実行方法は
Python＋実行ファイル名.py
という形式です。
こんな感じでTerminalに「Hello world」と表示されたらOKです。
※※Pythonのコードを実行するときは必ず
PS C:\Users\anoth\OneDrive\デスクトップ\sheet-image-downloader>
この状態になっていることを確認し＞の横に実行コマンドを貼り付けてください。
この状態になっていない時はCtr＋Cを何回か押してください。
ここまで出来たら準備完了です。
お疲れ様です。
※ここまでで、実行できないのであれば
①ChatGPTのプランがCodeXがつかえないプランになっている
②VS Code内でChatGPTがinstalできていない
③VS Code内でChatGPTがログインできていない
④Pythonがダウンロードできていない
上記のいずれかだと思います。
一つ一つ潰していってください。
個別環境で、このマニュアルと違う時は、スクリーンショットを取って、ChatGPTに画面をアップロードして
「VS Codeで、CodeXを使って、Pythonを動かしたい。今こういう画面が出ている。導入まで、ステップバイステップで教えて。必ず、間の過程を飛ばすことなく、丁寧に画像付きで教えて」
と入力してみてください。
かなり丁寧に教えてくれると思います。
全体の流れ
ここまでで、準備が出来たので、ここから実際に「AIで画像を作成して、amood/ABLYの商品ページを差し替えていく」作業を行います。
実際に作業をする前に全体像をつかんで下さい。
全体像を掴まないと、途中で迷子になってしまいます。
① amoodとABLYの商品番号と画像URLが紐づいたファイルをgoogle スプレッドシートで作る。
利用するツールは「EasyScraper」と「googleスプレッドシート」
② amoodとABLYの商品番号を突合せできるような状態にする。
利用するツールは「googleスプレッドシート」
③ ①のスプレッドシートの内容を使ってCodeXでamoodの画像をダウンロードしてくる
④ amoodとABLYを「販売停止」状態にしておく（こうしておかないと登録がスムーズに行かない）
⑤ ChatGPTのAPIを取得する
⑥ amood用のChatGPTで一括で画像を編集する
⑦ 編集した画像をABLY用にも作る
⑧ amoodの画像を差し替えていく
⑨ ABLYの画像を差し替えていく
ステップは多く感じますが、一つ一つの手順はそこまで面倒ではないので、進めていきましょう。
画像を差し替えていく
① amoodとABLYの商品番号と画像URLが紐づいたファイルをgoogle スプレッドシートで作る。
まず、EasyScraperを導入します。
googleChromeのアドオンなので、googleChromeで使ってください。
使いやすいようにしておきます。
googleChromeの赤枠のところをクリック
「拡張機能を管理」をクリック
この画面でEasyScraperの「詳細」をクリック
ツールバーに固定するをオンにします。
これで、googleChromeのURLバーの横に常駐するようになります。
使う時は、このアイコンをクリックするだけです。
amoodの画像取得
次に、amoodの画面に行きます。
赤枠のところをクリックして、amoodの商品一覧が出る状態にします。
一番下までスクロールして1ページあたり100件に設定します。
EasyScraperを起動します。
その状態で以下の赤枠のようにクリックしていきます。
選択ボタンをクリック
ページ一番下まで行って、赤枠のところをクリックします。
次に、「スクレイピングを開始」をクリックします。
これで最後のページまで自動で取得してくれます。
処理が終わったらスプレッドシートに貼り付けます。
コピーをクリックします。
新しいスプレッドシートを開いて、A1のセルをクリックして、Ctr＋Vを押して貼り付けます。
A列が、商品の番号
D列が商品名です。
この二つのデータを使います。
ABLYの画像を取得する
同じようにABLYの画像も取ります。
ABLYの商品一覧に切り替えて、1ページあたりの表示を100にする。
同じようにEasyScraperでデータを取っていきます。
但し
ABLYの仕様的に、ABLYの自動ページ送りが出来ません。
なので、1ページずつ手動でめくるしかありません。
ちょっと面倒ですが
①データを取りたいページを開く
②EasyScraperを開く
③開いたページは、EasyScraperがデータを取得してくれる。
④コピーを押す
⑤新規のスプレッドシートを開く
⑥Ctr＋Vで貼り付けをする
⑦EasyScraperを消す
⑧ABLYの次のページをめくる
⑨またEasyScraperを立ち上げる
⑩ ⑥～⑨を最後まで繰り返す
という手順を踏んで下さい。
最終的にABLYもこのようなデータを作る事が出来ます。
② amoodとABLYの商品番号を突合せできるような状態にする
amoodとABLYは同じ画像を使っているんですが、HPが違うので、それぞれ別の商品番号で管理されています。
ここで、amoodの画像データとABLYの画像データを突合せが出来るようにしておくと、ChatGPTで編集した画像を再利用することが出来ます。
これをやる事で、画像生成に関するコストを抑えることができます。
まず、新しいスプレッドシートを立ち上げます。
先ほど取得した二つのデータをこのように貼り付けます。
E3のセルに
=vlookup(D3,G:J,2,false)
という関数を入れてください。
この関数は、amoodとABLYの商品名が一致するものを検索して、amoodの商品番号を返してくる関数です。
ちゃんと数字が出てくることを確認して、更に同じ商品の番号が呼び出せているかを確認して下さい。
ここでミスすると、まったく違う画像をABLYに登録することになるので注意してください。
後は、全部の商品に対して行います。
E3セルをクリックして、セル右下にカーソルを合わせます。
カーソルが十字になればOKです。
その状態でマウスの左ボタンをダブルクリックすれば、一気に下まで商品番号を入れることができます。
ちゃんと一番下まで数字が入っているかを確認してください。
ここまでで、画像データを取得する準備が出来ました
③ amoodとABLYを「販売停止」状態にしておく
amoodとABLYを販売停止にします。
これをしておかないと、販売状態で画像を差し替えても、登録データが上書きされません。
面倒ですが、販売停止にしておきましょう。
1ページあたりの表示を100にします。
全商品を選択して、販売停止をクリックします。
これを全商品に対して行います。
ABLYの方も同じことをしてください。
④ CodeXでamoodの画像をダウンロードしてくる
ここから、CodeXを動かしていきます。
sheet-image-downloaderフォルダの中に
images.csvというファイルを作ります。
image.csvファイルに
A列にamoodの商品番号
B列にamoodの画像URL
を貼り付けます。
A1に goods_id
B1に image_url
と記入して下さい。
次に、sheet-image-downloaderフォルダの中に
⑤ ChatGPTのAPIを取得する
次に、ChatGPTで編集できるようにAPIを取得します。
API keysをクリック
赤枠の「＋Create new secret key」をクリック
赤枠をクリック
ここに出てくる文字列をコピーして、メモ帳などに貼り付けて保存して下さい
※シークレットキーは悪用されると、勝手にAPIを利用されるなどセキュリティ上のリスクがあります。
絶対にAIに入力したり、他の人に知られることがないようにして下さい。
ここでうまくコピーが出来なかったら、新たにシークレットキーを作ってください。
支払いが出来ないとAPIを使う事が出来ませんので、支払いに関する設定も確認しておきましょう。
初期状態ではAPIの利用料は上限がかかっていると思います。
ここで、上限は確認しましょう。
作業しながら出大丈夫です。
⑥ amood用のChatGPTで一括で画像を編集する
いよいよ画像を生成していきます。
ここで注意事項です。
この画像の処理は、APIを利用して、画像を生成するので、画像を生成するたびに、料金が発生します。
このマニュアルで紹介するソースコードは
① モデルの画像を生成しない
② 安い方のイメージ生成AIモデルを利用する
③ APIを呼び出す回数を減らす
という処理を入れています。
おおよそ一枚の画像が0.03ドルくらいで出来るようになっていますが、しっかりと、自分でも課金状況を確認するようにして下さい。
まず「sheet-image-downloader」のフォルダに
edited
failed_edit
というフォルダを作ってください。
edited：AIで編集した画像が入るところ
failed_edit：編集失敗した画像が入ることろ。
logs：編集ログを確認するためのファイルが入るところ。
次に「sheet-image-downloader」のフォルダに
のcsvファイルを作ります
次にここをクリックして、
入力フォームに
analysis_cache.json
というファイルを作ります。
そこにこの内容を貼り付けてください。
次にAPIキーを設定します。
赤枠をクリックして、入力欄に「.env」というファイルを作ってください。
そこに
と入力して下さい。
次に実行ファイルを作ります。
赤枠をクリックして、「edit_images.py」と入力してください。
この内容を貼り付けてください。
次に、prompt.csvを開きます。
A1に goods_id
B1に prompt
と入力します。
A列に、取得したamoodの商品番号を全て入力します。
B列には、このプロンプトを貼り付けます。
保存して、csvファイルを閉じます。
ここまでで実行準備が完了しました。
このファイルを実行すると、画像が生成されていきます。
edit_images.py
処理としては、
downloadsフォルダに入っている画像が、自動的にeditedフォルダに入っていきます。
こんな感じで、全自動で名前を付けて保存してくれます。
画像が生成できたかどうかは
logsフォルダのgeneration_log.csvに記録されます。
実行の仕方は
terminalで
python edit_images.py
と入力してenterを押せばOKです。
※途中で処理を止めたい場合は、Terminalの実行中にCtr＋Cを何回か押してください。
強制終了します。
※※Pythonのコードを実行するときは必ず
PS C:\Users\anoth\OneDrive\デスクトップ\sheet-image-downloader>
この状態になっていることを確認し＞の横に実行コマンドを貼り付けてください。
この状態になっていない時はCtr＋Cを何回か押してください。
⑦ 編集した画像をABLY用にも作る
⑥で生成した画像を、ABLY用に作っておきます。
amoodとABLYの商品編集ページのURLは商品番号で生成されています。
なので、amoodの画像名を対応するABLYの画像名にリネームすればOKです。
まず準備です。
「 sheet-image-downloader 」
の中に
⑧ amoodの画像を差し替えていく
これで差し替えの準備が出来ました。
次は、実際に商品ページを編集していきます。
ここからのブラウザ操作の作業は、APIを使いませんので、費用は掛かりません。ご安心ください。
sheet-image-downloader フォルダに
uploaded
という二つのフォルダを作ります。
自動化する作業としては
① editedの画像を画像名から自動的に商品編集ページに移行
② メイン画像と、サブ画像の1枚目を新規に作成した画像に差し替え
③ 成功したものはuploadedフォルダに移動
④ アップロード失敗したものはfailed_uploadedフォルダに移動
という動きをします。
次に実行時間を設定するファイルを作ります。
赤枠をクリックして、
amood_config.json
と入力します。
そのファイルにはこの内容を貼り付けてください
次に実行ファイルを作ります。
赤枠をクリックして
赤枠をクリックして、入力欄に「 upload_amood_images.py 」と入力します。
upload_amood_images.pyにはこの内容を貼り付けてください
次にログインを維持する機能を入れます
ここはオマジナイと思ってこの通りにやってください。
PC左下のwindowsボタンを押してください。
検索窓にPoweShellと入力してください。
これをクリックしてください。
次に、フォルダのパスをコピーします
sheet-image-downloader フォルダをマウスで選択した状態で右クリック→「パスのコピー」というボタンをクリックします。
次に以下のようにしてください。
赤枠のように表示されたら成功です。
次にこのように入力します
mkdir browser_profile
次にこのように入力します
python upload_amood_images.py
すると、amoodの画面が立ち上がるので、ログインしてください。
この状態でVS CodeのTerminalに戻ってエンターを押してください。
一回ブラウザと、PowerShellを閉じてください。
これでログインの準備が出来ました
いよいよ実行します
Terminalで
python upload_amood_images.py
と入力してenterで実行します。
すると、自動でamoodのログイン画面が立ち上がります。
右上の「ログイン」ボタンをクリックして、次の画面でログイン情報を入れてください。
ここはセキュリティのため、手動としています。
CodeXの方は、このように待機状態にいます。
ログイン出来たらenterボタンを押してください。
ここからは自動でブラウザ操作で画像が差し変わっていきます。
たまに、処理が落ちてしまったり、停止することがあるのですが、その時は、また、Terminalから
python upload_amood_images.py
を実行すれば大丈夫です。
※途中で処理を止めたい場合は、Terminalの実行中にCtr＋Cを何回か押してください。
強制終了します。
作業中はこんな感じ、amoodの編集画面
edited
uploaded
⑨ ABLYの画像を差し替えていく
ここからは、ABLYも同時に作業できるようにします。
基本的には⑧とほぼ同じですが、ABLY用の環境を構築する必要があるので、⑧と同じような内容ですが順を追って作業してください
sheet-image-downloader フォルダに
という二つのフォルダを作ります。
自動化する作業としては
① renamedの画像を画像名から自動的に商品編集ページに移行
② メイン画像と、サブ画像の1枚目を新規に作成した画像に差し替え
③ 成功したものはuploaded_renamedフォルダに移動
④ アップロード失敗したものはfailed_uploaded_renameフォルダに移動
という動きをします。
次に実行時間を設定するファイルを作ります。
赤枠をクリックして、
amood_renamed_config.json
と入力します。
そのファイルにはこの内容を貼り付けてください
次に実行ファイルを作ります。
赤枠をクリックして
赤枠をクリックして、入力欄に「 upload_ably_images.py 」と入力します。
upload_ably_images.pyにはこの内容を貼り付けてください
次にログインを維持する機能を入れます
ここはオマジナイと思ってこの通りにやってください。
PC左下のwindowsボタンを押してください。
検索窓にPoweShellと入力してください。
これをクリックしてください。
次に、フォルダのパスをコピーします
sheet-image-downloader フォルダをマウスで選択した状態で右クリック→「パスのコピー」というボタンをクリックします。
次に以下のようにしてください。
赤枠のように表示されたら成功です。
次にこのように入力します
mkdir browser_profile_renamed
次にこのように入力します
python upload_ably_images.py
すると、amoodの画面が立ち上がるので、ログインしてください。
この状態でVS CodeのTerminalに戻ってエンターを押してください。
一回ブラウザと、PowerShellを閉じてください。
これでログインの準備が出来ました
いよいよ実行します
amoodの編集と同時に行う事が出来ます。
amoodの編集実行をしながら出大丈夫なので、VS Codeから新しいTerminalを開いてください。
複数Terminalを開くことができます。
なので、片方で、amoodの編集実行。片方でABLYの編集実行を行うイメージです。
新規に立ち上げた方のTerminalに
python upload_ably_images.py
と入力してenterで実行します。
すると、自動でamoodのログイン画面が立ち上がります。
右上の「ログイン」ボタンをクリックして、次の画面でログイン情報を入れてください。
ここはセキュリティのため、手動としています。
CodeXの方は、このように待機状態にいます。
ログイン出来たらenterボタンを押してください。
ここからは自動でブラウザ操作で画像が差し変わっていきます。
たまに、処理が落ちてしまったり、停止することがあるのですが、その時は、また、Terminalから
python upload_ably_images.py
を実行すれば大丈夫です。
※途中で処理を止めたい場合は、Terminalの実行中にCtr＋Cを何回か押してください。
強制終了します。
作業中はこんな感じ、amoodの編集画面
renamed
を開いておくと挙動が分かりやすいです。
販売再開
お疲れさまでした。
これで、ほぼ全自動で画像のAI生成→差し替えを行う事が出来ました。
後は、販売停止状態になっている商品を販売中に変えていけばまた販売を再開することができます。