スプレッドシートとGAS(Google Apps Script)でAPIを公開し、Angularアプリをローコードで爆速作成する

こんにちは！ソリューションコンサルタントの滝元です。

今回はタイトルのとおり、スプレッドシートと GAS(Google Apps Script) で API を公開していきます。そしてその API に接続する Angular アプリケーションをローコードで作成していきます！

環境の用意、データの用意をすぐに始められる構成にしたので Angular の PoC を行いたい方必見です！

GAS(Google Apps Script)とは
スプレッドシートの設定
GASの設定
ローコードでAngularアプリを作成
Angular アプリケーションとしてローカルで実行
- アプリケーションをダウンロード
- アプリケーションの実行
まとめ

GAS(Google Apps Script)とは

Google Apps Script（GAS）は、Google が提供する各種サービスの自動化や連携を行うためのローコード開発ツールです。 GAS を使用することで、Gmail、カレンダー、Googleスプレッドシート、Google ドライブなど、Google が提供するさまざまなサービスを効果的に活用し、処理を自動化したり、複数のサービスを統合したりできます。

スプレッドシートの設定

スプレッドシートを新規作成し、画像のようにデータを用意します。 1行目にプロパティとして、 id name nameKana email isContacted を設定しました。データは画像のようにモックデータを用意しています。

GASの設定

スプレッドシートのメニューの拡張機能＞ Apps Script からこのスプレッドシートに付属するスクリプトを開きます。

エディタが開かれるのですが、こちらでGASのコーディングしていくことができます。

※Google アカウントのセキュリティ設定が必要な場合があります。詳細は下記リンクを参照

安全性の低いアプリと Google アカウント - Google アカウントヘルプ

スプレッドシートのデータを Json 形式にする

現在のシートから1行目をプロパティとして全行を配列で返却する関数です。

function sheetToJson() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  let jsonData = [];

  for (let i = 1; i < data.length; i++) {
    const row = data[i];
    let obj = {};

    for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = row[j];
    }

    jsonData.push(obj);
  }

  return jsonData;
}

作成した Json データを返却する API を作成する

sheetToJson を使った doGet 関数を作成します。 doGet と命名することでデプロイ後、GET リクエストに割り当てられます。

function doGet(e) {
  const jsonData = sheetToJson()
  return ContentService.createTextOutput(JSON.stringify(jsonData))
    .setMimeType(ContentService.MimeType.JSON);
}

ContentService.createTextOutput(JSON.stringify(jsonData)): ContentServiceはGoogle Apps Scriptが提供するサービスの一つで、HTTPレスポンスを生成するために使用されます。 createTextOutput()メソッドは、指定された文字列を含むテキスト出力オブジェクトを生成します。この場合、スプレッドシートから取得したデータをJSON文字列に変換したもの(JSON.stringify(jsonData))を引数として与えています。
.setMimeType(ContentService.MimeType.JSON): 生成されたテキスト出力オブジェクトのMIMEタイプを設定するためのメソッドです。 ContentService.MimeType.JSONは、このレスポンスのMIMEタイプとしてapplication/jsonを指定するための定数です。これにより、レスポンスがJSONデータであることを明示的に示すことができます。