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

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

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

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 下準備

Starter Appで作成、名前変更。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 ついでにリセットもできるようにする

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

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にしています。データを消しても良さそうですが、無駄に作り直すことになるので値だけを更新しています。

動作確認

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

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