Web制作者なら知るべきGASのContentServiceとHtmlService

GASとは

Google Apps Scriptの略。

Googleによって開発されたスクリプトプラットフォームである軽量のアプリケーション開発のためのGoogleのワークスペースプラットフォーム。

ExcelのVBAのGoogleスプレッドシート版と言えば正確ではないがわかりやすい。

ContentServiceとHtmlServiceはGASでテキストやWebページを生成するために使用するためのもの。

GASでHello world!

GASを使用したことがない人のためにログにHello worldを表示するサンプルの作成方法を記載する。

まず以下のURLからApps Scriptのページに移動する。

https://script.new/

移動したら以下のコードを貼り付けて実行する。

function myFunction() {
  Logger.log('Hello world!')
}

すると実行ログに「Hello world!」と表示される。

ContentServiceでテキストをデプロイ

ContentServiceを使用して以下のようにコードを書けば、右上のデプロイから新しいデプロイでGASで表示される公開用のURLからテキストを確認できる。

function doGet() {
  return ContentService.createTextOutput('Hello World!')
}

https://script.google.com/macros/s/AKfycbxypajCPCS3MrDxVxp3mXShoOPgoF89xeN_PNYoVbKF3X4bhiKUiPyeWkX83nIq0B37/exec

ContentServiceでJSを読み込んでデプロイ

UrlFetchApp.fetchを使用してurlからJavaScriptなどを読み込んでContentService.createTextOutputで書き出すことができる。

function doGet() {
  const js =  UrlFetchApp.fetch('https://iwb.jp/s/hello.js').getContentText()
  return ContentService.createTextOutput(js)
    .setMimeType(ContentService.MimeType.JAVASCRIPT)
}

setMimeTypeを追加すれば、ただのテキストではなくJavaScriptなどの形式で返すことができる。

設定できるsetMimeTypeは以下の9種類。

HtmlServiceでHTMLをデプロイ

前述のsetMimeTypeにはHTMLがない。

HTMLを生成する際は以下のようにHtmlServiceを使用する。

function doGet() {
  return HtmlService.createHtmlOutput('<h1>Hello world!</h1>')
}

https://script.google.com/macros/s/AKfycbwX3VMpWmkY8l_1JAxJB2RxqnRP2MlcQRq5imRnHTdCmpYIMn1yHnb3IczSXshztfyk/exec

無料のGoogleアカウントでHTMLページを生成した場合はページ上部に「このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。」と表示される。

HTMLファイルからデプロイする

デプロイする際はcreateHtmlOutputではなくcreateTemplateFromFileを使用してHTMLファイルを読み込んでevaluate()を実行して返してデプロイしたほうがHTMLページを生成しやすい。

function doGet() {
  return HtmlService
    .createTemplateFromFile('index')
    .evaluate()
}

https://script.google.com/macros/s/AKfycbwgYl7oLlNHmy5aO3GcIL488ffnySUnnBiFfXHdWnzJwNrP6lqwYtqAHFoABzNPf1aXFg/exec

HTMLファイル内は<?= new Date() ?>のように<?= ?>内にJavaScriptの処理を入れると結果を出力できる。

<h1>createTemplateFromFile!</h1>
<h2><?= new Date() ?></h2>

上記のHTMLの結果

<? ?>だとifなどを入れて以下のような条件分岐ができる。

<? if (new Date().getDay() === 0) { ?>
<h1>今日は日曜日です。</h1>
<? } else { ?>
<h1>今日は日曜日ではありません！</h1>
<? } ?>

Googleスプレッドシートのデータを利用

Googleスプレッドシートのデータを取得してContentServiceやHtmlServiceでデプロイすることもできる。

function getData() {
  const id = '1xdiSrYNbtpaF3J8Es3lCXAAncl6IoAvfe9JIOSvVdlY'
  const ss = SpreadsheetApp.openById(id)
  const lastRow = ss.getLastRow() - 1
  return ss
    .getSheetByName('シート1')
    .getRange(2, 1, lastRow, 2)
    .getValues()
}

function doGet() {
  const data = JSON.stringify(getData())
  const output = ContentService.createTextOutput()
  output.setMimeType(ContentService.MimeType.JSON)
  output.setContent(data)
  return output;
}

データのあるGoogleスプレッドシート

デプロイ結果

{name: "toyota", age: 33}のように配列ではなくオブジェクトにしたい場合は以下のようにして変換する。

function getData() {
  const id = '1xdiSrYNbtpaF3J8Es3lCXAAncl6IoAvfe9JIOSvVdlY'
  const ss = SpreadsheetApp.openById(id)
  const lastRow = ss.getLastRow()
  return ss
    .getSheetByName('シート1')
    .getRange(1, 1, lastRow, 2)
    .getValues()
}

function doGet() {
  const json = getData().reduce((a, c, i, arr) => {
    if (i !== 0) {
      const temp = []
      c.forEach((v, j) => {
        temp.push(`"${arr[0][j]}":"${v}"`)
      })
      a.push('{' + temp.join(',') + '}')
    }
    return a
  }, [])
  const output = ContentService.createTextOutput()
  output.setMimeType(ContentService.MimeType.JSON)
  output.setContent('[' + json + ']')
  return output
}