こんにちは!
キャスレーコンサルティング TS(テクニカルサービス)部の栗田です。

最近巷では、AIなどが流行っておりますね。
人が手間だと思うことを、機械が代わりにやってくれる…
とても便利な時代に突入していることを、実感できます。

コーディングの世界でも、「コードレス開発」なるものがあり、
視覚的に開発を進められ、且つ自動でソースコードを生成する開発手段があります。
これにより製造の手間が省かれ、工数削減などに一役買っております。

ということで、今回はコードレス開発の「OutSystems」に触れてみたいと思います。

まずはじめに

【OutSystemsとは】
「モデル駆動型開発」の手法により、ガリガリとコーディングせずに
視覚的にドラッグ&ドロップ等で開発が進められます。
(結果、C#やJavaのソースコードが裏で自動生成されます)

OutSystemsでは、「プロセス」「インターフェース」「ロジック」「データ」4つのモデルを基に
設計を進めていく事となります。

また、開発・保守・運用をまとめた一つの基盤が、クラウド上(オンプレミスでも可)で提供されます。
実際に使用した結果、ほぼコーディングする必要がなく、
ガリガリとコーディングしていた分の工数が、大幅に削減出来たことを実感しました。

それでは実際に開発を行ってみたいと思います!

アカウントの登録

Outsystemsを使用するには、アカウントの登録が必要となります。
下記のURLにアクセスしてください。
https://www.outsystems.com/home/GetStartedForFree.aspx

1.登録情報を入力します。
  ・First Name(名)
  ・Last Name(姓)
  ・Company Email(メールアドレス)
  ・Country(国)
  ・「わたしはロボットではありません」にチェック
  ・「I have read and agree to the OutSystems Teams and Conditions」にチェック
   (「同意します」のようなものです)

  全て完了しましたら、「GET STARTED FREE」をクリックします。

2.会社情報を入力します。
  ・Company(所属する会社名)
  ・Employees(従業員数)

  全て完了しましたら、「CONTINUE」をクリックして下さい。
  Company Email(メールアドレス)宛に、メールが送られて来ます。

3.メーラーを開くと、下記のようなメールが届いています。
  「CLICK ME」をクリックして下さい。

4.URL、パスワードを設定する画面が表示されます。
  設定後、「CREATE YOUR CLOUD ENVIRONMENT」をクリックして完了です。
  ※1 後で使用しますので、URLとUserNameをメモしておいて下さい。

統合環境のインストール

次に、OutSystemsの統合環境をインストールしたいと思います。

下記のページにアクセスし、インストーラーをダウンロードします。
https://www.outsystems.com/home/downloads

1.「DOWNLOAD LATEST VERSION」をクリックして下さい。
  このボタンからは、最新版をダウンロードする事が出来ます。

2.「DOWNLOAD」をクリックすると、ダウンロードが開始されます。

3.それでは、インストーラーを起動して、インストールを行いたいと思います。
  ダウンロードした「DevelopmentEnvironment-xx.x.xxx.x.exe」を実行して下さい。
  「INSTALL」をクリックすると、インストールが開始されます。
  プログレスバーがいっぱいになると完了です!

コードレス開発を体験しよう

それでは、簡単且つ少し業務的なアプリケーションを意識して作ってみたいと思います。

今回は、造船所の工場で使用する端末画面をイメージしてみます。
大きな船を作るのには、
鉄板から切断機で部品を切る→溶接してブロックを作る(船の一部分)→ブロックを組み合わせる
を繰り返して、大きな船が完成する流れとなります。

切断機には端末があり、作業指示を元にNCデータ(CAD/CAM)をLANもしくはシリアル通信で
切断機に送り込み、一枚の鉄板を切断して各部品を作ります。
今回はその端末画面のみですが、サクッと作ってみたいと思います。

それでは、「OutSystems Service Studio x.x」を起動して下さい。

1.ServiceStudioを起動すると、下記の画面が表示されます。
  この状態はクラウド環境に接続されていませんので、
  「CONNECT TO ENVIRONMENT」をクリックして接続します。

2.接続情報を入力します。
  先ほどの※1でメモした内容を入力して下さい。
  ・Environment(アドレス)
  ・Username(ユーザー名)
  ・Password(パスワード)
  を入力して、「CONNECT」をクリックして下さい。

3.接続すると、下記の画面が表示されます。
  まだ、アプリケーションが一つも作られていない状態です。
  「New Application」をクリックして、新規にアプリケーションを作ってみましょう。

4.「Web App」を選択して、「NEXT」をクリックして下さい。

5.アプリケーション情報を入力します。
 ・Name(アプリケーション名)に、”TerminalApp”
 ・Description(説明)に、”切断機端末アプリケーション”
 ・ベースの色(お好みで)
 を入力および選択し、「CREATE APP」をクリックして下さい。

6.「Responsive」を選択し、「CREATE MODULE」をクリックして下さい。

7.アプリケーションが生成され、HomeScreenのみの画面が立ち上がります。
  次に、このアプリケーションで使用するEntity(テーブル)を作成しますので、
  画面右上の「Data」タブをクリックして下さい。

8.作業指示用のEntity(テーブル)を、追加します。
  「Data」タブ‐「Entities」‐「Database」を右クリックし、「Add Entity」を選択して下さい。
  追加されたEntityをクリックし、名前を「Machine」に変更して下さい。

9.各項目(Attribute)を追加します。
  新しく追加したEntityの「Machine」を右クリックし、「Add Entity Attribute」を選択して下さい。
  追加されたAttributeは、クリックで名前変更可能です。
  下記名称の項目を、作成して下さい。
  ・OrderNo
  ・ShipNo
  ・BlockNo
  ・PartsNo
  ・WorkNo
  ・NCNo
  ・Standard
  ・Thickness
  ・Width
  ・Height

10.追加した「Machine」Entityを、「MainFlow」にドラッグドロップします。
   ドロップ後に花火が表示され、「Machine」Entityで構成される画面(WebScreen)が
   自動で生成されます。この機能を、scaffoldingと言います。
   生成されたWebScreenの「Machine」を、ダブルクリックして下さい。

11.「Machine」Entityで構成された画面が、確認できます。

12.追加されたWebScreenは、「Machine」Entityの先頭4項目のみしか追加されていません。
   5項目以降をドラッグし、TableRecordにドロップすると項目が追加されます。

13.追加したAttribute、タイトルやボタンが英語なので、日本語に入力します。
   変えたい画面のコントロール(Widgetといいます)を、クリックして変更できます。

14.下記のように、Widgetのテキストを変更して下さい。
  ・Machine→切断機端末
  ・Search→検索
  ・Reset→リセット
  ・OrderNo→受注No
  ・ShipNo→船番
  ・BlockNo→ブロックNo
  ・PartsNo→部品No
  ・WorkNo→作業指示No
  ・NCNo→NC番号
  ・Standard→規格
  ・Thickness→板厚
  ・Width→幅
  ・Height→長さ

15.「Interface」タブを選択し、MainFlowの「Home」をドラッグし「Machine」と繋げます。
   元々あった「HomeScreen」は、削除して構いません。

16.画面の吹き出しの出ている、緑色のボタン「1-Click Publish」をクリックして下さい。
   変更した内容がデプロイされます。

17.1-Click Publish完了後、ボタンが青くなります。
   この青いボタンをクリックすると、作成したアプリケーションを実行出来ます。

18.実行結果です。
   (まだデータがなにもない状態です。)

19.再び「Machine」をscaffoldingします。
   すると「Machine Detail」というWebScreenが生成されますので、
   ダブルクリックでWebScreenを立ち上げます。

20.Entity「Machine」に、データを登録できる画面が生成されました。
   現場側では勝手にデータを変えてはいけないので、
   どちらかというと事務所側の画面になってしまいますが…。
   No.14を参考に、テキストを日本語に書き換えて下さい。

21.1-Click Publishして実行すると、下記の画面が起動します。
   画面上にデータを追加するボタンが生成されたので、これをクリックします。
 

22.登録画面が起動するようになりました。
   下記のように、適当なデータを入力して「保存」ボタンをクリックして下さい。

23.データが追加されました。

一通りの簡単なアプリケーションが出来ました。
今回は、ここまでとさせて頂きます。

最後に

今回作成したアプリケーションは、大体30分ほどで作成出来ますので、工数削減が期待できますね!
次回は、実際に機械と送受信を行う部分にチャレンジ出来ればと思います。

コードレス開発により、プログラム経験がなくても短時間で簡単にアプリケーションが出来てしまう…。
そんな時代が近いうちに到来するかもしれません…。

以上となります。
最後まで読んで頂き、ありがとうございます!

栗田
CSVIT事業部 TS(テクニカルサービス)部 栗田
コードレス開発の技術ブログを書きたかったので、感動です!