AppSheetでkintoneデータを使ったモバイルアプリを作成してみた

NoCode Advent Calendar 2020 7日目の記事です。

## はじめに
AppSheetではデータを受け取るインタフェースがスプレッドシート以外にもデータベースやSalesforceなどいくつか存在しています。その中にはデータベースのインタフェースもあり、これを使ってkintoneデータを使ったアプリを作成していきます。
？？、kintoneデータをデータベースのインタフェースで？
となるかと思いますが、kintoneとAppSheetの間にCData ConnectというSaaS型サービスを挟むことで、SaaSが提供するAPIをOData、MySQL、SQLServerのインタフェースに変換して公開できるようになり、今回の構成（kintoneをMySQLとしてみる）が実現できます。

使うサービスはkintone、CData Connect、AppSheetの３つになりますが、アプリを動かすまでに恐らく10分もあればいけるんではないかと思います。

**こんなアプリを作成します**
![appsheet-qiita20201207_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/807d257a-3f85-d9e5-cbd0-fffab3cd3ab5.gif)


## AppSheetとは
AppSheetはデータソースをもとにさくっとノーコードでアプリ開発できるGoogle提供のプラットフォームです。アプリのテンプレート自体も多種多様なものが最初から用意されているので、データソースにさえ接続できればすぐにアプリとして使えるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/cd1c1ca5-fd98-af2c-032e-82c9aa4966b6.png)


## CData Connectとは
さまざまなクラウドサービスのデータをOData、MySQL、SQLServer の３つの規格で接続できるインタフェースが提供されるSaaS 型のサービスです。
例えばOData でしか外部との連携ができないサービスがある場合、CData Connect がデータソースと利用ツール・サービスの間に入ってデータソースへの接続用にODataエンドポイントを作成することで、色々なデータソースをODataでアクセスすることが可能になります。
※MySQL、SQLServerインタフェースでも同じ考えです。
https://www.cdata.com/connect/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/9e231c1a-f8fb-bd72-3a0e-db9d1666bda4.png)


## やってみること
kintoneのアプリにあるデータ（サンプルの活動履歴（営業支援）アプリ使用）をAppSheetで参照できるアプリを作成してみます。作成するといってもAppSheetはデータをもとにアプリのUI部分を作成しちゃいますので、ほとんど作業はないです。なので、本当に手を掛けずにさささーっとスマホでアプリを確認するところまでいけちゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/fa1484c0-6c63-7590-260c-5379b1bd17c7.png)


## 手順
やることは以下の内容です。

- kintoneにサンプルアプリを作成
- CData Connect でkintoneへの接続設定＆MySQLインタフェース生成
- AppSheetでアプリ作成

### kintoneにサンプルアプリを作成
kintoneのアプリストアを開き、営業支援パックを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/9fccbbdb-e05f-d5fb-9f52-00c3cbab0621.png)

追加するといくつかのアプリが表示されます。今回は活動履歴アプリを使用していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/f1856d1d-d657-397b-b3ea-d76431124ee8.png)

### CData Connectの設定
まずは、以下よりトライアルを申請してください。
https://www.cdata.com/connect/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/83576dcb-d967-6c75-fd7c-7de754038c22.png)

#### kintoneへの接続設定とMySQLインタフェースの生成
**接続設定**
CData Connect のアカウントでログイン後、「DATABASE」→kintoneのアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/b6c2f0d5-d369-8354-3402-154d6c7bc9bd.png)

接続設定を行います。接続先名や接続情報を入力したらTest Databaseボタンで接続テストを行います。正常に接続出来たら保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/2c14341d-39bd-0188-6eeb-7e6f1bc9c75e.png)
これでkintoneへの接続が完了したのと、設定した接続先名でkintoneを仮想データベースとして登録しました。

**ユーザー作成**
CData Connect に外部からアクセスする際のユーザーを作成します。「USERS」→「Add」でユーザーを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/582f9226-3545-cc81-b1aa-2ba730cc48e2.png)

ユーザー名、パスワードを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/cd5b944b-c0a7-5da1-0f9c-011d4391ee5a.png)

**MySQLインタフェース生成**
ENDPOINTSタブをクリックすると、OData,MySQL,TDSのエンドポイントが既に表示されています。実はとくに生成する行為はなく、そのアカウントに紐づく各インタフェースが自動で用意されています。
例えば、ここに表示されるMySQLエンドポイントをMySQL WorkBenchで設定すればkintoneアプリのデータをRDBのように参照することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/f999be64-895d-be1b-5d5a-f83c65a6a6eb.png)

**作成ユーザーへの接続権限を付与**
先ほど作成したユーザーからもkintoneのデータベースへアクセスできるように権限を付与します。
「DATABASES」をクリックして、Name 列にある先ほど作成したkintoneデータベースをクリックします。
その後は「Privilrgrs」タブより使用するユーザーの権限を付与します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/56888d8b-df0e-f98f-d434-c9f99292e09b.png)

作成済みのユーザーを選択し保存します。ちなみに今回はSelectだけでなくDML関連の権限も付与してますが、使用するのはselectだけになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/9255676c-7517-9c8a-4ff8-0e39d994050a.png)

これで、CData Connect にMySQL として接続できる準備が整いました。

### AppSheetでアプリ作成
それではAppSheetでアプリを作成します。無料でも使用できるのでアカウントがない方は以下から作成してください。
https://www.appsheet.com/

**データソースの設定**
まずはデータソースの設定からです。というか、これを設定すればほとんど終わったようなものです。
自分のアカウントページからSources → + New Data Source をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/501d55a8-064e-9fba-df75-ee608b6e90ab.png)

いま現在利用できるインタフェースはこれだけあるようです。今回はCData ConnectのMySQLインタフェースを利用するので赤枠のCloud Databaseを使いますが、ODataでもアクセスできるので青枠のODataを選んでいただいてもOKです。（betaとなってたのでMySQLを選択したという感じです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/7d2aaa7f-54a4-8c8c-f68d-c9e251c03684.png)

選択できるデータベースは今はこのようになってます。今回はMySQLを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/d8adf29e-353f-d36f-2abb-aa1f6242d96f.png)

以下のようにCData Connectで設定した内容を入力し、接続テストを行います。正常に接続できれば、Authorize Accessボタンが活性になりますのでクリックして保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/aae0795f-a403-0944-9dea-ae17651d0e18.png)

データソース一覧にこのように作成したデータソースが表示されます。（database-3という名前で作成）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/9423bd78-eafe-5a4c-dede-ea5db613351d.png)

**アプリ作成**
MyAppsタブをクリックして、Make a new appをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/7d4cab6a-e867-8da0-26d3-8f7828a9c4b6.png)

先ほど作成したデータソースを使用して始めるのでStart with your own data を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/61b8eba6-5f1a-3642-5982-61360322028f.png)

アプリ名を設定したら、Choose your data をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/22a072f1-7148-add4-3b26-89d7a15a760a.png)

作成したデータソースをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/ca15dc55-3f01-8bfe-c47f-d12d3e3bffa1.png)

Tablesをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/78917b98-46e2-51cd-709a-2ed338076706.png)

kintoneアプリの一覧がここにテーブルとして表示されますので、活動履歴（営業支援パック）をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/936c8719-cfb9-1a85-14d1-48b98543c03a.png)

そうするとアプリをいじれる画面に遷移し、右側にイメージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/1f1067c9-fad6-f357-183a-6514c110dbe4.png)

まぁ、これだけだとさすがに何がなんだかわからないので、アプリのレイアウトはそのままで、表示する項目を設定していきます。

UXからデータソースをクリックすると、メインの画面でどのようなタイプのレイアウトにするか選択できるようになっていますので、tableを選択してみますと右のアプリイメージが即反映されて表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/7fcf1a97-4dfa-2da5-d17f-8215582afa1d.png)

では、もうちょっとだけ変更してみます。
不要な項目が表示されているので、表示項目を絞ります。

少し下にスクロールすると、Column order という項目がありますので、ここでTOP画面で表示する項目を選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/5e9e120c-d3aa-e7cd-9eab-26cf6e305bf6.png)

これで、案件に対する活動履歴の概要が一覧として表示できるようになりました。

あとは、各案件情報をクリックすると詳細なデータが表示されるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/20ed061d-db79-ef5c-cbf9-a3e1f2c788e7.png)

詳細データを表示する部分も同じ方法で表示する項目などを変更できます。
また、アプリのUI部分ももう少し選択式でいじれますし、データに対しても内部での計算や更新なども行えます。ただし、本ケースではデータ更新までは未確認です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/27ec6a79-d02a-8fad-8dfe-68a1bbad30c0.png)

## アプリを実際に使ってみる
AppSheetのアプリを実際にスマホにインストールして、AppSheetのアカウントでログインしてみると、作成したアプリがすぐに使用できるようになっています。

![appsheet-qiita20201207_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378300/807d257a-3f85-d9e5-cbd0-fffab3cd3ab5.gif)