第5章　Apps Script の設定#

この章では、システムの「頭脳」にあたるプログラム部分（Google Apps Script）を、第4章で作成したスプレッドシートに紐づけて用意します。作業の中心は、あらかじめ用意された4つのファイルの中身を「コピーして貼り付ける」ことと、スプレッドシートIDの設定です。プログラムを自分で書く必要はありません。

5.1 Apps Scriptとは何をしているのか#

第1章でも触れましたが、あらためてApps Scriptの役割を整理しておきましょう。Apps Scriptは、次のような仕事をしています。

1. スタッフがスマートフォンでURLを開いたときに、「スタッフ」「賞一覧」「設定」シートの中身を読み込む
2. 読み込んだ内容をもとに、ホーム画面・投票画面などの見た目（HTML。ブラウザが画面を組み立てるための設計図のような言語です）を組み立てて、ブラウザに送る
3. スタッフが投票を送信したら、その内容を「投票結果」シートに書き込む
4. 管理者がログインしたら、集計を行ってダッシュボードの内容を作る

つまりApps Scriptは、スプレッドシートという「台帳」と、スタッフが操作する「画面」との間を取り持つ、通訳のような役割を担っています。この章では、その通訳役のプログラムを設置していきます。

5.2 用意するもの#

この章を始める前に、次の4つのファイルの中身（テキスト）が手元にあることを確認してください（入手方法は第2章2.2節を参照してください）。

• Code.gs
• index.html
• style.html
• script.html

これらは院内表彰システムのプログラム一式です。テキストファイルやメールなどで届いている場合は、開いてすぐにコピーできる状態にしておきましょう。

5.3 スプレッドシートからApps Scriptエディタを開く#

✅ 手順

1. 第4章で作成したスプレッドシートを開きます
2. 画面上部のメニューから「拡張機能」をクリックします
3. 位置の目安：画面上部、メニューバーの中に「ファイル」「編集」「表示」「挿入」「表示形式」「データ」「ツール」と並んでおり、その一番右に「拡張機能」があります

1. メニューが開くので、「Apps Script」をクリックします（メニューの一番上に表示されます）

1. 新しいタブ（またはウィンドウ）が開き、「Apps Script」の編集画面が表示されます。これを「Apps Scriptエディタ」と呼びます

5.4 プロジェクトに名前をつける#

✅ 手順

1. Apps Scriptエディタの左上に表示されている「無題のプロジェクト」という文字をクリックします（画面左上、Apps Scriptのロゴのすぐ右です）

1. 名前を入力する小さな画面が表示されるので、「院内表彰システム」のようにわかりやすい名前を入力します
2. 「名前を変更」ボタンをクリックして確定します

5.5 Code.gs の中身を貼り付ける#

Apps Scriptエディタを開くと、最初から Code.gs という名前のファイルが1つ用意されています。この中身をまるごと入れ替えます。

✅ 手順

1. 画面左側のファイル一覧から Code.gs をクリックして選択します（左側の細長いパネルの中、「ファイル」という見出しの下に表示されています）

1. 右側の広い編集エリアに、最初から function myFunction() { のようなサンプルの文字が入っています。この部分をすべて選択します
2. 編集エリアの中をクリックしてから、キーボードで Ctrl+A（Macの場合は command+A）を押すと、すべての文字が選択されます

1. キーボードで Delete（または Backspace）を押して、中身をすべて消します
2. 用意されている Code.gs の中身（テキスト）をすべてコピーします
3. Apps Scriptエディタの編集エリアをクリックし、Ctrl+V（Macの場合は command+V）を押して貼り付けます

1. 貼り付けた内容が、正しく最後まで入っていることを確認します
2. 目安として、Code.gs の一番最後には testConnection や formatExportTitle_ のような、いくつもの機能（関数）が並んでいます。貼り付け後、編集エリアを下までスクロールし、途中で文章が途切れていないか確認してください

5.6 index.html／style.html／script.html を新規追加する#

Code.gs 以外の3つのファイルは、Apps Scriptエディタに新しく作成する必要があります。

✅ 手順（index ファイルの作成）

1. 画面左側のファイル一覧の右上あたりにある「＋（ファイルを追加）」のアイコンをクリックします（「ファイル」という見出しのすぐ右にある、小さな「＋」マークです）

1. メニューが開くので「HTML」を選択します（「スクリプト」「HTML」の2つの選択肢のうち、下側です）

1. ファイル名を入力する欄が表示されます。index と入力し、Enterキーを押します
2. ⚠️ ファイル名には .html を付けないでください。「index」とだけ入力すれば、Apps Scriptが自動的にHTMLファイルとして扱います

1. index という名前の新しいファイルが作成され、編集エリアに切り替わります。最初から入っているサンプルの中身を、Code.gs のときと同じように Ctrl+A → Delete ですべて消します
2. 用意されている index.html の中身をコピーし、編集エリアに Ctrl+V で貼り付けます

✅ 同じ手順を、あと2回繰り返します

1. 「＋（ファイルを追加）」→「HTML」→ファイル名に style と入力 → 中身を style.html の内容に入れ替える
2. 「＋（ファイルを追加）」→「HTML」→ファイル名に script と入力 → 中身を script.html の内容に入れ替える

すべて終わると、画面左側のファイル一覧に、次の4つが並んでいるはずです。

Code.gs
index
style
script

5.7 保存する#

✅ 手順

1. Apps Scriptエディタの上部にある、フロッピーディスクのアイコン（保存アイコン）をクリックします。または、キーボードで Ctrl+S（Macの場合は command+S）を押します
2. 位置の目安：画面上部、プロジェクト名のすぐ下にあるツールバーの、一番左のアイコンです

1. 画面上部に「プロジェクトを保存しました」のような表示が一瞬出れば保存完了です

5.8 スプレッドシートIDをコードに設定する#

ここまでで4つのファイルの貼り付けが終わりました。次に、このプログラムに「どのスプレッドシートを読み書きするか」を教えてあげる作業を行います。

スプレッドシートIDをもう一度確認する#

第4章4.4節で確認したスプレッドシートIDを、あらためて正確に取得します。

✅ 手順

1. スプレッドシートを開き、ブラウザの一番上、アドレス欄に表示されているURLをクリックして、全体を選択します

1. URLは次のような形になっています

https://docs.google.com/spreadsheets/d/1AbCdEfGhIjKlMnOpQrStUvWxYz1234567890/edit#gid=0

1. /d/ の後ろから、次の /edit の直前までの文字列だけが「スプレッドシートID」です
2. この部分だけを、マウスでドラッグして選択し、Ctrl+C（Macの場合は command+C）でコピーします

Code.gs を開いて書き換える#

✅ 手順

1. スプレッドシートのメニューから「拡張機能」→「Apps Script」を選び、Apps Scriptエディタを開きます
2. 画面左側のファイル一覧から Code.gs をクリックします
3. 編集エリアの上のほう（1〜10行目あたり）に、次のような1行があります

const SPREADSHEET_ID = "ここに自分のスプレッドシートIDを入れる";

1. ダブルクォート（"）で囲まれた部分（ここに自分のスプレッドシートIDを入れる の文字）だけを、マウスでドラッグして選択します
2. コツ：ダブルクォートのすぐ内側をクリックし、そのままダブルクォートのもう片方の内側までドラッグすると、"自体を巻き込まずに選択できます

1. キーボードの Delete キーを押して、選択した文字を削除します
2. コピーしたスプレッドシートIDを、Ctrl+V（Macの場合は command+V）で貼り付けます
3. 貼り付けた後の1行は、次のようになっているはずです（IDの部分はご自身のものに置き換わります）

const SPREADSHEET_ID = "1AbCdEfGhIjKlMnOpQrStUvWxYz1234567890";

保存する#

Apps Scriptエディタ上部の保存アイコンをクリックするか、Ctrl+S（Macの場合は command+S）で保存します。

5.9 正しく設定できたか確認する（テスト実行）#

Code.gs には、設定が正しいかどうかを確認できる testConnection という機能があらかじめ用意されています。この機能を使うと、実際にWebアプリとして公開する前に、設定の正しさを確認できます。

✅ 手順

1. Apps Scriptエディタの上部にある、実行する関数を選ぶプルダウンメニュー（「myFunction」のように表示されている部分）をクリックします
2. 位置の目安：ツールバーの中央あたり、「デプロイ」ボタンの左側にあります

1. 一覧から testConnection を選択します

1. プルダウンの右にある「実行」ボタン（再生マークの三角アイコン）をクリックします

1. 初めて実行する場合、「承認が必要です」という画面が表示されます。これは、「このプログラムが、あなたに代わってスプレッドシートやDriveを操作してよいか」の許可を求める、Googleの標準的な確認画面です。次のように進めます

2. 「権限を確認」ボタンをクリックします

3. Googleアカウントを選ぶ画面が出るので、第2章で準備したアカウントを選びます
4. 「このアプリは Google で確認されていません」という注意画面が表示されることがあります。これはGoogleの標準的な確認画面で、自分自身が作成したプログラムであれば問題ありません。画面左下の「詳細」をクリックし、表示される「（プロジェクト名）に移動」をクリックします
5. 「〇〇が次の許可をリクエストしています」という画面で、内容を確認し「許可」をクリックします

1. 実行が終わると、画面下部の「実行ログ」にメッセージが表示されます
2. 🔍 用語ミニ解説：実行ログ プログラムを実行した結果や、途中経過のメッセージが記録される場所です。エラーが起きた場合も、ここに赤い文字で内容が表示されます

1. 「設定」「スタッフ」「賞一覧」シートの入力がすでに済んでいれば、投票期間・最大人数・スタッフ数・賞数などの情報が実行ログに表示されます。エラーが出た場合は、その内容をヒントにシートの入力内容や SPREADSHEET_ID の設定を見直してください

5.10 うまく貼り付けられないときは#

❓ コピーしたはずなのに、貼り付けても何も反応がない

• 編集エリアの中を一度クリックしてカーソルを表示させてから、もう一度貼り付け操作を行ってください
• ブラウザの「貼り付けの許可」を確認するポップアップが出た場合は、「許可」をクリックしてください

❓ 貼り付けた文字が一部おかしくなっている（文字化けのように見える）

• コピー元のファイルを開き直し、最初から最後まで正しく選択できているか確認してから、もう一度コピー＆貼り付けを行ってください
• 特に、コピー元がメールの本文などの場合、一部の記号が正しくコピーされないことがあります。可能であればテキストファイルから直接コピーすることをおすすめします

❓ 複数人で同時にApps Scriptエディタを編集してもよいか

• 技術的には可能ですが、同じファイルを同時に編集すると、お互いの変更が競合し、意図しない上書きが起きることがあります。プログラムファイルの編集（第5〜6章の作業）は、基本的に1人の担当者が行うことをおすすめします。日常的な運用（スプレッドシートの編集）は、複数人で分担しても問題ありません。

5.11 この章のまとめ#

• Apps Scriptは、スプレッドシートと投票画面の間を取り持つ「通訳」のような役割を果たしている
• スプレッドシートの「拡張機能」→「Apps Script」からApps Scriptエディタを開いた
• Code.gs の中身を、用意されたプログラムの内容に入れ替えた
• index・style・script という名前（拡張子なし）で新規HTMLファイルを3つ作成し、それぞれの中身を貼り付けた
• Code.gs の SPREADSHEET_ID に、自分のスプレッドシートIDを設定した
• testConnection を実行し、初回の権限承認を行いながら、設定が正しく反映されているかを確認した

理解度チェック#

• [ ] Apps Scriptは、どんな役割を果たしていますか？（5.1節）
• [ ] index・style・script というファイル名にする理由を説明できますか？（5.6節）
• [ ] testConnection を実行する目的は何ですか？（5.9節）

次の第6章では、いよいよこのシステムをWebアプリとして公開（デプロイ）します。