スプレッドシートとApps Scriptを準備する
この時間でやること
今回は、コードを書く前の準備をします。
やることはシンプルです。
Googleスプレッドシートを作る
↓
Apps Scriptを開く
↓
Code.gs と index.html を入れる場所を作る
まだ難しいコードの説明はしません。
今日のポイントは、アプリを作る作業場所を準備することです。
今回使うもの
使うものは、次の2つです。
| 使うもの | 役割 |
|---|---|
| Googleスプレッドシート | 商品・注文・在庫を保存する場所 |
| Google Apps Script | アプリを動かすためのプログラムを書く場所 |
Google公式のApps Scriptガイドでも、スプレッドシートから 拡張機能 > Apps Script を選ぶと、スプレッドシートに紐づいたスクリプトを作成できると説明されています。
1. Googleスプレッドシートを開く
まず、ブラウザで次のページを開きます。
https://docs.google.com/spreadsheets/
Googleアカウントにログインしていない場合は、ログイン画面が出ます。
自分のGoogleアカウントでログインしてください。
Googleスプレッドシートは、Google公式でもオンラインで表計算ファイルを作成できるサービスとして案内されています。
2. 新しいスプレッドシートを作る
画面左上あたりにある、
空白
または、
Blank spreadsheet
をクリックします。
新しいスプレッドシートが開きます。
3. ファイル名を変更する
左上のタイトル部分をクリックします。
最初は、
無題のスプレッドシート
のような名前になっています。
これを、次の名前に変更します。
イベントグッズ販売POS
名前は自由ですが、授業ではこの名前にしておくと分かりやすいです。
4. Apps Scriptを開く
スプレッドシート上部のメニューから、次の順番でクリックします。
拡張機能
↓
Apps Script
すると、新しい画面が開きます。
ここが、プログラムを書く場所です。
5. Apps Scriptの画面を確認する
Apps Scriptを開くと、最初から Code.gs というファイルがあります。
画面の左側に、次のように表示されていればOKです。
ファイル
└ Code.gs
Code.gs は、アプリの裏側の処理を書く場所です。
今回のアプリでは、次のような処理を担当します。
商品を読み込む
注文を保存する
在庫を減らす
販売履歴を取得する
売上を集計する
今は意味を全部覚えなくて大丈夫です。
6. プロジェクト名を変更する
Apps Script画面の左上に、プロジェクト名があります。
最初は、
無題のプロジェクト
のようになっています。
そこをクリックして、次の名前に変更します。
イベントグッズ販売POS
スプレッドシートと同じ名前にしておくと、あとから探しやすいです。
7. index.html を作る
次に、画面用のファイルを作ります。
Apps Script画面の左側にある「＋」ボタンをクリックします。
その中から、
HTML
を選びます。
ファイル名を聞かれたら、次のように入力します。
index
ここで注意です。
index.html
ではなく、
index
と入力します。
Apps Scriptが自動で .html を付けてくれます。
8. ファイルが2つあるか確認する
左側のファイル一覧が、次のようになっていれば成功です。
Code.gs
index.html
この2つが、今回のアプリで使うメインファイルです。
| ファイル | 入れるもの |
|---|---|
| Code.gs | サーバー側の処理 |
| index.html | 画面側のHTML |
9. 今日はまだコードを貼らなくてOK
この第2節では、まだ完成コードを貼らなくて大丈夫です。
今回のゴールは、貼り付ける場所を作ることです。
次の第3節で、
Code.gs にコードを貼る
index.html にコードを貼る
という作業をします。
焦らなくて大丈夫です。
まずは、入れ物を作れたら成功です。
10. ここまでできたかチェック
次のチェックが全部できていればOKです。
□ Googleスプレッドシートを作った
□ ファイル名を「イベントグッズ販売POS」にした
□ 拡張機能 → Apps Script を開いた
□ Apps Scriptのプロジェクト名を変更した
□ Code.gs がある
□ index.html を作った
全部できていれば、次に進めます。
よくあるつまずき
| 困ったこと | 対応 |
|---|---|
| Apps Scriptが見つからない | スプレッドシート上部の「拡張機能」を見る |
| index.htmlが作れない | 左側の「＋」からHTMLを選ぶ |
| index.htmlではなくindexと入力するのが不安 | index でOK。自動でHTMLファイルになります |
| 画面が英語になっている | Extensions → Apps Script を選ぶ |
| 保存ボタンが分からない | 上部のディスクアイコン、または Ctrl + S / Command + S |
ここで覚えること
今回覚えることは、これだけです。
スプレッドシート = データを保存する場所
Apps Script = アプリのプログラムを書く場所
Code.gs = 裏側の処理を書く場所
index.html = 画面を作る場所
この4つが分かれば十分です。
ミニ確認
Q1. 商品や注文データを保存する場所はどこですか？
回答
Googleスプレッドシートです。
Q2. プログラムを書く場所はどこですか？
回答
Google Apps Scriptです。
Q3. 画面を作るファイル名は何ですか？
回答
index.html です。
Q4. 裏側の処理を書くファイル名は何ですか？
回答
Code.gs です。
まとめ
今回は、アプリを作るための作業場所を準備しました。
まだコードを書いていなくても、ここまでできていれば大きな一歩です。
スプレッドシートを作る
↓
Apps Scriptを開く
↓
Code.gs と index.html を用意する
次はいよいよ、完成コードを貼り付けます。
「自分のレジアプリ」が動き始める手前まで来ました。