テーブルに追加していくだけです。使うのは簡単ですが、作るのはBudibaseに慣れていなかったこともあり結構大変でした。本記事では、BudibaseのTipsをブログにまとめるべく、フォームの自動入力方法について、掲載したいと思います。Budibaseを使った感想フォームの自動入力とはフォームの自動入力とは、入力フォームの一部を入力するだけで他の入力ボックスを自動で埋める機能です。再投資計算ツールで作成したフォームがこちらです。上の会社名を保有株式一覧から選択項目として入力すれば、以降の入力項目は自動で記入されます。数量については、一旦保有数MAXで記入されますが、修正も可能です。自動入力フォームのつくり方データを用意Budibaseでは、大きく「データ」、「デザイン」、「オートメーション」の3つの設定項目があります。初めに用意するのが、「データ」です。最初にデータ構造や取得方法を決めることで、自ずと後のデザインが定まっていきます。こんな感じでデータを記入していくだけです。入力されている株式投資データは架空のものです。操作方法は詳しく記載しませんが、直感的で使いやすいです。言うなら、スマホやタブレットではなくPCでの作業をおすすめします。ブラウザベースのため、OSは何でもよいです。続いて、デザインの設定をします。こちらも操作に関しては、特段難しい点はありません。コンポーネントを追加して、ツリー構造を作成していくだけです。コンポーネントは右下の「+」ボタンで追加していき、ツリー構造は次のようにします。[ボタン(追加ボタン)]データプロバイダーの設定デザイン設定ができたら、データプロバイダーの設定を行います。データプロバイダーは、最初に用意したデータをデザインに提供するコンポーネントです。ツリーのデータプロバイダー(会社名)を選択すると、右側の設定画面に以下画面が表示されます。DBのテーブル名が設定されていればオッケーです。次に、保有株式の会社名の選択ボックスを作成します。ツリーの選択ボックスをクリックすると、右側の設定画面の下のほうに下記画面が表示されます。ここでは4つの項目を設定します。provider」を選択します。provider」で、データプロバイダー「会社名」を選択します。column」で、会社名の列「CompanyName」を選択します。column」も同様に会社名の列「CompanyName」を選択します。選択ボックスの変更アクションを設定ここまでで、保有株式の会社名がリストから選択できるようになりました。次に、いよいよ自動入力の設定です。set」ボタンをクリックすると、下記のようなアクション設定画面が出てきます。左のアクションリストから次の7つのアクションを順に追加します。State」を追加します。Value」はテキストボックスや数値ボックスを更新するアクションです。銘柄コード~損益までのボックスを更新するため、6つのアクションを追加します。State」は、サイトの状態を記憶するためのもので、後ほど説明します。value」を選択、「Field」で「Code」を選択します。最後の「Value」は後で設定しますので、空欄のままにします。State」も同様に設定しますが、「Field」の項目をそれぞれ、「PurchasePrice」、「Quantity」、「CurrentPrice」、「SalePrice」、「Gain_Loss」に設定します。State」の「Value」の設定をしていきます。State」を選択し、「Value」のテキストボックス右の稲妻マークをクリックします。valueの入力画面が表示されますので、まず最初に左上の「JavaScript」タブを選択します。次のJavaScriptを入力します。コピペで問題ありません。r[0].Code;このコードは、データプロバイダー「会社名」の行の連想配列リストから、フォームで選択した「会社名」に一致する連想配列を取り出し、キー「Code」に対応する値を返します。入力したら、右上の「Save」ボタンをクリックします。State」にも同様に設定しますが、上記JavaScriptの太字にした部分をそれぞれ「PurchasePrice」、「Quantity」、「CurrentPrice」に変更します。5番目、6番目の「SalePrice」、「Gain_Loss」は、表にデータが存在しないため、それぞれ下記JavaScriptを設定し、値を算出します。数量に現在の株価を掛けて算出します。損益を算出しています。r[0].PurchasePrice;記入したら右上の「Save」ボタンをクリックします。State」の設定です。value」を選択し、「Key」に「maxnum」と入力します。次に「Value」で稲妻マークをクリックし、「JavaScript」をクリック、下記コードを入力します。r[0].Quantity;これで、サイトの状態として、キー「maxnum」に選択した株式の数量データが記憶されます。目的としては、保有株式の数量以上に売却することはできないため、売却数量の最大値として記憶しておくことです。長かったですが、ここまでで、自動入力アクションの設定は完了です。最後に忘れずに、右上の「Save」ボタンをクリックしましょう。State」で設定した「maxnum」の活用方法を記載します。set」ボタンをクリックします。以下の画面が表示されます。Rule」ボタンをクリックし、以下のように設定を行います。}}」、「売却できる数量を超えています。}}」に会社名選択時に設定した状態が反映されています。プレビューで確認すると、下記のようになります。今回初めてローコードツール「Budibase」を使ってみました。これだけの機能をゼロから作成しようとすると、ものすごい大変ですが、Budibaseなら要点だけ押さえてあとはポチポチするだけで済むため、慣れてしまえば圧倒的に楽だと思いました。触ってみた感想としては、一部ページ更新周りで不具合があるような気がしています。(仕様の可能性もありますが)。発展途上なのかもしれません。日本語の情報が少なく、とっつきにくい部分もありますが、慣れてしまえばあまり関係ないかなと思いました。筆者の学習方法は、Budibaseの公式ページが用意しているチュートリアル、Youtube動画、リファレンスが主です。あとは、海外の掲示板サイトも参考にしました。Budibase.budibase.com冒頭にも書きましたが、目標物の設定が大切です。「こういう機能が欲しいけど、できそうにない」という場合も当然ありますが、その場合は、代替手段がないか検討します。基本的には我流ではなく、Budibaseのフレームワークに従うように構成します。頭を柔らかくして取り組むのがコツです。今回程度のアプリであればクラウドサービスを使って無料で作成できますので、興味のある方はチャレンジしてみてはいかがでしょうか。コピーNABをフォローするNAB関連記事アプリ開発プログラミング初心者が最初に習得したい言語IT趣味のプログラミングで工作!M5Stackを使った作品例プログラミングが趣味=オタクという時代は過ぎ去りました。子どもたちが小学校でプログラミングを習う時代です。趣味としてのプログラミングを楽しみましょう。【解決】Python+Seleniumのwebdriver_managerでエラーが発生、webdriver_managerの手動アップデートで解決。ITPythonで音声処理(6)音声のキーを変更してみるPythonで音声処理(6)リアル音声をオーバーラップ+窓関数処理を実施し、音声のキーを変更して元の音声に戻してみます。【ESP32-CAM】CameraWebServerのWebUIをシンプル化ESP32-CAMのサンプルプログラム「CameraWebServer」のWebUIをシンプル化してみます。「CameraWebServer」では、カメラの設定を微調整する機能が実装されていますが、カメラの設定値は固定とし、シンプルで全画面表示可能なライブカメラのUIに変更します。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。認証期間が終了しました。ページを再読み込みしてください。TrueWalk.メニュープロフィールホーム検索トップサイドバータイトルとURLをコピーしました。