【2021年更新】GASでHTMLファイルの追加方法とウェブアプリとして公開するまでの手順

2021/08/20

Google Apps Script（GAS）でHTMLファイルを追加する方法と、それをウェブアプリとして公開するまでの手順までを書き留めておきます。以前にも書きましたがエディタの様式が変わって手順もだいぶ変わったので改めて書きます。

こちらがGASのスクリプトエディタ。新しい様式となったものです。

左サイドメニューの「ファイル」の右横にある「＋」をクリックすると、以下のようなプルダウンメニューが現れます。「HTML」を選びましょう。

ファイル名を聞いてくるので入力します。拡張子は入れないでください。今回は「index」と入れます。

以下のように「index.html」というファイルが追加されました。基本的なタグが自動で生成されます。今回はそこに<h1>タグで「Hello world!」というテキストを表示させるようにします。（7行目のところ。ここだけ追加しました）

GAS側である「コード.gs」には以下のコードのみを記述しておきます。これがないとWebアプリケーションとして動作しません。

function doGet() {
  var t = HtmlService.createTemplateFromFile('index.html');
  return t.evaluate();
}

それではここまででWebアプリケーションとして公開してみましょう。右上の「デプロイ」をクリックすると以下のプルダウンメニューが現れるので、「新しいデプロイ」をクリックします。

以下のウィンドウが現れるので、左上の歯車アイコンをクリックし、「ウェブアプリ」を選択します。

以下のような画面になります。公開範囲はデフォルトで「自分のみ」になっているので適宜変更しましょう。「デプロイ」ボタンをクリックします。

スプレッドシートなどにアクセスするようなプログラムの場合、「アクセスを承認」が必要になってきます。その場合は以下の手順に従って勧めてください。

非IT企業に勤める中年サラリーマンのIT日記

Google Apps Scriptでデプロイしてウェブアプリとして公開する方法【2021年更新】

基本的なことですが最近GASのエディターのUIが見直されて、デプロイの手順が少し変わったので書き直します。まず、スクリプトエディタ−の画面右上に「デプロイ」というボタンがあるのでそれをクリックすると以下のようなプルダウンメニューが現れます。その中から「新しいデプロイ」を選びましょう。以下のウィンドウが現れるので歯車アイコンをクリックし、プルダウンメニューから「ウェブアプリ」を選びます。以下のウィンドウが現れます。説明文を記載の上（入力しなくてもOK）、アクセスできるユーザーを選択したら「...

以下の画面になったらウェブアプリのURLをクリックしましょう。

ご覧の通り、index.htmlに記述した内容がブラウザで表示させることができました。

上記の「新しいデプロイ」だと、ソースコードを修正してもブラウザのリロードでは修正内容が反映されません。その場合は新しいデプロイではなく「デプロイをテスト」の方を選んでください。こちらは修正内容がすぐに反映されます（ブラウザのリロードで）。ただし、最初の１回だけは「新しいデプロイ」が必要で、それ以降は「デプロイをテスト」を利用することができます。

- Google Apps Script