きっかけは「また手作業でやるの？」という小さなストレス
こんにちは、オモチです。岡山でふつうに会社員をやりながら、週末は息子の少年野球にも関わっています。その中で地味に面倒だったのが、試合ごとの「審判の割り当て作業」です。
Excelで名簿を管理して、日程を確認して、ダブりがないようにチェックして…。毎回担当者がひとりで抱えていて、「もうちょっとどうにかならないかな」とずっと思っていました。
そこで2026年の春、思い切って自分でWebアプリを作ってみることにしました。使ったのは Google Apps Script（GAS） と Netlify です。どちらも無料から使えるので、費用はほぼゼロ。今回はその構成や作り方の流れをざっくり紹介します。
作ったアプリの概要
シンプルに言うと、こういうことができるアプリです。
- 審判員の名前・連絡先をスプレッドシートで管理
- 試合日程と審判の割り当てを自動で組む（ランダム＋重複チェック）
- 割り当て結果をフロント画面（Netlify）で確認できる
- 担当者への通知メールをGASで自動送信
大げさなシステムじゃなくて、あくまで「担当者の手作業を減らす」ことが目的です。規模も小さい１チーム用レベルなので、これくらいで十分でした。
なぜGASとNetlifyの組み合わせにしたのか
GASを選んだ理由
Googleスプレッドシートがすでにデータ管理に使われていたので、GASとの相性が抜群でした。スプレッドシートのデータを読み書きするのが簡単で、JavaScriptに近い書き方ができるのも取っつきやすかったです。
さらに、GASはWebアプリとしてデプロイするとAPIのエンドポイントを発行できます。これをフロントエンドから叩く形にすれば、データのやり取りができます。サーバーを立てなくていいのは本当に楽でした。
Netlifyを選んだ理由
フロントエンドのホスティングにはNetlifyを使いました。HTMLとJavaScriptのファイルをGitHubに置いて、Netlifyと連携するだけで公開できます。無料プランで十分動くし、独自ドメインも使えます。
「サーバーの管理とか全然わからない」という方でも、この2つの組み合わせなら割とすんなり動くものが作れると思います。
技術的な構成をざっくり説明
バックエンド（GAS側）
GASでやっていることは大きく3つです。
- スプレッドシートの読み取り・書き込み：審判員データと日程データを管理
- 割り当てロジックの実行：条件（直近の試合から◯日以上空ける、など）をチェックしながらランダム割り当て
- メール送信：GmailServiceを使って担当者に割り当て結果を通知
GASのWebアプリ機能を使って、外部からHTTPリクエストを受け付けられるようにしています。doGet関数とdoPost関数を使うあの仕組みです。セキュリティ面は最低限のトークン認証を入れました。
フロントエンド（Netlify側）
こちらは本当にシンプルで、HTML＋Vanilla JSだけです。フレームワークは使っていません。画面としては2つだけ。
- 割り当て一覧を見る画面
- 管理者が割り当てを実行するボタンがある管理画面
ボタンを押すとNetlifyのフロントからGASのエンドポイントにfetch関数でリクエストを飛ばして、結果を受け取って表示する、という流れです。
実際に作ってみてハマったこと
スムーズに全部できたかというと、もちろんそんなことはありませんでした。特に困ったのが CORSエラー です。NetlifyのフロントからGASのAPIを叩くとき、ブラウザのCORS制限に引っかかって最初まったく動きませんでした。
対策としては、GASのdoPost/doGetのレスポンスにCORSヘッダーを付けることで解決しました。具体的にはContentService.createTextOutput()に.setMimeType(ContentService.MimeType.JSON)を使う方法です。これはGASのCORS対応として割と定番の対処法みたいです。
あとは、GASの実行権限まわりで少し迷いました。「自分として実行」か「アクセスしたユーザーとして実行」かを間違えると、スプレッドシートへのアクセスがうまくいきません。外部からのAPI利用なら「自分として実行＋全員にアクセス許可」の設定が必要でした。
実際に使ってみた反応
作ったものを担当者に渡してみたところ、「割り当て作業が30分から5分くらいに短縮できた」と言ってもらえました。小さな変化かもしれませんが、毎回の手間が減ったのは確かで、個人的にはかなり達成感がありました。
完璧ではなくて、たとえば「特定の人はこの試合には来れない」みたいな例外ケースの処理はまだ手動で直しています。でも「大部分の作業を自動化する」という最初の目的は達成できたかなと思っています。
GASとNetlifyは副業的な活用もできる
今回は野球活動のためにタダで作りましたが、こういうツールを「受託で作る」という形で副業にもなり得ます。実際、地域の団体やスポーツクラブ、小規模な事業者さんは「Excelで管理していて手作業が多い」という悩みを持っているところが結構あります。
GASとNetlifyの組み合わせなら、ランニングコストがほぼゼロで動くものを作れるので、「安く作りたい」というニーズに応えやすいです。最初は月3〜10万円スタートくらいで受けながらノウハウを積み、慣れてくれば月20〜30万円も目指せる分野だと感じています。
特別なインフラ知識がなくても始めやすいのがGAS＋Netlify構成の強みです。プログラミング学習の延長線上で実際に使えるものを作りながら、少しずつ収入につなげていくのは現実的な選択肢だと思います。
まとめ
今回作った審判割り当てアプリのポイントをまとめると、こんな感じです。
- GASでバックエンド（データ管理＋API）を担当
- NetlifyでフロントのホスティングをHTTPS無料公開
- コストはほぼゼロ、サーバー管理も不要
- CORSの設定とGASの実行権限まわりには注意が必要
「プログラミングを勉強しているけど、まだ実案件には手が届かない」という方でも、こういう身近な課題を解決するツールを作ることが、技術力を上げる一番の近道だと感じています。小さなものでいいので、まず動くものを作ってみるのがおすすめです。
何か質問やコメントがあれば、お気軽にどうぞ。
実は野球大好きなオモチでした。
コメントを残す