ワインのデータをスクレイピングする(Vivino編)

1571 語
8 分
ワインのデータをスクレイピングする(Vivino編)

はじめに#

僕は今まで自分が飲んだワインの情報をメモしています。

そして、一時期に週2くらいで飲んでいたときに、そのメモを取るのがめんどくさくなったので、一気にワインの情報を集められるようにスクリプトを作成しました。

そして、このスクリプトで取得したデータをGoogle Spreadsheetに貼り付けて、以下のように管理しています。

という冒頭で前回のvinica編もお届けしましたが、今回は、Vivinoというサイトで取得するスクリプトを紹介します。なぜ、Vivinoを使ったかというと、vinicaに取得したかったワインがなかったのです・・・。

このスクリプトは開発者ツールで実行します。 今回使ったワインのページは、ここです。

※ 今回注意したいのが、Vivinoは一度ページの最下部までスクロールしないと、ページが全てレンダリングされないみたいなので、スクロールしてから開発者ツールで要素を選ぶ必要があります。

以下になります。

ソース#

// code by utf-8
// Use Developer Tool(by ⌥⌘I)
var today = new Date();
var length_of_taste = 'width: 20%; left: '.length;
var color_of_wine = `${[...document.querySelectorAll('a')][11].innerText}`.replace('wine', 'Wine');
var list_of_target_parameter_of_wine;
// ワインの種類によって、取得するパラメータを変える。
switch (color_of_wine) {
case "White Wine":
list_of_target_parameter_of_wine = [0, null, 1, 2, null];
break;
case "Red Wine":
list_of_target_parameter_of_wine = [0, 1, 2, 3, null];
break;
}
// 各パラメータにスコアを付けて、その各スコアを結果用のリストに出す。
var list_of_result_parameter_of_wine = list_of_target_parameter_of_wine.map(target => {
if (target == null) {return null;}
// Vivino上のスコアを取得する。
var score = Number(document.getElementsByClassName('indicatorBar__progress--3aXLX')[target].style['cssText'].substr(length_of_taste,2));
switch (true) {
case score > 70:
return 5;
case score > 50 && score <= 70:
return 4;
case score > 30 && score <= 50:
return 3;
case score > 10 && score <= 30:
return 2;
case score <= 10:
return 1;
}
})
var array = [`${[...document.querySelectorAll('span')][10].innerText}${[...document.querySelectorAll('span')][11].innerText}`, // ワイン名
`${today.getFullYear() + "/" + String(Number(today.getMonth()) + 1)}/${today.getDate()}`, // 出会った日
``, // Instagramに上げた日
``, // 製造年
color_of_wine, // 色
``,// 醸造方法
``,// 金額
``,// 入手場所
``,// 最寄り駅
`${[...document.querySelectorAll('td')][14].innerText}`.replace(/\//g, '>'), // 原産地
``, // 原産国
``,// 感想
``,// ハッシュタグ
`${[...document.querySelectorAll('td')][13].innerText}`.replace(/, /g, '、'), // 備考(葡萄とか)
location.href, // 参考1
``,// 参考2
``,// Instagramに貼り付け
``,// vinicaフォルダに入れた
list_of_result_parameter_of_wine[0], // ボリューム(軽い<重い)
list_of_result_parameter_of_wine[1], // タンニン(控えめ<強い)
list_of_result_parameter_of_wine[2], // 甘み(ドライ<甘い)
list_of_result_parameter_of_wine[3], // 酸味(まろやか<シャープ)
list_of_result_parameter_of_wine[4] // 果実味(スパイシー<フルーティ)
];
var sep = "\t";
var data = ``;
array.forEach(function(value) {
data += value;
data += `${sep}`;
});
// This is it!
console.log(data);

以下、コードの解説ですが、

基本的にこの表記でどのタグの何番目のものを取得するかを指定します。

下の場合だと、4番目のspanから取得します。

`${[...document.querySelectorAll('span')][4].innerText}`

${~}」の表記#

この表記は、どうやら文字列を結合するときにいちいち「+」を書かずに、直感的に文字列を表記することができるようです。(Pythonだと、format文的な感じです。)

例えば、以下のような文字列を直感的に書けてしまうというわけです。

var a = "ワイン";
var b = "のむ";
console.log(a + "を" + b); // ワインをのむ
console.log(`${a}${b}`); // ワインをのむ

.replace(‘wine’, ‘Wine’)#

ここは、vinicaの表記に合わせるために、「White wine」だったら「White Wine」にして、「Red wine」だったら「Red Wine」にしています。

ワインの種類によって、取るパラメータを変える。#

ワインは、主にこの5つのパラメータで評価されがちです。

  • ボリューム(軽い<重い)
  • タンニン(控えめ<強い)
  • 甘み(ドライ<甘い)
  • 酸味(まろやか<シャープ)
  • 果実味(スパイシー<フルーティ)

ワインのパラメータに関しては、こちらに記事を出してますので、よければ見てみて下さい!

そして、Vivinoでは、白ワインか赤ワインかで表示するパラメータが違うようです。(vinicaでは赤白の両方で5つのパラメータが用意されていましたが。)

そして、白ワインではタンニンと果実味が、赤ワインでは果実味が用意されていませんでした。Vivinoには果実味が無いんですねえ。

なので、下のリストにタグの順番を入れておきます。

switch (color_of_wine) {
case "White Wine":
list_of_target_parameter_of_wine = [0, null, 1, 2, null];
break;
case "Red Wine":
list_of_target_parameter_of_wine = [0, 1, 2, 3, null];
break;
}

配列を作る。#

上の配列を、以下のように別の配列にマッピングしています。Vivinoでは0~100%の評価なので、以下の境界値でvinicaと同じ5段階評価になるようにマッピングしています。けっこう甘めにつけています(笑)

var list_of_result_parameter_of_wine = list_of_target_parameter_of_wine.map(target => {
if (target == null) {return null;}
// Vivino上のスコアを取得する。
var score = Number(document.getElementsByClassName('indicatorBar__progress--3aXLX')[target].style['cssText'].substr(length_of_taste,2));
switch (true) {
case score > 70:
return 5;
case score > 50 && score <= 70:
return 4;
case score > 30 && score <= 50:
return 3;
case score > 10 && score <= 30:
return 2;
case score <= 10:
return 1;
}
})

文字列を置換する。#

「/」を「>」に置換しています。

以下のように書くと複数回「/」が出てきても全て置換してくれます。(「\」でエスケープ。)

`${[...document.querySelectorAll('td')][14].innerText}`.replace(/\//g, '>'), // 原産地

そして、タブ文字(”\t”)を区切り文字として、配列arrayを文字列にします。

最後、consoleに出力しておしまい。

原産国の部分とかは、「=IFERROR(LEFT(K2, FIND(“>”,K2)-2),K2)」とかやって、隣のセルから取ってきています。これで集計すると自分がどの国のワインを今まで飲んでいるかが分かるといった感じです。

おしまい#

今回のスクリプトの紹介はこんなもので終了です。

Vivinoをvinicaの表記に合わせるところで、一工夫必要でしたね。

また、このスクリプトを実行できない場合は、下に備忘録的なものを貼っておくので、見てみて下さい。

以上になります!

開発者ツールの立ち上げ方#

  1. 取得したいワインをVivinoのサイト内で調べてそのワインのページに行く。
  2. ブラウザ上で、Ctrl + Shift + C を押す。開発者ツールが立ち上がります。
  3. ページ内の欲しい情報がある要素にマウスを合わせるとハイライトされるので、その状態でクリック。
  4. 開発者ツール内のコンソールで、このスクリプトを実行。

記事を共有

この記事が役に立ったなら、ぜひ他の人と共有してください!

ワインのデータをスクレイピングする(Vivino編)
https://endorphinbath.com/posts/wine-scraping-vivino/
著者
kinkinbeer135ml
公開日
2021-10-21
ライセンス
CC BY-NC-SA 4.0
関連記事 スマート
1
ワインのデータをスクレイピングする(vinica編)
Code vinicaというサイトにあるワインのデータをExcelやGoogle Spreadsheetなどに貼り付けられる形式に取得できるスクリプトを紹介します。
2
【JavaScript】実行中の関数自身の関数名を取得する
Code 実行している関数やメソッド自身の名前を取得する方法を紹介します。この方法は、その関数名を取得する関数を別の関数から呼び出してもらわなければなりません。thisに関数をバインドする必要があるためです。その呼び出し方の種類を掲載しています。
3
【JavaScript】Errorタイプのオブジェクトかどうかを判定する
Code JavaScriptで渡した値がErrorオブジェクトかどうかを判定する関数が見つからなかったので、僕が書いたものを紹介します。
4
【Node.js】Markdown内のimgタグの画像の大きさを変える
Code README.md内のimgタグで記載された画像のサイズを変更する処理を作成しました。沢山画像を貼っていると、いちいちサイズを変更するのが面倒ですが、この処理で一気に直してしまいましょう!
5
【JavaScript】数値を0埋めされた文字列として加工する
Code JavaScriptで、IDなどを採番する時に0埋めした数値が欲しい時があります。その時に利用できるスニペットを紹介します。
ランダム記事 ランダム
Profile Image of the Author
kinkinbeer135ml
SIerをやめて、プログラミングを勉強しています。※Amazonアソシエイトに参加しています。
お知らせ
私のブログへようこそ!これはサンプルのお知らせです。
音楽
カバー

音楽

再生中なし

0:00 0:00
歌詞なし
カテゴリ
タグ
サイト統計
記事
287
カテゴリー
8
タグ
93
総文字数
486,174
運用日数
0
最終活動
0 日前

目次