Google Apps Script の実践: 4 行のコードで Google スプレッドシート、マップ、Gmail にアクセスする

1. Google Apps Script の概要

この Codelab では、Google のデベロッパー テクノロジーにアクセスするコードを簡単に記述する方法について説明します。これはすべて、主流のウェブ開発言語である JavaScript を適用することで実現できます。まず Google Apps Script でコードを記述して、Google スプレッドシート内のセルから住所を抽出し、その住所をもとに Google マップの地図を生成して、その地図を Gmail を使って添付ファイルとして送信します。しかも、コードは 4 行のみです。

学習内容

  • Google スプレッドシート、Google マップ、Gmail などのさまざまな Google サービスで Google Apps Script を使用する方法。
  • Apps Script のブラウザ内エディタを使用してコードを開発します。

必要なもの

  • インターネットにアクセスできるウェブブラウザ
  • Google アカウント(Google Workspace アカウントの場合、管理者の承認が必要となる可能性があります)
  • Google スプレッドシートに関する基礎知識
  • スプレッドシートの A1 形式を読み取る機能

2. アンケート

この Codelab/チュートリアルをどのように使用しますか?

通読するのみ 通読し、演習を行う

Google Workspace デベロッパー ツールと API のご利用経験についてどのように評価されますか?

初心者 中級者 上級者

3. 概要

この Codelab の概要を把握したところで、具体的に何を行うのかを見ていきましょう。

  1. JavaScript に基づく Apps Script について簡単に学びます。
  2. Google スプレッドシートでスプレッドシートを作成します。
  3. スプレッドシートの左上のセル(A1)に番地を入力します。
  4. 任意のドキュメントで Apps Script エディタを開く方法について説明します。
  5. Apps Script コードを編集、保存、実行する。
  6. Gmail を使用して結果を表示します。

さっそく始めましょう。

Google Apps Script とは

Google Apps Script は、Google Workspace と連携するスクリプトや小規模なアプリケーションをすばやく簡単に作成できる開発プラットフォームです。次のことが可能になります。

  • JavaScript でコードを記述し、Gmail、カレンダー、ドライブなどの Google Workspace アプリケーション用の組み込みライブラリにアクセスします。
  • インストール作業は不要です。ブラウザ内で動作するコードエディタが用意されており、スクリプトは Google のサーバーで実行されます。
  • セキュリティやデータアクセス権限などの複雑なトピックについて心配する必要はありません。プラットフォームが処理してくれるためです。

Apps Script を使用すると、チャットボットからウェブアプリまで、さまざまなアプリケーションを作成できます。最も一般的な用途の一つは、Google スプレッドシートの機能を拡張することです。この Codelab の残りの部分では、Apps Script を使用してスプレッドシートからデータを取得し、他の Google サービスに接続する方法を学習します。

4. Google スプレッドシートを作成して住所を入力する

次の手順に沿って、新しい Google スプレッドシートに有効な住所を入力します。

  1. このリンク(sheets.google.com/create)から Google スプレッドシートを作成します。または、Google ドライブ(drive.google.com)に移動して、[新規] > [Google スプレッドシート] > [空白のスプレッドシート] をクリックします。

413a93e5b2f6b3d4.png

  1. 空白のスプレッドシートで、左上の最初のセル(A1)にカーソルを合わせます。これが A 列の 1 行目になります。A1 形式について復習する必要がある場合は、A1 形式の説明をご覧ください。
  2. セルに有効な番地を入力します。番地、郵便番号、または市区町村と都道府県 / 州の組み合わせを使用して、正確な位置を指定できる世界の住所を選択します。ニューヨーク市の住所の例を次に示します。

7077e446455639df.png

シートで行う作業は以上です。エディタを開いてコードを記述してみましょう。

5. Apps Script のコードを編集する

新しい Google スプレッドシートを作成したら、コンテナ バインドのスクリプトを編集します。そのための手順は次のとおりです。

スクリプト エディタを開く

メニューバーで、[拡張機能] > [Apps Script] を選択して、Apps Script のブラウザ コードエディタを開きます。

新しいブラウザタブで、コードエディタにシートのデフォルトのコンテナ バインド スクリプトが表示されます。myFunction() というデフォルトの関数が自動的に作成され、カーソルが関数の内部に配置されるため、すぐに作業を開始できます。

住所の Google マップをメールで送信する

表示されているテンプレートのコードは空です。これを用意されているアプリケーションのものと置き換えます。

  1. スクリプト エディタで、デフォルトの myFunction() コードブロックを次のコードに置き換えます。
/** @OnlyCurrentDoc */
function sendMap() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var address = sheet.getRange('A1').getValue();
  var map = Maps.newStaticMap().addMarker(address);
  GmailApp.sendEmail('YOUR_EMAIL_ADDR', 'Map', 'See below.', {attachments:[map]});
}
  1. プレースホルダのメールアドレス('YOUR_EMAIL_ADDR')を有効なメールアドレスに置き換えます。例: friend@example.com
  2. スクリプトを保存するには、[保存] 保存 をクリックします。
  3. Apps Script プロジェクトの名前を変更するには、[無題のプロジェクト] をクリックし、プロジェクトのタイトルを入力して、[名前を変更] をクリックします。

コードレビュー

アプリケーション全体を構成する sendMap() 関数の 4 行を確認しましょう。興味深いことに、このコードは 3 つの異なる Google サービスを参照しています。

最初の行は、認可に影響するアノテーション コメントです。

/** @OnlyCurrentDoc */

ほとんどのスクリプトは、実行前にユーザーに権限を求めるようになっています。これらの権限は、ユーザーがスクリプトに許可する操作を制御します。1 行目は、Apps Script に現在のスプレッドシート(ユーザーのすべてのスプレッドシートではなく)へのアクセスを制限するよう指示する省略可能なアノテーションを含むコメントです。単一のファイルを操作する場合、このアノテーションを含めることをおすすめします。

このコードでは、sendMap() に通常の JavaScript 関数宣言を使用しています。

function sendMap() {

次の行では、SpreadsheetApp オブジェクトを介して Apps Script からアクセスできる スプレッドシート サービスを呼び出しています。返されたシートを、sheet という名前の変数に代入しています。getActiveSheet() メソッドは、現在のシート オブジェクトへの参照を取得し、変数 sheet に格納します。

  var sheet = SpreadsheetApp.getActiveSheet();

取得した sheet オブジェクトを使用して、getRange()A1 表記のセル範囲(ここでは 1 つのセル)を参照しています。「セル範囲」とはセルのグループを指しますが、今回のように 1 つのセルの場合もあります。セル A1 は、住所を入力したセルです。範囲内の値を取得するために、getValue() メソッドは範囲の左上のセルの値を返し、その値を変数 address に割り当てます。その他の住所を追加して、他のセルからも読み出してみましょう。

  var address = sheet.getRange('A1').getValue();

コードの 3 行目では、Maps オブジェクトを使用して Google マップサービスに接続しています。newStaticMap() は静的マップ オブジェクトを作成し、addMarker() メソッドはシートの住所を使用して地図に「ピン」を追加します。

  var map = Maps.newStaticMap().addMarker(address);

最後に、Gmail サービスMailApp オブジェクトを介して sendEmail() メソッドを呼び出し、「See below.」というテキストと地図画像の添付ファイルを含むメールを送信します。

  GmailApp.sendEmail('friend@example.com', 'Map', 'See below.', {attachments:[map]});
}

6. Google スプレッドシート、マップ、Gmail アプリを実行する

名前を付けて保存したら、関数を実行します。エディタの上部で、関数リストから sendMap() が選択されていることを確認し、[実行] をクリックします。

デベロッパーにとって便利な Apps Script の機能の一つに、プログラムにユーザーのデータへのアクセス権を付与する認証コードを記述する必要がないことがあげられます。Apps Script は自動的に認証を管理しますが、このスクリプトが(ユーザーに代わって)スプレッドシートにアクセスし、Gmail でメールを送信できるよう、ユーザー自身がアクセスを許可する必要があります。最初の認証ダイアログは次のようになります。

ba6e1a798e404e0d.png

[権限を確認] をクリックして続行します。

次に、OAuth2 ダイアログ ウィンドウが表示され、スプレッドシートへのアクセスとメールの送信のためのアクセスを許可するかどうかが確認されます。

9bed7ef1ccbd7569.png

アクセスを許可すると、スクリプトが最後まで実行されます。

メッセージを送信したメール アカウントを確認します。件名が「Map」で本文が次のようなメールが届きます。

51f61fc51a13d28f.png

メール メッセージの添付ファイルを開くと、スプレッドシートに入力した住所にピンが立てられた Google マップが表示されます。

739bb45b75e3f7c7.png

たった 4 行のコードで、Google の 3 つのサービスにアクセスして意味のある処理を実行できました。

7. 参考情報

この Codelab で紹介しているコードは、GitHub リポジトリ(github.com/googleworkspace/apps-script-intro-codelab)でも入手できます。以下に、この Codelab で取り上げた題材を掘り下げたり、Google デベロッパー ツールにプログラムでアクセスする他の方法を探索したりするために役立つ追加資料を示します。

ドキュメント

動画

ニュースと最新情報

その他の Codelab

入門

中級

リファレンス アプリケーション