App Makerでボタンクリックで独自のスクリプトを動作させる方法

button

photo credit: dejankrsmanovic Old Elevator Button via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。

前回の記事はこちらです。

App Makerでボタンウィジェットを設置してクリックで動作させる方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、App Makerでボタンウィジェットを設置してonClickイベントでクリック動作させる方法をお伝えします。

フォームウィジェットにボタンを設置して、クリックによる動作をさせる方法をお伝えしました。

さて、そのボタンクリックによる動作ですが、独自のスクリプトを仕込むことができるんです。

ですから、あらかじめ用意されたこと以外のことも実現可能です。

ということで、今回はApp Makerでボタンクリックで独自のスクリプトを動作させる方法をお伝えします。

では、行ってみましょう!

スポンサーリンク

前回までのおさらい

まずは前回までのおさらいです。

App Makerで従業員データを扱うアプリケーションを作っております。

元のデータを、以下のスプレッドシートにして、App Makerと連携させたい…というのが、概ねの最終目標ですね。

スプレッドシートの従業員データ

前回は、以下のようにフォームウィジェットに「BACK」ボタンウィジェットを配置して、クリックをしたら、別ページに遷移するという部分を解説しました。

App Makerでボタンをクリックする

「BACK」ボタンについて、右側のプロパティエディターでonClickイベントについて、「Navigate to TablePage」という設定をすればよかったのです。

さて、このボタンクリックによる動作なのですが、独自で作成したスクリプトを呼び出すこともできるんですね。

今回はその方法を解説していきますよ!

クライアントスクリプトを作成する

新規クライアントスクリプトを追加する

では、まずボタンクリックにより動作をするスクリプトを作成していきます。

App Makerの左側「SCRIPTS」のところにカーソルを当てると「+」アイコンが出てきますので、クリックしましょう。

App Makerで新しいスクリプトを追加する

ちなみにですが、App Makerでなにか作るときは

  • DATA: データベース
  • PAGES: ページ(ページ上にウィジェットを配置する)
  • SCRIPTS: スクリプト

このいずれかになりますね。

スクリプトの種類とは

それで、「Create Script」というダイアログが開きます。

スクリプトの種類を尋ねられますが、以下のとおり。

  • Client: ブラウザ上で動作する(ボタンクリックや、UIによるイベントで動作させる)
  • Server: サーバー上で動作する(GASを使ってスプレッドシートなどを操作する)

今回は、ボタンクリックで動作させたいので、クライアント側のスクリプトです。

ですから「Client」を選んで「CREATE」をクリックします。

App Makerでクライアントスクリプトを作成する

アラートを表示するサンプルスクリプト

すると、以下のように画面に切り替わります。

「NewScript」という名前のスクリプトで、その種類は「Client」で、サンプルスクリプトが入力されていますね。

App Makerのクライアント側のサンプルスクリプト

スクリプトは以下のとおりです。

function sayHello(message){
   alert("Hello, " + app.user.username + "!");  
}

alertメソッドは、ブラウザを操作して警告メッセージを表示する命令ですね。

alert(メッセージ)

それで、その内容ですが、ここからはApp Makerのクラスです。

まずはAppクラスのuserプロパティです。これは、App Makerアプリケーションの現在のユーザーを表します。

app.users

戻り値はUserオブジェクトというオブジェクトです。

そしてさらに、usernameプロパティですね。

Userオブジェクト.username

これは、Userオブジェクトが表すユーザーのログイン名です。

つまり、スクリプトとしては、「Hello, ログイン名!」となるはず、ということですね。

クライアントスクリプトをリネームする

スクリプトはサンプルをそのまま採用するとしましょう。

それで、スクリプトの名前を変更しておきます。

鉛筆アイコンをクリックしてタイトルを編集します。

App Makerのスクリプト名を編集する

「Rename Script」というダイアログが出ますので、例えばスクリプト名を「ClientScript」などとして「OK」します。

App Makerでスクリプトをリネームする

これでリネーム完了です。

ボタンクリックでスクリプトを動作させる

では、このスクリプトを動作させるためのボタンを準備していきましょう。

まず、フォームウィジェットに新たなButtonウィジェットをドラッグして配置します。

App MakerでButtonウィジェットの設置と設定

プロパティエディターで以下のように設定します。

  • name: ButtonHello
  • text: Hello
  • onClick: Custom Action

onClickイベントで「Custom Action」を選択すると、以下のように「Custom Action」にスクリプトを入力できます。

App MakerでButtonウィジェットにスクリプトを入力する

ここでは、以下のように先ほど作成したスクリプトの関数名を入力して「DONE」です。

sayHello();

ボタンによる自作スクリプトの動作確認

では、プレビューをして動作確認をしてみましょう。

「PREVIEW」をクリックして、フォームの「HELLO」ボタンをクリックします。

App Makerでボタンをクリック

すると、以下のように警告メッセージが表示されます。

App Makerでアラートが表示された

その内容は

Hello, takahashi!

となっていますね!

ちゃんとログイン名が使われているようですね。

まとめ

以上、App Makerでボタンクリックで独自のスクリプトを動作させる方法をお伝えしました。

ボタンで動作するクライアント側のスクリプトの作り方と仕込み方を理解いただけたかなと思います。

次回は、サーバー側のスクリプトについて見ていきましょう。

App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、App Makerでボタンクリックで動作するクライアントスクリプトからサーバースクリプトを呼び出す方法です。

どうぞお楽しみに!

連載目次:App Makerでスプレッドシートをデータベースとして使う

Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Maker。このシリーズでは、スプレッドシートをデータベースとして簡単なアプリケーションを作る方法をお伝えします。
  1. App Makerでスプレッドシートをベースにモデルを作成する方法
  2. App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法
  3. App Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説
  4. App Makerで新しいページとフォームウィジェットを配置する方法
  5. App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法
  6. App Makerでボタンウィジェットを設置してクリックで動作させる方法
  7. App Makerでボタンクリックで独自のスクリプトを動作させる方法
  8. App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法
  9. App Makerのボタンクリックでスプレッドシートにアクセスする方法
  10. App MakerでフォームウィジェットでLabelウィジェットを入力可能なウィジェットに差し替える
  11. App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法
  12. App Makerでフォームからデータベースとしてのスプレッドシートを更新する方法
  13. App Makerで確認用のポップアップダイアログを作成する方法
  14. App Makerでポップアップダイアログの表示の変更とバインディング式について
  15. App Makerでポップアップのボタンクリックによるイベントを設定する
  16. App Makerでポップアップダイアログのボタンで動作するレコード削除のスクリプト
  17. App Makerでデータ追加用のポップアップを作成してその表示の動作確認をする
  18. App Makerでデータベースにレコードを追加するスクリプトを作成する
タイトルとURLをコピーしました