Google Apps Scriptを開く | 学校祭デジタル受付アプリを作る | AI活用と意思決定デザイン

この節で学ぶこと

前の節では、今回作るアプリの全体像を確認しました。

この節では、実際にGoogle Apps Scriptを開き、アプリを作るための作業場所を準備します。

今回使うのは、次の2つです。

使うもの	役割
Googleスプレッドシート	受付データを保存する場所
Google Apps Script	アプリのプログラムを書く場所

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

スプレッドシート
→ 受付データをためる表

Google Apps Script
→ 受付アプリを動かすプログラムを書く場所

今回は、GoogleスプレッドシートからGoogle Apps Scriptを開く方法で進めます。

この方法にすると、フォームから送信された受付データを、そのスプレッドシートに保存しやすくなります。

なぜスプレッドシートから始めるのか

Google Apps Scriptは、単独でも作れます。

しかし、今回のアプリでは、来場者の受付データを保存する必要があります。

そのため、先にGoogleスプレッドシートを作って、そこからApps Scriptを開きます。

Googleスプレッドシートを作る
↓
そのスプレッドシートに紐づいたApps Scriptを開く
↓
受付フォームから送信されたデータを保存する

この流れにすると、あとからデータを確認しやすくなります。

1. Googleスプレッドシートを作る

手順

まず、Google Driveを開きます。

次の順番で進めます。

1. Google Driveを開く
2. 左上の「新規」をクリック
3. 「Google スプレッドシート」をクリック
4. 空白のスプレッドシートを作成する

新しいスプレッドシートが開いたら、ファイル名を変更します。

ファイル名を変更する

左上にある「無題のスプレッドシート」をクリックして、名前を変更します。

今回のファイル名は、次にします。

学校祭デジタル受付

この名前は、アプリそのものの名前ではなく、受付データを保存するスプレッドシートの名前です。

ここで確認すること

スプレッドシートの上部に、次のような名前が表示されていればOKです。

学校祭デジタル受付

まだ表の中には何も入力しなくて大丈夫です。

あとでプログラムを実行すると、必要なシートや見出しは自動で作られます。

2. Apps Scriptを開く

手順

スプレッドシートを開いた状態で、上のメニューを見ます。

次の順番で進めます。

1. 上部メニューの「拡張機能」をクリック
2. 「Apps Script」をクリック

すると、新しいタブでGoogle Apps Scriptの画面が開きます。

Apps Scriptの画面が開いたら

最初は、次のような画面になります。

表示	内容
左側	ファイル一覧
中央	コードを書く場所
上部	保存、実行、デプロイなどのボタン
`Code.gs`	最初から用意されているプログラムファイル

最初から、Code.gs というファイルが表示されています。

これはあとで使います。

3. Apps Scriptのプロジェクト名を変更する

Apps Script側にも名前をつけておきます。

左上に「無題のプロジェクト」と表示されている場合は、クリックして名前を変更します。

今回のプロジェクト名は、次にします。

学校祭デジタル受付アプリ

名前をつける理由

名前をつけなくても動く場合はあります。

しかし、プロジェクトが増えると、どれが何のアプリか分からなくなります。

そのため、最初に名前をつけておきます。

悪い例：
無題のプロジェクト

良い例：
学校祭デジタル受付アプリ

名前を見ただけで何のアプリか分かるようにしておくことが大切です。

4. Code.gsを確認する

Apps Scriptを開くと、最初から Code.gs というファイルがあります。

中には、次のような短いコードが入っていることがあります。

function myFunction() {

}

これは、最初から入っているサンプルのようなものです。

今回は使いません。

次の節で、ここに完成版の Code.gs を貼り付けます。

今は消さなくてもよい

この時点では、まだコードを消さなくても大丈夫です。

次の節で、次の作業をします。

Code.gsの中身を全部消す
↓
完成版のCode.gsを貼り付ける

今は、Code.gs があることだけ確認できればOKです。

5. index.htmlを追加する準備を知る

今回のアプリでは、Code.gs だけでなく、index.html も使います。

index.html は、受付フォームや管理画面など、画面に見える部分を書くファイルです。

今の時点では、まだ index.html はありません。

次の節で追加します。

index.htmlを作る場所

Apps Scriptの左側に、ファイル一覧があります。

その近くに「＋」ボタンがあります。

次の節で、その「＋」ボタンからHTMLファイルを追加します。

＋ボタン
↓
HTML
↓
ファイル名を index にする

ファイル名は必ず index にします。

index.html と入力するのではなく、作成時の名前は index です。

Apps Scriptが自動的に index.html として扱ってくれます。

6. ここまでの作業確認

ここまでで、次の状態になっていればOKです。

チェックリスト

確認項目	できたら○
Googleスプレッドシートを作成した
スプレッドシート名を「学校祭デジタル受付」にした
スプレッドシートからApps Scriptを開いた
Apps Scriptのプロジェクト名を変更した
`Code.gs` があることを確認した
次に `index.html` を作ることを理解した

7. よくあるつまずき

つまずき1：Apps Scriptが見つからない

スプレッドシートの上部メニューに「拡張機能」があります。

そこから開きます。

拡張機能
↓
Apps Script

Google Driveの画面から探すのではなく、スプレッドシートを開いた状態で探すと見つけやすいです。

つまずき2：新しいタブが開かない

ブラウザのポップアップブロックや読み込みの問題で、新しいタブが開かないことがあります。

その場合は、もう一度「拡張機能」から「Apps Script」をクリックしてください。

また、ブラウザ上部に「ポップアップがブロックされました」のような表示が出ていないか確認します。

つまずき3：無題のプロジェクトのままになっている

名前を変え忘れても、すぐに壊れるわけではありません。

ただし、あとで見つけにくくなります。

左上のプロジェクト名をクリックして、次の名前にしておきましょう。

学校祭デジタル受付アプリ

つまずき4：Code.gsの中に何か書いてあって不安

最初から入っているコードは、消して大丈夫です。

次の節で完成版コードを貼るので、最初のサンプルコードは使いません。

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

この段階でわからなくなったら、AIに聞いて大丈夫です。

ただし、次のように具体的に聞きます。

悪い聞き方

Apps Scriptがわかりません。

これだと、どこで困っているのか分かりにくいです。

良い聞き方

GoogleスプレッドシートからGoogle Apps Scriptを開こうとしています。

学校祭デジタル受付アプリを作る授業中です。

困っていること：
スプレッドシートの上部メニューに「拡張機能」はありますが、
Apps Scriptを押したあとに何をすればよいかわかりません。

初心者にもわかるように、次にやることを順番に教えてください。

画面の状態を伝えると聞きやすい

AIに聞くときは、今どの画面にいるかを書くと、答えが返ってきやすくなります。

今いる画面：
Googleスプレッドシート

やりたいこと：
Apps Scriptを開きたい

困っていること：
どこを押せばいいかわからない

または、

今いる画面：
Google Apps Script

やりたいこと：
プロジェクト名を変えたい

困っていること：
どこをクリックすればいいかわからない

このように、今の状態を説明します。

9. この節でまだやらないこと

この節では、まだ次の作業はしません。

完成コードを貼る
setupAppを実行する
Webアプリとして公開する
受付フォームを入力する
管理画面を見る

これらは、次の節以降で行います。

今は、作業場所を準備できれば十分です。

10. この節のまとめ

この節では、学校祭デジタル受付アプリを作るための準備をしました。

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

今回はGoogleスプレッドシートからApps Scriptを開く。
スプレッドシートは受付データを保存する場所になる。
Apps Scriptはアプリのプログラムを書く場所になる。
最初から Code.gs が用意されている。
index.html は次の節で追加する。
プロジェクト名をつけると、あとで管理しやすい。
わからない時は、今いる画面・やりたいこと・困っていることをAIに伝える。

確認問題

問題1

今回、最初に作るGoogleのファイルは何ですか。

回答

Googleスプレッドシートです。

問題2

Googleスプレッドシートは、今回のアプリで何のために使いますか。

回答

受付フォームから送信された来場者データを保存するために使います。

問題3

スプレッドシートからApps Scriptを開くには、どのメニューを使いますか。

回答

上部メニューの「拡張機能」から「Apps Script」を開きます。

問題4

最初から用意されているGASのファイル名は何ですか。

回答

Code.gs です。

問題5

index.html は、何を作るためのファイルですか。

回答

受付フォームや管理画面など、画面に見える部分を作るためのファイルです。

この節で学ぶこと

前の節では、今回作るアプリの全体像を確認しました。

この節では、実際にGoogle Apps Scriptを開き、アプリを作るための作業場所を準備します。

今回使うのは、次の2つです。

使うもの	役割
Googleスプレッドシート	受付データを保存する場所
Google Apps Script	アプリのプログラムを書く場所

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

スプレッドシート
→ 受付データをためる表

Google Apps Script
→ 受付アプリを動かすプログラムを書く場所

今回は、GoogleスプレッドシートからGoogle Apps Scriptを開く方法で進めます。

この方法にすると、フォームから送信された受付データを、そのスプレッドシートに保存しやすくなります。

なぜスプレッドシートから始めるのか

Google Apps Scriptは、単独でも作れます。

しかし、今回のアプリでは、来場者の受付データを保存する必要があります。

そのため、先にGoogleスプレッドシートを作って、そこからApps Scriptを開きます。

Googleスプレッドシートを作る
↓
そのスプレッドシートに紐づいたApps Scriptを開く
↓
受付フォームから送信されたデータを保存する

この流れにすると、あとからデータを確認しやすくなります。

1. Googleスプレッドシートを作る

手順

まず、Google Driveを開きます。

次の順番で進めます。

1. Google Driveを開く
2. 左上の「新規」をクリック
3. 「Google スプレッドシート」をクリック
4. 空白のスプレッドシートを作成する

新しいスプレッドシートが開いたら、ファイル名を変更します。

ファイル名を変更する

左上にある「無題のスプレッドシート」をクリックして、名前を変更します。

今回のファイル名は、次にします。

学校祭デジタル受付

この名前は、アプリそのものの名前ではなく、受付データを保存するスプレッドシートの名前です。

ここで確認すること

スプレッドシートの上部に、次のような名前が表示されていればOKです。

学校祭デジタル受付

まだ表の中には何も入力しなくて大丈夫です。

あとでプログラムを実行すると、必要なシートや見出しは自動で作られます。

2. Apps Scriptを開く

手順

スプレッドシートを開いた状態で、上のメニューを見ます。

次の順番で進めます。

1. 上部メニューの「拡張機能」をクリック
2. 「Apps Script」をクリック

すると、新しいタブでGoogle Apps Scriptの画面が開きます。

Apps Scriptの画面が開いたら

最初は、次のような画面になります。

表示	内容
左側	ファイル一覧
中央	コードを書く場所
上部	保存、実行、デプロイなどのボタン
`Code.gs`	最初から用意されているプログラムファイル

最初から、Code.gs というファイルが表示されています。

これはあとで使います。

3. Apps Scriptのプロジェクト名を変更する

Apps Script側にも名前をつけておきます。

左上に「無題のプロジェクト」と表示されている場合は、クリックして名前を変更します。

今回のプロジェクト名は、次にします。

学校祭デジタル受付アプリ

名前をつける理由

名前をつけなくても動く場合はあります。

しかし、プロジェクトが増えると、どれが何のアプリか分からなくなります。

そのため、最初に名前をつけておきます。

悪い例：
無題のプロジェクト

良い例：
学校祭デジタル受付アプリ

名前を見ただけで何のアプリか分かるようにしておくことが大切です。

4. Code.gsを確認する

Apps Scriptを開くと、最初から Code.gs というファイルがあります。

中には、次のような短いコードが入っていることがあります。

function myFunction() {

}

これは、最初から入っているサンプルのようなものです。

今回は使いません。

次の節で、ここに完成版の Code.gs を貼り付けます。

今は消さなくてもよい

この時点では、まだコードを消さなくても大丈夫です。

次の節で、次の作業をします。

Code.gsの中身を全部消す
↓
完成版のCode.gsを貼り付ける

今は、Code.gs があることだけ確認できればOKです。

5. index.htmlを追加する準備を知る

今回のアプリでは、Code.gs だけでなく、index.html も使います。

index.html は、受付フォームや管理画面など、画面に見える部分を書くファイルです。

今の時点では、まだ index.html はありません。

次の節で追加します。

index.htmlを作る場所

Apps Scriptの左側に、ファイル一覧があります。

その近くに「＋」ボタンがあります。

次の節で、その「＋」ボタンからHTMLファイルを追加します。

＋ボタン
↓
HTML
↓
ファイル名を index にする

ファイル名は必ず index にします。

index.html と入力するのではなく、作成時の名前は index です。

Apps Scriptが自動的に index.html として扱ってくれます。

6. ここまでの作業確認

ここまでで、次の状態になっていればOKです。

チェックリスト

確認項目	できたら○
Googleスプレッドシートを作成した
スプレッドシート名を「学校祭デジタル受付」にした
スプレッドシートからApps Scriptを開いた
Apps Scriptのプロジェクト名を変更した
`Code.gs` があることを確認した
次に `index.html` を作ることを理解した

7. よくあるつまずき

つまずき1：Apps Scriptが見つからない

スプレッドシートの上部メニューに「拡張機能」があります。

そこから開きます。

拡張機能
↓
Apps Script

Google Driveの画面から探すのではなく、スプレッドシートを開いた状態で探すと見つけやすいです。

つまずき2：新しいタブが開かない

ブラウザのポップアップブロックや読み込みの問題で、新しいタブが開かないことがあります。

その場合は、もう一度「拡張機能」から「Apps Script」をクリックしてください。

また、ブラウザ上部に「ポップアップがブロックされました」のような表示が出ていないか確認します。

つまずき3：無題のプロジェクトのままになっている

名前を変え忘れても、すぐに壊れるわけではありません。

ただし、あとで見つけにくくなります。

左上のプロジェクト名をクリックして、次の名前にしておきましょう。

学校祭デジタル受付アプリ

つまずき4：Code.gsの中に何か書いてあって不安

最初から入っているコードは、消して大丈夫です。

次の節で完成版コードを貼るので、最初のサンプルコードは使いません。

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

この段階でわからなくなったら、AIに聞いて大丈夫です。

ただし、次のように具体的に聞きます。

悪い聞き方

Apps Scriptがわかりません。

これだと、どこで困っているのか分かりにくいです。

良い聞き方

GoogleスプレッドシートからGoogle Apps Scriptを開こうとしています。

学校祭デジタル受付アプリを作る授業中です。

困っていること：
スプレッドシートの上部メニューに「拡張機能」はありますが、
Apps Scriptを押したあとに何をすればよいかわかりません。

初心者にもわかるように、次にやることを順番に教えてください。

画面の状態を伝えると聞きやすい

AIに聞くときは、今どの画面にいるかを書くと、答えが返ってきやすくなります。

今いる画面：
Googleスプレッドシート

やりたいこと：
Apps Scriptを開きたい

困っていること：
どこを押せばいいかわからない

または、

今いる画面：
Google Apps Script

やりたいこと：
プロジェクト名を変えたい

困っていること：
どこをクリックすればいいかわからない

このように、今の状態を説明します。

9. この節でまだやらないこと

この節では、まだ次の作業はしません。

完成コードを貼る
setupAppを実行する
Webアプリとして公開する
受付フォームを入力する
管理画面を見る

これらは、次の節以降で行います。

今は、作業場所を準備できれば十分です。

10. この節のまとめ

この節では、学校祭デジタル受付アプリを作るための準備をしました。

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

今回はGoogleスプレッドシートからApps Scriptを開く。
スプレッドシートは受付データを保存する場所になる。
Apps Scriptはアプリのプログラムを書く場所になる。
最初から Code.gs が用意されている。
index.html は次の節で追加する。
プロジェクト名をつけると、あとで管理しやすい。
わからない時は、今いる画面・やりたいこと・困っていることをAIに伝える。

確認問題

問題1

今回、最初に作るGoogleのファイルは何ですか。

回答

Googleスプレッドシートです。

問題2

Googleスプレッドシートは、今回のアプリで何のために使いますか。

回答

受付フォームから送信された来場者データを保存するために使います。

問題3

スプレッドシートからApps Scriptを開くには、どのメニューを使いますか。

回答

上部メニューの「拡張機能」から「Apps Script」を開きます。

問題4

最初から用意されているGASのファイル名は何ですか。

回答

Code.gs です。

問題5

index.html は、何を作るためのファイルですか。

回答

受付フォームや管理画面など、画面に見える部分を作るためのファイルです。