未分類

GASでスプレッドシート名を取得してWebアプリのダッシュボードを改善！Spreadsheet.getName()徹底活用

GASでスプレッドシート名を取得してWebアプリのダッシュボードを改善！Spreadsheet.getName()徹底活用

本記事では、Google Apps Script（GAS）のSpreadsheet.getName()関数を利用して、Webアプリのダッシュボードをより使いやすくする方法を解説します。特に、複数のスプレッドシートを扱うWebアプリ開発において、スプレッドシート名を動的に取得し、ダッシュボードに表示することで、ユーザーエクスペリエンスを大幅に向上させるテクニックをご紹介します。

Webアプリ開発におけるスプレッドシート名取得の重要性

Webアプリ開発、特にフォーム作成、API連携、ダッシュボード作成など、GASとスプレッドシートを連携させる場合、複数のスプレッドシートを扱うことがよくあります。このような状況では、どのスプレッドシートのデータを表示しているのか、ユーザーが直感的に理解できるようにする必要があります。そこで、Spreadsheet.getName()関数が役立ちます。

例えば、顧客管理ダッシュボードで、担当者ごとにスプレッドシートを分けて管理している場合、ダッシュボードにスプレッドシート名（担当者名）を表示することで、ユーザーはすぐに自分の担当分のデータを確認できます。また、API連携で複数のスプレッドシートからデータを収集し、集計ダッシュボードを作成する場合、各データのソースとなったスプレッドシート名を明示することで、データの信頼性を高めることができます。

Spreadsheet.getName()関数の基本

Spreadsheet.getName()関数は、アクティブなスプレッドシート、または指定したスプレッドシートの名前を文字列として取得します。非常にシンプルな関数ですが、Webアプリ開発においては非常に強力な武器となります。

構文：

spreadsheet.getName()

戻り値：

スプレッドシートの名前（文字列）

利用シチュエーション別の実装方法

フォーム作成

フォームから送信されたデータをスプレッドシートに保存する際、スプレッドシート名をフォームのタイトルとして表示することで、ユーザーはどのフォームから送信されたデータなのかを簡単に識別できます。

API連携

APIから取得したデータを複数のスプレッドシートに振り分ける場合、ダッシュボードに各スプレッドシート名を表示することで、データの出所を明確にできます。

ダッシュボード

ダッシュボードに表示するデータのソースとなったスプレッドシート名を動的に表示することで、ユーザーエクスペリエンスを向上させます。

実用的なコード例

例1：Webアプリのタイトルにスプレッドシート名を表示

WebアプリのHTMLに以下のコードを追加します。


GAS側のコードは以下のようになります。

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index');
}

function getSpreadsheetName() {
  return SpreadsheetApp.getActiveSpreadsheet().getName();
}

例2：ダッシュボードにスプレッドシート名を表示

ダッシュボードの特定の場所にスプレッドシート名を表示する例です。


  
現在のスプレッドシート：

GAS側のコードは例1と同じです。

例3：API連携で取得したデータソースを表示

API連携で複数のスプレッドシートからデータを取得し、集計結果と合わせてスプレッドシート名を表示する例です。

function displayData() {
  const spreadsheetName = SpreadsheetApp.getActiveSpreadsheet().getName();
  const data = getDataFromAPI(); // APIからデータを取得する関数（別途実装）

  // ダッシュボードにデータを表示する処理
  const dashboardElement = document.getElementById("dashboard");
  dashboardElement.innerHTML = `
データソース：${spreadsheetName}
${data}
`;
}

function getDataFromAPI() {
  // APIからデータを取得する処理（ここではサンプルデータを返す）
  return "APIからのサンプルデータ";
}

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

  • スプレッドシート名が正しく取得できない：
    SpreadsheetApp.getActiveSpreadsheet()が正しいスプレッドシートを指しているか確認してください。また、Webアプリの実行権限が正しく設定されているか確認してください。

  • Webアプリにスプレッドシート名が表示されない：
    HTMLのIDが正しいか、GAS側のgetSpreadsheetName()関数が正しく実行されているか確認してください。

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

  • スプレッドシート名を加工して表示：
    取得したスプレッドシート名に対して、文字列操作（substring()、replace()など）を適用して、表示する内容をカスタマイズできます。

  • 複数のスプレッドシート名を連結して表示：
    複数のスプレッドシートからデータを取得する場合、それぞれのスプレッドシート名を連結して表示することで、より詳細な情報を提供できます。

  • スプレッドシート名をクリック可能なリンクにする：
    スプレッドシート名をクリックすると、該当のスプレッドシートが開くように設定できます。

まとめ

Spreadsheet.getName()関数は、GASを利用したWebアプリ開発において、ユーザーエクスペリエンスを向上させるための強力なツールです。本記事で紹介したコード例やトラブルシューティングを参考に、ぜひあなたのWebアプリにSpreadsheet.getName()関数を組み込んでみてください。

PR

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

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