¥ GASプログラミング講座GAS PROGRAMMING｜富山情報ビジネス専門学校
初心者向け・貼り付けコード付き

補助金を探すアプリを
GASで作る

今あるhojokinアプリの見た目を生かしながら、PHPやNode.jsを使わないGoogle Apps Script版へ移植します。

作り方を見る コードをコピーする
富山情報ビジネス専門学校｜実践ガイド
⌕　補助金・助成金を検索 ⌕
▤ものづくり補助金›
♧IT導入補助金›
♟事業再構築補助金›
▥地方創生推進交付金›
1高校生にもやさしい言葉の意味から説明
2既存デザインを再利用HTMLとCSSはほぼそのまま
3コードをすぐコピー4ファイルをワンクリック
STEP 01 / GAS PROGRAMMING

GASプログラミングの講座

本ページは、GASプログラミング（Google Apps Script）をやさしく学べる、富山情報ビジネス専門学校（浦山学園・BIT）の実践講座です。まずは下の動画で、GASプログラミングの全体像をつかみましょう。GASプログラミングは、環境構築やAPIキーなしでブラウザだけで始められるため、プログラミング学習の第一歩にも最適です。

動画：GASプログラミングの講座（富山情報ビジネス専門学校）

GASプログラミングのよくある質問

GASプログラミングとは何ですか？

GASプログラミング（Google Apps Script）は、Googleが提供する無料の開発環境で、JavaScriptベースの言語を使ってWebアプリやツールを作れるプログラミングです。サーバーの用意やAPIキーなしで始められ、初心者のプログラミング学習にも向いています。

GASプログラミングは初心者でもできますか？

はい。GASプログラミングはブラウザだけで始められ、環境構築が不要です。本講座では、貼り付け用のコードと動画で、初心者でも実際に動くWebアプリを作れます。

GASプログラミングでは何が作れますか？

GASプログラミングでは、Webアプリ、外部API連携ツール、スプレッドシートの自動化、フォーム処理などが作れます。本ページでは、Jグランツの補助金検索Webアプリづくりを題材にGASプログラミングを学びます。

作業前に知っておくこと｜APIキーは必要ありません

Jグランツの補助金情報取得APIは、利用申請と認証が不要です。ただし公式の利用概要では、呼び出しは1秒間に10回までです。検索ボタンを普通に押す使い方なら問題になりにくいですが、連打や自動連続検索は避けましょう。

一覧検索と詳細取得ではURLが違います。

一覧: https://api.jgrants-portal.go.jp/exp/v1/public/subsidies
詳細: https://api.jgrants-portal.go.jp/exp/v2/public/subsidies/id/{補助金ID}

詳細のV2では、地域や募集期間が workflow という配列の中に入る場合があります。このページのコードはその構造にも対応しています。

出典と注意書きを表示します

📌
フッターへ必ず入れる文章出典：Jグランツ
このコンテンツは、政府公式の補助金申請システムjGrantsのWeb-API機能を利用して取得した情報をもとに作成したものです。内容は日本国政府および自治体によって保証されたものではありません。申請前に必ず公式の公募要領をご確認ください。

このアプリは、補助金を探す手助けをするものです。採択や申請資格を保証するものではありません。

STEP 02 / SETUP

GASプロジェクトを作る

  1. Google Apps Script を開き、「新しいプロジェクト」を押します。
  2. 左上のプロジェクト名を 補助金AIエージェント に変えます。
  3. 最初からあるコードファイルへ、このページの Code.gs をコピーします。
  4. 左側の「＋」から「HTML」を3回選び、Index、Style、Script を作ります。
  5. GASが自動で .html を付けるので、作成時に拡張子は入力しません。
Aa
大文字・小文字に注意Index、Style、Script という名前を、そのまま使ってください。
STEP 03 / HTML & CSS

Index.htmlとStyle.htmlを貼り付ける

差分を探したり、元ファイルを書き換えたりする必要はありません。次のSTEPにある Index.html と Style.html の完成コードを、それぞれファイル全体へそのまま貼り付けてください。

  1. GAS左側の Index.html を開き、中身をすべて消します。
  2. 次のSTEPで Index.html タブを選び、「コードをコピー」して貼り付けます。
  3. Style.html も同じように、中身をすべて消して完成コードを貼り付けます。
✓
必要な変更は適用済みです<base target="_top">、Style・Scriptの読み込み、Jグランツの出典と注意書きは、完成コードへすでに入っています。
!
コードの一部分だけを貼らない各タブの「コードをコピー」で全文をコピーし、GAS側の同名ファイルを丸ごと置き換えてください。
STEP 04 / COPY CODE

貼り付け用コード

タブを切り替え、右上の「コピー」を押してください。コード全体がクリップボードへ入ります。

Code.gs
コードを読み込んでいます…
✓ 追加インストール不要　✓ APIキー不要　✓ 外部文字を安全に表示
STEP 05 / TEST

初回テストをする

  1. 4つのファイルをすべて保存します。
  2. GAS上部の関数選択で doGet を選び、「実行」を押します。
  3. 初回の権限確認が出たら、自分のGoogleアカウントを選んで許可します。
  4. 「デプロイ」→「デプロイをテスト」→「ウェブアプリ」を選びます。
  5. 表示された /dev で終わるURLを開きます。

エディタから doGet を実行しても画面が直接出るわけではありません。「実行完了」なら第一段階は成功です。

この順番で動作確認

STEP 06 / DEPLOY

本番Webアプリとして公開する

  1. 「デプロイ」→「新しいデプロイ」を選びます。
  2. 種類を「ウェブアプリ」にして、説明を書きます。
  3. 「次のユーザーとして実行」は通常「自分」を選びます。
  4. 目的に合わせてアクセスできるユーザーを選びます。
  5. デプロイし、/exec で終わるURLを利用者へ渡します。
公開範囲向いている使い方
自分のみ開発中・個人テスト
組織内学校や会社のGoogle Workspace内
全員一般公開。組織設定で禁止されている場合あり

コードを直したら新バージョンへ

保存しただけでは公開済みの /exec に反映されない場合があります。「デプロイ」→「デプロイを管理」→鉛筆アイコン→「新バージョン」で更新します。

dev
覚え方開発中は /dev、利用者へ渡す本番URLは /exec です。
STEP 07 / TROUBLESHOOTING

困ったときの確認場所

画面が真っ白になる
  • HTML名が Index か確認
  • doGet() が createTemplateFromFile('Index') を呼んでいるか確認
  • GAS左側の「実行数」に赤い失敗がないか確認
CSSが効かない
  • Style.html があるか
  • include_('Style') があるか
  • Style内を二重に <style> で囲んでいないか
検索ボタンが動かない
  • include_('Script') があるか
  • Script内を二重に <script> で囲んでいないか
  • ブラウザのF12 → Consoleに赤いエラーがないか
  • 元のHTMLのIDを変えていないか
承認が必要と表示される

GAS編集画面へ戻り、関数を一度実行して権限を許可します。学校・会社のアカウントでは、外部通信が管理者により禁止されている可能性もあります。

APIエラー400・429が出る

400はキーワードが2文字以上か、並び順の値を変えていないか確認します。429は短時間の呼び出しすぎです。連打を止め、少し待ってから試してください。

修正したのに本番が古い

/exec を見ている場合は新バージョンをデプロイします。再読み込みやシークレットウィンドウでも確認してください。

詳細だけ表示されない

詳細URLがV2か、一覧のIDが空でないか、地域・募集期間が workflow 内に入る場合へ対応しているか確認します。

STEP 08 / FINAL CHECK

完成チェックリスト

安全のために守る6項目

  1. 自由なURLを受け取らず、JグランツAPIのURLをGAS側で固定する。
  2. APIの文字をそのままHTMLとして実行せず、escapeHtml を通す。
  3. 公式リンクはHTTPSだけ許可する。
  4. SSL証明書の確認を無効にしない。
  5. 巨大なPDFのBase64本体を不用意に返さない。
  6. 申請前に公式ページと最新の公募要領へ案内する。
OFFICIAL SOURCES

確認した公式資料

コピーしました