---
# System prepended metadata

title: 小規模事業者むけ新型コロナによる経営不安解消サービス

---

# 小規模事業者むけ新型コロナによる経営不安解消サービス

## 要件

### WEB
- 都道府県ｘ市区町村ｘ業種ｘ悩み・不安で助成金等を検索する
- 検索結果一覧に該当の助成金を表示する
- 助成金詳細ページは構造化・共通化出来ない箇所が多い
- ブログ時事的なコンテンツあり

### 管理・運用
- データの管理・更新の運用はGoogleSpreadSheetで行いたい
    - RCFが助成金等情報を集約
    - HUGがページ更新の運用
    - 運用担当者はWEBシステムには精通していない

### LINE（第2フェーズ）
- LINE公式アカウントでのチャットボットによる応答をしたい


## 設計

### システム構成
    - Netlify
        - WEBシステムをホスティングするSaaS
    - GoogleSpreadSheet
        - 助成金・支援金情報を管理するDBに相当
    - Zapier
        - GoogleSpreadSheetの更新を検知してNetlifyに自動反映するSaaS
    - microCMS
        - レイヤー3の個別情報のHTMLデータを管理するCMS
    - Github
        - WEBシステムのソースコードリポジトリ

#### Netlify
- 概要
    - WEBシステムをホスティングするSaaS
        - JAMStack（Javascript x API x Markup）で実装したものをホスティングする
        - Nuxt.jsをフレームワークとして利用する
- URL
    - 本番環境
        - https://pinch-hitter.jp
    - staging環境
        - https://staging.pinch-hitter.jp
- デプロイ
    - 自動デプロイ
        - Githubのリポジトリの更新を元に自動でデプロイを行う
            - masterブランチは本番環境
            - stagingブランチはstaging環境
        - GoogleSpreadSheetの更新を元にstaging環境の更新を行う
            - Zapierを利用して連携する
    - 手動デプロイ
        - Netlify管理画面から手動でデプロイを行う

#### GoogleSpreaadSheet
- 概要
    - 助成金・支援金情報を管理するDBに相当
    - 全国・都道府県・市区町村の3つのシートに分割
- URL
    - 全国版
        - TBD
    - 都道府県版
        - TBD
    - 市区町村版
        - TBD
- Netlifyへの自動反映
    - Zapierで更新検知してstaging環境に自動デプロイ
        - レイヤー2・レイヤー3を生成する
        - レイヤー3は構造が共通化されている部分のみ生成
    - 行の追加・行の更新のみを検知する
    - 反映には更新後1分程度かかる想定

#### Zapier
- 概要
    - GoogleSpreadSheetの更新を検知してNetlifyに自動反映するSaaS

#### microCMS
- 概要
    - レイヤー3の個別情報のHTMLデータ、記事コンテンツを管理するCMS
- URL
    - TBD
- 更新方法
    - 助成金ID（レイヤー3のslugになる）を主キーとする
    - リッチコンテンツエディタによりHTMLタグを登録
    - 画像アップロード

#### Github
- 概要
    - WEBシステムのソースコードリポジトリ
- URL
    - https://github.com/okbo/pinch-hitter
- ブランチ
    - master
        - 本番環境
        - 更新されたらNetlifyに自動デプロイ
    - staging
        - staging環境
        - 更新されたらNetlifyに自動デプロイ


### WEBシステム

#### レイヤー1
- パス
    - /
- 地域x業種x悩み選択
    - 47都道府県を表示
- 都道府県選択したら市区町村の選択肢を表示する
    - 助成金データのある市区町村のみを表示
    - 3桁の地方公共団体コードを利用
    - 都道府県レベル選択のみの場合は000
    - 市区町村レベルの選択肢がない場合は表示しない
- 業種は最初から表示しておく
    - 業種コードは8つ
    - スプレッドシートで定義
- すべて選択されたらリンク先URLを生成

#### レイヤー2
- パス
    - 案1
        - /:pref_slug/:city_cd/:bussiness_cd
        - 例
            - /tokyo/000/1
            - /hokkaido/100/3
    - 案2
        - /:pref_cd/:city_cd/:bussiness_cd
        - 例
            - /13/000/1
            - /00/100/3
- マッチ条件動的表示
    - 市区町村、都道府県・全国の順いマッチコンテンツ一覧を表示
- 関連コンテンツ表示
    - 記事コンテンツを数件表示
    - タグで検索
- その他コンテンツは固定表示？
- 画面イメージ
    - [XD](https://xd.adobe.com/view/f3066913-556d-42c2-4ea0-2ff0d9365da3-8537/)

#### レイヤー3
- パス
    - /grant/:grant_cd
    - 例
        - /grant/a000001
        - /grant/p1400001
        - /grant/c1400101
- 説明コンテンツ動的表示
    - 共通構造箇所
        - スプレッドシートのデータを元に表示
    - 個別構造箇所
        - microCMSのデータを元に表示
- 関連コンテンツ表示
    - 記事コンテンツを数件表示
    - タグで検索
- 画面イメージ
    - [XD](https://xd.adobe.com/view/f3066913-556d-42c2-4ea0-2ff0d9365da3-8537/screen/1f6b82af-a8b2-41f8-8cb7-f3eba6f7d66e/PH-L3)

#### 記事コンテンツ
- パス
    - /articles/:id
- microCMSで管理
- 本文はリッチエディタにて作成
- テンプレートはHTMLで準備する

#### その他静的ページ表示
- パス
    - /about等
    - いくつあるか？


### 管理・運用システム

#### GoogleSpreadSheet
- 全国・都道府県・市区町村の3つのシートに分かれる
- 行の追加・更新を検知してZapier経由でNetlifyに反映される
    - Zapierでnew/update row検知
    - ZapierからNetlifyのBuildHookにPOST
        - 直接連携だとbranch deployができないため
    - Netlifyへのデプロイが開始/完了したらSlackに通知
- 都道府県コード・市区町村コードは総務省のコード体系に準拠とする
    - https://www.soumu.go.jp/denshijiti/code.html
- スプレッドシート案サンプル
    - [運用するシート](https://docs.google.com/spreadsheets/d/1IrMWHM65TWGBebxDZqzwo4dS35Jxn_w0JKlDk-yb_PY/edit#gid=0)
    - [自動生成されるAPI](https://script.google.com/macros/s/AKfycbyFgWfFDN2KVpSQQhFWIl8_krq8cMMvv2erS4KiOyZMEebDbMw/exec)

#### microCMS
- TBD

## LINE
- WEBと同程度の選択肢絞り込みの想定
- 都道府県・市区町村の絞り込みは選択肢型ができない
    - 都道府県名、市区町村名入力してもらうか？
- サカタの種参照？

## 参考資料
- [企画書](https://docs.google.com/presentation/d/1rKxCX57CbEz7zSEg9gHy81bSsPgzS1acnM56ZwH-s-k/edit)
- [XDデザインデータ](https://xd.adobe.com/view/f3066913-556d-42c2-4ea0-2ff0d9365da3-8537/grid)


