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

## 要件

### 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)