このページは Cloud Translation API によって翻訳されました。

Google スプレッドシートを使用した Apps Script の基礎 #5: スライドでのデータのグラフ化と表示

1. はじめに

「Google スプレッドシートを使用したアプリの基礎の基礎」Codelab 再生リストの第 5 部にようこそ。この Codelab では、Apps Script のスプレッドシートサービスを使用してデータセットのグラフを作成する方法について説明します。また、スライドサービスを使って Google スライドで新しいプレゼンテーションにグラフを書き出す方法についても説明します。

学習内容

Apps Script を使って折れ線グラフを作成する
スライドで新しいプレゼンテーションにグラフをエクスポートする方法。
スプレッドシートでユーザーにダイアログを表示する方法。

始める前に

これは「Google スプレッドシートを使用するアプリの基礎の基礎」再生リストの 5 番目の Codelab です。この Codelab を開始する前に、前の Codelab を完了してください。

必要なもの

この再生リストの前の Codelab で説明した Apps Script の基本的なトピックについての理解。
Apps Script エディタの基本的な知識
Google スプレッドシートの基本事項
スプレッドシートの A1 表記を読む機能
JavaScript とその String クラスに関する基本的な知識

2. 設定

続行する前に、データを含むスプレッドシートが必要です。すでに実施したように、これらの演習ではデータシートをコピーできます。次の手順を行います。

こちらのリンクをクリックしてデータシートをコピーし、[コピーを作成] をクリックします。新しいスプレッドシートは Google ドライブフォルダに保存され、「日付と米ドルの為替レートのコピー」という名前が付けられます。
スプレッドシートのタイトルをクリックし、「日付と米ドルの為替レートのコピー」から「日付と米ドルの為替レート」に変更します。シートは次のようになります。さまざまな米ドルの為替レートに関する基本情報が日付で異なります。

[拡張機能] > [Apps Script] をクリックしてスクリプトエディタを開きます。

時間を節約するために、このスプレッドシートにはカスタムメニューを設定するコードを追加しました。スプレッドシートのコピーを開いたときに次のようなメニューが表示されることがあります。

このスプレッドシートとプロジェクトを使用して、Codelab を開始できます。次のセクションに進み、グラフと時間駆動トリガーについて学びましょう。

3. Apps Script を使用してスプレッドシートでグラフを作成する

特定のグラフをデザインしてデータセットを可視化するとします。実際に Apps Script を使って、グラフを作成、編集したり、Google スプレッドシートに挿入したりできます。スプレッドシート内のグラフを「埋め込みグラフ」と呼びます。

グラフは 1 つ以上のデータ系列を視覚化するために使用されます。埋め込みグラフの場合、通常、スプレッドシート内のデータが表示されます。通常、スプレッドシートのデータを更新すると、グラフも自動的に更新されます。

Apps Script では、カスタマイズした埋め込みグラフをゼロから作成したり、既存のグラフを更新したりできます。ここでは、Apps Script と Spreadsheet サービスを使ってスプレッドシートでの埋め込みグラフを作成する基本的な方法について説明します。

注意事項: Apps Script ではグラフを使用して複数のタスクを実行できますが、実行できない操作もあります。スプレッドシートサービスには、グラフ作成機能を提供する複数の EmbeddedChart クラスが用意されていますが、すべての設定項目に対応しているわけではありません。Apps Script にも Google Charts API が使用されています。この API には固有の制限があります。

このような制限があるため、多くの場合、Apps Script を使って基本的なグラフを作成する場合や、Google スプレッドシートで編集してから書式を手動で調整する場合に役立ちます。Apps Script ではすべてのグラフ関連プロセスを自動化できるわけではありませんが、大部分は自動化できます。

実装

データスプレッドシートのコピーには、「日付と為替レート」データセットに、各日付の為替レート（1 米ドル）が表示されます。Apps Script 関数を実装し、グラフにこのデータの一部を可視化します。

次の手順を行います。

Apps Script エディタで、スクリプトプロジェクトの Code.gs スクリプトの末尾に onOpen() 関数の後に次の関数を追加します。

/**
 * Creates and inserts an embedded
 * line chart into the active sheet.
 */
function createEmbeddedLineChart() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var chartDataRange = sheet.getRange(
    'Dates and USD Exchange Rates dataset!A2:F102');
  var hAxisOptions = {
    slantedText: true,
    slantedTextAngle: 60,
    gridlines: {
      count: 12
    }
  };
  
  var lineChartBuilder = sheet.newChart().asLineChart();
  var chart = lineChartBuilder
    .addRange(chartDataRange)
    .setPosition(5, 8, 0, 0)
    .setTitle('USD Exchange rates')
    .setNumHeaders(1)
    .setLegendPosition(Charts.Position.RIGHT)
    .setOption('hAxis', hAxisOptions)
    .setOption("useFirstColumnAsDomain", true)
    .build();
 
  sheet.insertChart(chart);  
}

スクリプトプロジェクトを保存します。

コードレビュー

追加したコードでは、グラフと日付および為替レートのデータセットというメニュー項目によって呼び出される関数が実装され、基本的な折れ線グラフが作成されます。コードを確認してみましょう。

最初の行で、次の 3 つの変数を設定します。

sheet: 現在アクティブなシートへの参照。
chartDataRange: 可視化するデータ範囲。このコードでは、日付と米ドルの為替レートデータセットというシートで、A1 表記を使用して範囲 A2 から F102 までの範囲を指定します。シート名を明確に設定することで、別のシートがアクティブであってもメニュー項目が機能するようになります。これはシート範囲がデータの位置を常にカバーするためです。2 行目から始まる列列が含まれることで、直近の 100 件の日付（行）のみがグラフ化されます。
hAxisOptions: 横軸の外観を設定するためのコード設定情報を含む、基本的な JavaScript オブジェクト。具体的には、横軸のテキストラベルを 60 度の傾きに設定し、垂直グリッドラインの数を 12 に設定します。

次の行により、折れ線グラフビルダーが作成されます。Apps Script の埋め込みグラフは、Builder 設計パターンを使用して作成されます。この設計パターンの詳細な説明は、この Codelab の範囲外です。ここでは、Spreadsheet サービスが複数の EmbeddedChartBuilder クラスを提供する点のみ説明します。グラフを作成するには、まず埋め込みグラフビルダーオブジェクトを作成し、そのメソッドを使用してグラフ設定を定義してから、build() メソッドを呼び出して最終的な EmbeddedChart オブジェクトを作成します。すべてのグラフ設定はビルダークラスを通じて管理されるため、コードで EmbeddedChart オブジェクトを直接変更することはありません。

スプレッドシートサービスは、親の EmbeddedChartBuilder クラスと、クラスを継承する複数の子ビルダークラス（EmbeddedLineChartBuilder など）を提供します。子クラスを使用することで、Apps Script で特定のグラフタイプにのみ適用されるビルダーのグラフ設定メソッドを提供できます。たとえば、EmbeddedPieChartBuilder クラスには、円グラフにしか適用されない set3D() メソッドが用意されています。

コードで次の行を作成し、ビルダーオブジェクト変数 lineChartBuilder を作成します。

var lineChartBuilder = sheet.newChart().asLineChart();

このコードは、Sheet.newChart() メソッドを呼び出して EmbeddedChartBuilder オブジェクトを作成し、EmbeddedChartBuilder.asLineChart() を使用して、ビルダータイプを EmbeddedLineChartBuilder に設定します。

その後、コードによって lineChartBuilder を使用してグラフが作成されます。コードのこの部分は、グラフの設定を定義する一連のメソッド呼び出しと、それに続くグラフの作成の build() 呼び出しで構成されています。前の Codelab で見たように、このコードはメソッドチェーンを使用してコードを判読可能な状態にします。メソッド呼び出しでは以下の処理が行われます。

addRange(range): グラフに表示するデータの範囲を定義します。
setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): シート内のグラフの配置場所を決定します。このコードは、グラフの左上隅をセル H5 に挿入しています。
setTitle(title): グラフのタイトルを設定します。
setNumHeaders(headers): データ範囲内の、ヘッダーとして扱う行または列の数を指定します。この場合、コードではデータ範囲の最初の行がヘッダーとして使用され、その行のテキストがグラフの各データ系列のラベルとして使用されます。
setLegendPosition(position): グラフの凡例をグラフの右側に移動します。このメソッドは、Charts.Position 列挙型をパラメータとして使用します。
setOption(option, value): 複雑なグラフのオプションを設定します。このコードは、hAxis オプションを hAxisOptions オブジェクトに設定します。このメソッドを使って設定できるオプションがいくつかあります。各チャートタイプのオプションと使用できる値については、Charts API チャートギャラリーをご覧ください。たとえば、折れ線グラフに設定できるオプションは、折れ線グラフの構成オプションに記載されています。setOption(option, value) メソッドは高度なトピックであるため、Apps Script でのグラフの作成に慣れるまでは使用しないことをおすすめします。
build(): 上記の設定を使用して、EmbeddedChart オブジェクトを作成し、返します。

最後に、コードは Sheet.insertChart(chart) を呼び出して、作成したグラフをアクティブシートに配置します。

Results

次の手順でフォーマット関数の動作を確認できます。

スクリプトプロジェクトをまだ Apps Script エディタに保存していない場合は、保存します。
[Present dataset > Chart "Dates and USD Exchange Rates dataset] メニュー項目をクリックします。

注: gmail.com アカウントを使用している場合は、最初にスクリプトを使用すると、「このアプリは確認されていません」というダイアログが表示されることがあります。Google ではこの情報を使用して、不明な作成者や信頼できない作成者によるコードを使用している可能性のあるユーザーに警告します。このダイアログが表示されたら、スクリプトの作成者なので続行できます。画面の指示に沿って、スクリプトの承認を続けます。

未確認のアプリダイアログで [詳細設定] をクリックします。
[日付と米ドルの為替レートに移動（安全ではありません）] をクリックします。
[許可] をクリックします。

この Codelab では、いくつかの権限のプロンプトが表示されることがあります。このプロセスの詳細については、Google サービスの認可をご覧ください。

スクリプトによって、データの右側に新しいグラフが配置されます。

Apps Script を使って折れ線グラフを埋め込んだ場合、次のセクションでは、グラフを Google スライドに書き出す方法について説明します。

4. グラフを Google スライドに書き出す

Apps Script の優れている点は、Google Workspace アプリケーション間でデータを簡単に移動できることです。これらのアプリケーションのほとんどは、スプレッドシートサービスと同様に、専用の Apps Script サービスを備えています。たとえば Gmail には Gmail サービス、Google ドキュメントにはドキュメントサービス、Google スライドにはスライドサービスというサービスが用意されており、これらの組み込みサービスすべてを使用して、あるアプリケーションからデータを抽出して処理し、その結果を別のアプリケーションに書き込むことができます。

このセクションでは、Google スプレッドシートのすべての埋め込みグラフを新しい Google スライドプレゼンテーションにエクスポートする方法について説明します。スプレッドシートでユーザーにカスタムメッセージを表示する方法も 2 つ表示されます。

実装

ここでは、[データセットをプレゼンテーションに公開> スライドにグラフをエクスポート] メニュー項目によって呼び出される関数を実装します。次の手順を行います。

Apps Script エディタで、スクリプトプロジェクトの Code.gs スクリプトの末尾に createEmbeddedLineChart() 関数の後に次の関数を追加します。

/**
 * Create a Slides presentation and export
 * all the embedded charts in this spreadsheet
 * to it, one chart per slide.
 */
function exportChartsToSlides() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  
  // Fetch a list of all embedded charts in this
  // spreadsheet.
  var charts = [];
  var sheets = ss.getSheets();
  for (var i = 0; i < sheets.length; i++) {
    charts = charts.concat(sheets[i].getCharts());
  }
  
  // If there aren't any charts, display a toast
  // message and return without doing anything
  // else.
  if (charts.length == 0) {
    ss.toast('No charts to export!');
    return;
  }
  
  // Create a Slides presentation, removing the default
  // title slide.
  var presentationTitle =
    ss.getName() + " Presentation";
  var slides = SlidesApp.create(presentationTitle);
  slides.getSlides()[0].remove();  
  
  // Add charts to the presentation, one chart per slide.
  var position = {left: 40, top: 30};
  var size = {height: 340, width: 430};
  for (var i = 0; i < charts.length; i++) {
    var newSlide = slides.appendSlide();
    newSlide.insertSheetsChart(
      charts[i],
      position.left,
      position.top,
      size.width,
      size.height);   
  }
  
  // Create and display a dialog telling the user where to
  // find the new presentation.
  var slidesUrl = slides.getUrl();
  var html = "<p>Find it in your home Drive folder:</p>"
      + "<p><a href=\"" + slidesUrl + "\" target=\"_blank\">"
      + presentationTitle + "</a></p>";
  
  SpreadsheetApp.getUi().showModalDialog(
    HtmlService.createHtmlOutput(html)
      .setHeight(120)
      .setWidth(350),
      "Created a presentation!"
  );
}

スクリプトプロジェクトを保存します。

コードレビュー

このコードは予想より短い場合があります。コードを 5 つのセクションに分割してコードの機能について確認しましょう。

1: グラフを取得する

最初の数行では、有効なスプレッドシートを検索し、埋め込まれているすべてのグラフを検索して配列 charts に収集します。これらの行は、Spreadsheet.getSheets() メソッドと Sheet.getCharts() メソッドを使用して、シートとグラフのリストを取得します。JavaScript Array.concat() メソッドを使用して、各シートのグラフのリストを charts に追加します。

2: エクスポートするグラフがあることを確認する

このコードは、エクスポートするグラフがあるかどうかを検証します。空白のプレゼンテーションを作成しないように、グラフがない場合は、Spreadsheet.toast(message) を使用してトーストメッセージを作成するようにします。これは小さな「覗き見」ダイアログです。スプレッドシートの右下にポップアップ表示され、数秒間表示された後、非表示になります。

エクスポートするグラフがない場合、トーストメッセージが作成され、何もする必要はありません。エクスポートするグラフがある場合、このコードは以降の数行でプレゼンテーションの作成を続けます。

3: プレゼンテーションを作成する

新しいプレゼンテーションのファイル名を保持するために、変数 presentationTitle が作成されます。スプレッドシートの名前として設定され、末尾に「Presentation」が連結されます。その後、スライドのサービスメソッド SlidesApp.create(name) を呼び出してプレゼンテーションを作成します。

新しいプレゼンテーションは 1 枚の空白のスライドで作成されます。プレゼンテーションでは不要なため、コードで Presentation.getSlides() と Slide.remove() を使用して削除します。

4: グラフをエクスポートする

次のセクションでは、JavaScript オブジェクトの position と size を定義して、インポートしたグラフがスライド内のどこに配置されるか、グラフの大きさ（ピクセル単位）を設定します。

コードはグラフリスト内のすべてのグラフをループします。グラフごとに newSlide が Presentation.appendSlide() 付きで作成され、プレゼンテーションの末尾にスライドが追加されます。Slide.insertSheetsChart(sourceChart, left, top, width, height) メソッドは、指定した position と size を使用してグラフをスライドにインポートするために使用されます。

最後に、新しいプレゼンテーションの場所をユーザーに知らせる必要があります。できれば、ユーザーがクリックできるリンクを開いてください。これを行うには、Apps Script の HTML サービスを使用してカスタムモーダルダイアログを作成します。モーダルダイアログ（Apps Script ではカスタムダイアログ）は、スプレッドシートのインターフェースに表示されるウィンドウです。カスタムダイアログを表示すると、ユーザーはスプレッドシートを操作できなくなります。

カスタムダイアログを作成するには、コンテンツを定義する HTML が必要です。これは html 変数で指定されます。コンテンツには短い段落とハイパーリンクが含まれています。ハイパーリンクは、Presentation.getUrl() から提供されたプレゼンテーション URL にリンクされている presentationTitle 変数です。ハイパーリンクも target="_blank" 属性を使用するため、ダイアログ内ではなく、新しいブラウザタブでプレゼンテーションが開かれます。

HTML は HtmlService.createHtmlOutput(html) メソッドによって解析されて HtmlOutput オブジェクトになります。HtmlOutput オブジェクトでは、HtmlOutput.setHeight(height) と HtmlOutput.setWidth(width) を使用してカスタムダイアログのサイズを設定できます。

htmlOutput が作成されると、このコードは Ui.showModalDialog(htmlOutput, title) メソッドを使用して、指定されたタイトルのダイアログを表示します。

Results

2 つ目のメニュー項目が実装されたら、実際に動作を確認できます。exportChartsToSlides() 関数をテストするには:

スクリプトプロジェクトをまだ Apps Script エディタに保存していない場合は、保存します。
スプレッドシートを開き、[Present dataset] メニュー項目（グラフの日付と米ドルの為替レート）をクリックして、グラフをエクスポートします。有効なシートのセル H5 に固定されます。
[プレゼンテーションを表示 > グラフをスライドにエクスポート] メニュー項目をクリックします。スクリプトの再承認を求められる場合があります。
スクリプトがリクエストを処理し、カスタムダイアログが表示されます。
新しいスライドプレゼンテーションを開くには、[日付と米ドルの為替レートのプレゼンテーション] リンクをクリックします。

必要に応じて、スプレッドシートにグラフを追加してメニュー項目を選択し、複数のスライドを含むプレゼンテーションを作成することもできます。

Google スプレッドシートで作成したグラフを Google スライドのプレゼンテーションにエクスポートできるようになりました。コードを記述して、カスタムダイアログを作成することもできます。

この Codelab の最後の演習を完了しました。次のセクションに進み、学習した内容を確認しましょう。

5. おわりに

これで、この Codelab と、「Google スプレッドシートを使った Apps Script の基礎」Codelab 再生リストは完了です。この再生リストに記載されている原則を活かして、Google スプレッドシートをさらに活用したり、Apps Script の機能を試したりできます。

この Codelab はお役に立ちましたか。

はい

いいえ

学習した内容

Apps Script で埋め込み折れ線グラフを作成する方法。
スプレッドシートでユーザーにトーストメッセージやカスタムダイアログを表示する方法。
グラフを新しい Google スライドプレゼンテーションにエクスポートする方法。

主なコンセプト:

スプレッドシートサービスでは、EmbeddedChart および関連するビルダークラスを使用して、スプレッドシートに表示されるグラフを作成、変更します。Charts サービスは、Apps Script ウェブアプリなど、スプレッドシート以外で使用されるグラフを作成、変更するために使用します。
トーストメッセージはスプレッドシートで使用され、有効期間が短いアラートメッセージをユーザーに提示することなく使用できます。
カスタムダイアログは、HTML と JavaScript で作成されたモーダルダイアログです。カスタムダイアログを表示すると、ユーザーはスプレッドシートを操作できなくなります。カスタムダイアログは、スクリプトの実行に必要な情報の入力や、スプレッドシートでの作業を続行する前に確認できるようにしたい場合に適しています。
コンテナにバインドされたスクリプトを含むファイルをコピーする場合、そのファイルのコピーは、バインドされたスクリプトのコピーを保持します。コピーを変更しても、元のファイルには反映されません。その逆も同様です。
スライド内のリンクされたグラフは、スプレッドシート内の元のグラフに関連付けられます。スプレッドシートの元のグラフを編集する場合は、スライドに含まれるリンク先のグラフを更新して、編集内容を反映させることができます。

主な用語:

有効（ステータス）: 指定したスプレッドシート、シート、範囲、セルが、現在ユーザーが閲覧またはハイライト表示していることを示します。
アクティブセル: アクティブシート内の、ハイライト表示された 1 つのセルにカーソルを合わせます。
有効範囲: 有効シート内で現在ハイライト表示されている 1 つ以上のセルのグループ。
承認: ユーザーが Google Apps Script でユーザーに関連するデータへのアクセスを許可するか、ユーザーに代わってアクションを実行する権限を付与するプロセス。
コンテナにバインドされたスクリプト: Google スプレッドシートや Google ドキュメントなど、Google Workspace ドキュメントにバインドされて作成されたスクリプト。
カスタムダイアログ: HTML と JavaScript から構築された、カスタマイズ可能なモーダルダイアログウィンドウです。ユーザーに情報やインタラクティブな情報を提供するために使用されます。カスタムダイアログを表示すると、ユーザーはスプレッドシートを操作できなくなります。
EmbedChart: スプレッドシートに埋め込まれているグラフ。
EmbeddedChartBuilder: EmbeddedChart を作成または編集するために使用されるクラスまたはビルダー。
ヘルパー関数: 通常はプライベートな関数です。別のサブタスクが呼び出し、小さなサブタスクを完了します。ヘルパー関数は、サブタスクを複数の場所で何度も完了する必要がある場合に使用されます。
JSON: データオブジェクトとデータ構造をテキストから定義するためのファイル形式。
onOpen(): スクリプトで定義されている場合は、ファイルが開くか再読み込みされるたびに配信されるシンプルなトリガーです。
リンクされたグラフ: Google スライドで、Google スプレッドシートの元のグラフに関連付けられたグラフです。スプレッドシートの元のグラフを編集する場合は、スライドに含まれるリンク先のグラフを更新して、編集内容を反映させることができます。
モーダルダイアログ: カスタムダイアログに移動します。
プレゼンテーション: Google ドライブにある Google スライドファイル。Presentation クラスを使用すると、プレゼンテーションにアクセスして変更できます。
範囲**: 1 つのシート内の隣接する 1 つ以上のセルのグループ。Range** クラスを使用すると、シート内の範囲を読み取り、更新できます。
スクリプトエディタ: Apps Script 用のブラウザ内コードエディタ。
シンプルトリガー: 予約済みのトリガー関数名と特定の制限がある Apps Script のトリガーのサブタイプです。
シート**: スプレッドシートの 1 ページ分です。Google ドライブ内の Google スプレッドシートファイルを参照するために使用されることがあります。Sheet** クラスを使用すると、シートにアクセスして変更できます。
スライド: プレゼンテーション内の単一のスライド。Slide クラスを使用すると、スライドにアクセスして変更できます。
SlidesApp: このクラスはスライドサービスの親クラスとして機能し、Google スライドのデータを読み取りまたは操作するためのコードの出発点となります。
SpreadsheetApp: このクラスはスプレッドシートサービスの親クラスとして機能し、Google スプレッドシートのデータを読み取ったり操作したりするコードの出発点となります。
スプレッドシート**: Google ドライブ内の Google スプレッドシートファイルです。Spreadsheet** クラスを使用すると、スプレッドシートにアクセスして変更できます。
スプレッドシートサービス: Apps Script サービス。スクリプトを使用して Google スプレッドシートファイルを作成、アクセス、変更することができます。
トースト: Google スプレッドシートのイベントやプロセスについてユーザーに通知するために使用される短期のダイアログです。
トリガー: Apps Script 関数をキーとするイベント。イベント（スプレッドシートを開いているなど）が発生すると、トリガーによって「トリガー」が発生し、関連する Apps Script 関数が自動的に実行されます。
URL 取得サービス: Apps Script サービス。スクリプトが URL エンドポイントに接続してリクエストを受信したり、レスポンスを受信したりできるようにします。

次のステップ

このプレイリストは正常に完了しました。Apps Script については、他にも学ぶべきことがあります。

次のリソースをご確認ください。

スクリプトをお楽しみください。

この Codelab の再生リストは役に立ちましたか。

はい

いいえ

今後、Apps Script の Codelab を増やしていく予定ですか。

はい

いいえ

Google スプレッドシートを使用した Apps Script の基礎 #5: スライドでのデータのグラフ化と表示

1. はじめに

学習内容

始める前に

必要なもの

2. 設定

3. Apps Script を使用してスプレッドシートでグラフを作成する

実装

コードレビュー

Results

4. グラフを Google スライドに書き出す

実装

コードレビュー

1: グラフを取得する

2: エクスポートするグラフがあることを確認する

3: プレゼンテーションを作成する

4: グラフをエクスポートする

5: プレゼンテーションの場所を共有する

Results

5. おわりに

この Codelab はお役に立ちましたか。

学習した内容

次のステップ

この Codelab の再生リストは役に立ちましたか。

今後、Apps Script の Codelab を増やしていく予定ですか。