クリックされた数をカウントする

どうもこんばんは、みかんです。

**！！！！とつぜんですがたいせつなおしらせ！！！！**

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1


??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・


**！！！！おしらせはおわりです！！！！！**

今回は「クリックされた数をカウントする」を書いてみます。
下記ステップでやっていきます。

* 1 下準備
* 2 ボタンとスクリプトをつなげる
* 3 インクリメントする処理を書く
* 4 ついでにリセットもできるようにする

# 1 下準備

|![gif001-compressor.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/f20d5113-b439-49f7-6987-8d7a9ce66401.gif)|
|:-:|

Starter Appで作成、名前変更。

|![gif002-compressor.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/b686612d-1b48-5546-f0ed-d81629eb4f18.gif)|
|:-:|

カウント数を記録しておくためのモデルを作成。

|![gif003-compressor.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/c3e2eebf-a0f3-b207-1ae9-d154b04bce74.gif)|
|:-:|

カウント数表示用のラベルとボタンを配置。

|![gif006.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/fa0986da-b1ad-e929-ed83-f5ed4b39f71a.gif)|
|:-:|

コンテンツパネルのデータソースを先程作成した「Sample」モデルに設定。
その後に、カウント数表示用ラベルのvalueを「Count」フィールドとバインドさせます。

# 2 ボタンとスクリプトをつなげる

「クリックされた数をカウントする」
を分解すると、2つの処理になります。

- クリックされた時
- 数を増やす

このうち、「クリックされた時」に何かをするをやりたい場合は、クリック可能なウィジェットのプロパティにある「onclick」イベントを設定します。

|![ap01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/3b734859-0e6d-5f31-276d-bc5ddc876112.png)|
|:-:|

onclickをクリックすると、上の画像のように選択肢がいくつか並びます。
その一番上の「Custom Action」を選択すると、自分でスクリプトを書いて良い欄が表示されます。

|![ap02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/8f1a0570-95df-a92b-d1e4-33d9bd65b1ad.png)|
|:-:|

ここに実際にやりたいことを沢山書いても良いのですが、欄も狭いし見通しが悪いです。
他のところにスクリプトを書いておいて、ここではそこを呼び出す、という書き方もできるので、基本的にはそうしたほうが良いでしょう。
ってことで上の画像ではcountupという名前の関数呼び出しだけを書いています。

|![gif005-compressor.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/98d6ce72-0ef3-a07d-dfac-1e4f5e56515e.gif)|
|:-:|

「他のところ」はナビゲーションパネルのSCRIPTS配下になります。上のgifでは、新しいスクリプトを書く領域を新しく作り、先程書いておいたcountup関数の定義を書いています。

普通は定義を先に書いて、後からonclickにそれを呼び出すための記述をしますが、最終的に揃っていればどちらが先でも構いません。

# 3 インクリメントする処理を書く

というわけで、カウント数を増やす=インクリメントする処理を書くと、こんな感じになります。

```javascript
function countup() {
  var data = app.datasources.Sample.item; //「現在選択されているデータ」を取る
  console.log(data);//たんなるログ。確認用  
  data.Count = data.Count + 1;
}
```

実際に数を増やしているのは`data.Count = data.Count + 1;`です。
代わりに`data.Count++`と書いてもインクリメントされます。

ただ、このコードを今の時点でそのまま動かすと動きません。
最初の「現在選択されているデータ」を取る、ですが最初の時点ではそもそもデータが1件も無いので何も取得できない、となります。

それでは困るので、下のように処理を追加します。

```javascript
function countup() {
  var data = app.datasources.Sample.item; //「現在選択されているデータ」を取る
  console.log(data);//たんなるログ。確認用  
  if (!data) {
    //データ1件作ってくれとお願いする
    app.datasources.Sample.createItem(function(record){
      //作成完了時にここに来るので、1回目のクリックということで1を入れる
      record.Count = 1;
    });
    return;//忘れずに処理を終了しておく
  }
  //データが存在しているなら、このようにもともと入っている数字に1を足す形でインクリメントする
  data.Count = data.Count + 1;
}
```
もしデータが無かったら新規作成して、カウント数は1とする
というコードになりました。

1件しか用意しない想定のデータをどう用意するか？という方法はいくらでも考えうるので、あくまで1例です。
DBに直接データを入れる、初期設定するための画面をつくる、今回の様にロジックでデータを追加するなどがありますね。

余談ですが、1件のデータの自動読み込みは、親のコンテンツパネルにデータソースを設定しているため実行されます。
設定していても読み込まれないようにする設定とか、コードで読み込む方法とかがあったりするのですが、
別記事で細かく紹介したいと思います。

# 4 ついでにリセットもできるようにする

ボタンを置いて、つないで、コードを書きます。一緒ですね。

|![gif007.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/b43cd0c1-9c91-3f55-6f40-8e76307d8155.gif)|
|:-:|

```javascript
function clear() {
  var data = app.datasources.Sample.item;
  console.log(data);
  if (!data) {
    app.datasources.Sample.createItem(function(record){
      record.Count = 0;
    });
    return;
  }
  data.Count = 0;
}
```
問答無用で0にしています。データを消しても良さそうですが、無駄に作り直すことになるので値だけを更新しています。

# 動作確認

|![gif008.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/66485b5f-7cbe-dd8c-f463-f564cef78f71.gif)|
|:-:|

簡易的ないいねボタンができましたね！(強引)
シンプルですが、App Maker主要な3要素である「モデル」「ページ」「スクリプト」をすべて使うので、作り方をイメージするにはちょうどよいと思います。

以上です。良いApp Makerライフを!