1. はじめに
Google Apps Script (GAS) を利用して、LT会の発表順を決定するWebアプリの作成方法を２回に分けて説明します。
ChatGPT にプロンプトを入力してソースコードを生成、スプレッドシートと連携、発表者の名前や発表時間を入力することで、発表順を決定できるアプリを作ることができます。
- 第1回：作るもの ←今回の記事はこちら
- LT会の発表順を決定するWebアプリ
- 第2回：作り方
- Google Apps Script (GAS) を利用
- ChatGPT にプロンプトを入力して、GAS のソースコードを生成
2. 作ろうと思ったきっかけ
- LT会では発表順の決定や時間配分の調整が必要
↓ - 発表者や発表時間の情報を入力後、自動で発表順が決まる仕組みがあれば便利
↓ - ChatGPTとGASでWEBアプリを作ろう！
3. 実現したい事
- 開始時間
- 開始時間は柔軟に変更できるようにしたい
- 氏名入力
- 予め発表が決まっている方はプルダウンで選択したい
- LT会当日に発表する事が決まった方は直接入力したい
- 発表時間
- デフォルトは【5分】に設定したい
- 各発表の間に【1分】の交代時間を考慮したい
- 発表順の固定
- 発表の「最初」と「最後」を希望する方がいる場合、固定したい
- 発表順の表示
- 順番・発表者・時間を見やすい形で表示したい
4. アプリの説明
4-1. 画面の構成
- TOP画面
- 氏名や発表時間を入力する画面
- 氏名や発表時間を入力する画面
- 発表順のポップアップ画面
- 発表順をテーブル形式で表示
- 発表順をテーブル形式で表示
4-2. 機能概要
- 開始時間
- デフォルト時間を【20:00】に設定
- 直接入力で開始時間を変更可能
- 氏名入力
- 直接入力＋候補プルダウン形式（スプレッドシートのデータを利用）
- 入力欄追加ボタンを用意して、最大【20名】まで対応可能
- 入力候補は、他の入力欄で既に選択されている名前は表示しない
- 発表時間
- 初期値は【5分】に設定
- 各発表の間に【1分】の交代時間を加算して、次の開始時間を計算
- 発表順の固定
- 「最初」「最後」のチェックボックスで発表順を固定可能
- 同じ人に両方チェックはできないように制御
- 発表順の表示
- 順番・発表者・時間をテーブル形式で表示
- 発表順はポップアップウィンドウで表示し、マウスでドラッグ移動可能
4-3. プロンプト例とソース構成
-
ChatGPT に入力して、ソースコードを生成
-
以下、プロンプト例
GASでWEBアプリを作りたい
【作るアプリ】
・LT会の発表順をシャッフルして決定し、開始時間から各発表のスケジュールを表示するアプリ
【作る機能】
・開始時間
- デフォルト時間を【20:00】に設定
- 直接入力で開始時間を変更可能
・氏名入力欄
- プルダウンと直接入力の併用
- スプレッドシートの「Sheet1」B列2行目以降を使用
・入力欄追加
- 最大【20名】まで入力可能
・発表時間
- 初期値は【5分】に設定
- 各発表間に【1分】の隙間を設定
・チェックボックス
- 「最初」「最後」チェックボックスで発表順の先頭・末尾に固定可能
- 同じ人に両方は選択不可
・発表スケジュール
- テーブル形式でポップアップ表示（順番、発表者、時間：比率1:3:4）
- ドラッグ移動可能
【ソース構成】
・index.html
- ユーザーインターフェース
- 入力欄、実行ボタン、ポップアップ
・style.css
- デザイン
- レイアウト、ポップアップ、ドラッグ移動のスタイル
・script.js
- クライアント
- 入力欄追加、スケジュール計算、ドラッグ機能
・code.gs
- バックエンド
・スプレッドシート
- 氏名候補を配置
- "Sheet1" のB列2行目以降
以上で作ったもの説明を終わります。
作り方は第2回で説明します。
最後まで読んでいただき、ありがとうございました！