GSP235

概要

このラボでは、ウェブ開発言語の中でも主流の JavaScript でコードを記述して、Google のデベロッパー テクノロジーを簡単に利用する方法について説明します。まず Google Apps Script でコードを記述して、Google スプレッドシート内のセルに保存された住所を抽出し、その住所をもとに Google マップを生成して、その地図へのリンクを Gmail を使って自分や友人宛てに送信します。このスクリプト言語のすばらしい点は、わずか ４ 行のコードでこの一連の処理を実行できるところです。

目標

• Apps Script について簡単に学ぶ（当初の知識としては十分な程度）
• Google スプレッドシートで新しいスプレッドシートを作成する
• 任意のドキュメントでスクリプト エディタを開く
• Apps Script コードを編集、保存、実行する
• 結果を Gmail で確認する

推奨される知識

次の知識があると効率的に学習できます。

• JavaScript の基本的なスキル（必須ではありませんがあれば役立ちます）
• スプレッドシートに関する基本的なスキル

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの手順をお読みください。ラボの時間は記録されており、一時停止することはできません。[ラボを開始] をクリックするとスタートするタイマーは、Google Cloud のリソースを利用できる時間を示しています。

このハンズオンラボでは、シミュレーションやデモ環境ではなく、実際のクラウド環境を使ってご自身でラボのアクティビティを行うことができます。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モードまたはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生することを防ぎます。

• ラボを完了するために十分な時間を確保してください。ラボをいったん開始すると一時停止することはできません。

注: すでに個人の Google Cloud アカウントやプロジェクトをお持ちの場合でも、このラボでは使用しないでください。アカウントへの追加料金が発生する可能性があります。

ラボを開始する

準備ができたら、左上のパネルの [ラボを開始] をクリックします。

ラボのユーザーのメールとパスワードを確認する

ラボで使用するリソースとコンソールにアクセスするには、左パネルの [ユーザーのメール] と [パスワード] を確認します。これらは、Google ドライブへのログインに使用する認証情報です。

その他のリソース ID や、接続に関連する情報がラボに必要な場合は、このパネルに表示されます。

Google スプレッドシートにログインする

1. [Google スプレッドシートを開く] をクリックします。

ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

2. [ユーザーのメール] と [パスワード] を入力します。

3. 指示に従ってすべての利用規約に同意します。

Google スプレッドシートが開き、受講者用 Google アカウントにログインできました。

Google Apps Script とは

Google Apps Script が提供する開発環境は、これまでに使い慣れたものではないかもしれませんが、次のことが可能になります。

• ブラウザベースのコードエディタでの開発に加え、Apps Script 用のコマンドライン デプロイツールである clasp を使用すれば、ローカルでの開発も可能です。
• Workspace やその他の Google または Google 外部のサービス（URLfetch、JDBC など）にアクセスできるようカスタマイズされた特殊な JavaScript でコーディングを行うことができます。
• 認証コードの記述を行う必要はありません。Apps Script で自動的に処理されます。
• アプリをホストする必要はありません。クラウドの Google サーバーから実行されます。

注: Apps Script の詳細は、このラボでは扱いません。さまざまなオンライン リソースがありますので、そちらでご確認ください。公式ドキュメントには、概要とクイックスタート、チュートリアル、動画が用意されています。このラボでは、皆さんがコードの作成をスムーズに行い、その環境でどのようなアプリケーションを作成するかを検討できるよう、Apps Script の開発環境について説明していきます。

Apps Script アプリケーションには、次の 2 つがあります。

1. コンテナ バインド - 1 つの Google ドキュメント（ドキュメント、スプレッドシート、スライド、サイト、フォーム）のみに永続的に関連付けられたものです。
2. スタンドアロン - Google スプレッドシート、ドキュメント、スライド、フォームのファイルや Google サイトにバインドされていない独立したスクリプトです。

コンテナ バインドのアプリもスタンドアロンのアプリも、公開することで幅広く利用できるようになります。

• 非公開 - プロジェクトの所有者だけがアクセスできます
• アドオンとして公開 - アプリがアドオンストアで公開され、誰でもインストールできます
• ウェブアプリとして公開 - ウェブ UI コンポーネントを備え、HTTP リクエストが処理される形式のアプリが公開されます
• Google サイトに埋め込む - 公開されたウェブアプリを、新しいサイトまたは従来のサイトのページに埋め込むことができます
• Execution API 対応形式で公開 - Execution API からアクセスできる形式のアプリが公開されます
• 上記の組み合わせ（有効な場合）

ここでは、Google スプレッドシートのコンテナ バインド型 Apps Script アプリを作成していきます。まずは新しいスプレッドシートを作成しましょう。

タスク 1. 新しい Google スプレッドシートを作成して住所を入力する

次の手順を実行して、新しい Google スプレッドシートに住所を入力します。

1. 新しいスプレッドシートを作成するには、[Google スプレッドシート] を開きます。
2. 空白のスプレッドシートの、左上の最初のセル（A1）をクリックします。これが A 列の 1 行目になります。
3. このセルに住所を入力します。郵便番号や都道府県 / 州、市区町村など、国内 / 海外のいずれかの地点の有効な住所（例: 76 9th Ave, New York）を入力します。

このシートで必要な作業はこれだけです。それでは、エディタを開いてコードを記述していきます。

[進行状況を確認] をクリックして、上記のタスクを実行したことを確認します。

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

タスク 2. Apps Script を開く

Apps Script は、スプレッドシートにバインドされたスクリプトの作成に使用するコードエディタを提供します。

• 上部のメニューバーで、[拡張機能] > [Apps Script] を選択します。

Apps Script が開きます。右側のコードエディタ ウィンドウに注目してください。

myFunction() というデフォルトの関数が自動的に作成されて、エディタに表示されます。これで、アプリケーションのコードを記述する準備ができました。

タスク 3. （テンプレート）コードを編集する

1. コード.gs ファイルはテンプレートのコードを提供するもので、何かを実行することはありません。以下のコードをコピーしてエディタ ウィンドウに貼り付け、テンプレート コードと置き換えます。<YOUR_EMAIL> はラボのユーザー メールアドレスに変更してください。

function sendMap() { var sheet = SpreadsheetApp.getActiveSheet(); var address = sheet.getRange("A1").getValue(); var map = Maps.newStaticMap().addMarker(address); GmailApp.sendEmail("<YOUR_EMAIL>", "Map", 'See below.', {attachments:[map]}); }

2. このアプリを制限して（ユーザーのすべてのシートではなく）対象のシートのみにアクセスするように、次のアノテーションをファイルレベルのコメントとして追加しておきます。これでユーザーが安心して使用できるようになります。

/** * @OnlyCurrentDoc */

これで完了です。オプションのアノテーションを除いて 4 行で sendMap() アプリを作成しました。

<YOUR_EMAIL> をこのラボで用意されているユーザー メールアドレスに必ず置き換えて、ラボ中にメールを確認できるようにしてください。

エディタのコードを置き換えると、ファイル名の左に赤い丸が表示されます。

これは、ファイルに編集が加えられたため、保存が必要であることを示しています。編集して保存されていない内容があると必ず表示されます。

3. 保存して、プロジェクトに名前を付けます。「Hello Maps!」など、名前は何でもかまいません。[プロジェクトを保存] アイコンをクリックしてファイルを保存します。

Ctrl+S（Windows や Linux など）または command+S（Mac）を押して保存することもできます。次に進む前に、プロジェクトに名前を付ける必要があります。

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

作成したアプリを実行する方法は次のとおりです。

1. 関数の名前は sendMap() に変更したので、関数の実行には sendMap を選択します。

2. コードエディタのメニューバーの [実行] をクリックして sendMap() 関数を実行します。

認証コードは Apps Script で管理されるため、記述する必要はありません。ただし、スクリプトが（ユーザーに代わって）スプレッドシートにアクセスし、Gmail でメールを送信できるよう、アプリユーザー自身がアクセスを許可する必要があります。最初の認証ダイアログは、次のようになります。

3. [許可を確認] をクリックします。
4. メッセージが表示されたら、アカウントを選択します（ユーザー名はラボの [ラボの詳細] パネルで確認できます）。

5. 次のダイアログで、アプリが Google アカウントにアクセスできるようにするかどうかが確認されるので、[許可] をクリックします。

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

6. 左側にカーソルを合わせて [実行数] をクリックし、一覧表示された sendMap を確認します。メッセージが表示されたら、[ダッシュボードを表示] をクリックします。

7. 左側のラボパネルに表示されている [Gmail を開く] ボタンをクリックします。

8. [アカウントを選択] ダイアログで、受講生のユーザー名を入力して [次へ] をクリックします。

9. ラボから提供されたパスワードを入力して [次へ] をクリックします。

10. [同意] をクリックして利用規約に同意します。

これで、Gmail の受信トレイが表示されます。件名が「Map」で本文が次のようなメッセージが届きます。

[進行状況を確認] をクリックして、上記のタスクを実行したことを確認します。

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

たった 4 行のコードで、Google の 3 つのサービスにアクセスして意味のある処理を実行できました。これだけではアプリケーションとして完成されていませんが、すばらしい結果です。JavaScript や Apps Script に慣れていなくても、コードの意味や大まかな仕組み、Apps Script で何ができるかを理解していただけたら幸いです。

タスク 5. アプリの詳しい説明

ここでは、コードを詳しく確認していきます。

このアプリケーションのコードは短いため、全体的な構造について特に説明することはありません。特に Google の 3 種類のサービスを利用する箇所を、1 行ずつ詳しく確認していきます。

次の行は、通常の JavaScript の関数宣言で、sendMap() という関数を定義しています。

function sendMap() {

コードの 1 行目では、スプレッドシート サービスを呼び出しています。SpreadsheetApp オブジェクトを使用することにより、Apps Script からサービスにアクセスできます。返されたシートを、sheet という名前の変数に代入しています。

getActiveSheet() メソッドでは名前のとおりの処理が実行されます。ユーザー インターフェース（UI）で現在アクティブなシートへの「ハンドル」が返されます。

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);

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

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

お疲れさまでした

ここでは、Google Apps Script を使用してコードを記述しました。Google のデベロッパー テクノロジーを利用して Google スプレッドシート内の住所を抽出し、その住所をもとに Google マップを生成し、その地図をメールで送信するコードです。

クエストを完了する

このセルフペース ラボは、「Workspace Integrations」クエストの一部です。クエストとは学習プログラムを構成する一連のラボのことで、完了すると成果が認められて上のようなバッジが贈られます。バッジは公開して、オンライン レジュメやソーシャル メディア アカウントにリンクできます。このラボの修了後、こちらのクエストに登録すれば、すぐにクレジットを受け取ることができます。受講可能な全クエストについては、カタログをご覧ください。

次のラボを受講する

クエストを続けるか、以下のおすすめのラボをご確認ください。

• Apps Script CLI - clasp

次のステップと詳細情報

• Google Sheets API のデベロッパー向けドキュメントを読む。
• google-sheets-api タグを付けて Stackoverflow に質問を投稿したり回答を探したりしてみる。

参考情報

このラボで紹介しているコードは、GitHub リポジトリ（GitHub.com/googlecodelabs/apps-script-intro）でも入手できます（このラボの内容は、リポジトリのコードと同じ内容になるようにしています）。以下に、このラボの内容をさらに掘り下げたり、Google デベロッパー ツールにプログラムでアクセスしたりするために役立つ資料を示します。

ドキュメント

• Google Apps Script ドキュメント サイト
• Apps Script Gmail サービス
• Apps Script スプレッドシート サービス
• Apps Script マップサービス

関連動画と一般動画

• Google Apps Script 動画ライブラリのその他の動画
• Workspace Dev Show の動画シリーズ

ニュースや最新情報

• Workspace デベロッパー ブログ
• Workspace デベロッパー Twitter（@GSuiteDevs）
• Workspace デベロッパー マンスリー ニュースレター
• Google Workspace ラーニング センター

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2023 年 6 月 5 日

ラボの最終テスト日: 2023 年 6 月 5 日

Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。