※有料ですが全文読めます。読後、参考になるようでしたらサポートしていただけると大変喜びます。

リアル本屋をやるとしたら・・・WEBに商品を全て公開する_3_商品登録編_2

今回3回目の記事です。

このノートをはじめたきっかけは、下記ツイートです。

前回までの流れを確認すると、

１.在庫確認ECショップのBASEから数量を読み取りGoogleスプレッドシートに在庫表として記録する２．商品登録商品登録するための書籍情報をAmazonAPIとGoogleスプレッドシートのGAS（Google Apps Script）で取得入力する

今回は、商品登録の画像データの取得の解説です。

前回作成したシート内の画像URL情報をもとに、

・画像をWEBから取得し、・画像フォルダに格納、圧縮

という流れでZIPファイルを作成します。

画像URLをもとにWEBから画像を取得する方法は、

一度、ブラウザで画像を全て表示させ、各画像をダウロードする

という方法にします。

つまり、1ページ、画像だけを表示させるページである「画像ページ」を簡易に作ります。そのページに対して、あるツールを使い一括でダウンロードします。

画像ページを作るには少し面倒なのですが、WEBサイト作成に使用されるhtml言語に書き込み、ブラウザで閲覧できるようにします。

まず必要な画像URLの情報は、スプレッドシートのシート「ISBN検索」の項目の「書籍情報URL」を、シート「画像リンク作成」に下記のように参照させます。

下記が実際のスプレッドシートです。

書籍情報URL（赤枠）の左右は、html言語のコードです。書籍情報URLを挟むように書いていき、最右記の項目「結合」で、結合させます。

下記のようなコードが出来上がります。

<img src="https://images-fe.ssl-images-amazon.com/images/I/51Xs1m7ksFL.jpg">

次に、結合したものをブラウザにあげて、画像をダウンロードする、という流れです。

下記結合項目のデータをコピーします。

次に、ブラウザに公開し、画像をダウンロードするのですが、ブラウザはサーバーなど用意する必要があったりします。今回は、BASEでサイト公開しているので、その環境を借りて、作業します。

まず、BASEの Appsで「HTML編集」をインストールし、html編集まで進みます。

ここまで進むと、先のスプレッドシートでコピーした、htmlコードを下記画像の黒画面の、</body>と記載された上の貼り付けます。そして「プレビューの更新」を押します。

右のプレビュ-画面、赤枠部分が画像データがブラウザで表示された状態です。あくあで画像データを取得するだけの作業だので、プレビュー状態のままにしておきつつ、次はダウンロード作業に進みます。

「Chrome　ウェブストア」でChromeの拡張機能を追加

ブラウザの別タブを開き、「Chrome　ウェブストア」でChromeの拡張機能を追加します。
https://chrome.google.com/webstore/category/extensions?hl=ja

左記の赤枠に「image downloader」と入力すると、右記に赤枠の拡張機能が表示されるので、「評価する」というボタンがインストール前だと、「Chromeに追加」といったボタンになっているので、押して追加してください。

ブラウザの右表部に拡張機能がアイコン一覧で出てくるので、赤枠のアイコンを探してください。

こちらを、左記のBASEの「プレビュ-画面」を開きながら、押します。

下記のように、右部に現在ブラウザ上に表示されている画像がすべて列挙されます。

必要なものを選択していくのもいいですが、数多いので、全て選択して、のちほど不要なものは削除していくことにします。全て選択して「DOWNLOAD」を押すと、ダウンロードできます。事前にダウンロード用のフォルダなどを用意して格納してあげてもいいと思います。

プレビュ-画面は、「戻る」「終了」で作業を終了させます。「保存」すると、本番が更新されるのでご注意ください。

ダウンロードした画像データをBASEにあげる画像フォルダZIPにする

先程、ダウンロードしたフォルダで必要な画像データのみ残し、圧縮します。

圧縮はWindowsは下記のような流れです。

上記のZIPファイルを、商品CSVファイルとアップロードします。

CSVファイルは、Googleスプレッドシートの下記からダウンロードできます。

CSVファイルをダウンロードしたら、２つのデータをアップロードし、画像にはありませんが下部の「確認する」を押します。

「インポートする」を押します。

しばらく待つと、新商品として公開されています。

赤枠が新商品で、青枠が、写真が反映されていません。これは、CSVデータとZIPの画像データの名前が一致していないので、反映されませんでした。

上画像の
右赤線が、CSVの画像データ名です。
左赤線が、画像ZIPの画像データ名です。

これは、おそらく、ブラウザにあげた画像のダウンロード時などに、ファイル名を生成する際の％を＋に読んでしまったエラーかと思います。

この部分は、適宜修正してからアップロードすると良いと思います。

商品登録の画像データの取得については、以上です。

これにて、新商品の一括登録ができるようになりました。

技術的な不明点はお気軽にご連絡ください。また、実際のWEB作業などもお手伝いできますのでお気軽に相談ください。

実際のECショップとスプレッドシートは下記です。

次回以降は、

それ以降の公開予定記事

・ECショップ検索・実店舗売上記録編
・返品対応編

別テーマ
実店舗が電子書籍を取り扱うとしたら・・・スキームの構想と具体案

などです。

よろしくおねがいします。

本屋さんへのWEB相談・支援承っております

本屋さんや出版社さん、酒屋さん、小売店舗さん、美容院さん、個人病院さん、個人事業さんなど、街場の商いや「個人やまだ小規模だけどもっとWEBをいろいろやりたい」かたなどのご相談、支援など承っておりますので、お気軽にご相談ください。※企業のWeb担当も承っております。

Twitterもやってます

Twitterで更新告知しているので、本と本屋とWebについての情報を知りたい方どうぞお気軽にフォローください。