GASで簡易Webアプリを公開する方法【WebApp】

先生

GASでWebアプリを最速公開!サーバー不要、HTMLと簡単なスクリプトでOK!🚀

GASで簡易Webアプリを公開する手順

Google Apps Script(GAS)を使って、簡易的なWebアプリケーションを公開する方法を解説します。GASは、Google Workspaceのサービスと連携したWebアプリケーションを簡単に開発・公開できる便利なツールです。今回は、簡単なHTMLを表示するだけのWebアプリを作成し、公開するまでの手順をステップごとに説明します。

GASのWebアプリは、特別なサーバーを用意する必要がなく、Googleのインフラストラクチャ上で動作します。そのため、個人利用はもちろん、小規模なチームでの利用にも適しています。Webサイト制作の知識がなくても、簡単なスクリプトを書くだけで、手軽にWebアプリを公開できます。

始める前に、Googleアカウントが必要です。まだお持ちでない場合は、アカウントを作成してください。

また、Google DriveにGASのプロジェクトを作成するため、Google Driveへのアクセス権も必要になります。

それでは、早速GASでWebアプリを作成し、公開する手順を見ていきましょう。

GASプロジェクトの作成

まず、Google Driveを開き、新しいフォルダを作成します。(任意)

フォルダを作成後、そのフォルダ内で「新規」→「その他」→「Google Apps Script」を選択し、新しいGASプロジェクトを作成します。

GASエディタが開いたら、プロジェクトに名前を付けます。左上の「無題のプロジェクト」をクリックし、任意のプロジェクト名を入力してください。(例:MyWebApp)

これで、GASプロジェクトの作成は完了です。次に、HTMLファイルを作成します。

HTMLファイルの作成

GASエディタで、「ファイル」→「新規作成」→「HTMLファイル」を選択します。

HTMLファイルに、表示したい内容を記述します。簡単な例として、以下のHTMLコードを記述してみましょう。


<!DOCTYPE html>
<html>
<head>
    <title>My Web App</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple web app created with Google Apps Script.</p>
</body>
</html>

HTMLファイルの名前をindex.htmlとして保存します。index.htmlという名前は、GASがWebアプリのエントリーポイントとして認識するために重要です。

GASコードの記述

次に、GASのコードを記述します。コード.gsファイルに、以下のコードを記述します。


function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('My Web App');
}

doGet(e)関数は、Webアプリにアクセスがあった際に実行される関数です。

HtmlService.createHtmlOutputFromFile('index')で、index.htmlファイルの内容を読み込み、HTMLを出力します。

setSandboxMode(HtmlService.SandboxMode.IFRAME)は、セキュリティのためにサンドボックスモードを設定します。

setTitle('My Web App')は、Webアプリのタイトルを設定します。

Webアプリの公開

GASエディタで、「公開」→「ウェブアプリケーションとして導入」を選択します。

「アプリケーションにアクセスできるユーザー」を「全員」または「(あなたの組織)全員」を選択します。組織外のユーザーにも公開したい場合は、「全員」を選択してください。

「次のユーザーとしてアプリケーションを実行」は、通常は「自分」を選択します。

「導入」ボタンをクリックすると、WebアプリのURLが発行されます。

発行されたURLにアクセスすると、作成したWebアプリが表示されます。

初回公開時は、Googleアカウントへのアクセス許可を求められます。画面の指示に従って、アクセスを許可してください。

公開後の更新について

HTMLやGASのコードを修正した場合、再度「公開」→「ウェブアプリケーションとして導入」を選択し、「新しいバージョン」として導入する必要があります。

以前のバージョンをそのままにして、新しいバージョンを公開することも可能です。

URLは、基本的に変わりませんが、変更した内容を反映させるためには、新しいバージョンとして導入する必要があります。

参考リンク

まとめ

GASを使えば、HTMLと簡単なスクリプトだけで、手軽にWebアプリケーションを公開できます。サーバーの管理や複雑な設定は不要で、Google Workspaceのサービスと連携したWebアプリを簡単に開発できます。

今回紹介した手順を参考に、ぜひGASで独自のWebアプリを作成し、公開してみてください。