【0からGASを学ぶ】GASでWebアプリケーションを作ってみよう

# はじめに
本シリーズでは、GASの始め方や便利な使い方、ビジネス活用まで幅広く解説します。シリーズをひと通り読んでいただければ、あなたもきっとGASマスターになれるはずです。

# シリーズの対象者
* そもそもGASってなんだか**わからない**方
* GASを学びたいけど**何から始めればいいか**わからない方
* GASはわかり始めたけど、**もっと活用ができないか**と模索している方
* とにかく**Googleが好き！** という方

# 前回記事
https://qiita.com/gas-suke/items/e6ef3c771a68c9ed96b2

# GASで作るWebアプリケーション
では早速始めていきましょう。【0からGASを学ぶ】シリーズの第4回は「GASでWebアプリケーションを作ってみよう」です。**GASの様々な可能性を先に知ってもらいたく**少々予定を変更しました。Googleサービス系の操作はまた次回に。

## GASでHello World！
Webアプリケーションといえば定番の **Hello World！** 表示をGASで行ってみましょう。

### GASエディタを開く
WebアプリケーションはGoogleサービスと紐づいていないため（もちろんプログラム内で**サービスを利用**することは可能）、今回もスタンドアロン型で開きます。
<a href="https://qiita.com/gas-suke/items/5cf7bd4c6c3f15a25838#%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%89%E3%82%A2%E3%83%AD%E3%83%B3%E5%9E%8B" target="_blank">こちら</a>を参考にGASエディタを起動してください。では、どんどんいきますよ、ついてきてください。

### HTMLを作成する
**Webアプリケーションのフロントエンド部分であるHTML**をまずは作成しましょう。GASエディタを開いた段階では**コード.gs**しか存在していないと思いますので、以下の手順でHTMLを作成してください。
<table>
  <tr>
    <th>№</td>
    <th>手順</td>
    <th>イメージ</td>
  </tr>
  <tr>
    <td>1</td>
    <td>GASエディタ上で[ファイル]メニュー内の「＋」ボタンをクリックします。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/f83fba70-5b8d-a83e-3ceb-0569ba7cedd8.png" width="400">
</td>
  </tr>
  <tr>
    <td>2</td>
    <td>出てきたメニューのうち「HTML」をクリックします。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/35d6c0a1-5bdc-cce1-6e41-ef551ae4c973.png" width="400"></td>
  </tr>
  <tr>
    <td>3</td>
    <td>HTMLファイルが追加され、ファイル名の入力求められますので、適当な名前を設定してください。この時、<b>.html</b>は勝手につきますので不要です。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/5f689ff7-10b9-8af6-6b99-ebc05f256c46.png" width="400"></td>
  </tr>
  <tr>
    <td>4</td>
    <td>HTMLファイルが作成されたことを確認できます。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/ed617217-4089-9dde-dfb1-a2fd9772ce47.png" width="400"></td>
  </tr>
</table>

では、作成されたHTMLファイルに「Hello World!」を記述しましょう。

```html:Qiita004.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>
      Hello World!
    </h1>
  </body>
</html>
```
:::note info
コードを書いてみるとわかりますが、GASでは**コード補完機能**が効きますので楽ですね。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/ef760933-602b-a694-32a0-e20d40502d36.png" width="400">
:::

### スクリプトを作成する
次に**Webアプリケーションのバックエンド部分であるスクリプト（これまで扱っていたGASファイル）** を作成しましょう。GASエディタを開いた段階で**コード.gs**が存在していますので、これをそのまま利用しても差し支えありません。

```javascript:コード.gs
function doGet(e) {
  // HtmlServiceクラスを用いて、GASエディタ内のファイルからHtmlTemplateオブジェクトを作成する
  // createTemplateFromFileの引数には対象のHTMLファイルのファイル名を指定する（拡張子不要）
  let indexHtml = HtmlService.createTemplateFromFile('Qiita004');

  // evaluateメソッドによってHtmlOutputオブジェクト（レスポンスデータ）を作成する
  return indexHtml.evaluate()
          .setTitle('Hello World!')
          .addMetaTag('viewport', 'width=device-width, initial-scale=1');   
}
```

:::note info
`evaluate`メソッドのあとに、`setTitle`や`addMetaTag`を呼び出しています。これは、HTMLファイルに以下のように直接記述できればよいのですが、
```html:Qiita004.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Hello World!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  </head>
  <body>
    <h1>
      Hello World!
    </h1>
  </body>
</html>
```
`head`タグにある`title`タグや`meta`タグはGASでは**無視**されます。そのため、HTMLファイルに**直接記述するのではなく**、**スクリプト側で付与**する必要があります。
:::

### デプロイする
**フロントエンドとなるHTML**も**バックエンドとなるスクリプト**も作成しましたので、さっそくWebアプリケーションを以下手順に沿って**デプロイ**してみましょう。
<table>
  <tr>
    <th>№</td>
    <th>手順</td>
    <th>イメージ</td>
  </tr>
  <tr>
    <td>1</td>
    <td>GASエディタ上で[ヘッダー]メニュー内の「デプロイ」ボタンをクリックします。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/68ca9759-574f-cd39-e239-a73900ac8fd5.png" width="600">
</td>
  </tr>
  <tr>
    <td>2</td>
    <td>出てきたメニューのうち「新しいデプロイ」をクリックします。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/5fc969a5-3409-b7d3-1223-d6f909fda0ea.png" width="400"></td>
  </tr>
  <tr>
    <td>3</td>
    <td>出てきたダイアログ内の左カラム上部にある「歯車アイコン」をクリックします。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/d156caaa-0b69-9f87-3f18-0f4e575d0889.png" width="250"></td>
  </tr>
  <tr>
    <td>4</td>
    <td>出てきたメニューのうち「ウェブアプリ」をクリックします。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/fc053ecb-cae8-526a-4852-47a75cedb726.png" width="250"></td>
  </tr>
  <tr>
    <td>5</td>
    <td>切り替わったダイアログ内の「次のユーザとして実行」および「アクセスできるユーザ」を設定し、「デプロイ」ボタンをクリックします。<br/>
次のユーザとして実行：自分<br/>
アクセスできるユーザ：全員</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/82932604-d927-113c-c589-4e3deb02e48b.png" width="250"></td>
  </tr>
  <tr>
    <td>6</td>
    <td>デプロイが完了すると画面が切り替わり、アクセス用のURLが発行されます。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/944a7a67-763b-f0db-7fc5-c6fddfaaf229.png" width="250"></td>
  </tr>
  <tr>
    <td>7</td>
    <td>URLにアクセスすると無事にHello World！が表示されます。</td>
    <td><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/8cf40cfe-c3ae-3e16-ffd8-247aee5d180d.png" width="250"></td>
  </tr>
</table>

#### 次のユーザとして実行とは
手順の5にある「次のユーザとして実行」は[自分]以外に[ウェブアプリケーションにアクセスしているユーザー]を指定することができます。これは例えば、バックエンド部であるスクリプトの中で、スプレッドシートにアクセスするような場合、[自分]であれば**権限があるため問題なく実行**できますが、[その他のユーザー]である場合には**一概に問題なく実行できるとは限りません**。不用意に自分にする必要はありませんが、せっかくデプロイしたアプリケーションが動作しなかった元も子もありません。デプロイする際は**意識**してみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/5de73bc5-6de5-9da1-dcfe-eea656ed430d.png" width="400">


#### アクセスできるユーザとは
手順の5にある「アクセスできるユーザ」は[全員]以外に[自分のみ][Googleアカウントを持つ全員]を指定することができます。これは説明するまでもないですが、手順の6で**発行されたURLに誰がアクセスできるか**というものです。自分だけの専用アプリであれば[自分のみ]を選択するなど、**デプロイするアプリケーションに応じて**設定を変えてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/f1eaaec1-3c02-bfd6-dd45-918b80be4651.png" width="400">

:::note info
**Google Workspaceの契約を行っている場合**に限りますが、「アクセスできるユーザ」を**同一ドメイン配下**のGoogleアカウントに絞ることが可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/6b8a7fb1-fe4e-bb3d-54d4-8ccd869d2926.png" width="400">
:::

#### 見慣れないヘッダー？？？
手順の6で発行されたURLにアクセスするとHTML上に記述した覚えのないヘッダーあるのがわかります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/b6b9c23d-7bde-ed0a-126b-7211db59ae37.png" width="800">
GASではGoogleの**GASアプリケーション専用ドメイン**である`script.google.com`上にデプロイすることができますが、アプリケーション自体はGoogleが作ったものではなく**皆さん自身が作ったもの**です。そのため、明示的に
> このアプリケーションは Google Apps Script のユーザーによって作成されたものです

といった情報を表示させているわけです。
なお、つい最近（2023.10.20辺りから）ですが、このヘッダーを右側の「×」ボタンをクリックすることで**消すことが可能**になりました。いよいよ、訳が分からなくなってきました笑 ありがとう、**Google！**

:::note info
これも**Google Workspaceの契約を行っている場合**に限りますが、Workspace配下のアカウントからのアクセスであれば、このヘッダーは**そもそも表示されません。**
:::

## Hello Worldが表示された仕組み
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575702/1a9e3504-74cf-67e9-f083-e7c8ecb167b5.png" width="800">

1. デプロイにより発行されたURLにアクセスする。これが**GET**による**requestデータ**としてGASに到達する。
1. コード.gsの**doGet**メソッドが呼び出され、メソッド内で定義したQiita004.htmlをもとに**responseデータ**を作成する。
1. doGetメソッド内で作成した**responseデータを返却する**。

:::note info
ここではあいまいな理解でも構いません。今後、本シリーズを通して様々なアプリケーションを作っていきますので、**少しずつ理解を深め**ましょう。
:::

# おわりに
お疲れ様でした。
第4回は「GASでWebアプリケーションを作ってみよう」ということで、これまでとは全く異なる**GASの可能性を体験**いただきました。行ったり来たりで申し訳ありませんが、次回はGoogleスプレッドシートをはじめとしたGoogleサービス系の操作に戻り、業務での活用に主眼を置きながら、データの**取得**や**編集**を行っていきましょう。
記事を読んで、「良いな」や「今後に期待できる！」と感じて頂けたら**いいね**や**フォロー**、**コメント**いただけると幸いです。それではまた次回をお楽しみに！