LoginSignup
2
1

More than 3 years have passed since last update.

いのべこ（富士通システムズウェブテクノロジー）Advent Calendar 2020Day 25
@TomWahsizu(Tomoyuki Washizu)

実装初心者がローコード開発ツールを使って実装してみた(OutSystems)

Last updated at Posted at 2020-12-24

この記事は株式会社富士通システムズウェブテクノロジーの社内技術コミュニティで、
「イノベーション推進コミュニティ」略して「いのべこ」が企画するもので
本記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。

ここまでお約束 :wink:

はじめに

初めまして、入社してすぐの研修以来、
プログラミングに触れてこなかった入社3年目のSEです。(もう初心者に等しい)

今回、「実装初心者がローコード開発ツールを使って実装してみた」ということで、
最近、よく耳にするOutSystemsを使って実装をしてみました。
実装するにあたってローコード開発ツールであればなんでもよかったのですが、
ネットで、おすすめのローコード開発ツールを調べると最初にでるのが、この「OutSystems」だったので
実装経験がない私でもハードルが低いと思いOutSystemsを選ばせていただきました。

今回はOutSystemsを使って、ログイン・検索・登録機能を有した
管理台帳アプリケーションを実装します。

環境情報

・OSエディション：Windows 10 Enterprise
・データベース管理システム：Microsoft SQL Server 2014
・Microsoft .NET Frameworkバージョン：4.8

以下のURLにOutSystemsのシステム要件の情報が記載されているので詳細は確認してください。
OutSystemsのシステム要件情報

OutSystemsのインストール

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

OutSystems Service Studio11へのログイン

OutSystems Service Studio11を起動して、以下の情報を入力します。
Environment：環境情報
Username or email：インストール時に登録したユーザネームかメールアドレス
Password：インストール時に登録したパスワード
image.png

作成するアプリケーションの種類を選択

今回は、「New Application」-「Start from scratch」-「Traditional Web」を選択しました。
image.png

アプリケーションの基本情報を入力します。
何でもいいのですが、今回は管理台帳アプリケーションと命名して、
image.png

「CREATE MODULE」ボタンを押下して、アプリケーションの実装を開始します。
image.png

検索機能のアプリケーションの実装

検索機能を有したアプリケーションを実装します。
まずは、テーブルの作成を始めます。(今回は空のものから作成します)
右上の[Data]タブー[Entities］ー[Database]上で、「Add Entity」を押下して、Entity(テーブル)を作成して、[Entity1]を[Management]にリネームします。
image.png

次に作成した[Management]Entity上で「Add Entity Attribute」を押下します。
image.png

5つ作成して、それぞれAttribute(テーブルの項目)のリネームをします。
今回はわかりやすく[Day]、[Name]、[MacNo]、[EmpNo]、[PhoNo]の5つでリネームました。
以下は、Attributeの説明です。
[Day]：日時
[Name]：名前
[MacNo]：機器名
[EmpNo]：従業員番号
[PhoNo]：電話番号
リネームして気づいたかもしれませんが、
リネームすることで自動でAttributeのデータタイプが変わっています。
(データタイプは[Data Type]で選択することで変更できます。)
image.png

次に先程作成した[Management]のEntityを真ん中の画面にドラックアンドドロップします。
すると、[Entry1]と[Management]Web Screenが矢印で繋がりましたね。

これでアプリケーションが1つ作成されました。
image.png

次に先程ドロップした[Management]Web Screenをダブルクリックして、
[Attribute]で構成された[Entity]を表示します。

初期状態だと4カラム分しか表示されていない為、
不足している[Attribute]をドラックアンドドロップするとカラムが追加されます。
image.png

英語表記なので日本語に書き換えました。
Attributeを追加したタイミングで日本語名で命名できますが、
Data Typeが自動で変更しないことがあるので、このタイミングでAttributeのリネームを行いました。
上にも書きましたが、自身で[Data Type]を変更していただければ、Attributeを追加したタイミングで
日本語名に指定していただいてもOKです。
image.png

上の緑色の(1)のボタンがありますが、ここをクリックするとPublishが行われます。
image.png

青の矢印ボタンになったらクリックしてみましょう。
先ほど作成したアプリケーションをブラウザで確認することができます。
image.png
当然ですが、まだデータはありません。
なので、次の章でデータの登録アプリケーションを実装してデータの登録してから、検索機能を確認します。
では、データ登録画面を作成します。

データ登録機能のアプリケーションの実装

ブラウザからOutSystems Service Studioに移ってもらって、
再び[Management]Web Screenをドラックアンドドロップします。
すると[ManagementDetail]Web Screenが生成されるので、ダブルクリックします。
image.png

登録画面のようなものが表示されましたね。
image.png

今回も日本語に書き換えます。
緑のボタンを押下して、ブラウザで確認しましょう。
image.png

何も変わっていないように見えますが、
今回は新たに右上に[Create a new Management Create a new Management]のリンクが増えました。
このリンクをクリックします。
image.png
すると、先程[ManagementDetail]Web Screenで作成した画面が表示されました。
image.png
適当に値を入力して「保存」ボタンを押下すると、
image.png
データが登録されました。
これでデータ登録機能のアプリケーションの実装が完了です。
image.png

ちなみに2件データの登録して検索ボタンを押下してみましょう。
image.png
ちゃんと検索機能を有したアプリケーションが作成されてます。
image.png
これで検索機能と登録機能を有したアプリケーションが実装できました。
最後にログイン画面の作成を行います。

ログイン画面を作成

ログイン画面を作成しようと思ったのですが、[Interface]タブの[Common]をダブルクリックすると、
なんとOutSystemsの標準搭載機能で既にログイン画面がありました。

この[Login]と書いてある[Web Screen]をダブルクリックすると、
image.png
ログイン画面が表示されました。
こちらも日本語に書き換えます。
image.png
次にログイン画面から検索画面への処理の接続を行います。
[Interface]-[Login]-[Login]Run Server Actionをダブルクリックして、下の画像の画面に移ります。
image.png
[Management]Web Screenをドラックアンドドロップして、[User_Login]Run Server Actionから矢印を伸ばします。
([Common\ExternalURL]は削除してください。)
image.png

これで、ログイン処理をして、正常動作すると検索画面に遷移するような処理の流れを作成しました。

最後にブラウザで確認しましょう。
ログイン画面が表示されました。以下の情報の入力してログインをしましょう。
メールアドレス：OutSystemsに登録したアドレス
パスワード：OutSystemsに登録したパスワード
image.png
検索画面に遷移しましたね。
もちろん検索機能もちゃんと使えます。
image.png

これでログイン・検索・登録機能を有した機器管理アプリケーションの実装が完了です。
お疲れ様でした。

所感

今回、実装経験もない私がOutSytemsを使って実装しました。
OutSystemsの標準搭載機能を使えば、アプリケーションの実装は非常にスピーディーにできますが、
搭載機能以外の機能を実装するには最低限の実装経験が必要なことがわかりました。
また、ざっくり「この機能のアプリケーションを実装して」という依頼についてはある程度要望に沿えますが、
画面詳細が決まっているものを実装しようとすると、まだまだOutSystemsの勉強が必要だと思いました。
(ツール内の表記が全て英語であることを含めて)
これからOutSystemsについては少しずつ調査・理解していき
新しいツールの機能が分かり次第、随時更新していく予定です。
気長にお待ちください。

以上です。
ありがとうございました。

参考文献

・OutSystemsを始めよう！　瞬殺で作る！Staff管理システム
・OutSystemsでコードレス開発　～初級編～

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1