【GAS】Google Apps Script を 使ってみよう その7 テキストをhtmlから取り出してみる【お勉強】

前回はスクレイピング用のライブラリを追加してみました。

【GAS】Google Apps Script を 使ってみよう その6 スクレイピング用ライブラリ追加【お勉強】
前回はHTMLの取得にチャレンジしてみました。 いよいよスクレイピングに向けての実践モードといった感じになってきたわけ...

で、今回は使い方と実際にテキストを取り出してみようかなと思っています。

スクレイピングするサイトは…まあ、無難な所で自分のサイトにしてみますw

では、早速使い方から(*’ω’*)

スポンサーリンク

使い方は簡単!

Parserというワードを使ってコードを書いていきます。

そして取り出す範囲を分かりやすいように指定してあげると…って文字で書くよりも、

作者さん(https://www.kutil.org/2016/01/easy-data-scrapping-with-google-apps.html)のページからイメージを引用させてもらうと…

なんとなく分かりやすいと思うのですがいかがでしょう?

あらためて、文章で書いてみると

  • dataで読み込んだ(格納されている)htmlデータをセット
  • fromで取り出したい前までのタグなどの文字列を指定
  • toで取り出したい範囲の次の文字列を指定

と指定することで、その間にあるモノが取り出せる…という感じです!

具体的には

var text = Parser.data(格納されている代数)
.from(‘<span class=”e-f-ih” title=”‘)
.to(‘”>’)
.build();

こんな感じになります。

たったこれだけです。

さすが「5分でGoogle Apps Scriptによる簡単なデータスクレイピング」とうたっているだけありますね(*’ω’*)

実際にやってみよう!

では、自分のサイトのエントリー記事のタイトルを取得してみたいと思います。

※htmlの取得については以下の記事を参照してくださいね!

【GAS】Google Apps Script を 使ってみよう その5 HTMLを取得【お勉強】
前回はスプレッドシートに自前のメニューを追加してみました。 基本的な記述はJavascriptなのですが、実はDOM操...

さて、実際に自分のページのソースをみてみると記事タイトルは

<h2><a href=”https://tks-kan.com/2018/12/14/4536/class=”entry-title entry-title-linktitle=”【GAS】Google Apps Script を 使ってみよう その6 スクレイピング用ライブラリ追加【お勉強】“>【GAS】Google Apps Script を 使ってみよう その6 スクレイピング用ライブラリ追加【お勉強】</a></h2>

といった感じにh2タグの中に含まれているようです。

では、h2タグの中身を取り出す作戦でいってみましょう~!

こんな感じのコードを書いてみました。

※最後にコードをコピペできる状態で載せますので参考にしてみてください!

  1. 取り出したものをfetchに代入
  2. テキスト化してresponseに代入
  3. ライブラリのParserを使ってresponseからh2タグの範囲にあるものを抜き出してビルド(build)する

という流れです。

これをダイアログで確認させてみると…

おぉ。イメージ通りに取り出せちゃいましたね!

これをさらにタイトル文字だけを取り出すには…

  • fromに「“>」、toに「</a>」
  • fromに「title=”」、toに「”>」

このどちらかを使えばいけそうですよね。

ではコードにしてみると…

こんな感じで。

で、実行してみると…

いいですね!

ちゃんと取り出せました(*’ω’*)

取り出したものをセルに出力してみよう

折角GASなのですから、取り出したテキストをセルに出力してみたいと思います。

セルに出力するには

  1. アクティブなシートを取得
  2. そのシートの何処に書き込むかを指定
  3. 書き込むものを指定

という流れになります。

1のシート取得は第二回の時にやっていますので、

【GAS】Google Apps Script を 使ってみよう その2【お勉強】
気にはなっていたんですが、ちゃんと調べていなかったGoogle Apps Script。 という出だしで初回をお届けし...

さくっとコードを。

var s = SpreadsheetApp.getActiveSheet();

まあ、単語をみているだけでも何となく理解できるかと思います(*’ω’*)

2はシートの何処に書き込むかですが、これはgetRange()というのを使います。

s.getRange(1,1)
s.getRange(‘A1’)

どちらも同じ場所を指定しています。

書き方としては分かりやすい方でいいかもですが、プログラミングしていく上では座標タイプ(上)の方がいいかもですね。

3は書き込む内容です。これはsetValue()を使います。

先ほどのgetRangeの後ろにピリオドを付けて続けて記述しちゃいましょう。

s.getRange(1,1).setValue(’get World!’);

これで「セルの1,1にget World!と書き込む」ということになります。

さ、以上の事を応用して…

こんなコードにしてみました。実行してみると…

無事にセルに書き込まれましたね(*’ω’*)

(たぶん、思ったより時間がかかるのですぐに表示されなくても我慢してくださいw)

まとめ

今回は取得したhtmlから欲しい情報(テキスト)を取り出して、それをセルに書き込むまでをやってみました!

どうでしたか、思ったよりも簡単でしょう?

今回はタイトルひとつだけでしたが、

  • 複数取り出すにはどうするの?

その辺りを次回やってみたいと思います。

ちなみにbuildをiterateに変えると複数取り出すことはできます。

そのあと、どうやって処理していくのか、セルに出すには…なんて辺りが出来たらなと思っています。

参考になれば幸いです!

今回のコード

コードの末にあるコメントアウト部分は確認用のものです(ロガー出力、ダイアログ出力)

function onOpen(){
var s = SpreadsheetApp.getActiveSpreadsheet();
var mylist = [
{
name : “html取得実行”,
functionName : “myFunc01”
}
];
s.addMenu(“スクリプト実行”, mylist);
};

function myFunc01(){
var s = SpreadsheetApp.getActiveSheet();
var fetch = UrlFetchApp.fetch(“https://tks-kan.com/”);
var response = fetch.getContentText();
var searchResult = Parser.data(response)
.from(‘<h2>’)
.to(‘</h2>’)
.build();
var outputTitle = Parser.data(searchResult)
.from(‘title=”‘)
.to(‘”>’)
.build();

s.getRange(1,1).setValue(outputTitle);

// Logger.log(searchResult);
// Browser.msgBox(“確認”, searchResult, Browser.Buttons.OK);
// Browser.msgBox(“確認”, outputTitle, Browser.Buttons.OK);
}