Google App Makerを試してみた

G Suite Business以上で利用可能なサービスに「App Maker」と呼ばれるローコードプラットフォームがあります。RPAのようなノーコードとは異なり、基本プログラミング必要とする開発環境です。故にApp MakerもGoogle Apps ScriptやJavaScriptに関する知識と技術が必要になっています。

また、Kintoneなどもローコードプラットフォームに該当すると思います。GASはローコードでは無いのですが、ウェブアプリケーションを高速にデプロイできる意味では近い存在と言えます。しかし、日本企業の場合プログラミングというものを極端に避ける傾向にあり、それが結果的にRPAというものに逃げ込んでいる現状があります。

今回はそのローコード環境であるApp Makerでどれだけ使えるのか実際に作ってみることにしました。

※2020年に本サービスはシャットダウンが決定しました。詳細はこちら。

図：素敵なUIのガッチリウェブアプリが作れます

概要

所見のイメージ

App Makerは現在、G Suite Business以上のみで提供されており、また他のサービスとと異なり自分のドメイン外とは一切共有はできないようになっています。その為、同じグループ企業でもドメインが異なる場合、作成したアプリを共有できません。セキュリティの観点からそのようになっているものと思われます。

さて、ローコードプラットフォームという事なので、プログラミングは必須です。そのツールの性質はプロトタイピングツールに近く、またアプリケーションとしてはウェブ版のMicrosoft Accessのようなデータベースを基本としたGUIアプリケーション作成環境です。ゴリゴリとバックエンドもフロントエンドもゼロから作るGoogle Apps Script + HTML Serviceとは異なります（中身は同じ仕組みなのですが・・・）。

しかし、その中身はGASとHTML Serviceと同じものなので、GASで慣れている人間にとっては、今までよりも更に高速にアプリケーションを構築しデプロイできるというのが売りになっています（確かにUIのディテールなどはとっても綺麗なので、自分でjQueryでUI書くよりずっとマシだと思います）。

※またコード類はG Suite Developer Hubには出てこないです

考察

但し現在、UIそのものは英語であり、日本語は使えます。サンプルファイルはこちらのページにいくつかあります。Kintoneのような手軽さはありません。また、GASで自分でゼロベースから作るほうが多分楽です。簡単そうに見えて、実は最初の壁がとっても高いなぁというイメージ。広く普及しなければ飽きっぽいGoogleの場合、過去にあったGUI Builderのように消えると思います。事実、Drive Tablesが直近で消えていたりいます。このツールで作り込むのは推奨できないですね。。

いくつかのテンプレートが初めから用意されており、バックエンドはGoogle Cloud SQL（MySQL）を用いてビジネス用のツールを作る事に特化しています。GCPのサービスなので有償です。GASでもGoogle Cloud SQLをバックエンドにしたアプリは作ることが可能です。個人的にはスプレッドシートをバックエンドにしたサービスをBasicでも提供すれば良いのにと思います。

なので自分は正直なところ、様子見です。まずローカライズされていること、十分なドキュメントを提供する事、それとAccessのような手軽さを追求すること。ローコードかもしれませんが、ライトユーザが全く手を出せないようなガチガチに組まれたテンプレートでは、広く普及することはないと思います。これを使って社内アプリ作るターゲットって、社内の情シスなのでしょうか？エンドユーザなのでしょうか？

ｓ

図：テンプレートは多いとは言えない。

図：テンプレートを開いてみた様子

事前準備

App MakerはGoogle Cloud SQLを使わないタイプのアプリも作ろうと思えば作れますが、その性質上そういった類のものは、Google Apps Script + HTML Serviceで作ったほうが楽です。確かにUIを手っ取り早く作れるのはその通りなのですが、手軽じゃない・・・しっかりとしたAccessアプリを作るのと同じ感覚で取り組むほうがベストだと思います。

そのため、利用する為には事前準備がいくつか必要です。

Admin管理画面からApp MakerをONにする

管理者権限でG Suiteの管理コンソールより、App MakerがONになっていなければそもそも作れません。また、同じ画面にはデータベース設定がありますが、これは次の項目でセットします。

1. 管理コンソール⇒アプリ⇒その他のGoogleサービスを開く
2. App Makerを開く
3. サービスのステータスをONにする

図：まずは使えるようにしないと始まらないです

Cloud SQLのセットアップ

App Makerで利用するGoogle Cloud SQLのプロジェクトをCloud Consoleで用意しておく必要があります。必要なMySQLの設定は以下の通りです。

• MySQLであること（PostgreSQLは利用できません）
• インスタンスの種類は第２世代であること
• リージョンはus-centralであること（asia-northeastリージョンでは使えません）

インスタンスの作成

予め、Cloud Consoleにて自分のドメイン内に新規プロジェクトを作ってから作業を開始します。プロジェクトを作成しましたら、「≡」というアイコンが左上にあるので、これをクリックして、左サイドバーを開きます。

1. 下のほうにある「SQL」という項目を開きます。
2. インスタンスを作成をクリックします。
3. MySQLとPostgreSQLのどちらかを選ぶことができます。ここはMySQLを選んでおきます。近いうちにSQL Serverも追加されるみたいです。
4. インスタンスIDには適当なインスタンス名を付けます。変更は不可。ここでは、「rurikosan」と名付けました。
5. rootパスワードはこのインスタンスに接続するマスターパスワードです。忘れないものを入力しましょう。
6. リージョンですが、現在は東京リージョンが存在しますが、App Makerでは現在使えません。「us-central1」を選択します。
7. ゾーンは指定リージョンのどのサーバを使うかを選ぶものですが、適当に選んでおきます。us-northeast1-cを選んでおきました。
8.  まだ、作成はクリックせずに、設定オプションを表示をクリックします。
9. 「マシンタイプとストレージの設定」を開き、変更をクリックします。
10. ここでは、マシンタイプを選ぶのですが、選ぶマシンタイプで料金が全然変わってきます。ハイスペックほど高い料金が掛かります。通常は、「db-n1-standard-1」の1CPU、RAM:3.75GBを選べばとりあえずは良いのですが、今回はテスト開発なので、「共用のdb-g1-small」を選びました。CPU共用でRAM:1.75GBです。
11. ストレージの種類は、HDDのほうが安いのですが、それほど大きな値差があるわけでもないようなので、高速なSSDを選びました。
12. ストレージ容量は最低が10GBからなので、それで行きます。増えればそれだけ料金は掛かります。
13. ストレージの自動増量を有効化をしておくと、ストレージがいっぱいになっても自動でスケールするようになります。今回はオフにしてあります。
14. 次に、「自動バックアップの有効化」をクリックします。今回はテストなので不要。ですので、チェックを外してあります。通常は付けたままで良いでしょう。
15. これで、保存をクリックすると、インスタンスが作成されます。結構時間が掛かるので待ちます。
16. 開始をクリックすれば使えるようになり、停止をすれば使用不可になります。

図：インスタンスを作成開始

図：今回はMySQLを選びます。

図：調子に乗ってハイスペック選ぶとエライことに

図：ストレージはあまり気にしなくて良い

図：本番環境ではバックアップは有効にしておきましょう。

インスタンス接続名をセットする

この段階でMySQLは待機している状態になっています。以下の手順で作成したインスタンスにある情報をG Suiteの管理コンソールにセットしてあげます。

1. Cloud Consoleにて「SQL」を開く
2. 自分が作成したインスタンス一覧から対象のインスタンスを開く
3. このインスタンスに接続の項目にある「インスタンス接続名」をコピーしておく
4. G SuiteのApp Makerの設定まで移動する
5. データベース設定を開く
6. 入力欄に3.のインスタンス接続名を入力して、保存を押す

図：インスタンス接続名が重要です

図：インスタンス接続名をApp Makerにセットする

IAMと管理にて役割の追加

データベースの準備は完了しましたが、App MakerからCloud SQLへのアクセスは特別なアカウント（サービスアカウント）でアクセスするようになっています。そのために準備が必要です。以下の手順で特別なアカウント設定を追加してあげます。

1. Cloud SQLをセットアップしたCloud Consoleプロジェクトにて、左上の「≡」をクリックし、IAMと管理を開く
2. IAMにて「追加」をクリックする
3. 新しいメンバーには「appmaker-maestro@appspot.gserviceaccount.com」を入力
4. 役割１には「Cloud SQL - 管理者」をセット
5. 役割２には「Cloud SQL - クライアント」をセット
6. 保存を押す。
7. 同じくIAMにて「追加」をクリックする
8. 新らしいメンバーには「ドメイン名」を入力する（うちならば、officeforest.org）
9. 役割には「Cloud SQL - クライアント」をセット
10. なお、7.〜の手順は親ドメインのプロジェクトにてIAMで追加していると自動で継承してるので、作業は不要です。

図：特殊なサービスアカウントの追加が必要

実際に作ってみる

いきなり空のプロジェクトから作り始めるのはアレなので、今回はProject Trackerというテンプレートを用いて、ちょっといじくって見ようと思います。パッと見の印象では、もう少し細かなドキュメントなどが充実しないと、LibreOfficeのBaseのように広く使われずに終わっちゃいそうな気がします。

テンプレートからプロジェクト作成

ということで、App Makerのサイトにアクセスをして作り始めます。以下の手順でプロジェクトを用意しましょう。

1. App Makerにアクセスする
2. Create New Appをクリックする
3. Project Trackerというテンプレートを選択します。ゼロから作る場合は、Blank Applicationを選択します。
4. Google Cloud SQL database was Synchronizedとメッセージが出ます。出ていない場合は、SQLのセットアップに失敗しています。
5. プロジェクト名を適当なものに変更しておきましょう。今回はタスク管理アプリと命名しました。

作成したプロジェクトがMySQLのどのデータベースに紐付いているかは以下の手順で確認出来ます。

1. 右上の歯車アイコンをクリックする
2. DATABASEを開く
3. Google Cloud SQLの項目の下のほうに「database key」というものがあり、ここのキーを控えておく
4. なおここで、Switch to a Custom Cloud SQL Databaseをクリックすると、自分が作成したdatabaseにチェンジが可能です。
5. Cloud ConsoleのSQLを開き、自分の作成したインスタンスを開く。
6. データベースのタブを開く
7. 3.で控えておいたキーのデータベースが存在していることを確認できます。

図：どのデータベースにつながっているのかは確認しておくべし

プロジェクトのセットアップ

テンプレートから作成したプロジェクトは基本的なセットアップは終わっていますが、デフォルトの設定はまだ不足している状態にあります。前項でデータベースの接続先を確認しましたが、同じく歯車アイコンから細かなセットアップを済ませてしまいましょう。

1. 右上の歯車アイコンをクリックする
2. APP SETTINGを開く
3. プロジェクトの説明を書いておきましょう。
4. App Srtartup Scriptはプログラム起動時に最初にロードされる関数を指定するものです。イベントハンドラーとしてはonAppStartというものが割り当てられているようです。
5. External Resources（JSやCSSファイルはここで追加する）の登録はここで行なう。
6. GASのライブラリ登録は、Apps Script Librariesにて、公開されてるスクリプトIDを登録します。
7. Run App Asは通常はUser's accountのままで良いでしょう。
8. Allow app to be embedded in any site within an iFrameは、iFrameで呼び出しができるようにするか？を設定する項目です。外部貼り付けをしたい場合にはチェックが必要です。
9. Viewport Resolutionはスマフォなどの解像度対応を追加する場合に使います。
10. App LanguageはJapaneseを選択し、Faviconをセットする場合はその画像までのURLを指定します。
11. Advanced ServicesはGASのGoogleの拡張サービスに該当する項目です。
12. Resourcesタブはアプリケーション内から参照する細かなリソースをアップロードしておく場所です。
13. Revisionsは編集履歴です。Revert toをクリックすると過去のリビジョンに戻ることが可能です。
14. Deploymentsはアプリをデプロイする画面です。コードを書いたら必ずデプロイしましょう。

左サイドバーの各セクションについて

左サイドバーはアプリケーションを構築するためのメインのセクションになります。こちらが開発をしていく上で普段から利用するセクションになります。

DATAセクション

ここはデータベースに対する設定をするエリアになります。IMPORT DATA FROM SHEETでは、既存のGoogleスプレッドシートから取り込んでデータ構造を定義する事も可能になっています。テンプレートではいくつもの定義がすでに追加されていますが、それぞれがデータベースのテーブルであったり、クエリなどを定義しているものになります。

SQLではフィールドと型、リレーションシップ、イベントの設定、セキュリティ設定が用意されています。他にも４種類の定義が用意されています。Accessと比較した時にちょっと分かりづらいなぁという印象。１つずつLearn Moreのリンク先を見て、勉強しないとちょっとこれまでの感覚では手が出しにくいですね。

図：App Makerからテーブルの内容を編集できるようになっている

図：作れるモデルは5種類あるが

PAGESセクション

アプリケーションのUIを担当するエリア。様々な画面を用意し、UIを構築する部分になる。ここが一番の壁になるかもしれません。というのも、ダイアログやメインセクション、ヘッダーなど非常に細かく部品が作られていて、これらを組み合わせて作るわけなのですが、GASでやっている流儀とはだいぶ異なります。

AccessでもGUIを構築する為にボタンやサブフォームなどを配置して作っていきますが、App Makerではこれらをウィジェットパーツで構成し、例えばその部品の名前などはどこにバインド（直書きするのではなく、どこからかコードで呼び出して割り当てるようになっている）為、ガチのプログラマではない方には、荷が重たいのではないかなぁと（それだけ部品を共通化してるという事なのですが）。

また、デザインなどは右サイドのプロパティエディタで行います。VBEの画面のようにも見えますが、実際にはここにはイベントの設定、デザイン（個別CSS）、ロジックなどを記述していくように構成されています。

また、左上の■のアイコンをクリックするとウィジェットパーツが出てきます。ここでボタンやテーブル、テキストボックスなどのパーツが用意されており、このあたりはVisual Studioと似たような感じです。パネルパーツを用意してその中にボタンやらテキストボックスをまとめておくといった作りを意識する必要があります。

個人的私見ですが、ライトユースで作るにはちょっとヘビーな印象を受けます。一方ではガチのウェブアプリケーションを作るにしてはクセが強いなぁと。普通にGASでVue.jsを使ってスクラッチから作ったほうが楽な気がします。

図：各パーツの配置やプロパティを設定する画面

図：ウィジェットパーツは結構充実してる

SCRIPTSセクション

ローコードとは言え、コードを書かずにアプリを作ることはできません。しかし、テンプレートの場合には予め大体のコードが既に記述された状態（スケルトンと言います）で用意されています。既存のコードを少し修正して機能を追加するのがローコードの良い点です。

Serverとある部分、ここは、Google Apps Scriptで記述を行います。そしてClientとある部分はJavaScriptで記述を行います。Client部分がいわば、HTML Serviceで記述している部分に該当します。但し見てもらうとわかりますが、Server側もClient側も今までGASで作ってきた人間からしたら、見たことのないようなメソッドがあったりします。

問題はコメントが英語ではありますが、それを読み解いてスケルトン状態のコードが一体何をしていて、何につながっているのか？を解析しないと手が出せない点です。また、本来シングルページアプリケーションであるGASではあるのですが、画面遷移を実現するためのコードなども追加されているため、GASをヘビーに扱っている人間であっても、テンプレートからの作成は苦労するかもしれません。

まずはこのスケルトンから、どういうことをApp Makerでは行っているのか？その流儀を学ぶ所から始めるべきでしょう。

図：clientサイドのコード記述画面

図：Serverサイドのコード記述画面

関連リンク

• Google、ビジネスアプリ開発ツール “App Maker”を正式提供
• App Makerとkintoneの比較
• App Makerでアプリを作ってみた
• Google App Maker とは？ 短期間で Web アプリケーション構築を可能にした理由
• Google App Makerの使用準備
• Prott - Prototyping tools for web ios android apps