Webアプリとして公開する | 学校祭デジタル受付アプリを作る | AI活用と意思決定デザイン

この節で学ぶこと

前の節では、setupApp() を実行して、学校祭デジタル受付アプリの初期設定を行いました。

この節では、作成したGoogle Apps ScriptをWebアプリとして公開します。

Webアプリとして公開すると、URLを開くだけで受付フォームを使えるようになります。

Google Apps Scriptで作った画面
↓
Webアプリとして公開
↓
URLが発行される
↓
スマホやパソコンから受付フォームを開ける

ここで発行されたURLを来場者に共有すれば、受付フォームとして使えるようになります。

Webアプリとして公開するとは

Google Apps Scriptで作ったプログラムは、そのままでは自分の編集画面の中にあるだけです。

受付フォームとして使うには、ブラウザで開けるURLにする必要があります。

この作業を、Apps Scriptではデプロイと呼びます。

デプロイ
＝ 作ったアプリをURLで使える状態にすること

初心者の方は、まず次のように覚えてください。

デプロイする
↓
URLができる
↓
他の人もフォームを開けるようになる

1. この節でやること

この節では、次の作業を行います。

順番	作業
1	Apps Scriptの「デプロイ」を開く
2	新しいデプロイを作成する
3	種類を「ウェブアプリ」にする
4	実行ユーザーを「自分」にする
5	アクセスできるユーザーを設定する
6	デプロイする
7	URLを開いて受付フォームを確認する

2. デプロイ画面を開く

Google Apps Scriptの画面を開きます。

右上にあるボタンを探します。

デプロイ

このボタンを押します。

表示されたメニューから、次を選びます。

新しいデプロイ

ここで注意すること

「デプロイを管理」ではなく、最初は新しいデプロイを選びます。

選択肢	使う場面
新しいデプロイ	初めてWebアプリとして公開するとき
デプロイを管理	すでに公開したアプリを確認・更新するとき

今回は初めて公開するので、新しいデプロイ を使います。

3. 種類の選択で「ウェブアプリ」を選ぶ

新しいデプロイ画面が開いたら、左側または上部にある設定アイコンを押します。

そこから、種類を選びます。

種類の選択
↓
ウェブアプリ

今回作るものは、ブラウザで開く受付フォームなので、ウェブアプリを選びます。

ウェブアプリとは

ウェブアプリとは、URLを開いて使うアプリです。

たとえば、今回の受付フォームは、次のように使います。

受付URLを開く
↓
フォームに入力する
↓
受付番号が表示される

スマホでもパソコンでも、ブラウザから開けます。

4. デプロイ設定を入力する

ウェブアプリを選ぶと、いくつかの設定項目が出てきます。

設定は、次のようにします。

項目	設定
説明	初回公開
次のユーザーとして実行	自分
アクセスできるユーザー	全員、またはリンクを知っている全員

説明

説明には、今回のデプロイが何のためのものかを書きます。

初回公開

説明は自分用のメモです。

アプリの画面には表示されません。

次のユーザーとして実行

ここは、次のように設定します。

自分

これは、受付フォームから送信されたデータを、誰の権限でスプレッドシートに保存するかを決める設定です。

今回の授業では、スプレッドシートを作った本人の権限で保存するため、自分 にします。

アクセスできるユーザー

ここでは、誰が受付フォームを開けるかを決めます。

授業環境によって表示が違う場合がありますが、次のような選択肢があります。

選択肢	意味
自分のみ	自分だけが開ける
組織内のユーザー	学校や会社のアカウント内だけで開ける
リンクを知っている全員	URLを知っている人が開ける
全員	誰でも開ける

学校や組織のGoogleアカウントでは、選べる範囲が制限されていることがあります。

授業では、先生の指示に従ってください。

5. デプロイする

設定ができたら、次のボタンを押します。

デプロイ

初めてデプロイする場合、権限確認が出ることがあります。

前の節と同じように、許可して進めます。

権限確認が出た場合

次のような画面が出る場合があります。

承認が必要です

または、

このアプリはGoogleで確認されていません

授業では、自分で作ったアプリを自分のスプレッドシートで動かしているため、先生の指示に従って許可します。

流れは次のようになります。

権限を確認
↓
自分のGoogleアカウントを選ぶ
↓
詳細
↓
プロジェクト名に移動
↓
許可

表示は環境によって少し違う場合があります。

6. WebアプリのURLをコピーする

デプロイが完了すると、WebアプリのURLが表示されます。

ウェブアプリ URL

このURLをコピーします。

このURLが、受付フォームを開くためのURLです。

URLを開く

コピーしたURLを新しいタブで開きます。

正しく公開できていれば、受付フォームが表示されます。

画面には、次のような見出しが出ます。

学校祭デジタル受付

この画面が表示されれば、Webアプリとして公開できています。

7. 受付フォームが表示されるか確認する

URLを開いたら、次の項目が表示されているか確認します。

確認項目	表示されていれば○
学校祭デジタル受付という見出し
氏名カナの入力欄
来場区分の選択欄
学年の選択欄
クラスの入力欄
来場目的の選択欄
郵便番号の入力欄
都道府県の選択欄
市区町村の選択欄
受付するボタン

この時点では、まだ送信しなくても大丈夫です。

送信テストは次の節で行います。

8. 都道府県の選択肢が表示されるか確認する

受付フォームを開いたら、都道府県の選択欄をクリックします。

ここに都道府県が表示されていれば、地域マスタ の読み込みが成功しています。

北海道
青森県
岩手県
...
岐阜県
愛知県
大阪府
...
沖縄県

都道府県を選ぶと、市区町村の選択肢が変わります。

たとえば、岐阜県を選ぶと、次のような市区町村が表示されます。

岐阜市
大垣市
各務原市
多治見市
高山市

ここまで確認できれば、フォーム側と Code.gs 側が正しく連携できています。

9. 管理画面リンクはまだ開かなくてよい

画面の下に、次のリンクがあります。

管理画面を見る

このリンクを押すと、管理画面に移動します。

ただし、この節ではまだ管理画面を詳しく確認しません。

管理画面は、受付データを1件以上入れてから見る方が分かりやすいです。

次の節で受付フォームを動かし、その後の節で管理画面を確認します。

10. デプロイ後にコードを変更した場合

ここで大切な注意があります。

Apps Scriptでは、コードを変更しただけでは、公開済みのWebアプリに反映されない場合があります。

コードを変更したら、もう一度デプロイの更新が必要です。

コードを変更する
↓
保存する
↓
デプロイを管理
↓
新しいバージョンを作成
↓
更新

初心者の方は、まず次のように覚えてください。

コードを変えたら、保存だけでなくデプロイ更新が必要なことがある

この授業では、最初の公開後に文字や色を変える場面があります。

その時に、変更が画面に反映されない場合は、デプロイ更新を確認します。

11. よくあるつまずき

つまずき1：ウェブアプリが選べない

新しいデプロイ画面で、種類の選択を開く必要があります。

新しいデプロイ
↓
種類の選択
↓
ウェブアプリ

設定アイコンの中にある場合もあります。

つまずき2：URLを開いてもエラーになる

よくある原因は次の通りです。

原因	確認すること
`index.html` のファイル名が違う	ファイル名が `index` になっているか
`setupApp()` を実行していない	前の節の初期設定を済ませたか
コードを保存していない	`Code.gs` と `index.html` を保存したか
HTMLコードを途中までしか貼っていない	完成コードを最後まで貼ったか
`#index.html` など見出しまで貼った	コード本体だけ貼ったか

つまずき3：都道府県が表示されない

都道府県が表示されない場合、地域マスタの読み込みに失敗している可能性があります。

確認することは次の通りです。

setupApp() を実行したか
地域マスタシートが作られているか
地域マスタに都道府県と市区町村が入っているか
Webアプリを再読み込みしたか

つまずき4：アクセス権限で開けない

学校や組織のGoogleアカウントでは、外部公開が制限されている場合があります。

その場合、アクセスできるユーザー の選択肢が限られることがあります。

授業では、先生の指示に従って選択します。

つまずき5：変更したのに画面が変わらない

コードを変更した後、公開URLの画面が変わらない場合は、次を確認します。

保存したか
デプロイを更新したか
ブラウザを再読み込みしたか
古いURLを見ていないか

Apps Scriptでは、変更後に新しいバージョンとしてデプロイ更新が必要な場合があります。

12. わからない時にAIへ聞く方法

この節では、デプロイや公開設定でつまずくことがあります。

AIに聞くときは、今どの画面で、何をしようとしているかを伝えます。

質問例1：デプロイ方法がわからない

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

Code.gsとindex.htmlは貼り付け済みで、setupAppも実行しました。

これからWebアプリとして公開したいです。

初心者にもわかるように、
新しいデプロイからウェブアプリとして公開する手順を教えてください。

質問例2：公開URLでエラーになる

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

Webアプリとしてデプロイしましたが、
URLを開くとエラーが出ます。

エラー文：
ここにエラー文を貼る

やったこと：
Code.gsとindex.htmlを貼りました。
setupAppを実行しました。
Webアプリとしてデプロイしました。

初心者にもわかるように、原因と確認ポイントを教えてください。

質問例3：アクセス設定がわからない

Google Apps ScriptでWebアプリをデプロイしています。

「次のユーザーとして実行」と
「アクセスできるユーザー」の意味がわかりません。

学校祭デジタル受付アプリの場合、
初心者向けにどのように考えればよいか説明してください。

質問例4：変更が反映されない

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

index.htmlのタイトルを変更して保存しましたが、
WebアプリのURLを開いても画面が変わりません。

初心者にもわかるように、
保存とデプロイ更新の違いを説明してください。

13. この節のまとめ

この節では、学校祭デジタル受付アプリをWebアプリとして公開しました。

大切なポイントは、次の通りです。

Webアプリとして公開すると、URLで受付フォームを開ける。
Apps Scriptでは、公開することをデプロイという。
初めて公開するときは「新しいデプロイ」を使う。
種類の選択では「ウェブアプリ」を選ぶ。
「次のユーザーとして実行」は、授業では基本的に「自分」にする。
「アクセスできるユーザー」は、授業環境に合わせて選ぶ。
デプロイ後にWebアプリURLが発行される。
URLを開いて受付フォームが表示されれば成功。
都道府県の選択肢が出れば、地域マスタも読み込めている。
コードを変更した場合は、デプロイ更新が必要なことがある。
エラーが出たら、エラー文をコピーしてAIに聞く。

次の節では、公開した受付フォームを実際に入力し、受付番号が発行されるところまで確認します。

確認問題

問題1

Apps Scriptで作ったアプリをURLで開けるようにする作業を何と言いますか。

回答

デプロイです。

問題2

新しいデプロイで選ぶ種類は何ですか。

回答

ウェブアプリです。

問題3

今回の授業で「次のユーザーとして実行」は基本的に何を選びますか。

回答

自分を選びます。

問題4

WebアプリのURLを開いて最初に確認する画面は何ですか。

回答

学校祭デジタル受付の受付フォームです。

問題5

コードを変更したのに公開URLの画面が変わらない場合、何を確認しますか。

回答

保存したか、デプロイを更新したか、ブラウザを再読み込みしたかを確認します。

この節で学ぶこと

前の節では、setupApp() を実行して、学校祭デジタル受付アプリの初期設定を行いました。

この節では、作成したGoogle Apps ScriptをWebアプリとして公開します。

Webアプリとして公開すると、URLを開くだけで受付フォームを使えるようになります。

Google Apps Scriptで作った画面
↓
Webアプリとして公開
↓
URLが発行される
↓
スマホやパソコンから受付フォームを開ける

ここで発行されたURLを来場者に共有すれば、受付フォームとして使えるようになります。

Webアプリとして公開するとは

Google Apps Scriptで作ったプログラムは、そのままでは自分の編集画面の中にあるだけです。

受付フォームとして使うには、ブラウザで開けるURLにする必要があります。

この作業を、Apps Scriptではデプロイと呼びます。

デプロイ
＝ 作ったアプリをURLで使える状態にすること

初心者の方は、まず次のように覚えてください。

デプロイする
↓
URLができる
↓
他の人もフォームを開けるようになる

1. この節でやること

この節では、次の作業を行います。

順番	作業
1	Apps Scriptの「デプロイ」を開く
2	新しいデプロイを作成する
3	種類を「ウェブアプリ」にする
4	実行ユーザーを「自分」にする
5	アクセスできるユーザーを設定する
6	デプロイする
7	URLを開いて受付フォームを確認する

2. デプロイ画面を開く

Google Apps Scriptの画面を開きます。

右上にあるボタンを探します。

デプロイ

このボタンを押します。

表示されたメニューから、次を選びます。

新しいデプロイ

ここで注意すること

「デプロイを管理」ではなく、最初は新しいデプロイを選びます。

選択肢	使う場面
新しいデプロイ	初めてWebアプリとして公開するとき
デプロイを管理	すでに公開したアプリを確認・更新するとき

今回は初めて公開するので、新しいデプロイ を使います。

3. 種類の選択で「ウェブアプリ」を選ぶ

新しいデプロイ画面が開いたら、左側または上部にある設定アイコンを押します。

そこから、種類を選びます。

種類の選択
↓
ウェブアプリ

今回作るものは、ブラウザで開く受付フォームなので、ウェブアプリを選びます。

ウェブアプリとは

ウェブアプリとは、URLを開いて使うアプリです。

たとえば、今回の受付フォームは、次のように使います。

受付URLを開く
↓
フォームに入力する
↓
受付番号が表示される

スマホでもパソコンでも、ブラウザから開けます。

4. デプロイ設定を入力する

ウェブアプリを選ぶと、いくつかの設定項目が出てきます。

設定は、次のようにします。

項目	設定
説明	初回公開
次のユーザーとして実行	自分
アクセスできるユーザー	全員、またはリンクを知っている全員

説明

説明には、今回のデプロイが何のためのものかを書きます。

初回公開

説明は自分用のメモです。

アプリの画面には表示されません。

次のユーザーとして実行

ここは、次のように設定します。

自分

これは、受付フォームから送信されたデータを、誰の権限でスプレッドシートに保存するかを決める設定です。

今回の授業では、スプレッドシートを作った本人の権限で保存するため、自分 にします。

アクセスできるユーザー

ここでは、誰が受付フォームを開けるかを決めます。

授業環境によって表示が違う場合がありますが、次のような選択肢があります。

選択肢	意味
自分のみ	自分だけが開ける
組織内のユーザー	学校や会社のアカウント内だけで開ける
リンクを知っている全員	URLを知っている人が開ける
全員	誰でも開ける

学校や組織のGoogleアカウントでは、選べる範囲が制限されていることがあります。

授業では、先生の指示に従ってください。

5. デプロイする

設定ができたら、次のボタンを押します。

デプロイ

初めてデプロイする場合、権限確認が出ることがあります。

前の節と同じように、許可して進めます。

権限確認が出た場合

次のような画面が出る場合があります。

承認が必要です

または、

このアプリはGoogleで確認されていません

授業では、自分で作ったアプリを自分のスプレッドシートで動かしているため、先生の指示に従って許可します。

流れは次のようになります。

権限を確認
↓
自分のGoogleアカウントを選ぶ
↓
詳細
↓
プロジェクト名に移動
↓
許可

表示は環境によって少し違う場合があります。

6. WebアプリのURLをコピーする

デプロイが完了すると、WebアプリのURLが表示されます。

ウェブアプリ URL

このURLをコピーします。

このURLが、受付フォームを開くためのURLです。

URLを開く

コピーしたURLを新しいタブで開きます。

正しく公開できていれば、受付フォームが表示されます。

画面には、次のような見出しが出ます。

学校祭デジタル受付

この画面が表示されれば、Webアプリとして公開できています。

7. 受付フォームが表示されるか確認する

URLを開いたら、次の項目が表示されているか確認します。

確認項目	表示されていれば○
学校祭デジタル受付という見出し
氏名カナの入力欄
来場区分の選択欄
学年の選択欄
クラスの入力欄
来場目的の選択欄
郵便番号の入力欄
都道府県の選択欄
市区町村の選択欄
受付するボタン

この時点では、まだ送信しなくても大丈夫です。

送信テストは次の節で行います。

8. 都道府県の選択肢が表示されるか確認する

受付フォームを開いたら、都道府県の選択欄をクリックします。

ここに都道府県が表示されていれば、地域マスタ の読み込みが成功しています。

北海道
青森県
岩手県
...
岐阜県
愛知県
大阪府
...
沖縄県

都道府県を選ぶと、市区町村の選択肢が変わります。

たとえば、岐阜県を選ぶと、次のような市区町村が表示されます。

岐阜市
大垣市
各務原市
多治見市
高山市

ここまで確認できれば、フォーム側と Code.gs 側が正しく連携できています。

9. 管理画面リンクはまだ開かなくてよい

画面の下に、次のリンクがあります。

管理画面を見る

このリンクを押すと、管理画面に移動します。

ただし、この節ではまだ管理画面を詳しく確認しません。

管理画面は、受付データを1件以上入れてから見る方が分かりやすいです。

次の節で受付フォームを動かし、その後の節で管理画面を確認します。

10. デプロイ後にコードを変更した場合

ここで大切な注意があります。

Apps Scriptでは、コードを変更しただけでは、公開済みのWebアプリに反映されない場合があります。

コードを変更したら、もう一度デプロイの更新が必要です。

コードを変更する
↓
保存する
↓
デプロイを管理
↓
新しいバージョンを作成
↓
更新

初心者の方は、まず次のように覚えてください。

コードを変えたら、保存だけでなくデプロイ更新が必要なことがある

この授業では、最初の公開後に文字や色を変える場面があります。

その時に、変更が画面に反映されない場合は、デプロイ更新を確認します。

11. よくあるつまずき

つまずき1：ウェブアプリが選べない

新しいデプロイ画面で、種類の選択を開く必要があります。

新しいデプロイ
↓
種類の選択
↓
ウェブアプリ

設定アイコンの中にある場合もあります。

つまずき2：URLを開いてもエラーになる

よくある原因は次の通りです。

原因	確認すること
`index.html` のファイル名が違う	ファイル名が `index` になっているか
`setupApp()` を実行していない	前の節の初期設定を済ませたか
コードを保存していない	`Code.gs` と `index.html` を保存したか
HTMLコードを途中までしか貼っていない	完成コードを最後まで貼ったか
`#index.html` など見出しまで貼った	コード本体だけ貼ったか

つまずき3：都道府県が表示されない

都道府県が表示されない場合、地域マスタの読み込みに失敗している可能性があります。

確認することは次の通りです。

setupApp() を実行したか
地域マスタシートが作られているか
地域マスタに都道府県と市区町村が入っているか
Webアプリを再読み込みしたか

つまずき4：アクセス権限で開けない

学校や組織のGoogleアカウントでは、外部公開が制限されている場合があります。

その場合、アクセスできるユーザー の選択肢が限られることがあります。

授業では、先生の指示に従って選択します。

つまずき5：変更したのに画面が変わらない

コードを変更した後、公開URLの画面が変わらない場合は、次を確認します。

保存したか
デプロイを更新したか
ブラウザを再読み込みしたか
古いURLを見ていないか

Apps Scriptでは、変更後に新しいバージョンとしてデプロイ更新が必要な場合があります。

12. わからない時にAIへ聞く方法

この節では、デプロイや公開設定でつまずくことがあります。

AIに聞くときは、今どの画面で、何をしようとしているかを伝えます。

質問例1：デプロイ方法がわからない

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

Code.gsとindex.htmlは貼り付け済みで、setupAppも実行しました。

これからWebアプリとして公開したいです。

初心者にもわかるように、
新しいデプロイからウェブアプリとして公開する手順を教えてください。

質問例2：公開URLでエラーになる

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

Webアプリとしてデプロイしましたが、
URLを開くとエラーが出ます。

エラー文：
ここにエラー文を貼る

やったこと：
Code.gsとindex.htmlを貼りました。
setupAppを実行しました。
Webアプリとしてデプロイしました。

初心者にもわかるように、原因と確認ポイントを教えてください。

質問例3：アクセス設定がわからない

Google Apps ScriptでWebアプリをデプロイしています。

「次のユーザーとして実行」と
「アクセスできるユーザー」の意味がわかりません。

学校祭デジタル受付アプリの場合、
初心者向けにどのように考えればよいか説明してください。

質問例4：変更が反映されない

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

index.htmlのタイトルを変更して保存しましたが、
WebアプリのURLを開いても画面が変わりません。

初心者にもわかるように、
保存とデプロイ更新の違いを説明してください。

13. この節のまとめ

この節では、学校祭デジタル受付アプリをWebアプリとして公開しました。

大切なポイントは、次の通りです。

Webアプリとして公開すると、URLで受付フォームを開ける。
Apps Scriptでは、公開することをデプロイという。
初めて公開するときは「新しいデプロイ」を使う。
種類の選択では「ウェブアプリ」を選ぶ。
「次のユーザーとして実行」は、授業では基本的に「自分」にする。
「アクセスできるユーザー」は、授業環境に合わせて選ぶ。
デプロイ後にWebアプリURLが発行される。
URLを開いて受付フォームが表示されれば成功。
都道府県の選択肢が出れば、地域マスタも読み込めている。
コードを変更した場合は、デプロイ更新が必要なことがある。
エラーが出たら、エラー文をコピーしてAIに聞く。

次の節では、公開した受付フォームを実際に入力し、受付番号が発行されるところまで確認します。

確認問題

問題1

Apps Scriptで作ったアプリをURLで開けるようにする作業を何と言いますか。

回答

デプロイです。

問題2

新しいデプロイで選ぶ種類は何ですか。

回答

ウェブアプリです。

問題3

今回の授業で「次のユーザーとして実行」は基本的に何を選びますか。

回答

自分を選びます。

問題4

WebアプリのURLを開いて最初に確認する画面は何ですか。

回答

学校祭デジタル受付の受付フォームです。

問題5

コードを変更したのに公開URLの画面が変わらない場合、何を確認しますか。

回答

保存したか、デプロイを更新したか、ブラウザを再読み込みしたかを確認します。