![見出し画像](https://assets.st-note.com/production/uploads/images/115064720/rectangle_large_type_2_31e42f8201dd2be94aadba452da3555a.png?width=1200)
webアプリをサクッと作る【Google Apps Script】
やること
Google Apps Script (GAS) を使って、簡単な web アプリを作成して公開します。
手順
GASプロジェクトを作成
HTMLファイルを作成
スクリプトを作成
web アプリを公開
動作確認
事前準備
Googleアカウントを作成してログインする
以上
GASプロジェクトを作成
こちらの Google Apps Script ダッシュボード にアクセスして、左上の【新しいプロジェクト】を押します。
![](https://assets.st-note.com/img/1693578728137-EqeXEciObV.png?width=1200)
「無題のプロジェクト」となっている箇所をクリックして、プロジェクトに名前を自由につけましょう。
今回は「web app」とします。
![](https://assets.st-note.com/img/1693578746741-Pb54hGus1l.png?width=1200)
サイドメニューのファイル欄には「コード.gs」というファイルが選択されていて、エディタにコードが表示されています。
HTMLファイルを作成
webアプリで表示するページを作っていきます。
ファイルメニュー右上の【ファイルを追加】をクリックして、【HTML】を選択します。
![](https://assets.st-note.com/img/1693578767006-c1zJ1lI8Ue.png?width=1200)
名前は自由につけられます。今回は「index」とします。
エディタを見ると、すでにHTMLの雛形が記述されていますね。
HTMLの内容を下記のように記述します。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
7行目を追加しただけです。
HTMLが記述できたら、【プロジェクトを保存】ボタンを押して保存します。
![](https://assets.st-note.com/img/1693578795211-yJSL9pLqxJ.png?width=1200)
スクリプトを作成
次に「コード.gs」を編集していきましょう。
ファイルメニューで「コード.gs」を選択し、エディタでファイルを編集します。
デフォルトで記述されている下記のスクリプトは消去してOKです。
function myFunction() {
}
スクリプトを下記のように記述します。
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
`index` の部分は、HTMLファイルの名前を記述します。
スクリプトが記述できたら、【プロジェクトを保存】ボタンを押して保存します。
web アプリを公開
次に、GASを公開(デプロイ)して、webアプリにアクセスできるようにします。
右上の【デプロイ】ボタンを押して【新しいデプロイ】を選択します。
![](https://assets.st-note.com/img/1693578831182-DogtIP2i03.png?width=1200)
モーダル左上の【種類の選択】の横にある歯車アイコンを押して「ウェブアプリ」を選択します。
![](https://assets.st-note.com/img/1693578885080-UN8ZERHWWm.png?width=1200)
説明文は後で管理しやすいように、更新内容などを記入しておきましょう。
【次のユーザーで実行】と【アクセスできるユーザー】の設定で、実行者やアクセスを設定できます。
実行者を【自分】にした場合、アクセスできるユーザーに【全員】を指定できます。webアプリを全員に公開したい場合はそのように設定します。
実行者を「ウェブアプリケーションにアクセスしているユーザー」にした場合、アクセスできるユーザーは【自分】か【Googleアカウントを持つ全員】を指定できます。【Googleアカウントを持つ全員】にした場合、webアプリにアクセスするユーザーはGoogleアカウントにログインしている必要があります。
今回は全員に公開したいので、実行者を【自分】。アクセスできるユーザーを【全員】とします。
![](https://assets.st-note.com/img/1693579050226-YmzVQcpcMJ.png?width=1200)
設定できたら【デプロイ】ボタンを押します。
すると、ウェブアプリのURLが表示されます。こちらのURLにウェブアプリが公開されました。
![](https://assets.st-note.com/img/1693579093220-gADwzu7kEP.png?width=1200)
コピーするか、リンクをクリックしてアクセスしてみましょう。
動作確認・機能追加
![](https://assets.st-note.com/img/1693579035233-et7WTFHUiv.png?width=1200)
発行されたURLにアクセスすると、無事webページが表示されました。
アクセスできるユーザーを【全員】にしている場合、URLを知っている他の人も同じページにアクセスして、web アプリを閲覧できる状態になっています。
機能追加
HTMLを編集して、見出し文字の色を変えるデザインと、ボタンでアラートを表示する機能を追加しましょう。
`index.html` を下記のように変更します。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1 style="color: teal;">Hello, world!</h1>
<button onclick="alert('Hi!')">Hello!</button>
</body>
</html>
【プロジェクトの保存】を忘れずに。
HTMLやスクリプトを編集したら、毎回新しいデプロイを作成する必要があります。
変更のたびに新しいデプロイバージョンができていくのは煩わしいので、【デプロイをテスト】でwebアプリのテストをしましょう。
![](https://assets.st-note.com/img/1693579127848-S6v99nJUNX.png?width=1200)
デプロイボタンを押して「デプロイをテスト」を選択すると、テスト用のURLが表示されます。
アクセスして、表示のチェックを行います。
![](https://assets.st-note.com/img/1693579143921-jVhsmbLfuu.png?width=1200)
見出しの文字が変わっていて、ボタンを押すとアラートが表示されます。
テストも問題なさそうなので、アプリをデプロイしましょう。
新しいバージョンのURLが発行されます。前回のURLはまだ残っていますが、古いバージョンのものが表示されます。
後始末
不要な webアプリGAS はダッシュボード画面で消去しておきましょう
![](https://assets.st-note.com/img/1693579156895-i5IQY8346M.png?width=1200)
まとめ
GASを用いて簡単にwebアプリを公開することができました。
HTMLに JavaScript や CSS を追記すれば、さらにデザインや機能を持たせたwebアプリを作成することができますね。
以上です!
この記事が気に入ったらサポートをしてみませんか?