Google Apps ScriptとcheeriogsでWebサイトのtitleなどを取得する方法

cheeriogsとは

GASで使用可能なHTMLをパースできるライブラリ。

Google Apps ScriptだけだとWebサイトのHTMLをgetContentTextを使用してHTMLをテキストで取得して正規表現で抽出しなければならないため、非常に取得しづらい。

cheeriogsを使用すれば$('title').text()とjQueryようなコードで簡単に取得できる。

cheeriogsを使用するには

スクリプトエディタでリソース => ライブラリを選択してAdd a libraryに「1ReeQ6WO8kKNxoaA_O0XEQ589cIrRvEBA9qcWpNqdOP17i47u6N9M5Xh0」を追加したあと、最新バージョンを選択して保存を押せば使えるようになる。

スクリプトエディタのリソース => ライブラリからcheeriogs(Cheerio)を追加

GASでtitle, meta, h1などを取得する

Google Apps Scriptでtitle, meta, h1などを取得する場合は以下のようなコードになる。

function myFunction() {
  const sheet = SpreadsheetApp.getActiveSheet()
  const url = sheet.getRange('B1').getValue()
  const content = UrlFetchApp.fetch(url).getContentText()
  const $ = Cheerio.load(content)
  const h2 = []
  let row = 2
  sheet.getRange("A2:D999").clearContent()
  $('h2').each((i, v) => h2.push($(v).text()))

  const data = {
    title: $('title').text(),
    canonical: $('link[rel="canonical"]').attr('href'),
    description: $('meta[name="description"]').attr('content'),
    keywords: $('meta[name="keywords"]').attr('content'),
    'og:title': $('meta[property="og:title"]').attr('content'),
    'og:image': $('meta[property="og:image"]').attr('content'),
    'twitter:title': $('meta[name="twitter:title"]').attr('content'),
    h1: $('h1').text().trim() ? $('h1').text() :$('h1 img').attr('alt'),
    h2: h2.join('\n'),
  }

  for (v in data) {
    sheet.getRange(row, 1).setValue(v)
    sheet.getRange(row, 2).setValue(data[v])
    row++
  }
}

このコードではB1に入力したWebサイトのURLのtitle, meta, h1などを取得して、1列目に要素(key)、2列目に結果(value)を表示させるようにした。

Google Apps ScriptとcheeriogsでWebサイトのtitleなどを取得する方法
B1に入力したWebサイトのURLのtitle, meta, h1などを取得

上図のようにC列に画像を表示されたい場合は=IMAGE()の関数を使用する。

セルに直接記入するのではなくGASでsetFormula('=IMAGE()')を使用して挿入することも可能だ。

ちなみにC列の背景色がグレーなのは白い画像だと白の背景色だと見えなくなってしまうため。

h1タグはテキストではなく画像になっている場合が結構あるので、テキストが見当たらない場合は画像のAltで取得するようにしている。

h2タグは複数存在していることが多いので、改行して複数表示させている。

試しにcyberagent.co.jpのURLを入力して実行すると下図のような結果となり、h1タグがないことがひと目でわかる。

cyberagent.co.jpのURLを入力して実行した結果
cyberagent.co.jpのURLを入力して実行した結果

記載したサンプルのGASのコードを参考にすれば大抵のHTML内の内容は取得可能なので色々試してみると良いだろう。