はじめてのApp Maker

6130 ワード
GoogleCloudPlatform GoogleAppMaker GoogleAppEngine GoogleAppsScript GoogleAppsScript テキストリンク

きっかけ

社内でちょっとしたツールを作る際に、今まではスクラッチで作ったり、GASのWebアプリケーションを作ったり、オープンソースのパッケージを入れてカスタムといった選択肢がありましたが、AppMakerを知り、GUIベースである程度作れて、Googleのサービスなのである程度触って慣れているGASなどのノウハウも活きるのではないか、と思いトライしてみた話です。
特にレイアウト関連が独特だったので、その話を中心に。

データベースの準備

Google App Makerで使用するデータベースが変わり、以前あったGoogle Drive Tableが使えなくなり、Cloud SQLを使うようになりました。
MySQLのインスタンスをひとつ作成すると、以後AppMakerでサンプル含め、アプリケーションを一つ作るたびにデータベースが作成されていきます。
名前からだとデータベースとアプリケーションの対応がわからなくなりますが、設定画面から確認することができます。この名前は後述するDBの中身を見たい時に使用します。

Google Cloud Console上の表示

AppMakerの設定画面

何はともあれチュートリアル

最初にお試しで触ってからだいぶ時間も経っていたのと、いろんなことができそうだというのはわかっていたので豊富なチュートリアルとサンプルを触ることで、AppMakerのお作法をつかみました。

以下は一例ですが、たくさんあるサンプルから使いたい機能がはいっているもの選んで触ってみるのがよいのではないかと思います。私が触ってみた機能はこの辺りです。

  • 共通レイアウトパーツの管理(ヘッダなど）
  • パーツのレイアウト
  • フォームのマニュアルセーブと自動セーブのパターン
  • UserPicker（GSuite上のユーザの呼び出し）
  • クライアントスクリプトとサーバスクリプト
  • メール送信
  • リレーション
  • 画像アップロード

DBの中身の確認

アプリケーション自体まだ手探りで作っていたので、実際に登録したデータがどのようにDBに入っているか、簡単に全体を見渡したい！ということでどのような方法があるかを調べてみました。
今は更に選択肢が増えているようですが、候補になったものでいうと以下がありました。

参考）
https://cloud.google.com/sql/docs/mysql/connect-admin-ip?hl=JA

  1. Cloud Shellで見る
    コレが一番お手軽でちょっとした調査にはよいと思います。

  2. ローカルからMySQLワークベンチで接続
    Firewall的な問題などもあるし、アプリ入れるのも手間になるのでこの方法は採用しませんでした。

  3. App Engine上で見る
    App Engine上であればPHPは動く状態になっているので、一番違和感なく使えそうといことでためしてみました。

　App Engineを使ってデータベースに接続

雑な說明ですが、だいたいこんな流れです。PHPが使えるので、phpMyAdminやadminerなお好みのツールでDB内を確認できます。
1. cloud SDKをインストール
2. プロジェクトに紐づけ

$ gcloud config set project xxxxxxx
  1. ソースコードを配置
  2. デプロイ
$ gcloud app deploy

参考）
https://cloud.google.com/appengine/docs/standard/php/cloud-sql/using-cloud-sql-mysql?hl=JA

本題のレイアウト

さて、いざアプリケーションを作る準備が整い、自分が作りたい画面を作っていくわけですが最初レイアウトに手こずりました。
主観ですが、自分なりのポイントをいくつかあげたいと思います。

直接パーツを配置せずにPanelの中にいれる

直接ボタンや入力フォームなどを配置せずに、大枠のレイアウトをPanelで配置し
その中に並べていくと位置の制御がしやすいです。
このPanelというのはHTMLでいうところの、divタグのようなもので、透明な箱なので触り始めた当初よくわかってなかったのですが、これの使い方を掴んだことで、思い通りにレイアウトできるようになりました。

Panelレイアウト方法の使い分け

これは私の理解では、小要素をどう配置するかという意味合いで理解しています
1. fixed（固定位置で配置）
2. horizontal（水平方向に配置）
3. vertical（垂直方向に配置）

の3種類があります。大枠のレイアウトをできるだけfixedを使わないようにした方が、作りやすいと思います。

各パーツのレイアウト（Panelを含む）

panelの件と似てますがこちらは自分自身のサイズも含めた設定で、縦方向、横方向それぞれに設定します。
1. fixed
2. fit to content
3. fill parent
があります。

アプリケーションを作る際に、作りながらあれこれ変わっていく部分があり、最初からレイアウトがバッチリ決まっていなかったり、あとから項目を挿入したりすることが有ると思います。そうした場合にfixedでレイアウトしてしまうと、後から変更が入った際に、その他をすべて再調整しなければいけなくなりますので、こちらもfixedの利用を最小限にすると作りやすいとです。

この他にも、margin、padding等も設定可能なので、cssに親しんでいる人はとっつきやすいのではないかと思います。

いくつか例を上げたいと思います。

横に複数のパーツを並べたいとき
親となるパネル: horizontal
子となるパーツ: 横方向（horizontal）の設定をfill parentにすることで、途中で要素を挿入しても崩れません

左右2カラムで、入力フォームを作りたい

コレまでの話を踏まえ、下記のように、horizontal,verticalを使い分けることで、応用が効くレイアウトになりますので、3カラムにしたい時なども簡単に変更可能です。

まとめ

サンプルを触り、リファレンスを読めばできることではあるのですが、日本語情報がまだ少ないこともあり、とっつきにくい部分もあります。
が、GUIをベースにアプリケーションが作れるのは魅力的なので、これからも使い倒して行きたいと思います。

スクリプトの話もイベントトリガー的な話もいろいろありますが、いざ書いてみたら入口で終わってしまったので、またの機会にもう少し突っ込んだ話も書きたいです。

FORK Advent Calendar 2018
7日目 転送量とかトラフィックを忘れないように @shuhei4009