GASで簡単なWebアプリケーション開発をしてみる！【ページ・フォーム送信】

Webアプリケーションといえば、0から環境構築してプログラミングをして作らないといけない・・ハードル高い・・・って思いがちですよね。GoogleAppsScript(GAS)を使えば、自分で環境も作る必要もないしアプリケーションの公開も簡単にする事ができます。環境構築とデプロイをサクッとできてしまうのはかなり魅力的ですよね。

今回はGASでHello Worldを表示するアプリケーション・フォーム月のアプリケーションを作って、公開するところまでやっていきたいと思います。GASを使ってWebアプリを作ってみたい方は参考にしてみてください。

GoogleAppsScriptで文字出力だけのWebアプリを作成する

まずはHello World!を表示するだけのWebアプリを作成してみます。GoogleAppsScriptを開いたら「新しいプロジェクト」をクリック。

コード.gsっていうファイルに何やらfunction　myFunction()って書かれたものが最初から作られていますね。一旦こいつはシカトして新たにHTMLファイルを作ります。Webアプリケーションの見た目を作るファイルです。

今回はWebアプリケーションをGASでも作れるのかな？っていうのを試したいだけなので、簡単なファイルにしておきましょう。HTMLファイルは単純に「Hello World!」を表示するだけのものにする。<body>タグの中にHello Worldを入れておきます。

ファイル名はindexとしておきます。このファイルをそのままアプリケーションとして公開（公開方法は後に）すればHello World!が表示されるはずだけど、これをそのまま公開すると以下のように「doGet()がないよ？」と言われます。

GoogleAppsScriptでアプリケーションを作ると、doGet()かdoPost()っていう関数が必要になるんです。

Requirements for web appsA script can be published as a web app if it meets these requirements:
It contains a doGet(e) or doPost(e) function.
The function returns an HTML service HtmlOutput object or a Content service TextOutput object.
WebApps

今回やりたいことはWebアプリケーションのページを表示させることです。Webアプリケーションのページにアクセスする際には通常GETというHTTPメソッドが使われるので、doGet()関数を使いましょう。

When a user visits an app or a program sends the app an HTTP GET request, Apps Script runs the function doGet(e). When a program sends the app an HTTP POST request, Apps Script runs doPost(e) instead. In both cases, the e argument represents an event parameter that can contain information about any request parameters. The structure of the event object is shown in the table below:
WebApps

コード.gsにdoGet()関数を書いてやります。

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

何書いてんだよ？って感じだけど、これはindexファイルのhtmlを返すというような記述です。それぞれの関数がどんなことをするのかはドキュメントを熟読してみるといいです。

createTemplateFromFile(filename) HtmlTemplate Creates a new HtmlTemplate object from a file in the code editor.
evaluate() HtmlOutput Evaluates this template and returns an HtmlOutput object.
html-template

これでさっき名前をindexとして保存したHTMLファイルを表示する事ができるようになりました。後はこれらを公開するだけです。「公開」から「ウェブアプリケーションとして導入」をクリックして「Deploy」です。

他の人が公開したアプリケーションにアクセスしてみる事ができるようにすることもできるけど、今回はアクセスできるのは自分だけにしておきました。他の人にも見せたい場合にはWho has access to the appの選択を「全ユーザー」にしておくといいです。

「Deploy」をクリックしたら、URLが表示されるからそれにアクセスしてみましょう。すると、「Hello World!」が出てきます。

もしうまく表示できなかった場合は、書いたコードを見直してみるといいです。「公開」→「Webアプリケーションとして導入」から「latest code」をクリックして再度試してみましょう。

GASでフォーム付のWebアプリを作る

次はHTMLでフォームを作って何か入力して送信できるようにします。この場合なんですけど、やってみたら新しいエディタを使うとうまく反映ができなかったので古いエディタを使ってやります。今度はformを作りたいからhtmlファイルにformを作る。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <h1>お問い合わせ</h1>
    <form action="デプロイしたURL" method="post">
      <input type="text" placeholder="Name" name="name" required>
      <input type="email" placeholder="Email" name="email" required>
      <textarea placeholder="Message" name="message" required></textarea>
      <input type="submit" value="Send">
    </form>
  </body>
</html>

<style>
h1 {
  text-align:center;
}

form {
  width: 600px;
  margin: auto;
}
  
input, textarea {
  width: 100%;
  border: 1px solid #ddd;
}

textarea {
  height: 10rem;
}

</style>

formのactionに指定するURLはデプロイしたURLになるんだけど、これは一回デプロイしないと分からないと思うからデプロイした後に設定しよう。最初は空でいいです。（ちなみにaction指定しなければ、現在のURLに対してPOSTしてくれるよなあ・・・って思ってやってみたけど良く分からないURLが取得されてダメでした。）

formに入力された情報を取得するためにdoPost()っていうのを使います。これを使うとformで入力した値を受け取ることができる。

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

function doPost(e) {
  var output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(JSON.stringify({
    name: e.parameters.name,
    email: e.parameters.email,
    message: e.parameters.message
  }));

  return output;
}

そしたら一度デプロイします。

デプロイしたらURLが表示されるからそれをブラウザで表示してみると作成した画面が表示される。

ただformのactionにURLを設定していないのでエラーが起きます。デプロイ時に表示されるURLをコピーしてformのactionに設定しましょう。

 <form action="コピーしたURL" method="post">

再度デプロイしてフォームに値を入力後、送信してみると良い感じにJSONが返ってきました。

formのactionにURLを設定するのが新しいエディタだとうまくできなかったんですよね。（デプロイするとURL新しくなるし前のバージョンに対してデプロイしてもうまくいかず）

古いエディタならとりあえずできました。もっと改造すれば入力したデータをスプレッドシートに書き込むとかもできるはずだからGASだけでやろうと思えばアプリケーション作れてしまいますね。

GASでWebアプリケーションは作れる

Hello World!を表示する簡単なものだけど、GoogleAppsScriptを使ってWebアプリケーションを作って公開する事ができました。ただ文字列を表示させただけだから何もすることはできないけど、もっとプログラムを書けば動くものを作る事ができます。

formを使った場合もちょっと面倒だけどできましたね。

スプレッドシートをデータベースにして使うこともできるから、そう考えると結構いろいろな事ができそうです。今度はちょっと動きのあるアプリケーションを作ってみたいところ。

GASが分からなかったら人に聞くのもあり

作っていて分からないことがあると結構詰まってしまう場合もあるので、そういった場合は人に聞いてみるのもいいでしょう。ココナラの自動化カテゴリなんて見るとGAS教えてくれる人結構います。

ココナラの作業自動化・効率化カテゴリ

GASを学ぶことのできるプログラミングスクール2選！業務効率化を捗らせよう！

2021.12.28

プログラミングを学ぶことのできるスクールはたくさんあるけど、GASを学ぶことのできるスクールって少ないですよね。GASは環境構築も必要ないし業務効率化や作業の自動化なんかをする上では結構使えると思うんだけどな。そこで今回はGASを学ぶことのできるプログラミングスクールを紹介しようと思う。といって...