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

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

新規登録して質問してみよう
ただいま回答率
85.39%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

576閲覧

重複しているhtmlタグをすべて取得したい

Kodanosuke

総合スコア42

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2023/04/03 12:57

実現したいこと

下記のサイトから<div id="scrollable_content" class="content">タグ内にある<div class="item">タグ内にある情報を全て取得したいと考えています.どのようにしたら所定の内容を取得できるかご教示いただけないでしょうか?よろしくお願いいたします.

前提

下記コードを作成して上記の実現したいことを実現しようとしましたが,うまくいっていません.
GASのライブラリはParserを使っています.

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

意図した内容が取得できていない.下記コードを走らせると以下の内容しか取得できていないようです.

<div v-for="(data, i) in hourly_data" :class="['item', {'transparent': data.past}]" v-if="typeof(data) === 'object'"> <p :class="['da', getDayClass(data.tm, data.holiday), isDayChange(data.tm)]" v-html="getHourlyDayText(data.tm, i)"></p> <p class="ti" v-html="new Date(data.tm * 1000).getHours()"></p> <p :class="['fc', getStatusClass(data.pain)]"> <img :src="getStatusIcon(data.pain)"> <span class="txt" v-html="getStatusText(data.pain)"></span> </p> <p class="we"> <img v-show="data.wx" :src="'//mwsgvs.weathernews.jp/s/img/telop/' + data.wx + '.png'"> </p> <p class="ap">{{ getNumberText(data.pres) }}</p> </div> <div> </div>

該当のソースコード

Google

1function main(){ 2let response = UrlFetchApp.fetch("https://weathernews.jp/s/pain/city.html?city=13102"); 3 let text = response.getContentText("utf-8"); 4 // console.log(text); 5 6 7 let topic_block = Parser.data(text).from('id="scrollable_content"').to('id="srf_pres_graph_panel"').iterate(); 8 console.log(topic_block[0]); 9 10 11 12console.log("stop") 13 14}

試したこと

cheerioライブラリを使用して同様のことを実現しようとしました.するとコード下に示す内容しか取得できていないです.
function scrapeHtml() {
const url = 'https://weathernews.jp/s/pain/city.html?city=13102';
const response = UrlFetchApp.fetch(url);
const html = response.getContentText();

const $ = Cheerio.load(html);
const content = $('div#scrollable_content.content').html();
console.log(content)
}

コンソールログ

<div v-for="(data,i) in hourly_data" :class="['item',{'transparent':data.past}]" v-if="typeof(data) === 'object'"> <p :class="['da',getDayClass(data.tm, data.holiday),isDayChange(data.tm)]" v-html="getHourlyDayText(data.tm, i)"></p> <p class="ti" v-html="new Date(data.tm*1000).getHours()"></p> <p :class="['fc',getStatusClass(data.pain)]"><img :src="getStatusIcon(data.pain)"> <span class="txt" v-html="getStatusText(data.pain)"></span></p> <p class="we"><img v-show="data.wx" :src="'//mwsgvs.weathernews.jp/s/img/telop/'+data.wx+'.png'"></p> <p class="ap">{{getNumberText(data.pres)}}</p> </div> <div id="srf_pres_graph_panel" class="ws"> <div id="srf_pres_graph" class="graph" width="3000px" height="160px"></div> </div>

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

取得した要素を見た感じ、取得先のサイトがVue.jsで作成された動的なサイトであることが原因なのかと思います。
GASのみで動的サイトのスクレイピングは不可能で、外部サービスの使用が必要なようです。

https://pala-ghe.com/gas-phantomjscloud/
https://takumaro-blog.com/%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0/%E3%80%902022%E5%B9%B4%E6%9C%80%E6%96%B0%E3%80%91gas%E3%82%92%E7%94%A8%E3%81%84%E3%81%9F%E5%8B%95%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3/

投稿2023/04/04 11:14

yukihide1188

総合スコア44

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問