スプレッドシートの横に、自分用アプリが作れる！Codex×GASの使い方
最近、クライアントさん向けに経理のツールを作って、改めて「GASって便利だなあ」と感じました。
スプレッドシートって、セルに入力したり、関数で集計したりするだけじゃないんです。
右側に入力画面を出したり、ボタンを押して処理したり。いつもの表に、小さなアプリを付けられるんですよね。
9月22日の朝ライブでは、その場でCodexにお願いして作ってみました。
最初はアンケートのつもりだったのに、途中で「やっぱり占いがいい」と変更(´ ˘ `)
この記事では、ライブで実際に入力したプロンプトと、YouTubeの画面キャプチャを使って、その流れを振り返ります。
まずは「横から出てくるアンケート」をお願い
GASはGoogle Apps Scriptの略で、Googleのサービスを動かしたり、作業を自動化したりできる仕組みです。
今回使ったのは、スプレッドシートにひもづけて、右側に操作画面を出す方法。
ライブでは、スプレッドシートを開いて、Codexに画面とURLを渡しました。
最初の依頼は、こんな短い文章です。
GASを使ったデモアプリを作りたい
画面の横からこんな感じで出てくるアンケートフォームとか？
サクッとできるやつにして
[スプレッドシートのURL]
※ライブの入力文を転記しています。URLだけ、自分のシートに置き換えられる表記にしました。
YouTubeの1:18:18付近。依頼文の部分を切り出しています。
この時点で、私は質問の数や保存項目を細かく決めていませんでした。
Codexからは「右側に開く、満足度とひとことを入力するアンケート」という返事が来ています。
作っている途中で「やっぱり占いがいい」
そこから、ライブ中に方向転換しました。
追加したプロンプトはこちらです。
やっぱり占いがいい
2個ぐらい質問されたら、占い結果でるやつ
YouTubeの1:18:58付近。アンケートを作るという返事のあとに、占いへの変更を伝えました。
さらに、右側に出したかったので「右側に開くやつね！」とも伝えています。
ライブの環境では、Codexがブラウザを操作して、スプレッドシートの「拡張機能」からApps Scriptの画面を開き、コードを入れるところまで進めてくれました。
できあがったのは「2問で今日の運勢」というミニ占い。
「今の気分は？」「今日はどう過ごしたい？」に答えると、運勢とラッキーカラー、ひとことが出てきます。
YouTubeの1:26:33付近。右側に占いが開き、「大吉」「コーラルピンク」が表示されています。
このときは「わくわくしてる」「誰かと楽しく話す」を選んで、大吉になりました。
何もなかったシートの横に、質問とボタンと結果が出てくるだけで、ちゃんとアプリになった感じがしますね：）
使ってみたら、幅と履歴も欲しくなった
占いが動いたところで、次に気になったのが画面の広さです。
右側の細長い画面を、もう少し広くしたい。
それから、過去にどんな回答をして、どんな結果が出たかも残しておきたくなりました。
そこで、続けてこう頼みました。
横から出てくる占いは、横幅を大きくしたり小さくしたり変更できるようにして欲しい。
占い結果はスプレッドシートにためていきたい。
過去にどんな回答してどんな結果が出たのか知りたい
YouTubeの1:27:28付近。ライブ中に送信した追加の依頼です。
「日時はこの形式で」「列はこの順番で」と全部を指定したわけではありません。
まずは、自分が使ってみて欲しくなったことを、そのまま伝えています。
横幅は、別の小窓で変えられる形に
ここでCodexが確認してくれたのが、GASの右サイドバーの幅。
標準のサイドバーは300px固定なので、そのまま横に伸ばす方法にはできませんでした。
これはGoogleの公式仕様にも記載されています。
そこで出てきたのが、右側に「広く開く」ボタンを付けて、幅を変えられる小窓に切り替える案。
私は、その提案を選んで、こう返しました。
右サイドバー＋幅を変えられる小窓を追加
YouTubeの1:29:28付近。Codexの説明を受けて、表示方法を決めた場面です。
最初から「ダイアログで作って」と言わなくても、「広くしたい」という希望を伝えると、できる方法を提案してくれるんですね。
占いの結果が、シートに残るようになった
履歴も追加されました。
「占い履歴」というシートに、日時、選んだ回答、運勢、ひとこと、アドバイスが並んでいます。
YouTubeの1:34:28付近。左側に履歴の1行目、右側に占いの質問画面が見えます。
続けて「広く開く」を押すと、シートの上に占いの小窓が出てきました。
上のスライダーで横幅を変えられて、「右側に戻す」ボタンも付いています。
YouTubeの1:35:23付近。広い小窓に「小吉」「スカイブルー」が表示され、後ろのシートにも履歴が増えています。
このときは「のんびりしたい」「新しいことに挑戦」を選びました。
結果が画面に出るだけでなく、スプレッドシートにも残る。
ここまでできると、占い以外にも使えそうだなと思いませんか？
私がGASを便利だなと思うところ
今回、占いで試したのは、質問に答える→結果を見せる→シートに残すという流れです。
私が作った経理ツールも、スプレッドシートの横にファイルをアップロードする画面を付け、読み取った内容を一覧にして、選んだ行の資料を確認するようなものでした。
クライアントさんの実データはお見せできませんが、ライブではその使い方もお話ししています。
私は以前、作ったプログラムをサーバーに置く作業が苦手でした。
エラーが出ると、どこをどう直せばいいのかわからなくて。
その頃は、スプレッドシートと直接関係のないフォームまでGASで作っていたくらいです。
今回のようにシートの中で開く画面なら、別のWebサーバーを自分で用意せずに試せます。
保存されたデータも表で見えるので、あとから自分で確認したり、整理したりしやすいんですよね。
ライブの後半では、コードにコメントを付けてもらって、あとから人が見ても処理がわかるようにする話もしました。
AIに作ってもらったものを、自分でも少しずつ理解して使えるといいなと思っています。
まず小さく頼んで、触りながら足していく
今回の流れは、こんな感じでした。
- 横から出てくるアンケートをお願いする
- 「やっぱり占いがいい」と変更する
- 実際に2問に答えて、結果を出してみる
- 使ってみて、幅の変更と履歴保存を追加する
- 小窓とシートの履歴を確認する
最初から長い仕様書を用意したわけではなく、触ってみて「これも欲しい」と伝えていきました。
記事中のプロンプトも、そのとき実際に入力した短い文です。
なお、今回の直接操作は、Googleへのログインや編集権限、Codexのブラウザ連携がある環境で行っています。
同じように試すときは、練習用の空のスプレッドシートを用意すると進めやすいと思います。
まずは、占いでもアンケートでも、自分が押してみたいボタンをひとつ。
いつものスプレッドシートで、小さなアプリを作ってみてくださいね(´ ˘ `)
朝ライブで実際の流れを見る
- 1:08:45〜 GASを使ってみた話
- 1:16:10〜 Codexへの依頼を始める
- 1:18:31〜 アンケートから占いに変更
- 1:26:42〜 幅の変更と履歴保存を追加
- 1:34:16〜 履歴と広い画面を確認
出典・画像について
本文の操作画面7枚は、すべて上記YouTubeライブから切り出したものです。読みやすいように必要な部分をトリミングしています。
プロンプトは動画内の入力欄・送信済みメッセージを確認して転記し、最初のスプレッドシートURLだけ置き換えています。
著者
neco. 🐈⬛
AI活用コンサル／ITエンジニア。
「AIを“知ってる”から“使える”へ」をテーマに、仕事や暮らしで役立つAIの使い方を発信しています。
プロンプトや活用記事はこちら → ai-neco