(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。前回の記事はこちらです。Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。Makerでフォーム上のLabelやTextBoxのデータを取得してサーバースクリプトに渡す方法です。Makerのフォームのデータをサーバースクリプトに渡す方法をお伝えしました。Makerでフォームからデータベースとしてのスプレッドシートを更新する方法です。Makerのデータベースとして使用するスプレッドシートがこちらです。Makerのフォームから更新作業を行えるようにしたいわけですね。スプレッドシートの操作なので、それはサーバースクリプトで行いますね。こちらの関数setRecordです。values.length).setValues([values]);}指定のスプレッドシートを開いて、その一番左のシートのデータについて、row番目のレコードを変数valuesで受け取った配列の値に書き換えるというものです。クライアント側のスクリプトがこちらです。values);}関数formatDateは、Date型をString型に変換するための関数です。関数updateRecordは、フォームに現在表示されているテキストボックスの内容を配列化して、その行番号とともに、サーバースクリプトの関数setRecordを呼び出して渡すというものです。あとは、この関数updateRecordを起動するだけですね...!ボタンクリックでスクリプトを呼び出しデータソースを更新するでは、ボタンクリックでクライアントスクリプトを呼び出すように設定していきましょう。ボタンにonClickイベントを設定するButtonウィジェットにonClickイベントを設定すればよかったですね。フォームの「UPDATE」ボタンを選択し、右側に表示されたプロパティエディタの「onClick」イベントを設定します。当初は「None」とありますので、そこをクリックするとスクリプトを入力できるようになります。以下のスクリプトを入力し、「DONE」をクリックすればOKです。actionJavaScriptupdateRecord();1updateRecord();スクリプトの1行目は、クライアントスクリプトの関数updateRecordを呼び出すというものですね。その先、サーバースクリプトが呼び出されて、スプレッドシートが更新されるはずです。データソースを再読み込みするただ、これだけではうまくいかない点があります。Makerのデータソースが更新されないのです。Makerのデータソースをリロードする処理が必要です。クライアントスクリプトの処理を以下のように変更します。values);}まず、関数updateRecordのほうですが、9行目。google.script.runオブジェクトにwithSuccessHandlerメソッドを追加しています。サーバー側のスクリプトが成功したら、その引数に指定している関数「loadDatasouce」を実行するのです。それで、その関数loadDatasouceは、現在のアプリケーションのデータソースを読み込むというものです。そのステートメントを解説していきましょう。Appオブジェクトのdatasourcesプロパティを使用して、現在のアプリケーションのデータソースの集合を取得します。app.datasourcesデータソースは複数ある可能性がありますので、その集合をPropertyMapオブジェクトとして取得します。PropertyMapオブジェクトはオブジェクト名で要素を取得できましたのでJavaScriptapp.datasources.EmployeeData1app.datasources.EmployeeDataここまでで、DataSourceオブジェクトEmployeeDataを取得できるわけです。最後、以下のloadメソッドで、データソースの読み込みを行うというわけですね。Makerからスプレッドシートを更新する動作確認をしていきましょう。PREVIEW画面を開いて、フォームにいろいろと入力して「UPDATE」ボタンをクリックします。各フィールドの値は以下の通りとしました。Falseスプレッドシートを確認すると、以下のように更新できていることが確認できます。Makerでフォームからデータベースとしてのスプレッドシートを更新する方法をお伝えしました。これで、ようやく目的は達成ですね。Makerの全体感とモデル、ページ、ウィジェット、クライアントスクリプト、サーバースクリプトといった各部の役割をだいたい理解できたのではないでしょうか。次回は、さらに進めて、データの削除ができるようにしていきたいと思います。Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。Makerで確認用のポップアップダイアログを作成してボタン操作により表示する方法です。このシリーズでは、スプレッドシートをデータベースとして簡単なアプリケーションを作る方法をお伝えします。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。Makerのチュートリアルをお送りしています。Makerのスタイルの基本について、またテーマという機能を使って全体のスタイルを設定する方法についてお伝えします。Makerでスプレッドシートをデータベースとしたアプリケーションの作り方をシリーズでお伝えしております。Makerでクエリスクリプトでスプレッドシートのデータを取得する方法です。Makerアプリの作り方についてシリーズでお伝えしています。SQLのインスタンスをデータベースとして設定していきます。Makerのチュートリアルをお送りしています。今回からデータベースを使用するアプリを作ります。Tableタイプのモデルのです。Makerのチュートリアルについてシリーズでお伝えしています。Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法です。非同期通信の理解がポイントですよ~。Makerアプリの作り方についてシリーズでお伝えしています。Makerでテーブルをページに配置する方法をお伝えします。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント108セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント108セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。RowSourceプロパティとAddItemメソッド2020.01.21GASでGoogleスライドのSlideオブジェクトの概要とその取得方法2020.01.162020.01.24Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。