Webアプリとしてデプロイする
この時間でやること
今回は、作ったアプリを URLで開ける形 にします。
これを「デプロイ」と言います。
かんたんに言うと、
Apps Scriptに入れたアプリ
↓
Webアプリとして公開
↓
URLで開けるようにする
という作業です。
ここまでできると、ブラウザでレジ画面を開けるようになります。
今日のゴール
この時間のゴールは、これです。
WebアプリURLを作る
↓
URLを開く
↓
グッズ販売受付の画面を表示する
まだ完璧に動かなくても大丈夫です。
まずは、画面が開くことを目指します。
1. スプレッドシートを開く
まず、前回まで使っていたスプレッドシートを開きます。
https://docs.google.com/spreadsheets/
ファイル名は、授業では次の名前にしています。
イベントグッズ販売POS
開けたらOKです。
2. Apps Scriptを開く
スプレッドシート上部のメニューから進みます。
拡張機能
↓
Apps Script
Apps Scriptの画面が開きます。
左側に、次の2つがあるか確認します。
Code.gs
index.html
この2つがあればOKです。
3. 保存されているか確認する
デプロイ前に、必ず保存します。
Windows：Ctrl + S
Mac：Command + S
または、画面上の保存ボタンを押します。
保存していないと、古いコードのままデプロイされることがあります。
4. デプロイを開く
Apps Script画面の右上にある、
デプロイ
をクリックします。
次に、
新しいデプロイ
を選びます。
Apps Scriptの公式ドキュメントでも、Apps Scriptプロジェクトは「デプロイ」として公開・管理する形で説明されています。(
)
5. 種類を「ウェブアプリ」にする
新しいデプロイ画面が開いたら、左上あたりにある歯車マークを押します。
または、
種類を選択
をクリックします。
そこで、
ウェブアプリ
を選びます。
ここが大事です。
今回は「ライブラリ」や「アドオン」ではありません。
必ず、
ウェブアプリ
を選びます。
6. デプロイ設定を入力する
次のように設定します。
| 項目 | 設定 |
|---|---|
| 説明 | 初回デプロイ |
| 次のユーザーとして実行 | 自分 |
| アクセスできるユーザー | 自分、またはリンクを知っている全員 |
授業中は、まず安全に進めるなら、
自分
でOKです。
先生や友達にも見せたい場合は、
リンクを知っている全員
を選びます。
ただし、学校や組織のGoogleアカウントでは、選べる項目が制限されていることがあります。
7. デプロイする
設定ができたら、
デプロイ
をクリックします。
初回は、権限の確認が出ます。
これは、アプリがスプレッドシートを使うために必要です。
8. 権限を許可する
画面の案内に沿って進めます。
よくある流れはこれです。
アクセスを承認
↓
自分のGoogleアカウントを選ぶ
↓
詳細
↓
イベントグッズ販売POSに移動
↓
許可
「このアプリは確認されていません」と表示されることがあります。
これは、自分で作ったアプリがGoogleの審査を受けていないためです。
授業で自分のアカウント内で使う場合は、そのまま進めて大丈夫です。
9. WebアプリURLをコピーする
デプロイが完了すると、URLが表示されます。
ウェブアプリ
https://script.google.com/macros/s/........../exec
このURLをコピーします。
これが、あなたのPOSアプリのURLです。
10. URLを開く
コピーしたURLを、新しいタブで開きます。
次のような画面が表示されれば成功です。
グッズ販売受付
商品を読み込み中です...
少し待つと、商品カードが表示されます。
学校祭Tシャツ
オリジナルトートバッグ
アクリルキーホルダー
ステッカーセット
ここまで出たら、デプロイ成功です。
11. 画面が出たら触ってみる
表示できたら、少しだけ触ってみましょう。
商品を1つカートに追加
↓
注文合計が変わる
↓
受取金額に 5000 と入力
↓
お釣りが表示される
まだ決済確定は次の節で丁寧に行います。
今回は、画面が開いて商品が表示されればOKです。
よくあるつまずき
| 困ったこと | 原因 | 対応 |
|---|---|---|
| 商品が表示されない | setupAppを実行していない | 前の節に戻って setupApp を実行 |
google.script.run が使えません と出る | Apps Scriptエディタのプレビューで開いている | WebアプリURLから開く |
| 画面が真っ白 | 保存していない、またはHTMLの貼り付けミス | 保存して再デプロイ |
| 権限許可が怖い | 自作アプリなので確認画面が出る | 自分のアカウントを選んで許可 |
| URLを開いても古い画面 | 新しいデプロイが反映されていない | 再デプロイする |
変更したら再デプロイが必要
ここは大事です。
Code.gs や index.html をあとで変更した場合、Webアプリに反映するには再デプロイが必要です。
流れはこうです。
コードを変更する
↓
保存する
↓
デプロイ
↓
デプロイを管理
↓
編集
↓
新バージョン
↓
デプロイ
授業中は、最初はここまで覚えなくても大丈夫です。
まずは、
変更したら保存
大きな変更をしたら再デプロイ
だけ覚えておきましょう。
ここまでできたかチェック
□ Apps Scriptを開いた
□ 保存した
□ デプロイ → 新しいデプロイ を開いた
□ 種類を「ウェブアプリ」にした
□ 実行ユーザーを「自分」にした
□ アクセスできるユーザーを選んだ
□ デプロイした
□ 権限を許可した
□ WebアプリURLをコピーした
□ URLを開いた
□ グッズ販売受付画面が表示された
全部できたら成功です。
ミニ確認
Q1. デプロイとは何ですか？
回答
作ったアプリを、URLで開ける形にすることです。
Q2. 今回選ぶデプロイの種類は何ですか？
回答
ウェブアプリ です。
Q3. WebアプリURLの最後は、だいたい何で終わりますか？
回答
/exec で終わります。
Q4. google.script.run が使えません と出たら、何を確認しますか？
回答
Apps Scriptエディタ上ではなく、デプロイ後のWebアプリURLから開いているか確認します。
今日のひとこと
ここまで来たら、もう「コードを貼っただけ」ではありません。
自分のアプリにURLができました。
URLで開けるということは、かなりアプリらしくなったということです。
次は、実際に商品を売るテストをして、注文がスプレッドシートに保存されるか確認します。
まとめ
今回は、Apps ScriptをWebアプリとしてデプロイしました。
流れはこれです。
保存する
↓
デプロイ
↓
新しいデプロイ
↓
ウェブアプリを選ぶ
↓
権限を許可する
↓
URLを開く
画面に グッズ販売受付 が出ていれば成功です。
次の節では、テスト販売をして、注文データがスプレッドシートに保存されるところまで確認します。