GoogleAppMakerを触ってみよう！


# GoogleAppMakerとは何か？
Accessをクラウド化したようなものでしょうか。GoogleはいままでExcelをクラウド化したGoogleSpreadSheetなど、色々とMS-Officeソフトを片っ端からクラウド化してきましたがAccessに相当するものがないよなあと思っていたところへやっとらしきものが出てきたという印象です。しかも接続できるDBというか、とにかくもう何でも外からデータを引っ張れる感じがとても素晴らしいと思います。個人的にはスプレッドシートでQUERY関数に出会って以来の感動ものです。

基本的には有料GSuiteを利用していないと使えませんが一定期間の無料試用があるようです。

GoogleAppMaker
https://gsuite.google.co.jp/intl/ja/products/app-maker/

# 今回試すサンプル
https://developers.google.com/appmaker/samples/
リンク先にはどんなことができるのか、サンプルが提示されています。

![list.png](https://qiita-image-store.s3.amazonaws.com/0/139134/7b8d8b41-6bbb-91ec-e45c-b5d336409345.png)


今回試すのは外部MySQL接続を使ったDBアプリです。赤線で囲った部分ですね。私の場合、サクラVPSサーバーが手元にあるのでそこにあるMySQLを使ってみたいと思います。DBを使う場合、GoogleのCloudSQLを使うことが推奨されていますが従量制で怖いので（苦笑）。

# 開発画面
さきほどのリンク先を進んでいくと開発画面に辿り着くと思います。見た感じ、どうも名簿管理のようなアプリですね。
![開発画面.png](https://qiita-image-store.s3.amazonaws.com/0/139134/513e3045-9301-e8c4-d501-6308fcbfa0e2.png)

真ん中に作業台があって左側にはDATA、PAGE、SCRIPTが並んでいます。SCRIPTはクライアント側とサーバー側に大別されていて開くと真ん中の作業台がコード画面に切り替わります。まあこのへんは適当に触れば分かると思いますので詳しい説明は省きます。

また、左上にパーツボタンがあってこれを押すと左側がパーツリストに切り替わります。赤線で囲ってあるところです。
![パーツ2.png](https://qiita-image-store.s3.amazonaws.com/0/139134/04ade17d-68d8-920d-e438-f25c865cf728.png)

そしてパーツリストからボタンやらテキストボックスやらを真ん中の作業台に持ってきてガチャガチャやるという流れです。

# DB接続情報編集
左側のSCRIPTファイルリストの一番下、「Settings」ファイルを編集します。ホスト名、DB名、ユーザー名、パスワードの4つを設定します。

```
// App Settings

// Global Variables 
var TABLE_NAME = 'Employees';
var MAX_ROWS = 500;
var RECORD_NUM = 25;

// DB Credentials (you need to provide these)
var address = '<your database host or IP address>';
var db = '<your database name>';
var dbUrl = 'jdbc:mysql://' + address + '/' + db;
var user = '<your database user id>';
var userPwd = '<your database password>';

// Important Note: This is for demo purposes only, storing passwords in scripts
// is not recommended in production applications.
```
# 外部DB接続許可設定方法
https://developers.google.com/apps-script/guides/jdbc?refresh=1&pli=1#other_databases
リンク先に接続方法が記載されています。と言ってもホワイトリストとなるIPアドレスがずらっと並んでいるだけですが。

![ホワイトリスト.png](https://qiita-image-store.s3.amazonaws.com/0/139134/d9d88318-f752-ffeb-681f-c1bf50dac788.png)

ここからはサクラVPSに入って作業します。

# 環境
CentOS Linux release 7.5.1804 (Core) 
mysql  Ver 15.1 Distrib 5.5.56-MariaDB, for Linux (x86_64) using readline 5.1


# CentOS設定 (FW設定)
MySQLはデフォルトでは外部通信を許可していません。そこで、MySQLの設定の前にサーバー自体のFW設定が必要です。許可サービスにMySQLを追加します。

```
sudo firewall-cmd --permanent --add-service=mysql
```
設定変更反映のため、リロード。

```
sudo firewall-cmd --reload
```
いちおう設定確認しておきます。

```
sudo firewall-cmd --list-all
```
結果です。mysqlが追加されていればOKです。

```
services: ssh dhcpv6-client http https mysql
```

# MySQL設定
rootログインし、サーバー側ファイルに設定したDB接続情報及び提示されたホワイトリストを使って権限設定を行います。なお空のDBは予め自力で作成しておきます（ここではDB名を「Employees」としてあります）。

```
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'64.18.0.0/255.255.240.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'64.233.160.0/255.255.224.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'66.102.0.0/255.255.240.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'66.249.80.0/255.255.240.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'72.14.192.0/255.255.192.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'74.125.0.0/255.255.0.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'173.194.0.0/255.255.0.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'207.126.144.0/255.255.240.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'209.85.128.0/255.255.128.0' IDENTIFIED BY 'パスワード';
GRANT ALL PRIVILEGES ON Employees.* to 'hoge'@'216.239.32.0/255.255.224.0' IDENTIFIED BY 'パスワード';
```
# 動作確認
AppMakerに戻ります。開発画面右上の方にあるPREVIEWボタンを押して確認します。最初はテーブルもデータも何もない状態なのでこんな感じです。
![最初.png](https://qiita-image-store.s3.amazonaws.com/0/139134/34320b0b-f689-3f76-5b2d-3f0a42cf3648.png)


左側にある「CREATE TABLE」、「GENERATE 25 RECORDS」ボタンを押していくとサンプルデータが表示されます。削除、追加、検索などももちろんできます。画面を見れば何となく分かるかと思います。
![25件.png](https://qiita-image-store.s3.amazonaws.com/0/139134/bb915cfb-82a6-d493-c3ae-c77176e6eb1e.png)

# 所感
MSの方にはAppMakerと似たようなものとしてPowerAppsがあり、こちらはスマホアプリでも使えます（配布できますと言ったらいいのか）。AppMakerも早くスマホアプリを出して欲しいものです。今後の展開に期待しています。