環境構築も、コーディングもいらない！？エクセル一発で作る「scaffold」超高速開発
こんにちは、クラウドインテグレーション事業部の忍者（溝井）です。
今回は、ポルトガル発のローコードプラットフォーム、OutSystems で「Staff管理システム」を作ってみます。 これは別の記事で紹介した動画の種明かし記事です。
なんとデータが入ったエクセルファイル一つあればすぐに「Staff管理システム」が作れちゃうんです！ 「嘘つけ！」「ほんとにできるの？」って思った人は、だまされたと思ってぜひ試してみてください！
※忍者はイメージです。
この記事について
ポルトガル発のローコードプラットフォーム、OutSystems の紹介記事です。
この記事は以下の人を対象にしています。
- OutSystems初心者
- OutSystemsを使いたい人
- OutSystemsをインストールしたけどどう使っていいかわからない人
- エンジニアじゃないけど高速開発してドヤ顔したい人
- 忍者にあこがれてる人
OutSystemsって何のこと？って方は以下の記事をどうぞ。 techblog.forgevision.com
はじめに
この記事では下記のような「Staff管理システム」を作ります。
- 一覧画面 →一覧表示、検索、ソート
- 編集画面 →バリデーション、登録、編集
それでは作っていきましょう！
準備
「OutSystems」の準備
「OutSystems」アカウントを作成し、アプリをダウンロード＆インストールを行います。
https://www.outsystems.com/home/GetStartedForFree.aspx
※Bluememe様のページにインストール方法がまとまっています。
エクセルファイルの準備
以下のサイトからemployee.xlsxをダウンロードしてください。
開発
「Web Application」の作成
1、アプリケーション作成します。
1.1、Developmentタブから「New Application」をクリックします。
2、作成するアプリケーションのタイプを設定します。
2.1、 「Web App」をクリックします。
2.2、 「Next」をクリックします。
3、テンプレートを設定します。
3.1、「Side Menu」をクリックします。
3.2、 「Next」をクリックします。
4、アプリ名とアイコンの設定します。
4.1、アプリ名を「St」と記入します。
4.2、アプリ詳細説明に「Staff管理表」と記入します。
4.3、任意のアイコンカラーをクリックします。
4.4、「CREATE APP」をクリックします。
5、「Staff管理システム」の中を表示します。
5.1、[CREATE MODULE]をクリックします。
6、「Staff管理システム」の新規モジュールを追加します。
6.1、[Entry]をドラッグ＆ドロップします。
「Emp」の作成
7、Excelのデータをインポートするための画面を表示します。
7.1、[Data]をクリックします。
7.2、[Entities]を右クリックします。
7.3、表示されたメニューから[Import Entities from Excel]をクリックします。
8、対象のExcelをインポートします。
8.1、[Import Entities from Excel]のメニューからインポートするExcelファイルをクリックします。
8.2、[開く]をクリックします。
9、一覧画面を作成します。
9.1、[Emp]を画面中央にドラッグ&ドロップします。
10、一覧画面にログイン不要でアクセスできるように設定します。
10.1、[Emps]をクリックします。
10.2、画面右下から[Anonymous]のボックスをクリックします。
11、編集画面を作成します。
11.1、[Emp]を画面中央にドラッグ&ドロップします。
11.2、[Emps]と[EmpDetail]が紐づいていることを確認します。
12、編集画面にログイン不要でアクセスできるように設定します。
12.1、[Emp]をクリックします。
12.2、画面右下から[Anonymous]のボックスをクリックします。
「Staff管理システム」の完成
13、開発環境にPublishするため、「1-Click Publish」ボタンをクリックします。
13.1、画面上部の①アイコンをクリックします。
14、 Publish済みのアプリを表示するため、「Open in Browser」ボタンをクリックします。
14.1、画面上部の矢印アイコンをクリックします。
15、一覧画面が表示されることを確認します。
完成して・・・
アプリケーション作成からたったこれだけで完成しました！
しかし「できたはいいけど本当に上記に書いてあった機能が利用できるの？」
と半信半疑の方もいると思います。
ところがどっこい利用できるのです！
各機能をどう利用するか軽くお教えします。
ソート
表の項目をクリックするとソート機能が利用できます。
検索
テキストボックスに入力して「Search」をクリックすると検索機能が利用できます。
すべてのデータから検索したいワードを含む条件の検索なので、どの項目でも検索結果に表示されます。
一覧表示
「Reset」をクリックするとすべてのデータ一覧が表示されます。
バリデーション
登録画面にて必須項目に入力せずに「Save」をクリックするとエラーが発生して登録できないようになっています。
登録
「Create a new Emp」の登録画面にて必須項目を入力し、「Save」をクリックすると、一覧画面に追加できます。
編集
一覧の名前をクリックして編集画面にて内容を書き換えると一覧に反映されます。
まとめ
いかがだったでしょうか。気づいた方もいると思いますが、
実はあまり手を動かしていません！
エクセルファイルを入れて画面を用意するだけであっという間にデータの管理画面を作成することができます。これぞ高速開発といったところですね！
OutSystemsを利用して管理画面をパパっと作成して、余った時間でほかの作業に手を付けたり余裕の一服などゆったりとした時間を過ごしてはいかがでしょうか。
詳しい使い方を知りたい方はこちらもどうぞ！
techblog.forgevision.com