ブロックチェーン・AI・システム開発の株式会社INDETAIL

Google Apps Scriptで簡単にWebアプリケーションを公開する方法

2018.12.19
toshi

※本記事は、INDETAIL Advent Calendar 2018の一環として投稿しています。

コーヒーとWEB DEVELOPMENT

こんにちはtoshiです。
突然ですが皆さんはGoogle Apps Script(以下、GAS)を利用していますでしょうか。
つい最近GASで簡単にWebアプリケーションを公開できることを知ったので
今回は、その手順について書いてみたい思います。

Webアプリケーションの公開手順

スクリプトファイルを作成

スクリプトファイルを作成するには、googleドライブの「新規」→「その他」→「Google Apps Script」を選択します。

初めにGASで以下のようなdoGetメソッドを作成します。
doGetメソッドはGetリクエストを受け取った際に最初に呼び出される関数になります。
そのため、doGetメソッド内でWebアプリケーションを作成するための機能を提供するHTMLServiceオブジェクトを使用することでWebアプリケーションを作成することができます。

HTMLファイルを作成

次に表示するHTMLファイルを作成します。
基本的にGASでWebアプリケーションを作成する場合は、ブラウザに表示されるHTMLファイルと裏で処理を行うGASのスクリプトファイルがセットになるかと思います。
HTMLファイルを作成するにはメニューの「ファイル」→「新規作成」→「HTMLファイル」を選択します。
今回はスクリプトファイルの「createTemplateFromFile("index")」でindex.htmlをテンプレートとして指定しているので、index.htmlという名前でHTMLファイルを作成します。

以下のようなHTMLファイルが作成されるので、bodyタグ内にHello Worldと入れてみます。

作成したWebアプリケーションの公開

先ほど作成したdoGetメソッドを記載したスクリプトファイルとindex.htmlがあれば最低限Webアプリケーションとして公開できるようになるので一度公開してみます。
Webアプリケーションとして公開するには、メニューの「公開」→「ウェブアプリケーションとして導入…」を選びます。

以下のようなモーダルが表示されます。今回は試しに公開するだけなので、デフォルトの設定のまま自分用として公開します。

公開が完了すると以下のようにURLが表示されるので接続してみましょう。
※URLの共通部分以外は隠しています。

以下のように無事表示されていることを確認できました!
インフラの知識がなくとも簡単に公開できるのはありがたいです。

簡単なWebアプリケーションを作ってみる

Hello Worldと表示するだけでは少し物足りないので、スプレッドシートのデータを入出力する簡単なアプリケーションを作ってみたいと思います。

スプレッドシートの作成

スプレッドシートとGASを連携するにはあらかじめシートを作成する必要があるので、初めにシートを作成します。
その際にシートのURLにあるIDが必要となるので控えておきます。

スプレッドシート
https://docs.google.com/spreadsheets/d/[スプレッドシートのID]/edit

今回は以下のようなシートを作成しました。

GASのスクリプトを修正

次にGASのスクリプトを修正します。
今回は以下の3つの関数を追加しています。

  • シート名からシートオブジェクトを取得するgetSheetメソッド
  • HTMLのフォームからPostリクエストを受け取り、シートにデータを挿入するdoPostメソッド
  • シート名からシートに入力されている全データを取得するgetDataメソッド
  • HTMLファイルを修正

    次にHTMLファイルを修正します。
    HTMLファイルには、データ送信用のフォームとスプレッドシートのデータを表示するテーブルを追加します。

    修正したアプリケーションを公開

    コードができたので再度公開してみます。
    2回目以降の公開はプロジェクト バージョンが選択することができるようになっています。
    今回はバージョン2として作成したいので、「新規作成」を選択して公開します。
    (ここで過去のバージョンを指定すると過去のバージョンに戻すことができます。)

    作成したアプリケーションを確認

    修正したアプリケーションの公開が完了したので確認してみます。
    アプリケーションを表示するとフォームが追加されているので入力して送信してみます。

    追加されたフォームに入力した結果が以下になります。
    無事スプレッドシートの編集ができました!


    まとめ

    いかがでしたでしょうか。
    今回はスプレッドシートのデータを入出力するのみでしたが、スプレッドシートをデータベースの代わりとしてアプリケーションの作成など色々できるかと思います。
    Googleのアカウントとちょっとしたプログラミングの知識があれば誰でも作成できるかと思うので、是非試していただければと思います。
    ※アプリケーションからGoogleサービスを操作できる都合上、各Googleサービスへの不正アクセスの原因となる可能性があるので、公開時にはアクセスユーザーの設定とURLの取り扱いにご注意ください。

    toshi

    職種 : エンジニア 2016年新卒社員。ネット小説漁りが最近のマイブーム。

    「いいね」ボタンを押すと、最新情報をすぐに確認できます。