ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

[11.0 対応版]OutSystemsを始めよう! 「QA管理システム」を作ってみた②【中編 ~「scaffold」での高速開発~】

高速開発「scaffold」で質問一覧画面、質問登録画面を作る。


※過去の記事が version 10.0 での記事だったため、version 11.0 の記事に更新しました!

こんにちは、ソリューション技術部の藤山と山崎と溝井です。

ポルトガル発のローコードプラットフォーム、OutSystems で「QA管理システム」を作ってみます。
画面キャプチャや説明が多いため、前編、中編、後編の3つの記事に分けて紹介します。

この記事は中編です。

説明を抜かせばサクッと開発できるのでぜひ試してみてください。

この記事について

前編に続き、「scaffold」で簡単に画面作成とアプリの動作確認体験して行きたいと思います。

この記事は、続きの記事です。 前回の記事からの「Entity」を作成していない人は以下の記事からをどうぞ

techblog.forgevision.com

 
 

OutSystemsって何のこと?って方は以下の記事をどうぞ

techblog.forgevision.com


「scaffold」とは

「scaffold」はざっくり言うと、何かのトリガーでデータやテーブルなどを自動で生成してくれる機能です。
Ruby on RailsやCakePHPでもある機能ですね。
「OutSystems」では、「Entity」から画面やSQLを自動生成してくれます。
前の記事でも簡単に紹介しました。
([内容に入る前に....]の動画の部分)

techblog.forgevision.com

「scaffold」を使えば簡単な画面ならすぐに作ることができます!

「scaffold」での高速開発

質問一覧画面、質問登録画面の作成

その前に

1、「QA管理システム」の新規モジュールを追加します。
 1.1、[Entry]をドラック&ドロップします。

事前準備

今回は以下の手順にて簡単に、作成済み「Entity」から簡単に一覧、登録画面を作成します。

1、 [MainFlow]を表示します。
 1.1、画面右上の[Interface]をクリックします。
 1.2、[MainFlow]をダブルクリックします。

画面作成2-1

2、[MainFlow]の一覧、登録画面を作成します。
 2.1、画面右上の[Data]をクリックします。
 2.2、[Question]をドラック&ドロップします。

画面作成2-2
 2.3、もう一度[Question]をドラック&ドロップします。
画面作成2-2

3、「Questions」、「QuestionDetail」が作成されている事を確認します。
 3.1、「Questions」と「QuestionDetail」が相互に矢印が付いていることを確認します。

画面作成2-3


TIPS 画面処理について、何が起こっているかというと…

①一回目のドラック&ドロップ:
 OutSystemsが「テーブルを画面に挿入したいってことは、一覧画面を作るんだなー」と自動認識して一覧画面を作ってくれてます
②二回目のドラック&ドロップ:
 OutSystemsが「一覧画面はもうあるから、次は登録編集画面を作るんだなー」と自動認識して登録編集画面を作ってくれてます
この短い間に一覧画面と登録編集画面のロジック、レイアウトができています!デプロイ後を楽しみにしましょう!


質問一覧画面、質問登録画面のアクセス権限変更

1、 「Questions」にログイン不要でアクセスできるように設定します。
 1.1、「Questions」をクリックします。
 1.2、画面右下から[Anonymous]のボックスをクリックします。

画面作成2-5
※この設定でだれでもログインできるようになります。
 これを設定しない場合、ユーザログインが必要になります。

2、 「QuestionDetail」にログイン不要でアクセスできるように設定します。
 2.1、「QuestionDetail」をクリックします。
 2.2、画面右下から[Anonymous]のボックスをクリックします。

画面作成2-6

動作確認

1、 開発環境にPublishするため、「1-Click Publish」ボタンをクリックします。
 1.1、画面上部の①アイコンをクリックします。

画面作成2-7
※この「1-Click Publish」で、コード生成、デプロイまでの処理を行ってくれます。ボタン一つで質問一覧画面(Questions)、質問登録画面(QuestionDetail)が作成できました!すごい早い!

2、 Publish済みのアプリを表示するため、「Open in Browser」ボタンをクリックします。
 2.1、画面上部の矢印アイコンをクリックします。

画面作成2-8

3、以下のような画面が表示されることを確認します。

画面作成2-9

画面作成2-10

画面作成2-11

中編まとめ

ここまでで質問一覧画面(Questions)、質問登録画面(QuestionDetail)をあっという間に作ることができました。この開発のスピード感を体感いただけたでしょうか。
コンテンツが多いので、色々と開発ツールに慣れる時間は必要ですが、ここまでで動作環境の構築等に手を煩わせることなく、簡単にデプロイ&動作確認を行う事が出来たと思います。

次回は回答画面を作成し、「QA管理システム」を完成させます。
皆様もさわってみて「OutSystems」の速さ、面白さが感じられているかと思います。
ぜひぜひ、後編にもにチャレンジしてください!

techblog.forgevision.com