前提

GASでサイトのページをスクレイピングし、Cheerioで取得した以下の情報をスプレッドシートに記録しようとしています。

title
カノニカルタグ
読み込んでいるcssのpath（複数）

下記のサイトを参考にコードを書きましたが、読み込んでいるcssのpathが最初の一つしか取得できません。
https://blog.members.co.jp/article/51649

実現したいこと

各ページに読み込んでいるcssのpath（ページによって数が違う）を取得し、したい。
取得したcssのpathをスプレッドシート各行の末尾に列方向に追加したい。

発生している問題・エラーメッセージ

最初のcssのpathだけ記録できるが、２番目以降が取得できない。

該当のソースコード

GS
1function checker(){
2  /*
3  ========================================
4  初期設定
5  ========================================
6  */
7  const sheet = SpreadsheetApp.getActiveSheet(),
8        startRow = 2,//情報を置くセルの一番左上の列番号(A = 1...)
9        startCol = 6,//情報を置くセルの一番左上の行番号(1 = 1...)
10        URLListRow = startRow - 1,//URLリストの配置した列番号
11        authInfo = {
12          userName : '',//basic認証を行う場合のユーザーネーム
13          password : ''//basic認証を行う場合のパスワード
14        }
15        /**
16         * 取得するメタ情報
17         * outName => 取得する情報の名前 好きに設定（空は不可）
18         * name    => name or property属性を設定
19         * prop    => 上記nameで設定した属性の値を設定
20        metaInfo = [
21          {
22            outName:'keywords',
23            name:'name',
24            prop:'keywords',
25          },
26          {
27            outName:'desc',
28            name:'name',
29            prop:'description',
30          },
31          {
32            outName:'og_title',
33            name:'property',
34            prop:'og:title',
35          },
36          {
37            outName:'og_desc',
38            name:'property',
39            prop:'og:description',
40          },
41          {
42            outName:'og_url',
43            name:'property',
44            prop:'og:url',
45          },
46        ]
47        */
48 
49  /*
50  ========================================
51  以下 script
52  ========================================
53  */
54  
55  // clear cell
56  for (let i = startRow; i <= sheet.getLastColumn(); i++){
57    const dataRange = sheet.getRange(startCol,i,sheet.getLastRow());
58    dataRange.clearContent();
59  }
60 
61  // create url data
62  const urlData = sheet.getRange(startCol,URLListRow,sheet.getLastRow() - 1).getValues();
63  let ary = '';
64  for (var a = 0; a<urlData.length;a++){
65    if(urlData[a][0]){
66      ary = ary + String(urlData[a][0]) + ','
67    }
68  }
69  ary = ary.split(',');
70  ary.pop();
71 
72 
73  // header option
74  const options = {
75    method: "GET",
76    headers: {"Authorization" : "Basic " + Utilities.base64Encode(authInfo.userName + ":" + authInfo.password)},
77    "muteHttpExceptions" : true,
78    "validateHttpsCertificates" : false,
79    "followRedirects" : false
80  }
81  let result = [];
82 
83  // get html data
84  for(var i = 0; i < ary.length; i++){ 
85　　try { 
86　　　let obj = Object.assign({});
87　　　let r = Object.assign({});
88　　　let resultURL = ary[i];
89　　　const res = UrlFetchApp.fetch(resultURL,options);
90      const content = res.getContentText()
91      const $ = Cheerio.load(content);
92      obj.title = $('head title').text();
93      obj.canonical = $('link[rel="canonical"]').attr('href'),
94      obj.stylesheet = $('link[rel="stylesheet"]').attr('href'),
95      /* metaInfo.forEach((v)=>{
96        const reg = new RegExp(v.prop,'g');
97        if(content.match(reg)){
98          obj[v.outName] = $(`meta[${v.name}="${v.prop}"]`).attr("content");
99        }else{
100          obj[v.outName] = false;
101        }
102      }) */
103      r.props = Object.assign({},obj);
104 
105      result.push(r);
106 
107      obj = null;
108      r = null;
109      //sleep 1秒
110      Utilities.sleep(1000);
111    } catch(e) {
112      // 例外エラー処理
113      console.log('Error:'+e);
114    }
115  }
116 
117  // draw cell
118  result.forEach((d,r)=>{
119    Object.keys(d.props).forEach((k,i)=>{
120      const row = startCol + r;
121      const col = startRow + i;
122      sheet.getRange(row, col).setValue(d.props[k]);
123    })
124  })
125}

試したこと

GS
1obj.stylesheet = $('link[rel="stylesheet"]').attr('href'),

この部分が繰り返し処理できれば良いのだろうと思いますが、
どのように書けば参考にさせていただいたコードにうまく適合するのかがわからなく困っております。

初歩的な質問で申し訳ありませんが、どなたかご教示いただけると幸いです。（JS.GASともに自己流で学習を始めたばかりです。）

行動規範の内容に同意します

回答1件

ベストアンサー

① 各ページに読み込んでいるcssのpath（ページによって数が違う）を取得
// get html data
のループの中で

js
1let stylesheets = []; 
2$('link[rel="stylesheet"]').each((index, element) => {
3  stylesheets.push(element.attribs.href)
4});

としてみてはいかがでしょうか。
（配列stylesheets に cssの複数リンクを格納）

② 列方向にリンクを追加
（①が行われていることを前提として）
この部分を

js
1      r.props = Object.assign({},obj);

↓　このように変えます。

js
1      stylesheets.map((e,i) => obj['link'+i] = e);  // 追加
2      r.props = Object.assign({},obj);

直した後の全文

js
1function checker(){
2  /*
3  ========================================
4  初期設定
5  ========================================
6  */
7  const sheet = SpreadsheetApp.getActiveSheet();  // 末尾「,」を「;」に修正
8        startRow = 2,//情報を置くセルの一番左上の列番号(A = 1...)
9        startCol = 6,//情報を置くセルの一番左上の行番号(1 = 1...)
10        URLListRow = startRow - 1,//URLリストの配置した列番号
11        authInfo = {
12          userName : '',//basic認証を行う場合のユーザーネーム
13          password : ''//basic認証を行う場合のパスワード
14        }
15        /**
16         * 取得するメタ情報
17         * outName => 取得する情報の名前 好きに設定（空は不可）
18         * name    => name or property属性を設定
19         * prop    => 上記nameで設定した属性の値を設定
20        metaInfo = [
21          {
22            outName:'keywords',
23            name:'name',
24            prop:'keywords',
25          },
26          {
27            outName:'desc',
28            name:'name',
29            prop:'description',
30          },
31          {
32            outName:'og_title',
33            name:'property',
34            prop:'og:title',
35          },
36          {
37            outName:'og_desc',
38            name:'property',
39            prop:'og:description',
40          },
41          {
42            outName:'og_url',
43            name:'property',
44            prop:'og:url',
45          },
46        ]
47        */
48 
49  /*
50  ========================================
51  以下 script
52  ========================================
53  */
54  
55  // clear cell
56  for (let i = startRow; i <= sheet.getLastColumn(); i++){
57    const dataRange = sheet.getRange(startCol,i,sheet.getLastRow());
58    dataRange.clearContent();
59  }
60 
61  // create url data
62  const urlData = sheet.getRange(startCol,URLListRow,sheet.getLastRow() - 1).getValues();
63  let ary = '';
64  for (var a = 0; a<urlData.length;a++){
65    if(urlData[a][0]){
66      ary = ary + String(urlData[a][0]) + ','
67    }
68  }
69  ary = ary.split(',');
70  ary.pop();
71 
72 
73  // header option
74  const options = {
75    method: "GET",
76    headers: {"Authorization" : "Basic " + Utilities.base64Encode(authInfo.userName + ":" + authInfo.password)},
77    "muteHttpExceptions" : true,
78    "validateHttpsCertificates" : false,
79    "followRedirects" : false
80  }
81  let result = [];
82 
83  // get html data
84  for(var i = 0; i < ary.length; i++){ 
85    try { 
86      let obj = Object.assign({});
87      let r = Object.assign({});
88      let resultURL = ary[i];
89      const res = UrlFetchApp.fetch(resultURL,options);
90      const content = res.getContentText()
91      const $ = Cheerio.load(content);
92      obj.title = $('head title').text();
93      obj.canonical = $('link[rel="canonical"]').attr('href');  // 末尾「,」を「;」に修正
94      obj.stylesheet = $('link[rel="stylesheet"]').attr('href');  // 末尾「,」を「;」に修正
95
96      let stylesheets = [];  // 追加
97      $('link[rel="stylesheet"]').each((index, element) => {  // 追加
98        stylesheets.push(element.attribs.href)  // 追加
99      });  // 追加
100      console.log('stylesheets = ' + stylesheets);  // 追加
101
102      /* metaInfo.forEach((v)=>{
103        const reg = new RegExp(v.prop,'g');
104        if(content.match(reg)){
105          obj[v.outName] = $(`meta[${v.name}="${v.prop}"]`).attr("content");
106        }else{
107          obj[v.outName] = false;
108        }
109      }) */
110
111      stylesheets.map((e,i) => obj['link'+i] = e);  // 追加
112      r.props = Object.assign({},obj);
113 
114      result.push(r);
115 
116      obj = null;
117      r = null;
118      //sleep 1秒
119      Utilities.sleep(1000);
120    } catch(e) {
121      // 例外エラー処理
122      console.log('Error:'+e);
123    }
124  }
125 
126  // draw cell
127  result.forEach((d,r)=>{
128    Object.keys(d.props).forEach((k,i)=>{
129      const row = startCol + r;
130      const col = startRow + i;
131      sheet.getRange(row, col).setValue(d.props[k]);
132    })
133  })
134}

投稿2022/08/24 13:45

編集2022/08/25 10:47

退会済みユーザー

総合スコア0

tohaku

2022/08/25 07:38

アドバイスありがとうございます。 ```gs //obj.stylesheet = $('link[rel="stylesheet"]').attr('href'), 　　　let stylesheets = []; 　　　$('link[rel="stylesheet"]').each((index, element) { 　　　 stylesheets.push(element.attribs.href) 　　　}); ``` と入れてみたのですが以下のエラーが出ます。構文エラー: SyntaxError: Unexpected identifier 行: 95 ファイル: コード.gs > // get html data > のループの中でとのことでしたが、入れる場所が違うのでしょうか？

退会済みユーザー

2022/08/25 10:48

直した後の全文を追加しました。

tohaku

2022/08/26 01:36

ありがとうございます。おかげさまで望んだ通りの結果を得ることができました。コードも丁寧に解説いただきありがとうございます。そもそもの知識が足りていなくて、なぜこうすれば問題解消するのか理解できていないので、改めて調べながら学習してみます。本当にありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

GASのスクレイピングで、読み込んでいるcssのpath（複数）を取得したい。

前提

実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

直した後の全文

関連した質問