OutSystems システム開発

【OutSystems】開発言語は不要!?OutSystemsの開発手順とは

2020年2月21日

 

開発やったことないんだけど、開発言語を覚えるのもどれを覚えればいいかわからない。OutSystemsはローコード開発って聞いたけど、開発言語は何を使っているんだろう?
開発の流れを教えてほしい。

 

OutSystemsは、ローコード開発と呼ばれる開発手法です。開発言語にとらわれずビジュアルエディタと呼ばれるフロー図を作成して、プログラムを行います。

開発環境を構築したら、実際にOutSystemsで開発を行ってみましょう。

開発環境の構築がまだの方は、こちらで解説していますので、ご参考ください。

https://mamitoblog.com/outsystems-develop/

 

OutSystemsの開発

では、スタートメニューから「OutSystems Service Studio 11」を立ち上げてみましょう。

 

今回はブラウザで使用する「Webアプリケーション」をご紹介します。

 

OutSystemsのアプリケーション作成

「Service Studio」の起動画面にて、「New Application」をクリックしてアプリを作成します。
※今回は作成する画面を2画面とし、データを複数表示する一覧画面と、登録用の詳細画面の開発の流れを解説します。

 

まずは「New Application」をクリックします。

 

どのタイプのアプリケーションを作成するかを選択する画面が表示されます。
Tabletで使用する「Tablet App」とスマートフォンで使用する「Phone App」がありますが、今回はWebブラウザで使用する「Responsive Web App」を選択しましょう。

outsystems Responsive Application

 

アプリケーション名を設定して、「CREATE APP」ボタンをクリックします。
アプリケーションの説明やアイコンの色などは自由に設定していただいてかまいません。
今回のアプリケーションの名前は「Web Application」としています。

outsystems web app create

 

アプリケーションの作成が完了すると、アプリケーション内にてモジュールを作成します。
モジュールは、アプリケーション内に複数作成が可能で、モジュール同士を簡単に連携させることができます。

 

アプリケーションの作成後は、自動的にモジュール作成の画面になります。名称もアプリケーション名が自動的に入力されていますので、「CREATE MODLUE」ボタンをクリックしてモジュールを作成しましょう。

 

モジュールの作成が完了すると、以下の開発画面が表示されます。

outsystems develop screen

 

OutSystemsの一覧画面作成

まず一覧画面から作成していきましょう。
左側にある「Screen」というウィジェットをドラッグ&ドロップして画面中央に配置してください。

 

そうすると以下の画面が表示されます。

outsystems web screen create

 

OutSystems11では、標準機能にて、いくつかのテンプレートがありますが、今回は一覧を作成しますので「List」を選択して、「CREATE SCREEN」をクリックします。

outsystems new screen list

 

テンプレートによって一覧画面が作成されました!早速動かしてみましょう!

outsystems list screen

 

上部真ん中に緑の丸で表示されている1のアイコンがあります。

これは「1-Click-Publish」ボタンでクリックするだけで、ローカルにて編集した内容をアップロード、プログラムコードに変換、データベースの構成を更新までの一連の作業を自動で行ってくれます。

 

「1-Click-Publish」ボタンをクリックして実際に動かしてみましょう。

 

最下部のログに「Done」が表示されれば「1-Click-Publish」が完了です。

1 click publish output

 

先ほどまで、「1-Click-Publish」ボタンが緑だったと思いますが、青色になっていると思います。そのボタンをクリックするとブラウザに作成したアプリケーションを表示することができます。

ボタンをクリックしてブラウザに作成した一覧画面を表示してみましょう!

outsystesms list view browser

 

「List」で作成した画面では初期の一覧表示、ヘッダによるソート機能、検索機能、ページ遷移機能が自動的に作成されます。
これらは、個別で調整することも可能ですので、いったん作成しておいて後から個別の要件の追加していくと開発がスムーズに進むと思います。

 

作成できたら色々動かしてみましょう!

検索速度やページ遷移速度など、開発では表示速度も重視されますので、実際に動かしてみないとわからないことが多いと思います。

 

動かした際に気付いたかもしれませんが、「Add Request」ボタンはクリックしても反応がありません。これは「Add Request」ボタンに処理が何も記載されていないからです。

次はこの「Add Request」ボタンを実装して、詳細画面に遷移する処理を作成していきましょう。

 

今回作成した画面はレスポンシブに対応されているため、横幅を縮めると以下のようにレイアウトが自動的に変更されます。

outsystems responsive list view

OutSystemsの詳細画面作成

では、詳細画面を作成していきましょう。

作成の手順は以下になります。

 

1. 詳細画面をテンプレートで自動作成
2. 一覧画面の「Add Request」ボタンを詳細画面に遷移する処理を追加
3. 詳細画面で「Save」ボタンの保存処理を追加
 

では、さっそくやってみましょう!

 

詳細画面をテンプレートで自動作成

こちらは一覧画面と同様の手順になります。

まずは、右のツリー上にある「MainFlow」をダブルクリックします。

outsystems web flow view

 

表示された画面にて、一覧画面と同じように左にある「Screen」を画面中央にドラッグ&ドロップします。

outsystems mainflow view

 

一覧画面では「List」を選択しましたが、今回は詳細画面ですので「Detail」を選択します。

outsystems new screen detail

 

するとテンプレートによる詳細画面が自動作成されます。

outsystems detail screen

 

では、一覧画面から詳細画面を呼び出す処理を作成しましょう!

 

一覧画面から詳細画面への遷移処理を追加

一覧画面を表示して、「Add Request」ボタンをクリックします。

outsystems list screen

 

右下に以下のようなプロパティ項目が表示されます。

「Event」「On Click」を右側のように変更します。

変更前

outsystems list screen button properties

変更後

outsystems list screen button properties

使用しなくなった「AddRequestOnClick」は不要なので削除しておきましょう。
削除は「Delete」キーで行えます。

outsystems button action delete

 

これで、一覧画面から詳細画面への遷移処理の実装が完了しました!

 

次は詳細画面に保存処理を追加しましょう!

 

詳細画面に保存処理を追加

まずは、詳細画面から保存処理が完了した際に、一覧画面が表示されるように処理を追加します。

 

では、詳細画面を表示します。

outsystems detail screen save button

 

「Save」ボタンをダブルクリックします。

 

一番下にある「End」の上に、一覧画面(List Screen)をドラッグ&ドロップします。

outsystems detail save button

 

この処理を追加することで、「Save」ボタンがクリックされた後に、一覧画面を表示することができます。

 

では、保存処理を追加しましょう。

 

左側にある「Run Server Action」を下図の通り、線の上にドラッグ&ドロップします。

outsystems save button

 

Actionの選択画面が表示されますので、「NEW SERVER ACTION」をクリックします。

outsystems new screen action create

 

この「Server Action」はサーバー側で動作するプログラムになります。主にデータベースや外部インタフェースの連携にて使用します。

いままでの「Save」ボタンなどのActionは「Client Action」と呼ばれていて、クライアント側で動作するプログラムになります。

 

作成された「Action1」というActionを右クリックして、「Add Input Parameter」をクリックします。

outsystems server action add parameter

 

追加したParameter名は「Sample_Request」にしておきます。
そうすると自動的に「Data Type」「Sample_Request」になります。

outsystems server action parameter

 

作成した「Action1」をダブルクリックし、Actionの内容を編集していきます。

 

右上にある「Data」タブをクリックし、Database内にある「Sample_Request」配下の
「CreateOrUpdateSample_Request」を下図のようにドラッグ&ドロップします。

outsystems database createorupdate

追加した「CreateOrUpdateSample_Request」のParameterに「Sample_Request」を選択します。

outsystems create or update action

 

あとはエラーになっている「Action1」のParameterを設定しましょう。

 

詳細画面の「Save」ボタンをダブルクリックします。

エラーになっている箇所を、選択肢に表示される内容を設定します。

outsystems action parameter

 

これで「1-Click-Publish」してみましょう!

 

一覧画面が表示され、「Add Request」にて詳細画面へ遷移し、「Save」ボタンで登録され一覧画面へ。検索すると登録した内容を確認できると思います。

outsystems list search result

 

これで、今回の解説はすべて完了しました。お疲れさまでした!

 

 

-OutSystems, システム開発
-

Copyright© Mamito blog , 2020 All Rights Reserved Powered by AFFINGER5.