Web画面を表示してみよう

まずは Google Apps Script でアプリケーションを作成する第一歩として、
ブラウザにWeb画面を表示してみましょう。

スクリプトの種類

Google Apps Script には2種類のスクリプトがあります。

  • Container Bound Script
  • Standalone Script

それぞれのスクリプトの違いについて確認していきましょう。

Container Bound Script

Google スプレッドシートやドキュメントなどの各アプリケーションのメニューから作成することができるスクリプトです。

＜スクリプトを作成する手順＞

  1. Google スプレッドシートやドキュメントなどのアプリケーションを開きます。
  2. 上部メニューの|[ツール] > [スクリプトエディタ]を選択します。
    page_2_1.png

＜メリット＞

  • バインドしているファイルを簡単に参照できる
  • バインドしているファイルから Google Apps Script を実行できる

この方法で作成されたスクリプトと同アプリケーションはバインド（結びつく）しているため、
スプレッドシートの場合は下記のメソッドによりブラウザで開いている同スプレッドシートを操作することができます。

const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
const sheet = spreadsheet.getActiveSheet();
const range = sheet.getActiveRange();

また、onOpen関数を利用してアプリケーションにメニューを追加し、
そのメニューからスクリプトエディタでコーディングした関数を実行することができます。
他にも、図形にコーディングした関数を埋め込み、図形をクリック時に埋め込めんだ関数を実行することもできます。

要約しますと、この方法で作成したスクリプトはExcelでいうVBAに近い感覚で利用することができます。

Standalone Script

Container Bound Script とは対照的に、どのアプリケーションにもバインド（結びつく）していないスクリプトです。
作成されたスクリプトは Googleドライブ に表示されます。

＜スクリプトを作成する手順＞

  1. Google Chrome で Google ドライブを開きます。
  2. Google ドライブの左上に表示されている[新規]ボタンをクリックします。
    1. で表示されたメニュー内の[その他]をクリックします。
    1. で表示されたメニュー内の[Google Apps Script] をクリックします。
      page_2_2.png

＜メリット＞

  • 利用者にスクリプトエディタを編集されるリスクがない
  • Google ドライブで管理がしやすい

一見、Container Bound Script でスクリプトを作成した方が始めやすく、
バインドしたファイルを簡単に参照できるメソッドも利用できるため扱いやすいです。
しかし、作成したスクリプトを他者と共有して利用したい場合は、
利用者もスクリプトエディタを編集することができてしまいます。
つまり、いつの間にか利用者によってスクリプトの内容が書き換えられてしまうことが起こる可能性があります。

一方で、Standalone Script はスクリプトファイルを共有したアカウントのみ編集することができ、ユーザーによって編集されるリスクがありません。
また、作成したスクリプトは Google ドライブに保存されているため管理がしやすいのも特徴です。
（Container Bound Script の場合は対象のファイルを開かなければスクリプトエディタを開くことができません。また、Google ドライブにスクリプトが表示されません。）

補足

Google ドライブでは Container Bound Script を管理できないとお伝えしましたが、
作成したスクリプトは下記リンク先のダッシュボードから簡単にアクセスすることができます。
https://script.google.com/home

今回のWebアプリ編のハンズオンでは Standalone Script で進めていきます。
Container Bound Script でも問題なく行うことができますが、
後々の管理のことを考えて Standalone Script で進めていきましょう。

HTMLファイルの作り方について

Webアプリを作るには画面を作る必要がありますが、画面はHTMLファイルで作ることができます。
HTMLファイルは下記の手順で作成することができます。

  1. [ファイル]の右端にある＋マークをクリックして、表示されたメニュー内の[HTML]を選択します。
    page_2_3.png
  2. 作成したHTMLファイルのファイル名を設定します。
    ※ ここではファイル名を「index」としてください。
    page_2_4.png
  3. スクリプトエディタ上に「index.html」が作成されます。
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

  </body>
</html>

doGet関数について

ユーザーが公開したWebアプリにアクセスした場合にdoGet関数は実行されます。（別のプログラムからWebアプリにHTTPのGETリクエストが送信される場合も同じく実行されます。）
Web画面を表示するにはdoGet関数の戻り値として HtmlServiceオブジェクト を指定する必要があります。
下記のようにコーディングをしますと、index.htmlを表示する画面として指定することができます。

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello World!
  </body>
</html>

Webアプリのデプロイ方法について

作成したWeb画面はデプロイ（公開）をすることでURLが発行されて確認することができます。
作成したWebアプリは次の手順でデプロイ（公開）することができます。

  1. 画面右上にある「デプロイ」ボタンをクリックし、メニュー内の「新しいデプロイ」を選択してください。
    page_2_5.png
  2. 「種類の選択」の右隣にある歯車マークをクリックし、メニュー内の「ウェブアプリ」を選択してください。
    page_2_6.png
  3. 以下、各種画面項目を設定し、「デプロイ」ボタンをクリックして下さい。
    ・新しい説明文
    　⇒ 初めてのデプロイ
    ・次のユーザーとして実行
    　⇒ ウェブアプリケーションにアクセスしているユーザ
    ・アクセスできるユーザー
    　⇒ 自分のみ
    page_2_7.png
  4. 表示されたWebアプリのURLをクリックしてアプリケーションを起動しましょう。
    page_2_8.png
  5. 以下の画面が表示されれば成功です！
    page_2_9.png

無償版の Google アカウントで作成したWebアプリを公開すると以下の画像のように画面上部にメッセージが表示されてしまいます。
このメッセージは取り除いたり隠したりすることができないため注意が必要です。
page_2_10.png

Webアプリの更新方法について

公開したWebアプリはその後更新することもできます。
まずはindex.htmlを以下のようにHello World!をこんにちは!に変更してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    こんにちは!
  </body>
</html>

変更できましたら、以下の手順に沿ってWebアプリを更新してみましょう。

  1. 画面右上にある「デプロイ」ボタンをクリックし、メニュー内の「デプロイを管理」を選択します。
    page_2_11.png
  2. 表示された小画面の右上に表示されている「編集」アイコンをクリックします。
    page_2_12.png
  3. 以下、各種画面項目を設定し、「デプロイ」ボタンをクリックして下さい。
    ・バージョン
    ⇨ 新バージョン
    ・説明
    ⇨ 2回目のデプロイ
    page_2_13.png
  4. 表示されたWebアプリのURLをクリックしてアプリケーションを起動しましょう。
    page_2_14.png
  5. 更新されたWeb画面が表示されれば成功です！
    page_2_15.png

デプロイのテストについて

Web画面を更新できることを確認することができたと思いますが、
実際の開発ではコードの修正⇨Web画面の確認の流れが頻繁に発生するため、その都度更新の手順を踏むのは非常に手間に感じられます。
そこで、デプロイ（公開）はしないで最新のWeb画面を確認する方法をご紹介します。

まずはindex.htmlを以下のようにこんにちは!をWeb画面を変更しました!に変更してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Web画面を変更しました!
  </body>
</html>

変更できましたら、以下の手順に沿って最新のWebアプリの画面を確認してみましょう。

  1. 画面右上にある「デプロイ」ボタンをクリックし、メニュー内の「デプロイをテスト」を選択します。
    page_2_16.png
  2. 表示されたWebアプリのURLをクリックしてアプリケーションを起動しましょう。
    page_2_17.png
  3. 最新のWebアプリの画面が表示されれば成功です。
    page_2_18.png

注目して欲しいのはWebアプリのURLです。「デプロイをテスト」からアクセスしたURLの末尾は /dev になっているのに対し、
公開しているURLの末尾は /exec になっています。
この2つのURLを使い分けて開発を進めていきましょう。

/dev のURLはWebアプリを公開することで発行されます。発行されたURLは変わらないため、以降はプログラムを改修後は /dev のURLを表示した画面を更新（リロード）するだけで最新のWeb画面が確認できるようになります。