メニュー
\ ポイント最大11倍! /詳細を見る

GAS│作成したスクリプトをウェブアプリケーションから実行する方法

google-apps-script-web-application

GASを作成してスプレッドシートならカスタムメニューから実行できますが、GoogleドライブのツールはGASのスクリプトエディタから実行する必要があります。

しかしながら、スクリプトというものに慣れていない人がツールを使うにはもっと使いやすくするUIが必要です。

本記事ではGASをウェブアプリケーション(HTML)から実行する方法を紹介します。

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

目次

作成したGASをウェブアプリケーションから実行する方法

早速、GASを実行するウェブアプリケーションを作成してみましょう。

STEP

スクリプトの作成

早速スクリプトエディタを開きましょう。

下記の3つのコードを書きます。

  • HTMLを表示するスクリプト(doGet)
  • データを送信するスクリプト(doPost)
  • ドライブのファイルをコピーするスクリプト(copyFile)

スクリプトをコピペしましょう。

STEP

HTMLの作成

表示するHTML(index.html)とボタンを押した後のHTML(result.html)を記述します。

STEP

ウェブアプリケーションの表示

一度、デプロイ(展開)のボタンを押しましょう。

発行されたウェブアプリのURLをコピーして、index.htmlの所にペーストしましょう。

デプロイするごとにアプリケーションのURLが変化します。

修正したらindex.htmlを更新するのを忘れないようにしましょう。

その後に再度、デプロイをしてウェブアプリケーションを表示します。

あとはテストです!

入力フォームにデータを入力して、送信ボタンを押しましょう。

result.htmlが表示されていればスクリプトの実行が完了です。

また入力したドライブ先にファイルがコピーされているかも確認しましょう。

CSSでウェブアプリケーションの見た目を整える

おまけです。

見た目を整えたい時はCSS用のHTMLを作成しましょう。

<style>
	body {
margin: 20px;
}
	h1 {
font-size: 2.0rem;
}
	.section {
margin: 40px;
}
</style>

さらにindex.htmlにCSSを参照するコードを追加します。

<head>
	<base target="_top">
	<?!= HtmlService.createHtmlOutputFromFile('plugin').getContent(); ?>
	<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>

参考画像は簡素ですが、手を入れれば好きな見た目にできます。

作成したGASをウェブアプリケーションから実行する方法まとめ

本記事では「作成したGASをウェブアプリケーションから実行する方法」について書きました。

UIを作成してあげると、スクリプトに慣れていない人も抵抗なくツールを使用できるので、興味のある人は是非試してみてください。

全記事一覧

  • URLをコピーしました!
目次