(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。Makerアプリの作り方についてシリーズでお伝えしています。前回の記事はこちらです。Makerアプリの作り方についてシリーズでお伝えしています。SQLデータベースにデータ追加するフォーム作成する方法です。SQLをデータベースとした簡単なアプリを作成しました。これで完成!というわけなのですが、なぜこんなにドラッグ&ドロップだけでアプリが作れちゃうと思います?それは、デフォルトでアプリとして機能するように、色々な工夫が仕込まれているからなんですね。「バインディング」と「イベント・アクション」です。Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解いていきます。Makerアプリ開発のはじめかた前回までのおさらい前回までで作成したアプリを題材に進めますので、紹介しておきましょう。作成したアプリは「従業員データ」を追加、編集するアプリです。SQLモデルを使用していて、以下のような構成になっています。そのモデルのデータをテーブル表示するページ「TablePage」を作成しました。データの追加や編集を行うページとして、以下の「EditPage」も用意しました。以上が、アプリの全体像になります。挙動については改善の余地はありますが、データの追加、閲覧(並び替えやページングも可)、編集、削除などの機能が既に使える状態です。メニューをポチポチとドラッグ&ドロップだけの作業で、なぜここまでの機能が実装できるのか...?今回はその点について考えていきましょう。バインディングとはまず、ページ「EditPage」を選択して、フォーム上の「Name」のテキストボックスをクリックします。Editor」と表示されていますが、これは選択している要素についてのさまざまな項目=プロパティを確認したり、設定したりすることができる画面です。ここで、valueプロパティとlabelプロパティの設定を確認していくのですが、何やらコードが記述されていますね。これは「バインディング式」とよばれるもので、ウィジェットのプロパティと他のプロパティとを双方向で結びつけるものです。以下で詳しく見ていきましょう。valueプロパティのバインディング式valueプロパティはそのテキストボックスに表示する値を表すものですが、以下のようなコードが入力されています。valueプロパティJavaScript@datasource.item.Name1@datasource.item.Name例えば、valueプロパティであれば、コードを構成する各ワードは以下のような意味があります。Nameフィールドの値を参照するですから「データソースの現在選択されているアイテムの、Nameの値」とバインドされているということになります。labelプロパティのバインディング式labelプロパティはそのラベル部に表示する値を表しますが、それぞれ何やらコードのようなものが記載されています。表示名を参照するつまり「EmployeeモデルのNameフィールドの表示名」を表しています。SQLモデルを作成するときに設定をしたものでしたね。Makerでは基本的なバインディングがあちこちにデフォルトで仕込まれています。作成しただけで、モデルやデータソースと、UIがインタラクティブに連動するのです。イベントとアクションとは次にイベントとアクションについて見ていきましょう。イベントとは「ボタンをクリックした」とか「プルダウンを選択した」とか、そのようなときに発生するものです。Makerでは、それらのイベントに応じて、何らかの動作つまりアクションが発生するようにすることができます。その例を見ていきましょう。CREATEボタンのイベントとアクションページ「EditPage」の「CREATE」ボタンを選択します。Editorでそのプロパティを確認できますが、ここでは「onClickプロパティ」に注目します。onClickプロパティはボタンをクリックしたときの動作を指定するものです。action」というダイアログが展開されます。抜粋すると以下のとおりです。"Body"].focusFirstWidget();});これはちょっとややこしそうですが、簡単にいうと以下のような動作です。データソースにアイテムを追加するフォーム上のボディ部分のうち最初のフィールドにフォーカスを当ててねこのような便利なボタンとそのイベントによるアクションが、フォームを配置した時点ですでに搭載されているということです。ありがたいことですよね。Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解いてまいりました。デフォルトの機能として、バインディングとイベント&アクションが随所に仕込まれているというのが、ポイントです。オリジナルのバインディング式やスクリプトを仕込むこともできますが、活用できるところは、なるべくデフォルトの機能を活用したいですよね。次回は、アプリの公開について見ていきたいと思います。Makerアプリの作り方についてシリーズでお伝えしています。Makerアプリを公開していきます。SQLが第一の選択肢になりました。Makerアプリの作り方を易しく丁寧にお伝えしていきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法をお伝えしていきます。Makerアプリの作り方についてシリーズでお伝えしています。Makerでアプリを再公開して修正内容を反映する手順をお送りします。Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。Makerでデータ追加用のポップアップを作成してその表示の動作確認をするまでをお伝えします。Makerでスプレッドシートをデータベースにしたアプリの作り方についてシリーズでお伝えしています。Makerで新しいページとフォームウィジェットを配置する方法をお伝えします。Makerのチュートリアルについてお伝えしています。今回は、メール送信アプリ作成の最初の手順として、外側とButtonウィジェットのonClickイベントのスクリプトの作成までを進めます。Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。Makerでボタンクリックで動作するクライアントスクリプトからサーバースクリプトを呼び出す方法です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント107セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント107セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。ご依頼・お見積などお気軽にどうぞ!お問い合わせフォーム新着記事GASでGoogleスライドのSlideオブジェクトの概要とその取得方法2020.01.162020.01.16【エクセルVBA】ユーザーフォームにコンボボックスを追加する方法2020.01.162020.01.16GASでGoogleスライドを操作するSlidesサービスの基礎の基礎2020.01.152020.01.16GASでGoogleスライドのプレゼンテーションを操作するはじめの一歩2020.01.142020.01.15GASのconsoleクラスのメソッドで実行時間をログ出力する方法2020.01.122020.01.12Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。