【AppMaker】受付システムを成仏させる

[corp-engr 情シスSlack（コーポレートエンジニア x 情シス） #2 Advent Calendar 2019](https://adventar.org/calendars/4173)の2日目の記事です。
過去にAppMakerで作ったものを紹介(成仏)します。

#はじめに
これから成仏させる"AppMakerで作った受付システム"は使われることはなくなりました。
ここで成仏させたい。

これからどんな感じで作ったのか解説していきます。
AppMakerで何が出来るか知りたい、AppMaker触ってみたい、何かを作るため勉強している、そんな人には参考になると思います。
AppMaker面白いですよ。

ちなみに受付システムとは[RECEPTIONIST](https://receptionist.jp/)とか[ACALL](https://www.acall.jp/)とかいわゆる無人のiPad受付をイメージしています。
実際にはやっていませんが、当時は[Chromebook Tablet](https://www.asus.com/jp/Tablets/ASUS-Chromebook-Tablet-CT100PA/)と[Chrome Enterprise](https://support.google.com/chrome/a/answer/2941083?hl=ja)でキオスクモードに設定したらそれっぽくなるんじゃないかなーと考えていました。

#出来上がりはこんな感じ
<img width="1538" alt="スクリーンショット 2019-12-02 2.15.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/b74a1132-93b8-5701-bf4a-fc91c0e4ec43.png">
![スクリーンショット 2019-12-02 2.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/58e759e8-9a21-d3cb-baf3-50ba70adf0c0.png)
![スクリーンショット 2019-12-02 2.15.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/d0d73ad1-e745-959f-93f6-371ff561bd42.png)
呼び出すとメールが届く
![スクリーンショット 2019-12-02 2.18.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/e2288f93-ee09-755f-58ef-4c85f5d20bd2.png)



#画面と機能
ちょっとのコーディングで作れます。
ちなみにAppMakerにはStyle EditorがあってCSSを記述することが出来ますが、今回そこはノータッチです。
**TOP**
　・ 担当者検索へ遷移
**担当者検索**
　・ 担当者検索、選択
　・ 来訪者情報入力へ遷移
　・ TOPへ戻る
**来訪者情報入力**
　・ 来訪者の会社、名前、人数の入力
　・ 担当者へ通知
　・ 完了後、TOPへ戻る
　・ 担当者検索へ遷移
#TOP
`Create new App > Blank Application`
Appの名前を適当につけて、既にPAGESにあるものをRenameしてTopとしましょう。
`Widget > Vertical Panel`をドラッグ&ドロップで全体に配置して、同じくWidgetからLabelとButtonを配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/1c0c0a7e-4a64-e546-4a08-77510aad3b77.png)
Labelを選択してWidgetの右のドロップダウンから好きなデザインにします。
そもまま右側にある`Property Editor -> Text`を変更してそれっぽくしましょう。
Buttonも同様です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/634a1544-692e-17c3-f450-a98ae65a2205.png)
位置が気持ち悪いので最初に配置したPanelを選択して以下のように変更
`Property Editor > Flow > justify : center`
`Property Editor > Flow > alignChildren : center`
`Property Editor > Layout > Width : auto`
`Property Editor > Layout > Height : auto`

PREVIEWで確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/6845e984-8bb7-a610-a97f-6158b27ee581.png)


#担当者検索
ここでは担当者を検索できるようにします。担当者はG Suiteのユーザーから検索できるようにします。
`DATA > ADD MODEL > Directory`
Model nameに`Employee`と設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/a7dabda9-5b00-7c0c-6307-12c0b2aba68c.png)
TOPを複製して`Search`とし、ラベル（ようこそ）とボタンを削除します。
`Property Editor > Panel > datasource`
パネルを選択して先ほど作成したEmployeeを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/0844cab8-5299-7b08-13d7-05e9f9840b5d.png)
続けてパネルのプロパティを下記に変更します。
`Property Editor > Flow > justify : start`
`Property Editor > Spacing > Padding top : 24`
`Property Editor > Spacing > Padding bottom : 24`
`Property Editor > Spacing > Padding left : 24`
`Property Editor > Spacing > Padding right : 24`

ウィジェットをこんな感じで配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/65587ea8-63db-2d92-bb3b-b7197584804f.png)

そしてListRowにGoogleユーザーが表示されるように設定していきます。
`@FullName` `@PrimaryEmail`と表示されているのはdatasource(= Employee = ドメイン内ユーザー)のFullName,PrimaryEmailを取得するようになっています。
`Property Editor > text > binding : FullName`
`Property Editor > text > binding : PrimaryEmail`
Imageにも設定します。
`Property Editor > image > url : ThumbnailPhotoUrl`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/13def8b7-0ebd-09f6-4bba-343d2481f11b.png)

PREVIEWで確認してみましょう。
ドメイン内のユーザーが表示されていればOK
![スクリーンショット 2019-12-01 21.35.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/d2650453-73c6-bdee-946c-a0491df43974.png)

次に配置したテキストボックスで検索できるようにします。
`Property Editor > Texta Box > value > Binding > More Options : datasources > Employee > query > keywords`
<img width="1319" alt="スクリーンショット 2019-12-01 21.50.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/188fdb9b-aa1f-ef8e-633a-bafde311e72a.png">
`Property Editor > Events > OnValueEdit`

```javascript
searchText(widget);
```
`SCRIPTS [+] > Client CREATE` でスクリプトファイルを作成し、Renameします。

```javascript
function pushHistoryForSearch(opt_keyword) {
  var state = {
    'timestamp': new Date().getTime()
  };
  var params = {};
  if (opt_keyword) {
    params.search = opt_keyword;
  }
  google.script.history.push(state, params, app.pages.Search.name);
}

function searchText(searchWidget) {
  if (!searchWidget.value) {
    pushHistoryForSearch();
    searchWidget.datasource.unload();
  } else {
    pushHistoryForSearch(searchWidget.value);
    searchWidget.datasource.query.pageIndex = 1;
    searchWidget.datasource.load();
  }
}
```
続いて検索中と時に`Loading...`、ヒットしなかった時に`No Result.`と表示されるように設定します。
Loading...ラベルが乗っているパネルを選択してプロパティを変更します。
`Property Editor > Display > visible : Binding > More Options > datasources > Employee > loading`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/d7c3052a-b964-aebf-6b1c-5b5ad13ae79e.png)
No Result.ラベルが乗っているパネルを選択してプロパティを変更します。
`Property Editor > Display > visible : Binding > More Options > !@datasource.loading && (!@datasource.loaded || @datasource.items.length === 0)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/98468335-3b4f-3845-0651-3eaa1adb4720.png)
PREVIEWで確認してみましょう。

- テキストボックスから検索ができること
- 結果が返ってくるまでLoading...が表示されていること
- 検索結果が0件の場合はNo Result.が表示されること
![スクリーンショット 2019-12-01 22.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/97513c1b-84f3-3069-dcba-ea4cbd73b016.png)
![スクリーンショット 2019-12-01 22.10.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/02aa9e2f-ef2a-1826-c876-b536ca9baab5.png)

画面遷移は簡単です。
`Property Editor > Events > OnClick : Navigation to Page... > TOP` 
Topの→ボタンにもSearch画面に遷移するようにプロパティを変更します。
`Property Editor > Events > OnClick : Navigation to Page... > Search` 

#来訪者情報入力
TOPを複製して`Visitor`とし、ラベル（ようこそ）とボタンを削除し、ウィジェットを配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312018/34920d26-6985-1e92-326f-d18dcf62f621.png)
`@FullName`には担当者検索画面で選択したRowの値が入ってきます。呼び出しボタンでメールアドレスが必要になるので`@PrimaryEmail`は隠し項目として配置しています。

`SCRIPTS [+] > Client CREATE` SendEmailMessageにRenameします。

```javascript
function sendEmailMessage() {
  var mailaddress = app.pages.Visitor.descendants.mailaddress.text;
  var company = app.pages.Visitor.descendants.company.value;
  var name = app.pages.Visitor.descendants.name.value;
  var persons = app.pages.Visitor.descendants.persons.value;
  console.log(mailaddress);
  
  var to = mailaddress;
  var subject = '受付にお客様が来ています。';
  var body = '受付に' + company + 'の' + name + 'さんが' + persons + '名で来られました。';
  console.log(body);
  google.script.run.sendEmail(to, subject, body);
  
  app.pages.Visitor.descendants.company.value = null;
  app.pages.Visitor.descendants.name.value = null;
  app.pages.Visitor.descendants.persons.value = null;
  app.showPage(app.pages.Top);
}
```
`SCRIPTS [+] > Server CREATE` SendEmailにRenameします。

```javascript
function sendEmail(to, subject, body) {
  try {
    MailApp.sendEmail({
      to: to,
      subject: subject,
      htmlBody: body
    });
    return;
  } catch(e) {
    console.error(JSON.stringify(e));
  }
}
```
担当者を選択したらVisitor画面に遷移するようにします。
`Property Editor > Events > OnClick : Navigation to Page... > Visitor` 

最後にPREVIEWで確認してみましょう。

- 担当者検索画面の検索結果、行を選択して来訪者情報画面に遷移すること
- FullName,PrimaryyEmail(隠し)の値が取得できていること
- 呼び出しボタンでメールが届くこと
- Top画面に遷移すること


#最後に
ありがとう。さようなら。南無南無。

#参考記事
https://developers.google.com/appmaker/templates/people-viewer?hl=ja
https://developers.google.com/appmaker/samples/email?hl=ja
https://tonari-it.com/app-maker-query-filters/