GASで簡単なWebアプリを作ろう(前編)

このページでは、GAS (Google Apps Script) を使ってWebアプリを作成する手順を解説します。
Webアプリとは、インターネット上で動作するアプリケーションのことです。ブラウザからアクセスして利用できます。
それでは、はじめましょう。

Webアプリを作りたいドライブに移動し、左上の「新規」ボタンをクリックします。

ポップアップが表示されるので、以下のように「その他」から「Google Apps Script」を選択します。

新しいタブが開きスクリプトエディタが表示されます。ここにWebアプリのコードを書いていくことになります。
これから新しいファイルを次々に加えていったときに、デフォルトのファイル名では中身がわかりにくくなるので、ファイル名を変更しておきましょう。

ファイル名の右側にある3点リーダー「︙」から「名前を変更」をクリックし「server/web」と入力すると、ファイル名が「server/web.gs」に変更されるはずです。

自動で末尾に付与された「.gs」は、このファイルが「GAS Script」であることを表しています。(たぶん…)
GASでは「スクリプト」と呼ばれファイル名が「.gs」で終わるファイルと、「HTML」と呼ばれファイル名が「.html」で終わるファイルの2種類があります。
スクリプトはサーバで実行されるコードが記載されたファイル、HTMLはクライアントで実行されるコードが記載されたファイルだと考えてもらえばOKです。

では実際に、コードを書いていきましょう!
「server/web.gs」に書かれていた次のコードは消してしまって構いません。

function myFunction() {

}

「server/web.gs」を以下のように変更し、保存します。

function doGet() {
  return ContentService.createTextOutput("Hello world!");
}

コードの説明は後回しにして、まずはWebアプリが動くことを確認してみましょう。
まずエディタ右上の青いボタン「デプロイ」から「新しいデプロイ」を選択します。

ポップアップ左側の「種類の選択」から「ウェブアプリ」を選びます。

ポップアップの右側ではデプロイの設定を変更することができますが、デフォルトのままで問題ありません。

右下の「デプロイ」ボタンを押してしばらく待つと、新しいデプロイが作成されます。
Webアプリを公開する場合には以下のURLを利用することになりますが、今回は開発用のURLを使いたいので次に述べる手順を実施していきます。 このポップアップはもう必要ないので、「完了」ボタンを押して閉じてしまいましょう。

再度、画面右上の青いボタン「デプロイ」をクリックし、今度は「デプロイをテスト」を選択します。

ポップアップの「ウェブアプリ」「URL」に記載されているURLをクリック、もしくは「コピー」した後にブラウザのURLにペーストすると…

先ほど作成したWebアプリが表示されました! 🎉

最後に、今回のコードを簡単に説明します。詳細はこちらの リファレンス を参照してください。

function doGet() {
  return ContentService.createTextOutput("Hello world!");
}

WebアプリとしてGASのスクリプトを公開するためには、doGet または doPost という名前の関数を実装する必要があります。 (GASではこれらの関数を シンプルトリガー として扱っています。) またそれらの関数から HtmlOutput または TextOutput を返すことも必要になります。
今回は、一番簡単な方法(「 GET 」リクエストが来たら、定型文をテキストとして返す)を採用した訳です。

続きはこちらのリンクからどうぞ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次