GAS(GoogleAppsScript) Webアプリ アプリケーション開発

GASの利用 ~Webアプリの開発をやってみる~

投稿日:2020年6月19日 更新日:

このページでは、Google Apps Scriptを利用してサーバーレスでWebアプリを開発するための初期段階として、Webブラウザで”Hello GAS”と表示させるまでの方法を説明しています。

スプレッドシートとの連携については、以下のページで説明しています。
GASの利用 ~Webアプリでスプレッドシートの値を表示する~
GAS ~スプレッドシートの値が取得できない or 想定と異なる場合~

実際のアプリ作成例は、以下のページで説明しています。
GAS ~新しい生活様式のためのメモ①~
GAS ~新しい生活様式のためのメモ②~

このページの内容

Webアプリの開発をやってみた背景

これまではWindowsで動作させる.Net Framework系の開発ばかりをやってきた当サイト管理者が、初めてまともにWebアプリの開発に取り組んでみることにした記録です。

はじめは参考書を買ってきて、その通りに開発環境の準備をやっていたのですが、何かのソフトと相性が悪く一旦開発環境をリセットする羽目に。。。

そんなこともあり、手をほとんどつけられないままだったのWebアプリの開発なのですが、知人からの依頼で再度取り組むことになった際に見つけたのがGASを利用するという方法でした。

GAS(Google Apps Script)とは

名前から予想できる方もいらっしゃるかと思いますが、GoogleApps上で動作させることが出来るScriptです。
この中の機能の一つに、Webを実行(?適切な表現が思いつかない)する機能があります。

Webアプリ開発の環境を用意する

環境を用意するなんて、結局めんどくさいんじゃないかと思われるかもしれませんが、非常に簡単でした。

基本的な流れは、
①Googleのアカウントを用意する  ※すでに持っている方も多いと思います。
②Googleドライブにアクセスし、新規作成からGoogleAppsScriptを選択する。
③GASにて、Webを開始させるための処理を記述する。 ※コピペすればOKです。
④Webアプリで利用する処理を記述する。
⑤Webアプリをリリースする。
これだけです。

以下、初めての方も利用できるにこれでもかというほどの詳細手順です。

のアカウント取得のステップはGoogleアカウントの取得の流れに沿えばできるので、割愛します。

②-1 Googleドライブは、Googleトップページ右上のアプリ一覧から開きます。

②-2 Googleドライブの左上の[+新規]から[その他]→[Google Apps Script]の順に進みます。

Google Apps Scriptを新規作成する

※スプレッドシートなどをデータベース代わりにすることを想定する場合は、Googleスプレッドシート内に、組み込むことが出来ます。
その場合は、スプレッドシートの上部メニューにある[ツール]→[<>スクリプトエディタ]を選択すると、以下③へ続きます。


起動初期は以下のようになっていますので、書かれているコードを全て削除し、

起動直後の状態

※”無題のプロジェクト”と書かれているところに、このGASの名前を入れて下さい。その名前で保存されます。


次のようにコーディングします。

//実行時にwebサービスを実行させる
function doGet(e) {
   var t = HtmlService.createTemplateFromFile("index.html");  //index.htmlを読み込んで、Webを開始する
   return t.evaluate();
}

次に
④ 上部メニューの[ファイル]から[New]→[HTMLファイル]を選択し、”Create File”のフォームで”index”と指定すると、HTMLファイルが作成されるので、その中へ記述します。

※上記③のコードで、HtmlService.createTemplateFromFile(“index.html”);としているので、Create Fileの名前をindexと指定しています。
コードの”index.html”の部分を任意で変更した場合は、ファイル名も変更してください。

とりあえず、動作の確認だけをするために以下のようにコーディングをしておきます。

<!DOCTYPE html>
<html>
  <script>
  </script>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello GAS</h1>
  </body>
</html>

⑤ 最後にリリースします。
この時に固有のURLが発行されます。

ウェブアプリケーションとして導入を選択

すると以下のような画面が起動してきます。

リリース設定画面

以下簡単な説明です。
Project version:バージョン管理ができます。
本来Webアプリは本番環境のhtml等を修正してしまうと即座に反映されますが、GASではバージョンを[New]で指定した後、[Deploy]しないと反映されません。
逆に、新バージョン公開後にバグが判明した場合は、すぐに元のバージョンを指定し[Deploy]すればすぐにもとに戻せるといった利点もあります。

Execute the app as:このアプリケーションを実行する際に必要な権限をどうするかを指定します。
Me : アクセス時にScript公開者の権限で毎回実行されます。
User accessing the web app : アクセス時にアクセスしたユーザーの権限でScriptが実行されます。
公開されると困る情報を扱う場合は、後者を選択し、ファイルの共有設定等を設定するなら簡単にアクセス制限されたWebアプリとすることが出来ます。
※アクセス制限されたWebアプリについては別途説明を書こうと思います。

Who has access to the app : 誰がこのWebアプリにアクセスするかを指定します。
Only myself : 自分だけがアクセスできます。
全ユーザー : 全ユーザーがアクセスできます(匿名ユーザーはアクセスできません)。
Anyone, even anonymous : 全ユーザーがアクセスできます(匿名ユーザーもアクセスできます)。
※全ユーザー/Anyone, even anonymousを選択する場合は、アクセス時の権限設定(Execute the app as)を適切に設定しましょう。


必要な設定を行ったのち、ウィンドウ下部にある[Deploy]を押すと下図のようなウィンドウが起動します。

この画面の中の、”Current web app URL”が作成されたWebアプリのURLになります。
このURLはバージョンを更新しても変わりませんので、実際にWebアプリとして利用する際は、URLを全選択してコピーを行っておきましょう。

リリース完了

これでリリース完了です。

実際に表示してみる

実際に表示してみた結果は以下のようになります。

PC版Chromeで表示した結果

Android版Chromeで表示した結果

作成したWebアプリをテストする方法

コーディング内容をテストをする機能が初回リリース後から利用できます。
初回リリース後以降、メニューの[公開]→[ウェブアプリケーションとして導入…]を選択すると、画面が以下のように変わります。

初回リリース時にはなかった、項目が上部に追加されます。
この追加された部分の”Test web app for your latest code.”から、コーディング中の機能をテストをすることができます。

機能のテストが完了したら、”Project version” で “New”を選択し、ウィンドウ下部の[更新]を選択すると、新しいWebアプリがリリースされます。

※”Disable web app”を選択すると公開していたWebアプリを取りやめることができます。

※念のため書いておきますが、PCからの開発を想定しています。スマホなどのアプリ版のGoogleドライブなどから開発をすることは想定していません。

Follow me!

-GAS(GoogleAppsScript), Webアプリ, アプリケーション開発
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

VisualStudio2019でSQLiteを利用する(SQLite.orgからDLLをダウンロード)

このページでは、Visual Studio 2019にてインストール等の作業が不要な実行ファイル配布型のWindowsアプリでSQLiteを利用するためにあれこれ必要な点をまとめています。 すでにSQ …

no image

MP4ファイルから字幕データの抽出

このページでは、Windows10にてffmpegとPowershellを利用して、MP4ファイルから字幕データを抽出する方法を説明しています。 使用するMP4ファイルについてffmpegの取得と字幕 …

GASの利用 ~新しい生活様式のためのメモ①~

コロナウィルスの拡大により、政府から“「新しい生活様式」の実践例”というものが、公開されていることをご存知の方も多いと思います。その中で、“移動に関する感染対策”という項目の中で、“発症したときのため …

no image

【C#】【VBScript】アプリケーションの自動再起動

このページの内容 この機能を作成した理由ソースコード この機能を作成した理由 24H稼働している工場等のクラサバ系のシステムで、サーバー側ソフトが原因不明のハングアップをしてしまい、夜中に呼び出しを受 …

GASの利用 ~新しい生活様式のためのメモ②~

このページの内容 コーディング(.gs)コーディング(view.html)実行結果メニュー画面のコーディング(menu.html)サーバー側のコーディング全体(.gs) ①のページにて入力画面を作成し …

このサイトの管理者について

1980年代生まれ
石川県在住

メーカー2社経験後に退社

1年程度自由に在職中はできなかったことにチャレンジ

その後コロナの影響でなかなか仕事が見つかりませんでしたが、無事就職

現在はシステム会社に勤務中

PAGE TOP