App Makerでアプリを作ってみた

　今回は、2018年6月に正式開始したGoogleのサービス、App Makerについて解説します。

最小限のコーディングでアプリを作れるApp Maker

　Google App Makerは、G Suite Businessユーザーのためのブラウザ上のアプリ作成ツールです。その最大の特徴は、｢ローコード｣であること。普通にアプリを作るときにどうしても必要な、データベース構築や、画面設計などは、App Makerではドラッグ&ドロップなどの簡単な操作でほとんど完成させることができます。
　機能によってはコーディングが必要なこともありますが、それでも必要なのはGoogle Apps Script(GAS)の知識のみ。開発環境もApp Makerの中に用意されているので不要。とにかく簡単にアプリを作成することができます。

実際にアプリを作ってみよう

　ここからは、実際にアプリを作成する手順についてみていきます。

まずはG Suiteのプランを確認

　App MakerはG Suite Business・Education・Enterpriseの各エディションでないと利用することができません！まずは利用しているG Suiteのプランを確認しましょう。

セットアップ

　App Makerのコンソール画面(https://appmaker.google.com)を開き、Create New Appをクリックします。

続いてテンプレート選択画面が出ますが、ここではBlank Applicationをクリックします。アプリ名を設定したら、セットアップはあっという間に完了です。

編集画面の見方

編集画面は、大きく3つの部分に分かれます。

各画面の内容は以下の通りです。

・左側(青枠)
サイドバー。編集するものを切り替える。データモデル、ページ、スクリプトの3種類があるが、基本的にはページを選択することが多い。

・中央(赤枠)
ここではページの作成画面となっている。ウィジェット(紫で囲ったボタンを押すと出てくる)をドラッグ&ドロップし、大きさを調整することでページを作っていく

・右側(緑枠)
エディタ。余白などの調整が可能。パラメータを入力するほか、CSSを使って細かく設定することもできる。エディタ内にはJavaScriptを使える部分もあり、動的に制御することも可能。

ページを作ってみよう

　まずは、基本的なページ作成を見ていきましょう。先ほども説明した、紫で囲った左上のボタンを押します。
　ウィジェットは多数用意されているのですが、いくつかのグループに分けられています。
　以下が実際に用意されているウィジェットの一覧です(実際には縦長の画面でスクロールする形です)。

・データ
データを扱うときに必要となるもので、入力フォームと出力テーブルが用意されています。こちらは後で扱います。

・インプット
データモデル以外での入力が必要なときに利用します。単に入力した文字を表示させたいときや、Gmailと連携してメールを入力、送信したいときなどに利用します。

・ディスプレイ
リンクや画像など、閲覧者の入力が不要な機能に使います。

・レイアウト
その名の通り、レイアウトを指定します。ウイジェットは入れ子にして編集が可能なので、｢レイアウトのウィジェットの中に他のウィジェットを入れる｣という方法で利用します。

・チャート
その名の通り、データを可視化するものです。

　この他にも、すでにあるウィジェットを組み合わせて、オリジナルの1ウィジェットとして登録することも可能です。ページのサイドバーなど、同じスタイルの画面を流用するときには登録するのが便利でしょう。

　ページはこれらのウィジェットを利用して作成します。スライドや図を作成するときに近い感覚で操作が可能です。配置した例が以下の通りです(今回は、公式チュートリアルで作る画面を基に作成しました)。

アプリをプレビューしよう

　アプリの作成が進んだら、一度プレビューして内容を確認しましょう。
　といっても複雑な作業が必要なのではなく、作成画面の右上にあるPREVIEWをクリックするだけです。
　プレビュー時にはアプリの承認が要求されるので、同意しましょう。
　承認が済めば、プレビュー画面になります。本番と同じように機能を扱えるので、ここでしっかりと、目標とする機能ができるか確認しましょう。

アプリをパブリッシュしよう

　確認が済んだら、いよいよアプリのリリースです。画面右上のPUBLISHを押し、必要事項を入力します。

　最後に、アプリのアクセス制限について設定します。特定のユーザーに制限するか、制限をかけないかが選べます。
　ただし、App Makerのアクセスはドメイン内限定であることに注意しましょう。たとえアクセス制限をかけなかったとしても、同じドメインのユーザーしかアクセスできません。
　準備ができたらいよいよリリースです。

　ここまでのやり方について、詳しくはApp Makerのチュートリアル(英語)(https://developers.google.com/appmaker/overview)をご覧ください。

さらに機能を作ってみよう：データベース編

　ここまで、App Makerの基本的な使い方をざっと見てきました。しかし、App Makerが本領を発揮するのはここからです。
　別途Google Cloud SQLの設定をすれば、複雑なコーディングなしにデータベースの作成が可能になります。入力フォームと閲覧テーブルはウィジェットとして準備されているので、ものの数分で、複雑なデータベースを作成することができます。

Cloud SQLの設定

　Cloud SQLはGCPの有料機能の1つで、利用には設定が必要です。
　ここでは簡潔に案内しますが、以下2点の準備が必要です。
①G Suiteの特権管理者に管理コンソールからApp MakerをONに設定してもらう
②App Maker用のCloud SQLインスタンスを立ち上げ、そのインスタンスを管理コンソールで指定する

　利用には特権管理者による設定が必要です。
　詳しくは公式のリファレンス(https://support.google.com/a/answer/7550053)をご覧ください。

データモデルの編集

　App Makerの編集画面に戻り、Modelを追加します。

青枠のDATAの部分にカーソルを当てると+ボタンが現れるので、それをクリック。

　モデルタイプはGoogle Cloud SQLを選択します(recommendedと書いているのでわかりやすいです)。
　モデルに名前を付けた後は、モデルの各フィールドを定義します。ADD FIELDのボタンから設定が可能です。

　フィールド型はString・Number・Boolean・Dateから選べます。各型についてリスト形式を選択することも可能です。

モデルを使ったページ作成

　モデルを定義したら、そのモデルを利用してみましょう。利用法は、後述するスクリプトを利用する方法と、入力用のウィジェットを利用する方法があります。ここでは後者について解説します。

・フォームの作成

1. フォームウィジェットを画面にドラッグ＆ドロップします。
2. データソースを、定義したモデルの中から選びます。
3. フォームのタイプを、Insert(入力後の編集不可)とEdit(入力後の編集可)を選びます。
4. データモデルのうち、フォームで入力するフィールドを定義します。

・テーブルの作成

1. テーブルウィジェットを画面にドラッグ＆ドロップします。
2. データソースを、定義したモデルの中から選びます。
3. テーブルに表示するフィールドを選択し、その中でテーブルから編集可能にしたいものがあれば定義します。(IDとなるフィールドは編集できません)
4. オプションを選択します。ここでは、行数増えたときに複数ページ表記が可能か・ソートが可能か・行ごとの削除が可能かの3点が選択できます。

　このようにして作成したフォーム・テーブルをプレビューすると以下のようになります。

左側のフォームを利用し、右側のテーブルにデータを表示できるようになりました。

さらに機能を作ってみよう：スクリプト編

　ここまではコードを全く使わない、App Makerの｢ノーコード｣な使い方を紹介してきました。ここからは、JavaScriptを用いた｢ローコード｣な使い方を見ていきます。

　まず、スクリプトには2種類あるので押さえておきましょう。

クライアントスクリプト

　クライアントスクリプトは、ブラウザ上で動くスクリプトで、各ウィジェットのクリック時の操作などが設定できます。通常のJavaScriptと同じように設定ができます。
　なお、App MakerはHTMLのように自分でidを設定していませんが、各ウィジェットには、ウィジェット名などを基に自動でidがつけられています。これをもとにJavaScriptを設定することが可能です。

サーバースクリプト

　サーバースクリプトは、Google Apps Script(GAS)とよばれる、JavaScriptベースの環境上で実行されます。Googleスプレッドシート・Gmail・Google Driveなど、Googleのサービスのデータ取得や編集が可能になっています。
　サーバースクリプトは、トリガーを用いた自動実行、もしくは、クライアントスクリプトから関数を呼び出す形式で行います。

設定

　スクリプトの利用方法は2種類あります。

・ウィジェットの設定画面から
　ウィジェットの設定項目にはEventという欄があり、onclickなど、JavaScriptにあるようなイベントの設定が可能になっています。イベントを設定したい場合、この欄に直接スクリプトを入力するだけで設定が可能です。

　このように、｢他のページに飛ぶ｣などの基本動作はすでに用意されていますが、Custom Actionを選択すれば独自に動きを設定することも可能です。例えば、チュートリアルのように

alert("Hello " + app.pages.(ページ名).descendants.(Inputのウィジェット名).value + "!");

Hello, (入力した名前)!

というポップアップを出すことができます。

・サイドバーから独立したスクリプトを作成

　上の画像の青枠部分から、スクリプトを新規追加します。先ほどの2タイプのうちどちらかを選択します。
　選択が済んだら、スクリプトエディタが出てくるので、自由に関数を設定します。多くのIDEのように、構文チェックや自動補完の機能があるので便利です。
　関数を設定したら、先ほどのウィジェットの設定画面に戻ります。ここに直接スクリプトを入力する代わりに、設定した関数を呼び出すスクリプトを書くことで、イベントを設定することができます。
　この方法は手間がかかりますが、複数のウィジェットで同じイベントを設定したり、スクリプトが長くなってしまうときには、この方法が便利です。
　また、サーバースクリプトについてはこの方法を使う必要があります。

　スクリプトを用い、GASと連携することで、App Makerの可能性は大きく広がります！App Makerに慣れてきたらぜひ活用してみてください。

App Makerの欠点

　ここまでApp Makerを用いたアプリ作成について解説してきましたが、App Makerには欠点もあります。

・ドメインをまたいだ共有が不可能
　App Makerのアプリはドメイン外に共有することは不可能です。Google Driveを用いてドメイン外に共有をかけようとしても、開くことはできません。
　この特徴は、｢ドメイン外からのアクセスを防ぐことによりセキュリティを保つ｣というメリットもありますが、グループ会社等、別のドメインを用いている相手には、App Makerでのアプリ利用が問答無用で不可能になってしまいます。

・GASの知識はそれなりに必要
　App Makerでは結局GASの知識が必要になることが多く、完全にコーディングをせずに作れる機能はかなり限られてしまいます。GASを使えてさえいれば全く問題ありませんが、この点は要注意です。

まとめ:App Makerで作るアプリは、できるだけ簡単な機能に！

　ここまでApp Makerについて書いてきました。
　App Makerは、画面やデータベース構築についての操作は非常に簡単で、大幅な時短が期待できます。しかし一方で、コーディングを必要とする本格的な機能ではその効果はありません。したがって、機能が簡単なアプリであればあるほど、時短効果が大きくなります。
　App Makerでアプリを作る際は、できるだけ機能の簡素化に努め、その効果を存分に発揮できるようにしましょう。