超高速開発ツール「Web Performer」で社員検索システムをノンプログラミング開発

はじめに

近年の開発では、めまぐるしく変化していくビジネスニーズに迅速に対応し、柔軟に対応できる攻めの情報システムが求められています。そのような現状で従来の方法のまま開発・運用に取り組もうとすると、一層のコスト増大を招きます。

そこで注目されるのが「超高速開発ツール」です。

超高速開発ツールは、情報システムの開発工程のうち、ビジネスルール（業務要件）や実装要件などの基本設計情報を登録するだけで、実装工程（コーディング）をノンプログラミングで自動化することや、ツールにより必要な設計ドキュメント類を自動で作成することが可能です。これは情報システム開発にかかる工数を劇的に短縮させることでしょう。

超高速開発ツールはいくつかあり、当社では「OutSystems」や「GeneXus」というソリューションを中心に取り組んでいます。そして、今回ご紹介する「Web Performer」も超高速開発ツールの１つです。本記事では、私が開発案件で関わったWeb Performerにフォーカスを当てることにします。

超高速開発ツール「Web Performer」とは

Web Performerは、キャノンITソリューションズ株式会社が開発したローコードでWebアプリケーションを自動生成するマルチブラウザ対応の超高速開発／ローコード開発プラットフォームです。（Web Performer 製品サイト）

開発者が設計情報として定義する内容は主に以下の３つです。

• スキーマ情報として「データモデル（DM）」
• 画面情報として「入出力（IO）」
• 必要に応じて業務フローとして「ビジネスプロセス（BP）」

また、モバイル入出力（IO）を定義するだけで、スマートデバイスからアクセスできるWebアプリケーションの開発が可能です。これにより開発者のスキルに左右されることなく、バグや属人性が排除され、安定したWebアプリケーションを開発できます。

Web Performer でつくる「社員検索システム」環境

今回は、Web Performerの標準機能を利用して、検索一覧や詳細画面もある「社員検索システム」をノンプログラミングで作成します。

用意した環境は以下の通りです。

• Web Performer v2.1.1(最新バージョンはv2.3　2019.08.23現在)
• PostgreSQL v10.9
• eclipse v4.4.2

• データベース・スキーマ情報は作成済み（Web Performerにスキーマ情報を取り込むことからはじめます！）

Web Performer でつくる「社員検索システム」の下準備 

まずは、今回に必要なプロジェクトを作成しましょう。

初期の社員テーブルは以下の通りです。

新規Web Performerプロジェクトを選択して、プロジェクト名を入力しFinish! プロジェクトひな形が完成です。

次に準備をしておいたスキーマ情報をプロジェクトに取り込んで行きます。そのために必要なデータベース定義を下記のように設定します。

※コード・名前は自由に設定。接続URL、DB名、ユーザ、パスワード、エンコード、JDBCドライバは使用するDBに合わせて設定

社員一覧・詳細画面を作成して確認しよう

ここからは、以下の流れでアプリケーションを作成していきます。

1. データモデルの作成
2. データモデルを元に一覧・詳細画面を作成
3. アプリケーションを作成
4. 作成したアプリケーションに使用する画面を所属させる
5. 実際の画面を確認

１．データモデルの作成

では、テーブルからデータモデルを作成しましょう！

各データベース情報を設定。

スキーマを選択。

今回はEMPLOYEESテーブルのみを使用するためテーブル(public)から対象テーブルを選択・追加を行います。

テーブルからデータモデルを作成した場合、各項目の名前がカラム名と同じになるため、必要であればここで変更します。

※下記は変更中です。また、各項目は後から設定することも可能です。

設定を終了して確認をしましょう！

データモデルが完成しました！

２．データモデルを元に一覧・詳細画面を作成

では、続けて社員マスタの一覧・詳細画面を作ってみましょう！

Web Performerにはデータモデルから一覧詳細画面を自動で作成することが可能です。

※コピー元データモデルを選択すると、そのほかのコードは自動でデータモデル名 + (_対応語尾文言)が設定されます（自分で変更可能です）。

はい！できました！

IOは４つのファイルが作成されます。

1. EMPLOYEES.wprx 一覧画面（スクリーンショット）
2. EMPLOYEES_DETAIL.wprx 詳細画面（一覧画面の詳細ボタンから遷移設定済み）
3. EMPLOYEES_IMP.wprs(データインポート処理機能)
4. EMPLOYEES_EXP.wprs(データエクスポート処理機能)

３．アプリケーションを作成

次にアプリケーションを作成しましょう！

４．作成したアプリケーションに使用する画面を所属させる

先ほど作成した画面を、作成したアプリケーションに所属させます。

では、アプリケーションの生成を行いましょう！先ほど作成したマスタ管理を生成対象のアプリケーションに設定して生成開始！

※テーマはWeb Performerがデフォルトで数十種類既に準備されています。もちろん自身で作成・カスタマイズすることも可能です。

無事生成が完了しました！

５．実際の画面を確認

では、作成した一覧画面・詳細を確認しましょう！

自動生成では詳細・新規画面・データインポート、エクスポートなども作成されます。

※フォーマットは出来上がったので、後はロジック(BP)を定義すれば十分使用可能な機能が完成します！

社員検索機能を一覧画面に追加しよう

現状、一覧画面はデータを全件表示しているだけなので、検索機能を追加しましょう。

追加項目は、入力項目パレット（今回はボタンとテキストフィールド）からドラッグ＆ドロップ！

検索に使用する値（ID検索）を検索ボタンを押下したときに渡すように設定をします（次入出力パラメータ）。

各項目の設定は以下のようにします。項目をダブルクリックすると各項目の詳細設定が行えます。

・テキストフィールド（ID検索）

・ボタン設定（検索）

　次入出力は一覧画面を設定し、パラメータに入力された項目が渡るように設定

初期設定では常に全件検索設定（@ALLが設定されています）となっていたので、前方一致検索へ変更します。

※次入出力パラメータで設定した値が@1,@2…と最大@99まで渡せます。今回の場合、@1はID検索に入力された値を意味しています！「EMP_ID SW @1」は「EMPLOYEESテーブルデータのEMP_IDと入力された値が前方一致しているデータを取得する」という意味です。簡単に「説明」と「仕様」を記載しています（後で使います！）。

実際に画面で確認してみましょう！“EMP11”で検索してみると、該当する山田さんだけが検索されるようになりました！

親子関係画面を作成してみよう

さて、次に社員マスタ詳細画面の詳細下部に各社員が保持している資格一覧を表示したいと思います。テーブルは以下のような設定です。

親子画面を簡単に作るには、パレットからグループ項目を配置し、対応するデータモデル（今回は社員資格テーブル）をドラッグ＆ドロップするだけで完成！

自動で対応する項目が出来上がります！

ついでに、取得日などの日付項目はカレンダー入力可に！

実際に確認をしてみましょう。社員一人のデータに対して、資格情報を複数表示することができました！

ここまでの作成でスムーズにいくと約10分程度で作成できます。

ここまで一覧検索画面～親子詳細画面まで作成してきましたがコード（っぽいもの）書いたといえば、“EMP_ID SW @1”これくらいですかね？

簡単なサンプルでしたが、いかに楽に素早く作れたかお伝えできたでしょうか？Web Performerではノンプログラマの方でも、簡単に検索画面や詳細画面を作成できてしまいます！

ビジネスプロセスを作成してみよう

ロジックの部分となるビジネスプロセス（新規登録）を追加してみようと思います。まずは、ファイルの作成からです。

ビジネスプロセスのファイルが完成しました。

ビジネスプロセスは対応するアクション項目の加工式にビジネスプロセスコードを記載することで、関連付けることができます。

次入出力には同じ社員マスタ詳細、パラメータには入力した社員ＩＤを設定。メッセージコード事前とメッセージコードOKを設定することで対応した処理時にメッセージが表示されます。
　事前：対象のボタンがクリックされたとき
　ＯＫ：ビジネスプロセスが正常終了したとき

メッセージの設定内容は下記の通りです。

では、実際の処理と設定をして行きます。

まずはデータモデルの操作一覧に新規登録処理を記載します。コードチックな内容が出てきてしまいましたが、実際のビジネスプロセス処理内容を見ながら解説をしていきます。

ビジネスプロセス内では、制御コードINを使用することで、画面に表示されている項目をビジネスプロセス内で受取ることができます。制御コードCALLを使用することで、データモデルに設定した操作を呼び出すことができます。ここで見て頂きたいのは、CALLのパラメータとして、employee, employee.emp_idを渡しています。パラメータは作業コード，加工式１，加工式２… のフォーマットで作業コードと複数の加工式を指定することができます。

データモデル操作では、ビジネスプロセスから渡された作業コード内の項目を _IN_._item_ という形式で参照することができます。加工式と書かれた内容は、@1,@2…として受取ることができます。また、_IN_ はWeb Performerの予約語となっています。渡す作業コードのデータモデルの情報は、使用するデータモデル操作が定義されているデータモデルと同一の必要があります。_item_はその中の対応した項目コードです。

より分かりやすく書くと以下のようになります。※以下でも動作は可能です。

事前条件には、COUNT(employees{@1}.emp_id[]) = 0 と設定しています。これは、employeesのデータ内に@1で渡された社員ＩＤと同じ社員ＩＤの件数（COUNT）を取得し、その件数が0であることをINSERTの条件とするという意味になります。つまり、既に同じ社員ＩＤが登録されていた場合エラーとします。エラーが発生した場合のメッセージをメッセージコードNGに設定することで、設定したメッセージをエラー時に画面に表示されます。

設定ができたので実際の動作を見てみましょう！

始めは、既に存在している社員IDで新規登録をしてみましょう。

処理前には設定したメッセージコード事前に設定した内容がダイアログとして表示されます。OKをクリックして処理を継続します。

すると、事前条件で設定した内容に合致しなかったためメッセージコードNGの内容が表示されました。

では、存在しない社員コードで登録をしてみましょう。

新規登録に成功したためメッセージコードOKに設定した内容が表示されました。

一覧画面でも確認が取れました。

ビジネスプロセスはこのように各アクション（ボタンなど）に設定を行い、処理内容を定義していきます。

ドキュメントを自動作成してみよう

では最後に。開発において面倒・苦労する一つといえば、ドキュメントの最新化ではないでしょう？Web Performerはここも大きくサポートしています！

作成方法はアプリケーション生成時に、

• • ドキュメント生成する
  • 画面HTMLをフレーム出力する

を選択しアプリケーションの作成を行うと、最新の登録情報で画面ドキュメントを生成し、画面上にもドキュメントリンクを追加できます。

実際の画面ではデフォルトで画面上部右にドキュメントというリンクが追加されます。

クリックをすると画面に対応したドキュメントページを開けます。

また、「後で使います」と前述した「仕様」欄に書いた内容が反映されます。各項目やファイルに対して、それぞれ設定することが可能です。なお、「説明」欄に記載した事項は表示されないので開発者に共有内容と区別できます！

※ドキュメントは生成時に最新の情報で再生成されます。以下はサンプルです。

また、画面遷移図も作成できます。アプリケーションのファイルを開き、所属入出力の右にあるボタンを押下します。

するとアプリケーションに所属する画面遷移図が出力されます。※編集や項目追加、メモ書き等も追加できます。

終わりに

ノンプログラマでも十分に超高速開発ができることが少しでも感じて頂けたでしょうか？

今回紹介したドキュメントの自動生成を利用することで、ドキュメントの最新化を常に行えます。紹介だけとなってしまうのですが、最新のバージョンでは画面だけではなくデータモデルやビジネスプロセス、ER図などの生成に対応しています。

さらにはテストの自動化やチャットボット、AWSへの自動デプロイetc…　様々な機能があります！

「Web Performer」の機能を十分に理解し開発を進めていくことで、ノンプログラミングで属人化されない安定的なアプリケーションの開発を行うことができるでしょう。

tdiの超高速開発に関するソリューションサービスはこちら