Google App Maker ー Popup の使い方

2017年12月の初めの方に Popup 系の画面モジュールが追加された。
https://developers.google.com/appmaker/release-notes#popup_dialogs_new_model_events_and_api_updates

これと同じのを自作で実装するとものすごく面倒だった（ので諦めてた）のだが、公式にサポートしてくれるようになったため、リッチなアプリケーションを作りやすくなった。
※ Google 提供の App Maker templates なんかは、上記の面倒なやり方で実装されているのでもう参考にしないほうが良い。

本記事では、Popup 系を使うにあたって知っといたほうがいいことをメモがてら記載する。

Popup の種類

全部で6種類ある。
ぱっと見はぜんぜん違う UI でもベースは一緒なので Popup のテンプレートを選ぶみたいなイメージ。

Popup の共通オプション

ポップアップは PopupOverlay という Page のようなもので包まれている。

PopupOverlay には共通で定義されているオプションが4つある。
このオプションによって、ユーザの使い勝手が結構変わってくるのでしっかりと抑えておこう。

clickOutsideToClose

ポップアップ以外の場所をクリックしたときにポップアップを閉じるか

navigateToClose

別ページに遷移したときにポップアップを閉じるか

hasGlass

Page とポップアップの間にオーバーレイ領域を出すか否か

escapeToClose

Escape キーが押されたときにポップアップを閉じるか

Empty Popup

空のポップアップ。
自由にポップアップを作りたいときはこれ。

Navigation menu

（デフォルトでは）画面の左にナビゲーションメニューを出す。
複数ページになるサイトになったら使う感じ。

Confirmation dialog

実行していいかを確認するポップアップ。

おすすめ実装

Confirmation dialog を何個も作りたくない場合、こんな感じで実装すると良さそう。

※App Maker はボタンの onClick イベントを動的に設定することはできないので、クッションをはさむ形になる。¹

ClientScript(ConfirmationDialog)

function ConfirmationDialog(){}
ConfirmationDialog.prototype.confirmRun = function () {
  console.error('function is not allocated.');
};

ConfirmationDialog.prototype.run = function (title, text, runFunction) {
  app.popups.ConfirmationDialog.descendants.ConfirmationTitle.text = title;
  app.popups.ConfirmationDialog.descendants.ConfirmationText.text = text; 
  ConfirmationDialog.prototype.confirmRun = runFunction;

  app.popups.ConfirmationDialog.visible = true;
};

ConfirmationDialog.prototype.close = function () {
  app.popups.ConfirmationDialog.visible = false;
};


var confirmationDialog = new ConfirmationDialog();

ClientScript(Page)

function showConfirmForHoge() {
  confirmationDialog.run(
    'title-hoge',
    'text-hoge',
    function () {
      alert('hogehoge');
      confirmationDialog.close();
    }
  );
}

function showConfirmForPiyo() {
  confirmationDialog.run(
    'title-piyo',
    'text-piyo',
    function () {
      alert('piyopiyo');
      confirmationDialog.close();
    }
  );
}

実行するとこんな感じ

Notification dialog

通知のためのポップアップ。

Modal loading indicator

ローディングのスピナーを表示するポップアップ。
オーバーレイで他の操作を無効化出来るのでサーバー通信時はちゃんと使いましょう。

おすすめ実装

app.popups.ModalLoadingIndicator.visibleを直接操作しないようにしたほうがソース的にはきれいになるかな。

ClientScript

function ModalLoadingIndicator(){}
ModalLoadingIndicator.prototype.show = function (message) {
  app.popups.ModalLoadingIndicator.visible = true;
};
ModalLoadingIndicator.prototype.hide = function (message) {
  app.popups.ModalLoadingIndicator.visible = false;
};

var modalLoadingIndicator = new ModalLoadingIndicator();

呼ぶ側

modalLoadingIndicator.show();
setTimeout(function() {
  modalLoadingIndicator.hide();
}, 3000);

Snackbar

Google 系のサービスを使っていれば見たことがあると思う。
画面にシュッとバーを出すやつです。
Notification dialog の今風なやつ。

おすすめ実装

Snackbar は自動で閉じてくれたほうが嬉しいので次のような実装をしておく。

ClientScript

function Snackbar(){}
Snackbar.prototype.open = function (message) {
  app.popups.Snackbar.descendants.SnackbarText.text = message;
  app.popups.Snackbar.visible = true;
  setTimeout(function() {
    app.popups.Snackbar.visible = false;
  }, 3000);
};

var snackbar = new Snackbar();

呼ぶ側

snackbar.open('hoge');

---

1. なんかもっとイケてる方法がある気がする ↩