ワインのデータをスクレイピングする（vinica編） - エンドルフィン風呂に浸かる。

はじめに#

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

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

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

今回は、そのスクリプトを紹介します。

このスクリプトは開発者ツールで実行します。

以下になります。

ソース#

1
// code by utf-8
2

3
// Use Developer Tool（by ⌥⌘I）
4
var length_of_taste = 'taste-bar taste-'.length;
5
var array = [`${[...document.querySelectorAll('span')][4].innerText}`, // ワイン名
6
             today.getFullYear() + "/" +  today.getMonth() + 1 + "/"+ today.getDate(), // 出会った日
7
             ``, // Instagramに上げた日
8
             ``, // 製造年
9
             `${[...document.querySelectorAll('td')][21].innerText}`, // 色
10
             ``,// 醸造方法
11
             ``,// 金額
12
             ``,// 入手場所
13
             ``,// 最寄り駅
14
             `${[...document.querySelectorAll('td')][18].innerText}`, // 原産地
15
             ``,// 原産国
16
             ``,// 感想
17
             ``,// ハッシュタグ
18
             `${[...document.querySelectorAll('td')][20].innerText}`, // 備考
19
             location.href, // 参考1
20
             ``,// 参考2
21
             ``,// Instagramに貼り付け
22
             ``,// vinicaフォルダに入れた
23
             `${[...document.querySelectorAll('div')][27].className}`.substr(length_of_taste,1), // ボリューム（軽い＜重い）
24
             `${[...document.querySelectorAll('div')][28].className}`.substr(length_of_taste,1), // タンニン（控えめ＜強い）
25
             `${[...document.querySelectorAll('div')][29].className}`.substr(length_of_taste,1), // 甘み（ドライ＜甘い）
26
             `${[...document.querySelectorAll('div')][30].className}`.substr(length_of_taste,1), // 酸味（まろやか＜シャープ）
27
             `${[...document.querySelectorAll('div')][31].className}`.substr(length_of_taste,1) // 果実味（スパイシー＜フルーティ）
28
            ];
29
var sep = "\t";
30
var data = ``;
31
array.forEach(function(value) {
32
    data += value;
33
    data += `${sep}`;
34
});
35

36
// This is it!
37
console.log(data);

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

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

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

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

この「${～}」の表記は、querySelectorやquerySelectorAllなどの関数を調べているときに偶然見つけました。調べた当初は、この書き方のメリットをほとんど理解しておらず、たまたま自分にしっくり来たので、この表記に落ち着いていましたが、最近少し理解が進んだので、それはまた今度書きます（笑）

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

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