ローコード開発プラットフォーム「OutSystems」を使ったアプリケーションの開発方法をご紹介する本シリーズ。前回の記事では同プラットフォームを使用し、本格的なWebアプリケーションをGUI操作のみですばやく開発しました。今回は「Data Grid データ表示編」として高機能なグリッドコンポーネント「Data Grid」を使い、第1回よりさらに優れたデータ表示機能をもつWebアプリケーションを開発してみたいと思います。
高性能データグリッドコンポーネント「Data Grid」
「Data Grid」は、OutSystemsが提供する高性能データグリッドコンポーネントです。内部には弊社のJavaScriptライブラリ「Wijmo（ウィジモ）」収録のグリッドコントロール「FlexGrid（フレックスグリッド）」が組み込まれており、同コンポーネントの特徴である高速なデータ表示やソート、フィルタといった機能をOutSystems上で簡単にしかもコーディングレスに実現できます。
開発準備
今回もOutSystemsが提供するIDE「Service Studio」を使ってアプリケーションを作っていきます。Service Studioのセットアップ方法については第1回の記事で詳しくご紹介していますので、未見の方は是非、そちらもご参照ください。
加えて、準備の前半で必要な設定も第1回にある「初期設定」〜「モジュールの作成」と同様です。同記事に記載の方法に沿ってアプリケーションとそのモジュールを新規作成します。以下はアプリケーションとそのモジュール名を「DataGridApp」とした例です。
この設定が完了するとIDEに下記のような開発用の画面が表示されます。
今回はさらに「OutSystems Forge」で公開されているグリッドコンポーネント「Data Grid」をダウンロードし開発を行なっていきます。
OutSystems Forge
「OutSystems Forge」は、OutSystems上で利用できるアプリケーションやコンポーネント、テーマなどが公開されているリポジトリです。ユーザーはこのような「部品」をForgeから取得し自身のアプリケーションに組み込むことで、高度な機能を短時間で実装できるようになっています。
「リポジトリ」という言葉からCLIを使ったコマンド操作を連想された方もいるかもしれませんが、OutSystemsによる開発ではこういった部分もGUIで簡単に実現可能です。
次の手順に沿ってForgeからグリッドコンポーネント「Data Grid」をダウンロードし、モジュール上で参照します。
Data Grid 参照設定
Service Studioのツールバーにあるコンセントのボタンを押下します。
表示された「Manage Dependencies」ダイアログにある［Search producers…］欄に”DataGrid”と入力し、検索結果の一覧で［DataGridComponent］を選択します。
ダイアログ中央右側のエリアに関連モジュールの一覧がツリー形式で表示されるので、トップにある［DataGridComponent］ノードにチェックを付けて全ての要素を選択し、ダイアログ下部にある［Apply］ボタンを押下します。
上記と同様の手順で再度「Manage Dependencies」ダイアログを表示し、モジュール検索をした結果の中から［DataGridExample］を選択します。ダイアログ中央右側のエリアに、ツリー形式になった関連モジュールの一覧が表示されるので、今度は［Entities］ノードにチェックを付けて、ダイアログ下部にある［Apply］ボタンを押下します。
この設定により、Forgeで公開されているサンプルアプリケーション「DataGridExample」用の表示データが、自身のプロジェクトで利用できるようになります（実際の開発で「Data Grid」のみを使用し自身で用意したデータを表示する場合、この手順は不要です）。
ここまでで、必要な準備は全て整いました。早速、開発を始めていきたいと思います。
Data Gridを使ったデータ表示
今回のゴールはData Gridを使ったデータ表示です。以下にある3つの設定を実施しながらアプリケーションを開発していきます。
- REST APIの作成
- サーバーアクションの作成
- UIの作成とロジック設定
REST APIの作成
はじめに取り掛かるのはREST APIの作成です。Data Gridは表示データをREST API経由で受け取る仕様になっているので、今回扱うデータをREST APIで取得できるようにする必要があります。例に漏れず、OutSystemsならREST APIの作成も非常に簡単です。以下の手順でデータをAPI公開しましょう。
REST API エンドポイントの作成
最初にREST APIのエンドポイントとなるURIを作成します。Service Studioで［Logic］タブを開き、表示されたツリー内にある［Integrations］配下［REST］のコンテキストメニューで［Expose REST API］を選択して、エンドポイントを作成します。
今回Data Gridで表示するのは［Data］タブの［DataGridExample］内で確認できる”Suppliers”というサンプルデータです。ここから名前を取って、このエンドポイントには”Suppliers”という名前を付けます。
命名直後、上記画像にあるように［Suppliers］の下に赤い波線が表示されエラーとなりますが心配はありません。このエラーは以降の設定で解消されます。
REST API メソッドの作成
次にREST APIメソッドを作成します。先ほど作成したエンドポイント［Suppliers］のコンテキストメニューで［Add REST API Method］を選択し、REST APIメソッドを新規に作成します。
作成直後に名称入力ができるようになるので、”GetAll”と命名し［Enter］キーを押下します。
メソッド処理の実装
名前から推察できるように、現在作成しているのはデータベースから全てのデータを取得するAPIです。この動作を実現できるようにメソッドの内部処理を実装していきます。ツリー上で、先ほど作成した［GetAll］のコンテキストメニューを開き［Add Output Parameter］を選択してメソッドに出力パラメータを追加します。
前項と同じように名称入力ができるようになるので、パラメータ名を”Suppliers”として［Enter］キーを押下します。
次にこの出力パラメータのデータ型を設定します。ツリー上で先ほど作成したパラメータ［Suppliers］を選択の上、Service Studioの画面下部右側に表示される「プロパティエディタ」内、［Data Type］の項でドロップダウンメニューを開き［List…］をクリックします。
ダイアログが表示されるので、この中にある［Suppliers］を選択の上［OK］ボタンを押下します。この時、ダイアログの左下にある［Search Elements］欄を活用すると”Suppliers”エンティティを簡単に検索できます。
ここで選択した［Suppliers］型は、前述のサンプルデータ（［Data］タブの［DataGridExample］内で確認できる”Suppliers”）を示す型です。ここまで設定を通して、このメソッドが［Suppliers］型のリストを出力するという設計を行ったことになります。
以降の手順では、設計通りこの出力パラメータに［Suppliers］型のリストデータが入るようにロジックを形成します。［Logic］タブのツリー上で、先ほど作成した［GetAll］をダブルクリックすると、Service Studioの中央にある「メインエディタ」にメソッドのロジックフローが表示されます。
Service Studioのタブを［Data］に切り替え、表示されたツリー内にある［DataGridExample］配下の［Suppliers］を、メインエディタ上の［Start］と［End］の間にドラッグアンドドロップします。
上記のGIFアニメーションでご覧のように、ドラッグアンドドロップしたデータ要素は自動変換され［Aggregate］処理となってロジックフローに追加されます。［Aggregate］はOutSystems上の開発でアプリケーションの処理を作るために使う「Webロジックツール」の1つです。メソッドの実行時、この処理によってデータ［Suppliers］の取得が行われます。
続いて、この取得データが出力パラメータ［Suppliers］に入るようにロジックを設計します。Service Studioのツールボックスにある［Assign］を、メインエディタ上にある［GetSuppliers］と［End］の間にドラッグアンドドロップします。
前述の［Aggregate］と同じく、この［Assign］もWebロジックツールの1つです。［Assign］には任意の値を変数に割り当てる機能があります。この機能を使ってメソッドの出力パラメータ［Suppliers］に［Aggregate］で取得したデータ［GetSuppliers.List］を割り当てます。メインエディタにドロップした［Assign］を選択の上、プロパティウィンドウに表示される各項目を以下のように設定します。
- Variableの値：Suppliers
- Valueの値：GetSuppliers.List
これでREST APIの作成は完了です。
サーバーアクションの作成
OutSystemsでは、サーバー側で実行されるロジック処理を「サーバーアクション」と呼びます。この項では、先ほど作成したREST APIを実行するサーバーアクションを設定し、アプリケーションの初期設定におけるデータ取得処理の一部として利用できるようにします。
サーバーアクションの新規作成
REST APIの作成時と同じく、この項でもService Studioの［Logic］タブ内で操作を行なっていきます。タブ内のツリーにある［Server Actions］でコンテキストメニューを開き、［Add Server Action］を選択してサーバーアクションを新規作成します。
サーバーアクションを作成すると名称入力ができるようになるので、”GetAllSuppliers”として［Enter］キーを押下します。
サーバーアクション処理の設定
次にサーバーアクションの処理を設定します。先ほど作成した［GetAllSuppliers］サーバーアクションのコンテキストメニューで［Add Output Parameter］を選択します。
前項と同じように名称入力ができるようになるので、パラメータ名を”URL”として［Enter］キーを押下します。この操作により、このサーバーアクションの実行時にパラメータ「URL」が出力されるようになりました。しかし、この段階ではまだ空の状態です。以降では「URL」で出力される内容について、さらに設定を行います。
［GetAllSuppliers］サーバーアクションをツリー上でダブルクリックすると、メインエディタに以下のようなロジックフローが表示されます。
Service Studioのツールボックスにある［Assign］を、メインエディタ上にある［Start］と［End］の間にドラッグアンドドロップします。
サーバーアクションの出力として設定したパラメータ「URL」に値を割り当てます。メインエディタにドロップした［Assign］を選択し、プロパティウィンドウに表示の各項目を以下の様に設定します。
- Variableの値：URL
- Valueの値：GetOwnerURLPath() + “rest/Suppliers/GetAll”
この設定によりサーバーアクションの出力パラメータ「URL」にREST API「GetAll」の出力が割り当てられました。
UIの作成とロジック設定
最後にWebアプリケーションのUIを作成し、これまでに作成したサーバーアクションなどのロジックと関連付けていきます。
アプリケーション画面の新規作成
Data Gridを配置するアプリケーション画面を新規に作成します。Service Studioで［Interface］タブを開き、表示されたツリー内にある［UI Flows］配下［Main Flow］のコンテキストメニューで［Add Web Screen］を選択します。
Web画面の種類を選ぶ「New Screen」ダイアログが表示されるので［Empty］を選択の上［CREATE SCREEN］ボタンを押下します。
この設定を完了すると、以下のような「空のWeb画面」が作成されます。
画面が出来たら名前を設定します。今回は”ScreenDataGridRead”にしました。
データの取得設定
次は表示データの取得設定を行います。アプリケーションでデータを表示する一般的な方法として画面の描画前にデータを読み込み、描画後に表示するというやり方があるかと思います。OutSystemsを使った開発では「Preparationアクション」という機能を利用することで、このロジックを実現することが可能です。
［Interface］タブ上で先ほど作成した［ScreenDataGridRead］のコンテキストメニューを開き［Add Preparation］を選択します。
この設定により「ScreenDataGridRead」画面の描画前処理が作成されます。
作成された［Preparation］をダブルクリックすると、メインエディタに描画前処理のロジックフローが表示されます。Service Studioのタブを［Logic］に切り替え、「サーバーアクションの作成」で設定した［GetAllSuppliers］をツリー上で選択して、メインエディタ上にある［Start］と［End］の間にドラッグアンドドロップします。
この設定により「ScreenDataGridRead」画面の描画前処理としてサーバーアクション［GetAllSuppliers］が実行されるようになります。REST APIを経由した画面からのデータ取得が可能になった形です。
Data Gridの配置
データの取得設定が終わったら、Data Gridを配置し設定していきます。Service Studioのタブを［Interface］に戻し、表示されたツリーの中にある［ScreenDataGridRead］をダブルクリックします。メインエディタに先ほど新規作成した画面が表示されたら、Service Studioのツールボックスにある［GridContainer］を画面内のメインセクション（”Click to add Main Content”と表示されている部分）にドラッグアンドドロップします。
ご覧のGIFアニメーションのように、Data Gridコンポーネントのコンテナにあたる部品が画面に配置されました。以降の手順でこのコンテナに「列」などの要素を追加配置してくことでグリッドビューとしての外観が完成していきます。このコンテナにはプロパティエディタを使って”MyDataGrid”という名前と付け、次の手順に進みます。
Data Gridへのデータ設定と列の配置
Preparationアクションによって取得したデータをData Gridで表示する設定を行います。メインエディタ上で［MyDataGrid］を選択し、プロパティエディタを使って［RestURL］プロパティにREST APIのURLを設定します。この項目はドロップダウンリストによる設定が可能です。リストを開くと使用可能なURLが列挙されるようになっています。
事前に作成したREST API「GetAllSuppliers」のURLを選択して［RestURL］のプロパティ値とします。
![[RestURL]プロパティ値](/wp-content/uploads/detail/hatena/20200729132300.png)
この設定によって、これまでに作成したREST APIによるデータ取得処理とData Gridがつながりました。
次はUIにData Gridの列を追加して、各列と取得したデータ内のフィールドを関連付けます。Service Studioのツールボックスにある［GridColumnText］をメインエディタ上の［MyDataGrid］にドラッグアンドドロップします。このアプリケーションでは2列、Data Gridで表示したいと思いますので、この操作を2回繰り返します。
列を追加したら、プロパティエディタの［Name］欄を使ってそれぞれのラベルを設定します。以降の手順で関連づけるデータの内容を考慮し、各列のタイトルを”ColumnSupplierCode”と”ColumnSupplierName”にしました。
最後に、取得したデータ内のフィールドと各列を関連づけ、Data Gridで表示できるようにします。メインエディタ上の列を選択すると表示される、プロパティエディタの［JSONField］欄に表示したいデータのフィールド名を入力します。
以下は”ColumnSupplierCode”列と”ColumnSupplierName”列にそれぞれ、”SupplierCode”フィールドと”SupplierName”フィールドを関連付けた例です。
動作確認
これで全ての設定が完了しました。Service Studioの上部にある［1-Click Publish］ボタンを押下してこのアプリケーションをデプロイし、［Open in Browser］ボタンを押下してアプリケーションの動作を見てみましょう。
上記画像のように、データ連結されたData Gridを含むWebアプリケーション画面の実行が確認できるかと思います。今回もコーディングレスでアプリケーションが完成してしまいました！
冒頭でご紹介したように、このData Gridは弊社のJavaScriptライブラリ「Wijmo」収録の高機能グリッドコントロール「FlexGrid」をベースとするコンポーネントです。FlexGridに搭載されている様々な機能はData Grid上でもそのままお使いいただけます。
以下はその1つ「フィルタ」を実行した例です。
また、同じくFlexGridに搭載された機能の1つである「ページング」は、Data GridとOutSystemsの連携によってさらに強力なものになっています。
通常、ページング機能の実現にあたっては、UI表示に加えてページデータの動的な取得処理などの実装が必要です。しかし、Data Gridの利用ではこのような手間をかけることなく、ほぼ自動でページングが実現できるようになっています。
お気づきの方もいたかと思いますが、Service Studioを使いData Gridをアプリケーション画面に配置すると、ページング用のUIもあわせて同画面に配置されます。
Data Gridには、このUIやバックエンドと連携するページング処理がすでに組み込まれており、開発者はプロパティエディタを使い、1ページあたりのデータレコード表示数を設定するだけで、ページング機能を実現できるようになっています。
この他にも、Data Gridのプロパティ設定により様々な機能を利用することが可能です。例えば以下は、前述のページング1ページあたりのデータ表示数設定に加えて、データローディング時のメッセージ表示を行う場合の設定です。
この設定でアプリケーションを実行すると、下記の様な動作と機能を実現できます。
次回はデータ編集・更新編
今回はローコード開発プラットフォーム「OutSystems」を使い、グリッドコンポーネント「Data Grid」によるデータ表示を含むWebアプリケーションの開発方法をご紹介しました。REST APIの作成やコンポーネントの利用など、前回よりも複雑な部分がありましたが、コーディング量は引き続きゼロ！同プラットフォームの利用により、高度な開発を非常に少ない工数で実施できることがご確認いただけたかと思います。
本シリーズ、次回も引き続きOutSystems上で「Data Grid」を使う方法をご紹介いたします。今度はデータの編集や更新に挑戦です。再びコーディング量ゼロでいけるでしょうか？ぜひ、お楽しみに！