GASで作業依頼管理Webアプリを作る｜完成画面とシリーズ全体構成

この記事は、「実際に動かして学ぶGAS業務Webアプリ開発」第2シリーズの概要です。Google Apps Script（GAS）とGoogleスプレッドシートを使って、作業依頼管理Webアプリを一から作る全15回の内容を紹介します。

完成イメージ、作るアプリの機能、対象読者、必要なもの、そしてシリーズ全体の目次をまとめています。

1. このシリーズで作るもの

このシリーズでは、GASとスプレッドシートを使った「作業依頼管理Webアプリ」を作成します。

主な機能は以下の通りです。

• 作業依頼の新規登録
• 登録済みデータの一覧表示
• 顧客コード・日付・ステータス・キーワードによる複数条件検索
• 詳細画面からの編集・ステータス変更・論理削除
• 重複しない受付番号の自動採番
• 受付票PDFの作成とGoogleドライブ保存
• 登録完了メールの自動送信（PDF添付、二重送信防止）
• 操作ログ・エラーログの記録
• エラー発生時のメール通知
• Webアプリとしての公開
• ソースコードの配布・管理（ZIP、clasp、GitHub）

2. 完成イメージ

Webアプリとして公開すると、スマートフォンでもPCでも操作できる画面が表示されます。

以下は、シリーズで作る画面の構成を伝えるために生成したモックアップです。完成版コードを実行して撮影した画面ではなく、項目の配置や表示内容は実際のアプリと異なる場合があります。動作確認の結果を示すものではありません。

画面一覧

3. 対象読者

このシリーズは、以下の方を想定しています。

• GASを使ったWebアプリ開発に興味がある方
• スプレッドシートを使った業務アプリを作りたい方
• プログラミングの基礎はあるが、GASでの画面付きアプリは初めての方
• 社内ツールを自分で作って運用したい方

JavaScriptの基礎的な知識（変数、関数、if文、for文など）があると、スムーズに学べます。

4. 必要なもの

• Googleアカウント（無料）
• Googleスプレッドシート
• Google Apps Script
• インターネット接続環境

特別なソフトウェアのインストールは不要です。すべてブラウザ上で完結します。

5. シリーズの進め方

各記事は、以下の構成で進みます。

1. 今回作るもの
2. 完成イメージ
3. 前回までの状態
4. 使用するファイル
5. 設計方針
6. 貼り付けるコード
7. コードの解説
8. 導入手順
9. 動作確認
10. よくあるエラー
11. starter.zipの案内
12. complete.zipの案内
13. 次回追加する機能

各記事には、starter.zip（開始時点）とcomplete.zip（完成時点）を同梱しています。記事を読みながら、自分のApps Scriptプロジェクトにファイルを貼り付けて進めることができます。

6. シリーズ目次

7. 完成版ファイルについて

シリーズ最終完成版のファイルは final.zip として用意しています。ダウンロードリンクは、配布準備が整った段階で追加します。

含まれるファイル:

• Code.gs
• index.html
• list.html
• detail.html
• style.html
• script.html
• README.txt
• DEPLOY.md
• README.md
• .clasp.json.example
• DISTRIBUTION.md

8. 注意事項

• 記事中のコードは学習用です。本番運用する際は、セキュリティと権限を十分に確認してください。
• スプレッドシートID、フォルダID、メールアドレスなどの機密情報は、公開場所に記載しないでください。
• メール送信機能を試す際は、必ずテスト用の宛先を設定し、誤送信に注意してください。

9. 次回から始める

次回の第1回から、実際にスプレッドシートとApps Scriptを準備しながらアプリを作っていきます。

第1回の記事公開後、ここに移動リンクを追加します。

参考リンク

• Google Apps Script 公式ドキュメント
• Google Workspace ラーニングセンター