Zenn
クエリアPublicationへの投稿
👻

Google Apps ScriptでHTMLを使ってWebアプリを作成する方法

aktky
2024/05/28に公開
HTML
GAS
Google スプレッドシート
業務アプリ
tech

Google Apps Script (GAS) は、Google Workspace（旧G Suite）のアプリケーションを自動化および拡張するための強力なツールです。

GASを使えば、HTMLやJavaScriptを組み合わせて、カスタムのWebアプリを作成することができます。この記事では、GASでHTMLを使ってWebアプリを作成する方法を紹介します。

前提条件

  • Google アカウントを保持していること
  • Google Apps Scriptの基本的な知識があること
  • HTMLとJavaScriptの基本的な知識があること

手順1: GASプロジェクトを作成する

  1. Google Driveにアクセスし、新しいGASプロジェクトを作成します。
  2. ツールバーの「新規」ボタンをクリックし、「その他」>「Google Apps Script」を選択します。
  3. プロジェクト名を入力します（例: "MyWebApp"）。

手順2: HTMLファイルを作成する

  1. GASエディタで、ファイル > New > HTMLファイルを選択します。
  2. HTMLファイルに名前を付けます（例: "index.html"）。
  3. 以下のHTMLコードを貼り付けます:
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>My Web App</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <p>これは、Google Apps Scriptで作成されたシンプルなWebアプリです。</p>
    <button onclick="google.script.run.showAlert()">クリックしてください</button>
  </body>
</html>

手順3: GASコードを書く

  1. GASエディタで、以下のコードを貼り付けます:
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function showAlert() {
  Browser.msgBox("ボタンがクリックされました！");
}

doGet() 関数は、WebアプリのエントリポイントであるHTMLファイルを返します。この関数は、WebアプリのURLにアクセスがあった際に自動的に呼び出されます。

HtmlService.createHtmlOutputFromFile() メソッドを使って、指定したHTMLファイル（ここでは index.html ）をWebアプリのコンテンツとして返します。

showAlert() 関数は、HTMLファイル内のボタンがクリックされたときに呼び出されます。この関数では、 Browser.msgBox() メソッドを使ってアラートメッセージを表示しています。

GASコード内で定義された関数は、HTMLファイル内のJavaScriptから google.script.run を使って呼び出すことができます。例えば、 google.script.run.showAlert() という記述により、HTMLファイル内のボタンクリックイベントがGASコード内の showAlert() 関数を呼び出します。

手順4: WebアプリとしてGASプロジェクトをデプロイする

  1. GASエディタで、公開 > Webアプリケーションとして導入...を選択します。
  2. 新しいデプロイを選択し、以下の設定を行います:
    • プロジェクトバージョン: 新規作成
    • 次のユーザーとしてアプリケーションを実行: 自分
    • アクセスできるユーザー: 全員（匿名ユーザーを含む）
  3. デプロイをクリックし、表示されるWebアプリのURLをコピーします。

デプロイ時の設定で「次のユーザーとしてアプリケーションを実行」を「自分」に設定することで、WebアプリはGASプロジェクトの所有者の権限で実行されます。

また、「アクセスできるユーザー」を「全員（匿名ユーザーを含む）」に設定することで、誰でもWebアプリにアクセスできるようになります。

手順5: Webアプリをテストする

  1. コピーしたWebアプリのURLをブラウザで開きます。
  2. 「ようこそ！」というメッセージと、「クリックしてください」というボタンが表示されます。
  3. ボタンをクリックすると、アラートメッセージが表示されます。

以上の手順により、Google Apps ScriptとHTMLを使ってシンプルなWebアプリを作成することができます。

GASは、Google Workspaceのアプリケーションとシームレスに統合できるため、スプレッドシート、ドキュメント、フォームなどのデータを活用したより高度なWebアプリを構築することも可能です。

ローコードツールでスプレッドシートのUIを構築するという選択肢も

GASとHTMLを使ってスプレッドシートのデータを操作する方法を説明しましたが、コーディングに不慣れな方にとっては敷居が高く感じられるかもしれません。

そこで、ローコードツールの 『クエリア』 を使えば、コーディング不要でスプレッドシートのデータを使ったUIを簡単に構築することができます。

クエリアは、スプレッドシートのデータを使ってWebアプリケーションを作成するためのローコードプラットフォームです。ドラッグ＆ドロップ操作でUIを設計し、スプレッドシートのデータとの連携も簡単に設定できます。

https://zenn.dev/querier/articles/b28322ae37342f

クエリア
クエリアPublication

株式会社Querierは「エンジニアがプロダクト開発に集中できる世界を作る」ために、管理画面・社内ツール開発ローコードの『クエリア』を開発しています。

Discussion