コンテンツにスキップ

第6章 デプロイ(公開)#

この章の概要

  • 対象:Apps Scriptの設定が終わった方(第5章を完了した方)
  • 所要時間の目安:公開作業に30分、テスト投票に30分〜1時間
  • この章で学ぶこと:Webアプリとしての公開手順、動作確認、本番運用前の最終チェック

この章では、ここまで準備してきたプログラムとデータを、実際にスタッフがスマートフォンやパソコンからアクセスできる「Webアプリ」として公開します。この作業を「デプロイ」と呼びます。あわせて、公開後の動作確認と、本番運用前の最終チェックリストも説明します。

6.1 デプロイとは何か#

これまでの作業は、いわば「舞台裏の準備」でした。デプロイは、その準備した内容を「インターネット上に公開し、URL(住所)を発行する」作業です。デプロイをして初めて、スタッフが実際にアクセスできるようになります。

たとえるなら、これまでの作業は「お店の内装や商品を整える準備期間」で、デプロイは「開店して、お店の住所を貼り出す」ことにあたります。看板(URL)を出して初めて、お客様(スタッフ)がお店(Webアプリ)にたどり着けるようになるのです。

図解提案(今後のイラスト化候補)

図解提案:「準備段階(非公開)」と「デプロイ後(公開)」を、シャッターが閉まったお店とシャッターが開いたお店のイラストで対比させると、デプロイの意味が直感的に伝わります。

注意

デプロイは一度きりの作業ではありません。この後、内容を修正した場合(写真の差し替え、賞の追加など、スプレッドシートの中身の変更は再デプロイ不要ですが、プログラムファイル自体を修正した場合)は、改めてデプロイし直す必要があります。詳しくは6.6節で説明します。

6.2 デプロイの手順#

✅ 手順

  1. Apps Scriptエディタを開きます
  2. 画面右上にある「デプロイ」ボタンをクリックします(青色の目立つボタンで、画面右上、保存アイコンよりさらに右側にあります)

Apps Scriptエディタ右上の「デプロイ」ボタンにカーソルが重なった状態

  1. メニューが表示されるので、「新しいデプロイ」をクリックします(メニューの一番上です)

「デプロイ」ボタンを押した後に表示されるメニュー。「新しいデプロイ」の項目が見える状態

  1. 「新しいデプロイ」という画面が開きます。まず、「種類の選択」の部分にある歯車のアイコンをクリックします(画面左上あたり、まだ何も選ばれていない状態のアイコンです)

📷 スクリーンショット準備中(画像No.66)

「新しいデプロイ」ダイアログ。「種類の選択」の歯車アイコンにカーソルが重なった状態

  1. メニューが表示されるので、「ウェブアプリ」をクリックして選択します

📷 スクリーンショット準備中(画像No.67)

歯車アイコンをクリックした後に表示される選択肢。「ウェブアプリ」の項目にカーソルが重なった状態

  1. 画面にいくつかの設定項目が表示されます

  2. 説明:任意の説明文を入力できます(例:「初回公開」)。空欄でも問題ありません

  3. 次のユーザーとして実行:「自分(〇〇@gmail.com)」を選びます。これは、プログラムが「誰の権限で」スプレッドシートやDriveにアクセスするかを決める設定です。必ず自分(管理者)のアカウントを選んでください
  4. アクセスできるユーザー:ここが重要な設定です。次の6.3節で詳しく説明します

「新しいデプロイ」画面全体。「説明」「次のユーザーとして実行」「アクセスできるユーザー」の3つの設定項目が並んだ状態

6.3 「アクセスできるユーザー」の選び方#

この設定は、「誰がこのWebアプリを開けるか」を決めるものです。運用方針に合わせて、次のいずれかを選びます。

選択肢 内容 こんな場合におすすめ
全員 インターネット上の誰でも、URLを知っていればアクセスできる。Googleアカウントへのログインは不要 スタッフがGoogleアカウントを持っていない、または簡単にアクセスできるようにしたい場合
自分の組織のドメイン内のユーザー 医院が契約しているGoogle Workspace(組織用のGoogleアカウント)を持つ人だけがアクセスできる 医院がGoogle Workspaceを導入していて、セキュリティを重視したい場合

注意

このシステムは、投票者がログインしなくても画像を閲覧できるように設計されています(第3章で説明した「リンクを知っている全員」の画像共有設定は、この「全員」でアクセスできる構成を前提にしています)。特別な事情がない限り、「全員」を選ぶことをおすすめします。

ヒント

「全員」を選ぶと聞くと、セキュリティ面が不安に感じられるかもしれません。しかし、URLはhttps://script.google.com/macros/s/から始まる、推測がほぼ不可能な長い文字列です。URLを知らない第三者が偶然たどり着く可能性は極めて低く、また投票者の本人確認は「名前を選ぶ」という形で別途行われます(第1章1.4節)。

✅ 手順

  1. 「アクセスできるユーザー」のプルダウンをクリックします

「アクセスできるユーザー」のプルダウンメニューが開き、選択肢が表示された状態

  1. 「全員」を選択します(組織内限定にしたい場合は、該当する選択肢を選びます)

6.4 デプロイを実行する#

✅ 手順

  1. すべての設定を確認したら、画面右下の「デプロイ」ボタンをクリックします

設定完了後の画面右下にある「デプロイ」ボタン(青色)にカーソルが重なった状態

  1. 初めてデプロイする場合、「アクセスの承認が必要です」という画面が表示されることがあります。第5章5.9節で説明した承認手順と同じように、「アクセスを承認」→ アカウントを選ぶ → 「許可」の流れで進めます

アクセス承認を求めるダイアログ画面

  1. デプロイが完了すると、「デプロイが正常に完了しました」という画面が表示され、WebアプリのURLが発行されます
https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxx/exec

デプロイ完了画面。緑色のチェックマークと、発行されたURLが表示された状態

  1. このURLをコピーし、メモ帳などに控えておきます。「完了」ボタンをクリックして画面を閉じます

URLの右にあるコピーアイコンにカーソルが重なった状態

このURLが、スタッフに配布する投票用のURLになります。

6.5 発行されたURLを開いて確認する#

✅ 手順

  1. 控えておいたURLを、ブラウザの新しいタブに貼り付けて開きます
  2. 読み込み中の画面が表示された後、ホーム画面(または投票期間外画面)が表示されれば成功です

発行されたURLを開き、ホーム画面が表示された状態

注意

もしエラー画面が表示された場合は、第10章「トラブルシューティング」を確認してください。多くの場合、「設定」シートの入力漏れや、スプレッドシートIDの設定ミスが原因です。

6.6 内容を修正した後の再デプロイについて#

デプロイ後に、次のような変更を行った場合の対応は、それぞれ異なります。

変更した内容 再デプロイが必要か
「設定」「スタッフ」「賞一覧」シートの中身の変更 不要。スプレッドシートを保存すれば、次にアプリを開いたときから自動的に反映されます
Code.gs / index.html / style.html / script.html の中身の変更(プログラム自体の修正) 必要。再デプロイをしないと、修正内容が公開URLに反映されません

なぜこの違いがあるのかというと、Webアプリとして公開されているのは「デプロイした時点でのプログラムのコピー」だからです。スプレッドシートの中身は、公開後も毎回リアルタイムに読み込まれるため、変更がすぐに反映されます。一方、プログラム自体は、デプロイという「発行」の作業をしない限り、公開されているコピーが更新されません。

✅ プログラムファイルを修正した後、再デプロイする手順

  1. Apps Scriptエディタの「デプロイ」ボタンをクリックします
  2. 「デプロイを管理」をクリックします(メニューの中で「新しいデプロイ」のすぐ下にあります)

「デプロイ」メニューの中の「デプロイを管理」の項目にカーソルが重なった状態

  1. 既存のデプロイの右側にある、鉛筆マーク(編集アイコン)をクリックします

デプロイ管理画面。既存のデプロイの右端にある鉛筆アイコンにカーソルが重なった状態

  1. 「バージョン」のプルダウンで「新バージョン」を選びます

「バージョン」のプルダウンを開き、「新バージョン」が選択された状態

  1. 「デプロイ」ボタンをクリックします

これにより、同じURLのまま、中身だけが最新の内容に更新されます。

ヒント

このマニュアルの前提では、Code.gs などのプログラムファイルは基本的に変更しない運用を想定しています。日常的な運用(スタッフの入れ替え、賞の見直し、投票期間の更新など)は、すべてスプレッドシートの編集だけで完結し、再デプロイは不要です。

6.7 動作確認・テスト投票のやり方#

本番運用を始める前に、実際に一通りの操作を試して、正しく動作するか確認しておきましょう。

なぜテストが大切なのか#

設定ミスや入力漏れがあっても、画面が真っ白になったり、わかりにくいエラーが出たりするだけで、原因がすぐにはわからないことがあります。本番でスタッフが困らないように、必ず事前に管理者自身の手でテストを行いましょう。

テストの前に:投票期間を一時的にテスト用にする#

「設定」シートの投票期間が、まだ始まっていない未来の日付になっていると、テスト投票ができません。テストのために、一時的に投票期間を「今日を含む期間」に変更しておくと便利です。

✅ 手順

  1. 「設定」シートを開きます
  2. 「投票開始」の値を、今日より前の日付(例:昨日の日付)に一時的に変更します
  3. 「投票終了」の値を、今日より後の日付(例:来週の日付)に一時的に変更します
  4. テストが終わったら、本来予定していた投票期間の日付に戻すことを忘れないようにしてください

注意

このテスト期間中に行った投票データは、「投票結果」シートに実際のデータとして記録されます。テスト終了後は、下記の方法でテストデータを削除してから本番を開始してください。

テストの進め方(チェックリスト形式)#

図解提案(今後のイラスト化候補)

図解提案:以下のテストの流れを、フローチャート(開始→ホーム画面確認→投票→確認画面→送信→完了画面→投票済みチェック→データ削除→期間を戻す→終了)として図解すると、テスト全体の見通しがよくなります。

① ホーム画面の確認

✅ 手順

  1. 発行したURLを、スマートフォンとパソコンの両方のブラウザで開いてみます

📷 スクリーンショット準備中(画像No.78)

スマートフォンでホーム画面を開いた状態と、パソコンで開いた状態を並べたもの

  1. 次の点を確認します

  2. [ ] 4種類のホーム写真が正しく表示されているか

  3. [ ] 投票期間の案内が、正しい日付で表示されているか
  4. [ ] 回答者を選ぶ欄に、入力したスタッフの名前がすべて表示されているか
  5. [ ] 「投票を開始する」ボタンが表示されているか

② 投票の流れをテストする

✅ 手順

  1. ホーム画面で、テスト用に自分の名前(または架空の名前)を選び、「投票を開始する」をタップします
  2. 賞ごとの画面(STEP)が表示されます。次の点を確認します

  3. [ ] 賞の名前・説明文が正しく表示されているか

  4. [ ] 候補者のカードに、名前・職種アイコンが正しく表示されているか
  5. [ ] 名前検索、職種での絞り込みが正しく動作するか
  6. [ ] カードをタップすると選択状態になり、コメント欄が表示されるか
  7. [ ] 設定した最大人数を超えて選ぼうとすると、正しく制限されるか

📷 スクリーンショット準備中(画像No.79)

投票STEP画面。候補者カードが並び、そのうち1枚が選択状態(背景色が変化)になっている状態

  1. すべての賞のSTEPを進み、最後に確認画面が表示されることを確認します

  2. [ ] 選んだ内容とコメントが、正しく一覧表示されているか

  3. [ ] 「修正」ボタンで該当のSTEPに戻れるか

  4. 「送信する」をタップし、送信中画面を経て、完了画面が表示されることを確認します

  5. [ ] 完了画面に写真が表示されるか

  6. [ ] 「ホームへ戻る」でホーム画面に戻れるか

📷 スクリーンショット準備中(画像No.80)

投票完了画面。「THANK YOU」の文字と紙吹雪の演出、完了写真が表示された状態

③ 投票済みチェックの確認

✅ 手順

  1. ホーム画面に戻り、先ほどと同じ名前を選んで「投票を開始する」をタップします
  2. 「すでに投票済みです」といった趣旨のメッセージ画面が表示されれば、正しく動作しています

④ テスト投票のデータを削除する

✅ 手順

  1. スプレッドシートを開き、「投票結果」タブをクリックします(テスト投票を行うと、このシートが自動的に作成されています)

📷 スクリーンショット準備中(画像No.81)

自動作成された「投票結果」タブと、テストデータが記録されたシート

  1. 見出し行(1行目)を除いた、テストデータの行を選択します。行番号の部分をクリックし、複数行であれば Shift キーを押しながら最後の行番号をクリックすると、まとめて選択できます

📷 スクリーンショット準備中(画像No.82)

行番号の部分がクリックされ、2行目以降が青くハイライトされた状態

  1. 選択した行の上で右クリックし、「削除する行」を選びます

📷 スクリーンショット準備中(画像No.83)

選択した行の上で右クリックし、「削除する行」の項目にカーソルが重なった状態

  1. 見出し行だけが残った状態になっていることを確認します

注意

削除するのは「投票結果」シートのテストデータの行だけです。見出し行(1行目)は消さないように注意してください。

⑤ 管理者機能のテスト

✅ 手順

  1. ホーム画面の「🔑 管理者ログイン」をタップします
  2. 「設定」シートに入力した管理者パスワードを入力し、ログインします
  3. 管理者ダッシュボードが表示されることを確認します(詳しい見方は第8章で説明します)
  4. 「🔄 最新情報に更新」ボタンが動作するか確認します
  5. 「ログアウト」ボタンでログアウトできるか確認します

⑥ 投票期間の設定を本来の値に戻す

テストが終わったら、必ず変更した「投票開始」「投票終了」の値を、本来予定していた本番用の日付に戻してください。

注意

この作業を忘れると、意図しないタイミングでスタッフが投票できる状態(または、投票できない状態)になってしまいます。テストの最後に必ず行う作業として、付箋やメモに書いておくことをおすすめします。

6.8 本番運用前の最終チェックリスト#

これまでの章で準備してきた内容を、本番運用に切り替える前に、最終確認しましょう。

データ入力の確認#

  • [ ] 「スタッフ」シートのA列(名前)が、対象者全員分入力されている
  • [ ] 「スタッフ」シートのB列(有効フラグ)が正しく設定されている
  • [ ] 「賞一覧」シートの賞名・説明文が、本番用の内容になっている
  • [ ] 「設定」シートの投票期間・最大人数が、意図した内容になっている

セキュリティの確認#

  • [ ] 管理者パスワードが、本番用の推測されにくい値になっている
  • [ ] 管理者パスワードを知っている人が、必要な範囲に限定されている

画像の確認#

  • [ ] すべての画像が正しく表示されることを確認した
  • [ ] すべての画像が、Google Driveで「リンクを知っている全員」の共有設定になっている

試用版表示の扱いを判断する#

現在アップロードされているファイル一式には、画面上部と投票開始カードに「【試用版】こちらの投票内容は本番には反映されません」という注意書きが常に表示される作りになっています(script.htmltrial-top-notice / trial-vote-notice という部分、および style.html 側のスタイル指定によるものです)。

  • [ ] 本番運用にあたり、この試用版バナー表示を残すか外すかを判断した
  • [ ] 外すと判断した場合は、開発担当者(プログラムの改修ができる人)に、該当箇所の削除を依頼した

注意

この表示の削除には script.htmlstyle.html の中身の修正(コードの変更)が必要です。このマニュアルは「コードを変更しない」運用を前提としているため、削除作業自体は開発担当者に依頼することをおすすめします。

運用体制の確認#

  • [ ] 管理者(システムの設定・運用ができる人)が、複数人体制になっている
  • [ ] Googleアカウントの情報が、医院内で適切に共有・記録されている
  • [ ] スタッフへの案内文・QRコードの準備ができている(第7章)

6.9 この章のまとめ#

  • 「デプロイ」→「新しいデプロイ」→「ウェブアプリ」の順に選び、Webアプリとして公開した
  • 「アクセスできるユーザー」は、特別な事情がなければ「全員」を選ぶ
  • テスト投票を一通り行い、動作を確認したうえで、テストデータの削除と投票期間の戻し忘れに注意する
  • プログラムの中身を修正した場合のみ、再デプロイが必要になる(スプレッドシートの変更は不要)
  • 本番運用前には、データ入力・セキュリティ・画像・試用版表示・運用体制の観点でチェックリストを確認する

理解度チェック#

  • [ ] 「デプロイ」とは、どのような作業ですか?お店の例えを使って説明できますか?(6.1節)
  • [ ] スプレッドシートの中身を変更した場合と、プログラムファイルを変更した場合とで、再デプロイの要・不要はどう違いますか?(6.6節)
  • [ ] テスト投票の後、必ず行わなければならない2つの後片付け作業は何ですか?(6.7節)

次の第7章では、実際にスタッフへ案内し、日常的に運用していくフェーズについて説明します。