ForgeVision Engineer Blog

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

OutSystemsを始めよう! 瞬殺で作る!Staff管理システム

環境構築も、コーディングもいらない!?エクセル一発で作る「scaffold」超高速開発

f:id:fv_yamazaki:20180824101516p:plain
こんにちは、クラウドインテグレーション事業部の忍者(溝井)です。

今回は、ポルトガル発のローコードプラットフォーム、OutSystems で「Staff管理システム」を作ってみます。 これは別の記事で紹介した動画の種明かし記事です。

techblog.forgevision.com

なんとデータが入ったエクセルファイル一つあればすぐに「Staff管理システム」が作れちゃうんです! 「嘘つけ!」「ほんとにできるの?」って思った人は、だまされたと思ってぜひ試してみてください!

※忍者はイメージです。

この記事について

ポルトガル発のローコードプラットフォーム、OutSystems の紹介記事です。

この記事は以下の人を対象にしています。

  • OutSystems初心者
  • OutSystemsを使いたい人
  • OutSystemsをインストールしたけどどう使っていいかわからない人
  • エンジニアじゃないけど高速開発してドヤ顔したい人
  • 忍者にあこがれてる人

OutSystemsって何のこと?って方は以下の記事をどうぞ。 techblog.forgevision.com

はじめに

この記事では下記のような「Staff管理システム」を作ります。

  • 一覧画面 →一覧表示、検索、ソート
  • 編集画面 →バリデーション、登録、編集

f:id:s-mizoi:20190514100230p:plain
全体図

それでは作っていきましょう!

準備

「OutSystems」の準備

「OutSystems」アカウントを作成し、アプリをダウンロード&インストールを行います。

Try OutSystems for free

※Bluememe様のページにインストール方法がまとまっています。

今すぐ無料体験! | OutSystems(日本)

エクセルファイルの準備

以下のサイトからemployee.xlsxをダウンロードしてください。

github.com

開発

「Web Application」の作成

1、アプリケーション作成します。
 1.1、Developmentタブから「New Application」をクリックします。

f:id:s-mizoi:20190401155444j:plain
アプリケーションの作成-1

2、作成するアプリケーションのタイプを設定します。
 2.1、 「Web App」をクリックします。
 2.2、 「Next」をクリックします。

f:id:s-mizoi:20190401160138j:plain
タイプの設定-1

3、テンプレートを設定します。
 3.1、「Side Menu」をクリックします。
 3.2、 「Next」をクリックします。

f:id:s-mizoi:20190401160418j:plain
テンプレート-1

4、アプリ名とアイコンの設定します。
 4.1、アプリ名を「St」と記入します。
 4.2、アプリ詳細説明に「Staff管理表」と記入します。
 4.3、任意のアイコンカラーをクリックします。
 4.4、「CREATE APP」をクリックします。

f:id:s-mizoi:20190426132157j:plain
名前・アイコン設定-1

5、「Staff管理システム」の中を表示します。
 5.1、[CREATE MODULE]をクリックします。

f:id:s-mizoi:20190401162303j:plain
アプリケーション内表示-1

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

f:id:s-mizoi:20190401163514j:plain
新規モジュール-1

「Emp」の作成

7、Excelのデータをインポートするための画面を表示します。
 7.1、[Data]をクリックします。
 7.2、[Entities]を右クリックします。
 7.3、表示されたメニューから[Import Entities from Excel]をクリックします。

f:id:s-mizoi:20190401164429j:plain
Emp作成-1

8、対象のExcelをインポートします。
 8.1、[Import Entities from Excel]のメニューからインポートするExcelファイルをクリックします。
 8.2、[開く]をクリックします。

f:id:s-mizoi:20190401165002j:plain
インポート-1

9、一覧画面を作成します。
 9.1、[Emp]を画面中央にドラッグ&ドロップします。

f:id:s-mizoi:20190401165248j:plain
一覧画面作成-1

10、一覧画面にログイン不要でアクセスできるように設定します。
 10.1、[Emps]をクリックします。
 10.2、画面右下から[Anonymous]のボックスをクリックします。

f:id:s-mizoi:20190401165700j:plain
一覧画面のログイン設定-1

11、編集画面を作成します。
 11.1、[Emp]を画面中央にドラッグ&ドロップします。
 11.2、[Emps]と[EmpDetail]が紐づいていることを確認します。

f:id:s-mizoi:20190401170305j:plain
編集画面作成-1

12、編集画面にログイン不要でアクセスできるように設定します。
 12.1、[Emp]をクリックします。
 12.2、画面右下から[Anonymous]のボックスをクリックします。

f:id:s-mizoi:20190401172256j:plain
編集画面のログイン設定-1

「Staff管理システム」の完成

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

f:id:s-mizoi:20190401172531j:plain
パブリッシュ-1

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

f:id:s-mizoi:20190401184400j:plain
アプリケーション表示-1

15、一覧画面が表示されることを確認します。

f:id:s-mizoi:20190401174025j:plain
一覧画面表示-1

完成して・・・

アプリケーション作成からたったこれだけで完成しました!
しかし「できたはいいけど本当に上記に書いてあった機能が利用できるの?」
と半信半疑の方もいると思います。
ところがどっこい利用できるのです!
各機能をどう利用するか軽くお教えします。

ソート

表の項目をクリックするとソート機能が利用できます。

f:id:s-mizoi:20190515163644j:plain
ソート-1

検索

テキストボックスに入力して「Search」をクリックすると検索機能が利用できます。

f:id:s-mizoi:20190515151534j:plain
検索-1

すべてのデータから検索したいワードを含む条件の検索なので、どの項目でも検索結果に表示されます。

f:id:s-mizoi:20190515161857j:plain
検索-2
f:id:s-mizoi:20190515162117j:plain
検索-3
f:id:s-mizoi:20190515162127j:plain
検索-4
f:id:s-mizoi:20190515162136j:plain
検索-5

一覧表示

「Reset」をクリックするとすべてのデータ一覧が表示されます。

f:id:s-mizoi:20190515164330j:plain
一覧表示-1

バリデーション

登録画面にて必須項目に入力せずに「Save」をクリックするとエラーが発生して登録できないようになっています。

f:id:s-mizoi:20190515172339j:plain
バリデーション-1

登録

「Create a new Emp」の登録画面にて必須項目を入力し、「Save」をクリックすると、一覧画面に追加できます。

f:id:s-mizoi:20190515175859j:plain
登録-1
f:id:s-mizoi:20190515180050j:plain
登録-2

編集

一覧の名前をクリックして編集画面にて内容を書き換えると一覧に反映されます。

f:id:s-mizoi:20190515182655j:plain
編集-1
f:id:s-mizoi:20190515182714j:plain
編集-2

まとめ

いかがだったでしょうか。気づいた方もいると思いますが、
実はあまり手を動かしていません!
エクセルファイルを入れて画面を用意するだけであっという間にデータの管理画面を作成することができます。これぞ高速開発といったところですね!
OutSystemsを利用して管理画面をパパっと作成して、余った時間でほかの作業に手を付けたり余裕の一服などゆったりとした時間を過ごしてはいかがでしょうか。
詳しい使い方を知りたい方はこちらもどうぞ! techblog.forgevision.com