(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。Makerのチュートリアルについてシリーズでお伝えしています。Makerのチュートリアルを送りしています。Makerのクライアントスクリプトとは何か、またスクリプトエディタでクライアントスクリプトを入力する方法についてお伝えします。Makerでスクリプトエディタでクライアントスクリプトを仕込む方法についてお伝えしました。仕込んだスクリプトについて解説をしていませんでしたので、今回ガツっと紹介していきます。Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法です。非同期通信なので、ちょっと一工夫入りますよ。前回のおさらいまず、これまでのおさらいです。メール送信アプリを作成していまして、ページの構成は以下のようになっています。FORM」ボタンのonClickイベントにclearEmailForm();1clearEmailForm();というスクリプトを仕込んでいます。これらのスクリプト内で関数sendMessageと関数clearEmailFormを呼び出していますが、これらはクライアントスクリプトとして以下のものを仕込みました。msg);}今回はこのクライアントスクリプトの内容について解説をしていきます。メールフォームをクリアする関数まず、関数clearEmailFormから解説をしていきます。この関数はメールフォームの各ウィジェットをクリアするといった処理をします。"";}ページのすべてのウィジェットを取得する5行目ですが、appは現在実行してるアプリケーションを表すAppオブジェクト、pagesプロパティはAppオブジェクトに含まれるページのコレクションを取得しています。ページのコレクションはプロパティマップで取得できますので、ピリオドに続けてnameプロパティを指定することで、各ページを取得することができます。例ではapp.pages.Emailまででページ「Email」を取得したということになります。descendantsはその子ウィジェットをプロパティマップとして取得します。ButtonウィジェットのonClickイベントに仕込んでいるwidget.parent.descendantsと同じことになるのですが、今回の仕込み先はウィジェットではなく、スクリプトエディタになりますので、こちらの記法を使ってるということになると思います。各ウィジェットをクリアする続くステートメントはわかりますね。editorウィジェット「Msg」のvalueプロパティを全て空文字に設定する、つまりクリアするという処理になります。サーバースクリプトの関数を呼び出すさていよいよここから本番で、サーバースクリプトに記述した関数を呼び出す方法です。関数sendMessageは、各ウィジェットに入力されているto:メール送信先アドレスsubject:件名msg:メール本文を受け取り、サーバースクリプトに仕込まれている、Emailを送信するための関数sendEmailMessageを呼び出すというものです。msg);}しかし途中に何やらいろいろありますね。Makerでは、クライアント側からサーバー側の関数にアクセスをするためにgoogle.script.runというもの(JavaScriptAPI)が用意されています。書式としては、以下のように記述します。google.script.run.関数(引数)ただし、この場合のクライアントとサーバーのやり取りは非同期通信となります。サーバーに依頼を出してからその回答が来るまで待っていたら、その間ブラウザの操作ができないことになります。ブラウザは他の処理を進めながら、その回答を待つということになります。望んだ回答が返ってこないこともあるので、その場合も想定する必要があります。withSuccessHandlerとwithFailureHandlerそれをコントロールするために、withSuccessHandlerとwithFailureHandlerを使用し、以下のように記述します。サーバーが正しく応答したときの処理}).関数(引数)google.script.runに続いてコールバック関数を与えたwithFailureHandlerコールバック関数を与えたwithSuccessHandler呼び出す関数がピリオドで連続的に連結して記述しているのに注目してください。メソッドチェーンというやつですね。サーバーから正しい応答が戻ってきた場合サーバーから正しく応答がなされればwithSuccessHandlerに指定したコールバック関数を実行します。その際サーバースクリプトからの戻り値があれば、コールバック関数の引数として指定した変数に格納されます。sent...」とし、関数clearEmailFormを呼び出すということになります。一方で、サーバーからの応答がエラーとなればwithFailureHandlerに指定したコールバック関数を実行します。その際、Errorオブジェクトがコールバック関数の引数として指定した変数に格納されます。この例ではLabelウィジェット「EmailStatus」のテキストとしてエラーメッセージを表示するということになります。ややこしそうな見栄えはしてますが、分かってしまえばなんてことないと思います。Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法についてお伝えしました。組みやすいと思います。クライアントからの呼び出しはGASでも同様の方法で行われますので、ここで覚えてしまえばGASでも使うことができますよ。次回はいよいよサーバースクリプトを仕込んで行きたいと思います。Makerの初心者向けチュートリアルのスクリプト編を送りしています。メールを送信するスクリプトを仕込んでアプリを完成させていきます。初心者向けチュートリアルの第4弾。Makerでクライアントスクリプトとサーバースクリプトの使い方をお伝えしていきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。Makerでアプリを作るチュートリアルをお送りしています。今回は、作成したアプリを開いて、ラベルウィジェットの設置、テキストがnullだった場合の分岐処理の追加などの修正をしていきます。Makerアプリの作り方についてシリーズでお伝えしています。MakerのPopupページでナビゲーションメニューを作成していきます。Makerアプリの作り方についてお伝えしています。Fragmentを作成するはじめの一歩です。Makerチュートリアル。今回は、使用する二種類のスクリプトであるクライアントスクリプトとサーバースクリプトについて、またウィジェットの値をアラート表示するスクリプトについて解説をします。Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。Makerでポップアップダイアログのボタンで動作するレコード削除のスクリプトを紹介していきます。Makerアプリの作り方についてシリーズでお伝えしています。SQLのモデルを作成する方法を進めていきます。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。Scriptが「V8ランタイム」をサポート!モダンなECMAScript構文が使えるようになった2020.02.072020.02.08GASでコピーしたGoogleスライドのプレゼンテーションを取得する方法2020.02.052020.02.05Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。