未分類

GASでWebアプリ開発！SpreadsheetApp.openByIdでスプレッドシート連携ダッシュボード構築

GASでWebアプリ開発！SpreadsheetApp.openByIdでスプレッドシート連携ダッシュボード構築

本記事では、Google Apps Script（GAS）のSpreadsheetApp.openById関数を活用し、Webアプリケーションからスプレッドシートにアクセスして連携ダッシュボードを構築する方法を解説します。Webアプリ開発におけるフォーム作成、API連携、そしてスプレッドシートをデータソースとしたダッシュボード作成といった利用シチュエーションに特化し、具体的なコード例とトラブルシューティング、カスタマイズ方法を紹介します。特に、スプレッドシートのデータを効率的にWebアプリに表示し、ビジネスの課題解決に役立つダッシュボード作成に焦点を当てます。

SpreadsheetApp.openById関数の基本

SpreadsheetApp.openById(id)は、指定されたIDを持つスプレッドシートを開くためのGASの関数です。この関数を使用することで、Webアプリから特定のスプレッドシートにアクセスし、データの読み書きを行うことができます。IDはスプレッドシートのURLに含まれています。

構文：

SpreadsheetApp.openById(id)

  • id：開きたいスプレッドシートのID（文字列）

Webアプリ開発におけるSpreadsheetApp.openByIdの活用

Webアプリ開発において、SpreadsheetApp.openByIdは、スプレッドシートをデータソースとして利用する場合に非常に役立ちます。例えば、フォームから入力されたデータをスプレッドシートに保存したり、APIから取得したデータをスプレッドシートに書き込んだり、スプレッドシートのデータをWebアプリ上にダッシュボードとして表示したりすることができます。

実装例1：フォームデータのスプレッドシートへの保存

Webアプリのフォームから送信されたデータをスプレッドシートに保存する例です。

function doPost(e) {
  // スプレッドシートIDを設定
  const ssId = "YOUR_SPREADSHEET_ID";
  // スプレッドシートを開く
  const ss = SpreadsheetApp.openById(ssId);
  // シートを取得
  const sheet = ss.getSheetByName("シート1");
  
  // フォームデータを取得
  const formData = e.parameter;
  
  // データをシートに書き込む
  sheet.appendRow([formData.name, formData.email, formData.message]);
  
  // レスポンスを返す
  return ContentService.createTextOutput("送信完了");
}

解説：

  • YOUR_SPREADSHEET_IDは、実際のスプレッドシートIDに置き換えてください。

  • doPost(e)関数は、POSTリクエストを受け取るための関数です。

  • e.parameterには、フォームから送信されたデータが含まれています。

  • appendRow()メソッドは、シートの最終行にデータを追加します。

実装例2：APIデータのスプレッドシートへの書き込み

APIから取得したデータをスプレッドシートに書き込む例です。

function writeApiDataToSpreadsheet() {
  // スプレッドシートIDを設定
  const ssId = "YOUR_SPREADSHEET_ID";
  // スプレッドシートを開く
  const ss = SpreadsheetApp.openById(ssId);
  // シートを取得
  const sheet = ss.getSheetByName("シート1");
  
  // APIからデータを取得（ここではJSONPlaceholderの例）
  const response = UrlFetchApp.fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = JSON.parse(response.getContentText());
  
  // データをシートに書き込む
  sheet.appendRow([data.userId, data.id, data.title, data.completed]);
}

解説：

  • YOUR_SPREADSHEET_IDは、実際のスプレッドシートIDに置き換えてください。

  • UrlFetchApp.fetch()でAPIからデータを取得します。

  • JSON.parse()でJSONデータを解析します。

  • 取得したデータをappendRow()でシートに書き込みます。

実装例3：スプレッドシートのデータをWebアプリに表示（ダッシュボード）

スプレッドシートのデータを読み込み、Webアプリ上にダッシュボードとして表示する例です。この例では、HTML Serviceを使用して簡単なWebページを作成し、スプレッドシートのデータを表示します。

function doGet(e) {
  // スプレッドシートIDを設定
  const ssId = "YOUR_SPREADSHEET_ID";
  // スプレッドシートを開く
  const ss = SpreadsheetApp.openById(ssId);
  // シートを取得
  const sheet = ss.getSheetByName("シート1");
  
  // データを取得
  const data = sheet.getDataRange().getValues();
  
  // HTMLテンプレートにデータを渡す
  const template = HtmlService.createTemplateFromFile("index");
  template.data = data;
  
  // HTMLを出力
  return template.evaluate().setTitle("スプレッドシート連携ダッシュボード");
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

index.html：




table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
}



スプレッドシートデータ




















解説：

  • YOUR_SPREADSHEET_IDは、実際のスプレッドシートIDに置き換えてください。

  • doGet(e)関数は、GETリクエストを受け取るための関数です。

  • HtmlServiceを使用してHTMLテンプレートを作成し、スプレッドシートのデータを渡します。

  • index.htmlは、HTMLテンプレートファイルです。このファイル内で、GASのスクリプトレットを使用してデータを表示します。

よくある問題とトラブルシューティング

  • スプレッドシートIDが間違っている：SpreadsheetApp.openByIdに渡すIDが正しいか確認してください。URLからコピーする際に、不要な文字が含まれていないか注意が必要です。

  • 権限の問題：Webアプリがスプレッドシートにアクセスする権限があるか確認してください。初めてスクリプトを実行する際に、権限の許可を求められる場合があります。

  • タイムアウト：大量のデータを処理する場合、スクリプトがタイムアウトする可能性があります。UrlFetchApp.fetchAllなどを使用し、処理を分割することを検討してください。

カスタマイズ方法と応用例

  • データのフィルタリング：スプレッドシートから読み込んだデータを、条件に基づいてフィルタリングして表示することができます。

  • グラフの表示：ChartServiceを使用して、スプレッドシートのデータをグラフとして表示することができます。

  • リアルタイム更新：onChangeトリガーを使用することで、スプレッドシートの変更をリアルタイムにWebアプリに反映させることができます。

まとめ

SpreadsheetApp.openById関数は、GASでWebアプリ開発を行う上で非常に強力なツールです。スプレッドシートをデータソースとして活用することで、様々な業務課題を解決することができます。本記事で紹介したコード例やトラブルシューティング、カスタマイズ方法を参考に、ぜひWebアプリ開発に挑戦してみてください。

PR

CodeCampは、現役エンジニアからマンツーマンで学べるオンラインプログラミングスクールです。WebデザインやWebサービス開発、転職支援など、目的に合わせた多様なコースが選べます。
朝7時〜夜23時40分まで、365日レッスンが受けられるため、忙しい方でも自分のペースで学習を進めることが可能です。通過率8%の厳しい選考を通過した質の高い講師陣が、あなたのキャリアチェンジを強力にサポートします。
さらに、未経験者向けのカリキュラムや、学習開始から20日以内の全額返金保証制度もあるため、プログラミング学習に不安を感じている方でも安心して始めることができます。

CodeCampで理想の働き方を実現しよう