9月に入りましたがまだまだ暑い日々が続きますね…。いろいろ忙しくなってくる時期ですが、しっかり水分補給や休息をとっていきましょう！

さて、今回はローコード開発ツールWebPerformer-NXのカスタマーサクセスを担当してくださっている方から、実用アプリの作成方法をお届けします！

みなさま、はじめまして。カスタマーサクセスを担当している中里です。

今回はWebPerformer-NXを用いた実用アプリの作成方法を3回にわたってご紹介したいと思います。
ローコードツールを初めて使う方でもすぐに取り組むことができる内容です。

作成方法を通して、ぜひWebPerformer-NXを触ってみたいと感じていただければ幸いです。
（触ってみるきっかけとなることを目的としているため、細かな解説や機能の説明は割愛しています。ご了承ください。）

アプリの概要

今回は社内で使用される備品の管理を効率化することを目的とする社内備品管理アプリを作成してみます。
このアプリでは各備品の保管状況や貸出状況をデータベースに保存し、管理することができるようにします。
その１では下記の2画面を作成していきます。
基本となる各備品の保管状況を把握できる状態まで、作成していきたいと思います

画面の作成

それでは、実際に画面を作成していきましょう。アプリを作成した状態から進めます。
今回は、ホーム画面と備品編集画面を、WebPerformer-NXの「フォームアプリケーション作成」機能を使って、作っていこうと思います。
「フォームアプリケーション作成」機能は、元になるUI画面に配置されたコンポーネントから、一覧画面定義やデータ保存用のDBテーブルが自動で生成する機能です。

備品編集画面に配置する項目は下記の通りです。

<配置コンポーネント一覧>
・備品名
・備品番号
・購入日
・保管場所
・備考欄

配置が完了したら、「フォームアプリケーション作成」を実行します。
すると、備品編集画面にボタンが配置され、自動的に一覧表示用のUI画面が配置されたことを確認できます。
処理についても備品編集画面の登録・更新・削除処理とホーム画面の備品一覧表示処理が自動で定義された状態となっています。
ただしボタンのラベル名が英語表示となっていますので、分かりやすい表示となるよう日本語に調整します。
また、生成された一覧表示用のUI画面を「ホーム画面」に名称変更します。

ここから、ホーム画面に検索機能を追加します。
備品名と備品番号を検索条件として、前方一致で検索できるようにしたいと思います。
検索条件となるコンポーネントを追加し、検索ボタンを追加します。

そして検索処理を追加するため、検索ボタンのアクションと呼ばれる処理を定義する欄を編集していきます。
「検索」ボタンを右クリックするとアクションの編集を選択することができます。アクションボードを開いて前方一致検索を実行するアクション処理のプログラムを記述し、関数に検索用のSQL処理を追記します。処理の記載が完了したら、検索処理の実装は完了です。

アプリの事前設定・デプロイ

最後にアプリケーションの設定を行います。
「アプリケーション設定」-「一般設定」の規定データベースを自分の環境のDBに変更します。また、最初に表示するUIを「ホーム画面」と変更し、保存します。これで準備は完了です。
右上の「実行ボタン」を押下し、リリース環境にデプロイします。
リリース環境のURLにアクセスすることで、先ほど定義したアプリの動作を確認できます。

まとめ

本記事ではWebPerformer-NXを用いた実用アプリの作成のその１として、ホーム画面と備品編集画面の作成方法をご紹介しました。
ここまでで、約1.5時間程度で作成可能となります！

完成したアプリの定義体については、WebPerformer-NXサポートサイトにサンプルとして掲載されております。
MENU→サンプル→備品管理アプリ（note掲載サンプル）

その他にも、ローコード開発ツールを初めて使う方向けのチュートリアル記事も掲載しておりますので、こちらもどうぞ！

最後まで読んでいただき、ありがとうございます、その２もお楽しみに。

※この記事は、2023年8月時点の情報にて制作しております。

★―☆。.:*:・゜――――――――――――――――――――――――

キヤノンITソリューションズ 公式Webサイト

紹介製品

WebPerfomerシリーズのマガジンはこちら