- 投稿日：2026/02/08
はじめに
リンク迷子をゼロにする。共有用Webアプリという選択
GASの勉強会を開こうと思ったとき、意外と困ったのが「資料配布」です。
リンク、資料、コード、プロンプト…渡したいものは増えるのに、途中で配ると進行が不安…。
かといって最初に全部渡すと、「今どれを使うんだっけ🤔？」となって探す時間が発生します。
そこで私は、配布をスムーズにするため、以下の点を工夫しながら
共有用WebアプリをGASで作ることにしました。
✅️ ステップごとに必要な情報だけを表示
✅️ コピーボタンで一発コピー
✅️ コードやプロンプトは編集できない設計
この記事では、このWebアプリを公開（デプロイ）してURLを発行し、誰でも開ける状態にするまでの手順を、初心者向けに順番どおり解説します。
まずは、あなたのURLを1つ作るところから始めましょう。
なぜ「スプシ」ではなくGASなのか
もちろん、配布だけならスプレッドシートやノーコードツールで十分です。
それでも今回は、GAS勉強会の題材として「実務の困りごとをGASで解決する例」を見せたかったので、GASで共有アプリを作ることにしました。
この記事でできるようになること
✅️ AIに「GASのWebアプリ用コード」を出してもらう
✅️ GASに貼り付けて、Webアプリとしてデプロイする
✅️ 発行されたURLを共有して、PC/スマホから動作確認する
事前に知っておく用語（最小限）
GAS（Google Apps Script）：Googleが提供するJavaScriptベースの開発環境。サーバーを用意せずにWebアプリ公開ができます。
Webアプリ（ウェブアプリ）：URLにアクセスすると画面（HTML）を表示できる仕組み。
デプロイ：作ったプログラムにURL（住所）を割り当てて公開すること。
ステップ1：GASのプロジェクトを作成する
まずは土台作りです。
手順
Googleドライブを開く
「新規」→「その他」→「Google Apps Script」を選択 （または script.google.com から新規作成でもOKです）
スクリプトを作成をクリック
左上の「無題のプロジェクト」をクリックして、プロジェクト名を付けます （例：勉強会リンク共有アプリ）
この時点で コード.gs（Code.gs） が開いています。
ここがサーバー側（GAS側）の処理になります。
ステップ2：AIにコード生成してもらう
ここが肝です。AIへの依頼でズレると、あとで詰まります。
※ここから作成するアプリは勉強用配布資料のためのアプリではなく、もっとシンプルなものにしました🙏
→実際に、私が実務で使うアプリです
指示のコツ
「目的」や「やってほしいこと」を明確にして、言語化すること
最初は簡単なものからでもいいので、チャレンジしてみること🐹
→AIに質問してもらう形にすると、AIが必要な情報を聞き出してくれます♪
💭 プロンプト例
「GASでWebアプリを作りたい」
「コピーボタンを付けたい」
「表示するテキストは編集できないようにしたい」
「足りない情報は質問して補ってください」
Webアプリは基本的にファイルが2つ必要になります。
・Code.gs（サーバー側）
・index.html（画面側）
ステップ3：コードをGASに貼り付ける
1) Code.gsを編集する
最初から入っている function myFunction() は消してOKです
AIに出力してもらったコードをコピペするだけ👍️
2) HTMLファイル（index.html）を作成する
左側の「ファイル」横の「＋」をクリック
「HTML」を選択
ファイル名を index にする（index.html になります）
→AIが生成したHTMLを貼り付ける
→保存
ステップ4：Webアプリとして公開（デプロイ）
ここが一番迷いやすいポイントです。
なぜデプロイが必要？
GASにコードを書いただけだと、アプリはまだ「自分のドライブの中」にあります。 デプロイすることで、初めてURL（住所）が発行され、ブラウザから開けるようになります。
デプロイ手順（初回）
右上の「デプロイ」→「新しいデプロイ」
歯車アイコン（種類）→「ウェブアプリ」
→設定を入力
✅️ 実行するユーザー：自分
✅️ アクセスできるユーザー：全員（または「Googleアカウントを持つ全員」）
勉強会の参加者にURLを配る前提なら、「全員」にしておくとスムーズです。
【最重要】「承認が必要です」が出たときの対処
初回デプロイでは、ほぼ確実に承認画面が出ます。これは正常です。
流れはだいたいこうです。
「アクセスを承認」
→詳細をクリック
→「（プロジェクト名）に移動（安全ではないページ）」をクリック
→「続行」
不安になりますが、「自分で作った（＝自分のアカウントで動かす）アプリ」なので、ここは通過でOKです。
ステップ5：動作確認とURL共有
デプロイが完了すると、https://script.google.com/.../exec の形式のURLが発行されます。
※上記のアプリ画面は最初のプロンプトと質問に３つ回答しただけですぐに作れました！
無事に思い通りのアプリが作れました🐹♪
動作確認のコツ
URLをコピーして、まずは自分のブラウザで開く
うまく表示されたら、そのURLを参加者に共有すればOKです。
→参加者に共有する前にシークレットモードで使えるか確認するとさらに👍️
よくある落とし穴：修正したのに反映されない
GASは「保存しただけ」では公開中のWebアプリに反映されません。
反映させる手順
「デプロイ」→「デプロイを管理」
✏️鉛筆アイコン（編集）
新バージョンを選択して更新
毎回「新しいデプロイ」を作るとURLが変わることがあるので、基本は「デプロイを管理」からの更新が安心です。
事例①：勉強会で配布する「共有用Webアプリ」という発想
私が初めて作ったのは、いわゆる「学習用アプリ」ではなく、運用を滑らかにするアプリでした。
冒頭で説明した勉強会のためのアプリのことです。
👤「GASってスプシ自動化だけじゃないんだ」
この視点があると、勉強会・講座・チーム運営での改善ネタが一気に増えます。
事例②：写真回収を爆速にした「ZIP化Webアプリ」という一手
このWebアプリは「学習用」ではなく、作業時間を削るための運用アプリです。GASでWebアプリにすると、Driveの写真回収がリンク1本＋1クリック”に寄ります。
何ができるアプリか
フォルダURLを貼って実行するだけで、サブフォルダを含むDrive内の写真を集めてZIP化します完了後に「直接DLリンク」が出るので、その場でローカル保存まで一気通貫で終わります用途に応じて、まとめて1ZIP／フォルダ単位で分割ZIPも選べます
どんな時に使うのか
クライアントから受け取ったGoogle ドライブに格納された無数の写真ファイル…
依頼された案件に使用するため、MacBook にダウンロードする必要がありました。ただ、フォルダがいくつにも分けられていてダウンロードするのに手間がかかっていました🌀
そんな手間を効率化してくれるアプリです
どこが便利か（効率化ポイント）
ダウンロード導線が短い：Driveで開いて選んで…を省いて、DLリンク一発で保存できる作業のブレが減る：手順が「URL貼る→押す」なので、毎回のやり方が安定します回収漏れが減る：サブフォルダを掘り忘れる事故を潰せます
おまけ：初心者が作りやすいWebアプリ例5個（ChatGPT案）
スプレッドシート不要（単体で完結）
・おみくじ
・URLエンコード/デコード
・パスワード生成
・カラーパレット
・クイズ
まとめ
AIにコードを書いてもらい、GASでWebアプリとして公開する流れは
この5ステップです。
1️⃣ GASプロジェクトを作る
2️⃣ AIに「doGet＋index.html構成」でコード生成してもらう
3️⃣ Code.gsとindex.htmlを貼り付ける
4️⃣ デプロイ（ウェブアプリ）で公開する
5️⃣ URLを開いて動作確認し、共有する
勉強会やチーム運用の中で「共有を滑らかにする仕組み」を作れると、進行がかなり楽になります。 GASは自分の運用を整える道具としても強いので、ぜひ小さなアプリから試してみてください。
おわりに：お願い🙏
✅️ この記事が少しでも役に立ったと感じたら、つぶやきでシェア、コメントやいいね、ブックマークをよろしくお願いします✨️次の記事を作る励みになります🐹✨️
✅️ スプレッドシートの相談に乗ります❗️ノウハウ図書館でいくつものテンプレートを配布していますが、
💭「読んだだけじゃわからない…🌀」
💭「自分が使っているものを見てもらいたい…」
という方はぜひスキルマーケットでご相談ください🙏
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
これからもスプシの関数や便利な情報について記事を投稿していき、少しでもスプシへのハードルを下げていきたいと思っています✨️
この記事がスプシのトリセツの目次（まとめ記事）になりますので
👇️こちらの記事のブックマークをおすすめします👍️
【保存版】スプシのトリセツ〜見て・触って・覚える！初心者のためのスプレッドシート練習帳付〜【目次】
随時、更新していきます🐹
最後まで読んでいただきありがとうございました♪
何かわからないことなどありましたらお気軽にコメントやDMください📥️✨️
