①電子帳簿保存法に対応するアプリをノーコード Appsheetとタイムスタンプ認証局STIIさんを使って作ってみた

# ①電子帳簿保存法に対応するアプリをノーコード Appsheetとタイムスタンプ認証局STIIさんを使って作ってみた
## 経緯
最近電子帳簿保存法で各種メディアからシステム投入のCMが毎日流れている、しかしフリー ランサーや個人事業主は導入の予算もないし、それに対する検討時間もない。
というわけで低予算 or 無料で電子帳簿保存法に対応するものを作ってみることにした。調べた結果、下記の二つを組み合わせると使いやすいかと思った。

- ノーコードのアプリ　Appsheet
    - 作り方を少し勉強すれば一日で簡単にアプリを作れる
- タイムスタンプ認証局 STIIさん：　
    - 現在タイムスタンプ認証を無料で提供してくれる (数の制限が超えると相談が必要らしい）

## 1.STIIタイムスタンプ認証局とは
STIIさんについては先日書いた投稿があるので、その記事を参考まで
["電子帳簿保存法に従ってSTIIを利用して各文書のTSA認証を取ってみた"]( https://qiita.com/shawnseo/items/2d586efda242629d4c36)

ホームページはこちら(https://stii.com/)



## 2.Appsheetとは
AppsheetはGoogle社が提供してるノーコード開発プラットフォームで主にGoogleのSpreadsheetを使って簡単にアプリが作れるツール
(まだ日本語が提供されてないので、英語のメニューとマニュアルがちょっと厳しいところはある）

## 3.アプリの基礎設計

### 3.1. 求めるもの
- ユーザーがアプリを起動し、文書をカメラ撮影するでけのシンプルな操作
- 内訳は全てSpreadSheetとGoogle Driveに保存して欲しい
- 撮影された電子文書は自動的にSTIIさんに送られタイムスタンプ認証を取る
- Gmailからタイムスタンプの証明書確認できれば良い

### 3.2. シナリオ
#### 3.2.1. タイムスタンプ取得
```plantuml
@startuml
participant User
box "Appsheet" #LightBlue
participant App
participant SpreadSheet
participant Bot
end box
participant STIIタイムスタンプ認証局 

User -> App : 写真スキャン
App -> SpreadSheet : データ保存
note left
Id, 
時間(Datime),
項目(Category),
取引先(Company),
写真(Photo)
end note 
SpreadSheet -> Bot : Row追加イベント
Bot -> STIIタイムスタンプ認証局 : メールで認証リクエスト

@enduml

```

#### 3.2.2. 電子データの確認
```plantuml
@startuml
participant User order 1
participant Gmail order 2
participant STIIタイムスタンプ認証局 order 3
participant SpreadSheet order 4
participant GoogleDrive order 5

STIIタイムスタンプ認証局  -> Gmail : 証明書発行
User -> Gmail : タイムスタンプの証明確認
User -> SpreadSheet : 電子文書の記録確認
SpreadSheet <--> GoogleDrive : 写真スキャン保存



@enduml

```

### 3.3 テーブル
Menu
`アプリのホーム画面に現れるメニューのデータ`

| Id(Number) | Name(Text) | View(Text) |
|:-----------|------------:|:------------:|
| 1       | 写真スキャン        | Document_Form         |

Documents
`スキャンされる電子文書の画像とデータの内容`

| Id (Number) | Datetime(Datetime) | Category(Ref) | Company(Text) | Photo (Image)|
|:-----------|------------:|:------------:|:------------:|:------------:|
| 1       | (UTC format)        |  請求書         | 〇〇株式会社| https://drive.google.com/blah/blah...|

Category
`電子文書の参考項目`
| Id(Number) | Name(Text) | 
|:-----------|------------:|
| 1       | 請求書        | 
| 2     | 納品書      | 
| 3     | などなど      | 



### 4.1. Appsheet開発アカウントの準備

Appsheetにアクセスし、無料トライアルを押して、アカウント作成
（Googleアカウントを持ってない人は事前にGoogleアカウントを取得することをお勧めします）

[https://cloud.google.com/appsheet?hl=ja](https://cloud.google.com/appsheet?hl=ja)

![Image- 2022-12-12 at 14.34.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/8216b3ac-0937-f706-c01f-a5682ee00171.png)

Google Sheet and Formsを選択して進む

![Image- 2022-12-12 at 14.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/4f2de532-6beb-8f13-205d-ff026c2758b3.png)

そのあと自分が使ってるGoogle アカウントを選び、Google AppSheetへ移動
![Image- 2022-12-12 at 14.39.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/3c663479-03e0-dab6-1cd5-0b1eab556b2d.png)

Google AppSheetにドライブとスプレッドシートの使用権限を許可

![Image- 2022-12-12 at 14.40.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/8f0354ee-3533-d51c-5b80-dff80dd439e8.png)

これでAppSheetを開発する準備はOK。

![Image- 2022-12-12 at 14.42.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/2b74884f-a143-73e9-d718-d3147c92d308.png)



### 4.2. アプリの作成
３.１の準備が整えたら、その後はアプリの作成を開始
左上のCreate　>　App > Blank App 選択し、Blankアプリを作成

![Image- 2022-12-12 at 14.46.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/898616ef-1178-9d20-c88c-a3c51934ed1f.png)

Create a new appのダイアログ欄で

App name : 電子文書ちゃん
Category : Other 
を入力して Create appを押下

![Image- 2022-12-12 at 14.51.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/1062e05d-570f-2a18-8ee5-83501d9d2b25.png)

そうするとBlankアプリが作成完了

![Image- 2022-12-12 at 14.52.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/6bdd94f9-1621-f607-5342-cd10880be516.png) 

Blankアプリのゴミデータが入ってるが、要らないのでちょっと面倒くさいけど、既存のものを全て削除


![Image- 2022-12-12 at 14.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/60358cad-9045-dedf-6420-13d8742c2a24.png)

左上のメニュー Data > Tables > Delete
左上のメニュー App > Primary Views > Table 1 > Delete
左上のメニュー App > Primary Views > Table 1_Detail > Delete
左上のメニュー App > Primary Views > Table 1_Form > Delete


### 4.3. Spreadsheetを作成

Google Driveへアクセスし、フォルダ作成（電子文書ちゃん）

![Image- 2022-12-12 at 23.37.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/4b20399b-ed2d-bda6-e81d-43ed6e2a8828.png)

そのフォルダでSpreadsheet（電子文書ちゃん）を作成
そして下記のようにMenu, Category, Documentsシートを作成

![Image- 2022-12-12 at 23.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/3ad775b6-5699-6e10-1aee-6dbceeb31a78.png)

![Image- 2022-12-12 at 23.43.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/3cb30b8f-1aee-9021-66b8-db41ae0d8645.png)

![Image- 2022-12-12 at 23.44.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/a7760f18-159f-f9e7-8096-be7b3fb83f0b.png)


### 4.4. SpreadsheetをAppsheetのTableへインポート
Appsheetの画面に戻り、左上のメニュー Data > TablesでNew Table押下、
テーブルをSpreadsheetからインポートする


![Image- 2022-12-12 at 14.59.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/b87d8d7e-f927-2f95-5c1d-66158ea9cbb7.png)

Google Spreadsheetを選び、事前に作ったSpreadsheetを選択

![Image- 2022-12-12 at 23.47.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/8f835345-6a00-c632-e1c7-2c4de91355fe.png)

Menu, Category, Documentsも同じようにインポートする
（Read-Onlyなど属性を設定する画面が現れるが後でも再設定できるので、今はデフォルートで大丈夫）

![Image- 2022-12-12 at 23.48.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/588baca2-06b1-9ffd-e3df-020017e23a7d.png)

下記三つのテーブルがインポートされたことを確認。
![Image- 2022-12-12 at 23.50.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236263/6c0b39ee-c36d-6858-5635-42d7971895fc.png)


これでアプリの基本となるデータの構成が完了
次のステップは連載される「②電子帳簿保存法に対応するアプリをノーコード Appsheetとタイムスタンプ認証局STIIさんを使って作ってみた」を参考まで。。。