超高速開発基盤OutSystemsで従業員管理システムをつくってみた

Pocket

超高速開発基盤「OutSystems」

みなさんはOutSystemsをご存知でしょうか?OutSystemsは、ソースコードを書かずにWebアプリケーションを作成できる超高速開発ツールです。

詳細は、tdiのサービスページ<超高速開発基盤「OutSystems」>でご紹介していますので、どうぞこちらをご覧ください。

OutSytemsでアプリケーション開発

今回は、このOutSystemsを使って簡単なWebアプリケーションをつくります。

OutSystemsを知らなかった、知ってるけど触ったことがなかった、という方は、ぜひこの記事を見ながら一緒にアプリケーションを作成してみましょう!

1.OutSystemsの個人環境用アカウントをつくる

OutSystemsで実際に環境を構築するにはお金がかかりますが、個人で試したり学習したりするのであれば、環境を無料でトライアルできます。

まずは、アカウントを作成してみましょう。

OutSystemsの公式サイトから登録が可能なので、必要事項を入力し、登録します。

2.OutSystems開発環境の準備

実際に開発を行うために、開発環境をダウンロードしてみましょう。OutSystemsの公式サイトのダウンロードページから最新の開発環境をダウンロードします。

ダウンロードが完了したら、「OutSystems Service Studio 11」を起動します。
※2019年12月現在、個人環境はバージョン11のみ使えます

環境の接続先を入力します。

Environmentがわからない方は、OutSystems公式サイトのHomeにログインしてみてください。Personal Environment タブにEnvironment 情報が記載されています。


UsernameとPasswordはアカウント登録をした際に設定したものを入力します。

うまく環境に接続できましたでしょうか?接続すると、以下のような画面になると思います。

3.OutSystemsで開発

今回は、従業員管理システムをOutSystemsで開発します。従業員一覧を表示させる程度の簡単なものですが、OutSystemsによるコードレス開発のスピードを充分実感いただけると思います。

新しいアプリケーションの作成

まず、新しいアプリケーションを作成してみましょう。NewApplicationをクリックします。

アプリケーションを作成するウィザードが出てきます。今回はReactive Web Appを選択してNextボタンをクリックします。

アプリケーション名とアプリケーションの説明文を入力して、CREATE APPボタンをクリックします。


すると、以下のような画面になります。そのままCREATE MODULEボタンをクリックします。


モジュールが作成できました!

Entityの作成

これからデータを格納するEntityを作ったり、ロジックや画面を実装していきます。

まず、Entityを作成してみます。Entityとは、データを格納するために必要なもので、データベースでいうとテーブルに相当します。また、Attributeとは、テーブルの列に相当します。

では、Dataレイヤ(右上の4つのタブの一番右)をクリックし、Entitiesフォルダ>Databaseで右クリックし、Add Entityを選択しましょう。


Entityの名前をEmployeeに変更します。

次は、アトリビュートを追加していきます。Entityの上で右クリックし、Add Entity Attibuteをクリックします。

名前をEmployeeNoに変更し、同じ手順でいくつかアトリビュートを追加していきます。

従業員のデータを格納するEntityが作成完了しました!

画面の作成

次は、画⾯を作成してみましょう。左側のアイコン群から、Screenを真ん中のエリアにドラッグ&ドロップします。

画面作成ウィザードがでてきました。Emptyが選択されている状態で、CREATE SCREENをクリックします。

新しい画面が作成されました。画面の名前を「EmployeeList」に変更します。

画面中央のエリアにマウスオーバーすると、TitleやAction、Contentのプレースホルダーが見えます。Titleプレースホルダーをクリックし、「従業員一覧」と入力します。

次は、従業員の一覧表を追加しましょう。右上のDataレイヤを選択し、Contentのプレースホルダーにドラッグ&ドロップします。


はい、これで一覧画面の完成です。

画面上部の中央にある緑色のボタンをクリックし、パブリッシュします。パブリッシュが終わると青色のボタンになるので、クリックしてみましょう。

パブリッシュ中
パブリッシュ完了

青色のボタンを押すと、パブリッシュしたアプリケーションがブラウザで開きます。

補足:Excelのデータを使用してEntityを作成する

これまでの流れは、Entityにデータが入っていない前提で開発しました。Excelのデータを使用してEntityを作成することも可能なので、簡単に説明します。

まず、データが入っているExcelを用意します。

OutSystemsのサービススタジオの画面で、Entityを作成したときの手順で、Add Entityではなく、Import New Entities from Excelを選択します。

用意したExcelファイルを選択します。

Excelデータが入ったEntityが作成されました。

先の手順と同じように従業員一覧画面を作成すれば完成です。

最後に

このように、OutSystemsでWebアプリケーションを開発すると、コードを書くことなく簡単に、そしてスピーディに開発できます。もちろん、一覧画面のほか詳細画面や、検索機能、ソート機能なども、同じくコードレスで開発できます。他にも、Excelのアップロード/ダウンロード機能や、Javascriptを組み込んだりCSSをカスタマイズすること、外部システムと連携することも可能です。また、OutSystemsでは、スピーディに実際の画面を作成できるので、アジャイル開発に向いています。

もしこの記事で興味をもっていただけたら、OutSystemsの公式サイトに学習⽤の動画が掲載されていますので、個人環境でいろいろ試してみてはいかがでしょうか?このMISOでも、OutSystemsについて取り上げていく予定です。

ちなみにtdiは、超高速開発基盤「OutSystems」販売代理店として、ライセンスを販売しています。また、株式会社BlueMeme、株式会社シグマクシス、アジャイル開発に特化したシステム開発会社「株式会社OpenModels」(株式会社BlueMeme子会社)と業務提携を行い、超高速開発基盤「OutSystems」を活用した、エンタープライズアジャイルの「導入コンサルティング」「導入サービス」を提供しています。

「OutSystems」について気になることがありましたら、お気軽にこちらからお問い合わせください。

お問い合わせ先

執筆者プロフィール

Igarashi Takuya
Igarashi Takuyatdi OutSystems推進室
大手メーカーにおける販売システムの保守業務、Microsoft Dynamics AXの開発を経て、現在はOutSystemsのプリセールスを担当している。
体を動かすことが好きで、会社のテニス部、ランニング部に所属している。
Pocket

関連記事