Skip to main content

 

 

 

 
Language:
 
 
 
OutSystems

従来のアプリからリアクティブアプリへの移行のリファレンス

このドキュメントは未完成です。フィードバックをお寄せください

このドキュメントは、経験豊富な開発者やリードに従来のWebアプリからリアクティブWebアプリへの移行に関するガイダンスを提供するためのものです。移行を行うには、新しいフロントエンド機能とアプリケーションアーキテクチャに関する適切な知識が必要です。概要については、OutSystemsのトレーニング「リアクティブWeb開発者への道」をご覧ください。

このレファレンスドキュメントには、従来のアプリとリアクティブアプリの違いに関する注記がまとめられています。開発者が既存の従来のアプリからリアクティブランタイムへの移行を行う際に活用することを想定しています。

このドキュメントで使用されている用語は以下のとおりです。

  • ソース - 移行元となる既存の従来のWebアプリを指します。
  • ターゲット - 移行先となる新しいリアクティブWebアプリを指します。

準備と最初の計画

以下は従来のモジュールの移行準備手順に関連する考慮事項です。

  • URLが新しい画面、リソース、画像で有効である必要があります。ハードコーディングされたURLを使用する場合、新しい画面でURLを更新する必要があります。
  • データを保護しながらエンティティを移行します
  • サイトプロパティを処理します
  • ロールを移行します
  • タイマーおよびプロセスの影響

リアクティブアプリへの移行開始後は、以下の順序に従うことを推奨します。

  1. テーマ
  2. UIフロー
  3. 外部サイト
  4. 画面
  5. ブロック(依存関係の順序)

アクセラレータ

アプリの移行を高速化するために役立つアクセラレータがいくつかあります。

コピーして貼り付け

以下の要素については、従来のアプリからリアクティブアプリへコピーできます。

  • サーバーアクション
  • エンティティ

また、以下を行うことができます。

  • サーバーアクションを画面のクライアントアクションに貼り付けることができます。ただし、作業が保持されている要素に限ります。
  • Aggregateを画面に貼り付け、画面のAggregateを作成することができます。

スキャフォールディングおよび画面テンプレート

スキャフォールディングや画面テンプレートを利用して作成した画面の場合、同じ方法で再作成するほうが時間がかかりません。最新バージョンであることを確認したうえで、様々なスキャフォールディングパターンを試してみてください。

モジュール要素

モジュール(eSpace)レベルの移行に関連する要素の概要と、リアクティブアプリで新しいロジックを作成する方法の詳細を以下に示します。

エンティティ

エンティティを処理するロジックをターゲットアプリに移行する際は、PublicにすべきエンティティやExpose Read-Onlyをfalseに設定すべきエンティティに注意する必要があります。

ターゲットアプリで新しいエンティティを作成すると新しい物理テーブルが作成されます。これを踏まえ、まずエンティティをPublicに変更してからターゲットモジュールでそのエンティティへの参照を追加することを推奨します。

また、エンティティ移行のためのアクセラレータを使用することもできます(コピーして貼り付ける)。

多言語ロケール

この機能は改良中です。まれに、ページを更新するとロケール設定が英語にリセットされることがあります。

クライアント側UIとクライアント側ロジックには、Forgeで入手できるMultilingual Componentを使用します。ソースモジュールからテキストをスプレッドシートへ抽出して、AddTranslationsまたはAddTranslationsFromResourceで求められる形式に変換します。(翻訳されたテキストの使用を検索するなどして)要素に対応する翻訳キーを特定し、必要に応じてdata-transアトリビュートやGetTranslation呼び出しを追加します。

サーバー側ロジックでは、ビルトインのGetCurrentLocale関数を使用して翻訳を明示的にインライン処理します。

On Session Start

リアクティブアプリでクライアント変数の初期値を構成パラメータとして設定するには、On Application Readyイベントを使用します。

ソースアプリでOn Session Startセッション変数の初期化に使用している場合、ターゲットアプリ内でこの変数を読み取ることが可能な場所にロジックを移行し、変数が定義されていることを確認したうえで保護します。たとえば、Cookieを使用する場合、GetCookieの呼び出しの前にロジックを追加し、Cookieが先に設定されていないときにのみGetCookieが実行されるようにします。

ソースアプリにおいてOn Session Startがその他の目的で使用されている場合は、ケースバイケースで評価する必要があります。このロジックが実行されるのは、最初のサーバーリクエスト時とユーザーのログイン時、そしてログアウト後の最初のリクエストのときであることを考慮してください。

プロセス

データが失われないようにするため、元のモジュールでプロセスをPublicに変更してそのプロセスを参照するようにします。

ロール

データが失われないようにするため、元のモジュールでロールをPublicに変更し、そのロールを参照するようにします。その後、すべての画面の権限が同じであることを確認します。

サーバーアクション

サーバーアクションの新しいアプリへの移行方法は、アクションがPublicであるかどうか、画面での用途、新しいリアクテイブアプリのクライアント側で使用できるかどうかによって異なります。これらのアクションをコピーして貼り付ける方法については、アクセラレータのセクションをご覧ください。

関数として使用されない

ターゲットアプリのサーバーアクションに直接移行することができます。

入力パラメータがある関数として使用される

入力パラメータの計算後、通常はデータアクションの最後にこのアクションが呼び出されるように移行します。各アクションの出力を使用するデータアクションを作成します。このデータアクションでは、サーバーアクションを画面で使用された順序で呼び出します。

画面で関数として使用される回数が一定である

サーバーアクションが(リスト内ではなく)画面で一定の回数使用されます。アクションをターゲットモジュールのサーバーアクションに移行し、各関数呼び出しのローカル変数を作成します。

画面で関数として使用される回数が変化する

サーバーアクションが(リスト内の)画面で使用される回数が変化します。サーバーアクションをターゲットモジュールへ移行します。次に、リストの作成と関数の呼び出しを行うAggregateに計算されたアトリビュートを追加します。

セッション変数

リアクティブのクライアント変数は多くの点でセッション変数と似ています。ユーザー名、ロケール、フィルタのインスタンス化など、アプリのグローバル構成を初期化するには、クライアント変数とOn Application Readyイベントを組み合わせて使用します。

以下に留意してください。

  • クライアント変数の値は、ユーザーがサインアウトすると消去されます
  • On Application Readyシステムイベントは、新しいタブ/ブラウザでアプリが実行されるたびにトリガーされます

セッション変数の移行は、ブラウザセッションやユーザー設定への関連付けの有無、データ型、機密情報が含まれる可能性の有無によって異なります。

サイトプロパティ

現在の値を保持するには、Service Centerを使用して、値を元のモジュールから新しいモジュールへコピーします。

ブラウザセッションに関連付けられている

セッション変数がブラウザセッションに関連付けられていてデータ型が単純である場合は、命名規則(SessionVariable_NAMEなど)を使用してブラウザセッション中存続するCookieへ移行します。ログアウトしても値が消去されないことに留意してください。

読み取りと書き込みを、HTTPRequestHandlerのGetCookieメソッドおよびSetCookieメソッドに置き換えます。

クライアント側の読み取りパフォーマンスを向上させたい場合は、代わりにJavaScriptノードを使用してdocument.cookieからCookieの値を取得します。

変数にバインドされたウィジェットがある場合、それをバインドするローカル変数を作成し、その値をCookieと同期します。

Cookieには制限があり、複雑な型を保存すると効率が非常に悪くなる場合があるため、データ型の区別が重要になります。

ユーザー設定を保存するために使用されている

変数がユーザー設定を保存するために使用されている場合(つまり、ブラウザセッションではなくユーザーに関連付けられている場合)、以下のようになります。

  • UI/クライアント側ロジックでのみ使用されている場合、クライアント変数に値を保存します。
  • セッション変数がサーバー側で使用されている場合、ロジックがユーザーIDに関連付けられたデータベースエンティティの行を使用するように変数を移行します。

変数がListデータ型およびRecordデータ型の場合、追加の作業(エンコードの工夫や別のテーブルの使用など)が必要になることがあります。

その他

このセクションで扱われていないセッション変数のユースケースについては、ケースバイケースで移行を評価する必要があります。

テーマ

必要なCSSをソースアプリからターゲットアプリのテーマへコピーします。

UIフロー

ターゲットアプリの新しいUIフローが新しいテーマを参照するようにします。高度なプロパティであるHTTP Security、Integrated Authentication、Internal Access Onlyは移行できません。

UIフロー要素

UIフロー要素の概要と移行に関するヒントを以下に示します。

エントリ

この要素の変換はありません。ターゲットアプリで画面をモジュールの「エントリ」ポイントとして設定するには、要素ツリーで画面を右クリックして[Mark as Default Screen]を選択します。

外部サイト

ターゲットアプリの外部サイトへ要素を移行します。すべての入力パラメータとプロパティに直接のマッピングが必要です。

複数のモジュールへの相対URLを持つ外部サイトの場合、URLの末尾の違いのために(.aspxや.jsfがなくなっているために)エラーになることがあるため、注意してください。複数のモジュールへの相対URLの処理は内部ルーターによって行われるようになったため、完全なURLを使用する必要があります。

フロー例外ハンドラ

OnExceptionハンドラはクライアント側のハンドラです。例外をサーバー側で処理するには、サーバー側のエラーについてはフローで例外ハンドラを使用する必要があります。クライアント側で例外がバブルアップしても構わない場合は、サーバーアクションを呼び出したクライアント側のアクションや、UIフローのOnExceptionハンドラで処理することもできます。

画面アクションに関する推奨事項もご覧ください。

画面

ターゲットアプリで新しい画面を作成する際やそれらの画面を他のモジュールから参照する際は、以下に留意する必要があります。

  • ローカル変数に機密情報を保存しないようにします。
  • UIはクライアント側で生成されるため、ロールの検証より先に画面が表示されます。
  • 極力JavaScriptロジックを変換し、クライアントアクションを使用するロジックにしてください。

Titleプロパティはではなくテキスト値に変換する必要があります。

NameDescriptionScreen Rolesはソースアプリと同じでかまいません。JavaScriptプロパティは新しいJavaScript要素に移行します。

HTTP SecurityIntegrated AuthenticationCache In Minutesは、対応するものがターゲットアプリにありません。なお、HTTPSがデフォルトで有効になります。

Webブロック

画面に関する最初の注記をご覧ください。

NotifyとNotifyGetMessageはリアクティブWebでは使用できません。イベントを使用し、対応するハンドラアクションを作成します。

参照先となるWebブロック

依存関係を使用して挿入します。

画面およびブロックのロジック

ソースとなる画面やブロックにあるロジックを新しいリアクティブアプリに移行する方法の詳細を以下に示します。

Ajax Refresh

ターゲットモジュールのUI要素はデータ変更時に自動的に更新されるため、Ajax Refreshは不要です。

Downloadノード

新しいDownloadノードをロジックフローに追加して使用します。

Preparation

Preparationはリアクティブアプリで使用できない要素の1つであり、専用の画面アクションにリファクタリングする必要があります。Preparationロジックを複製する際は、クライアント側にサーバー側の応答を待機させるなどしてアプリの速度を低下させないように注意する必要があります。

代案として以下のユースケースを検討します。

  • UIに表示するためだけにデータを取得している場合は、画面でデータのAggregateを使用し、結果をウィジェットにバインドします。Aggregateが非同期的に並列実行され、Aggregateによるデータの取得が完了するとUIが更新されます。
  • データを表示する前に操作を行っている場合、データアクションを使用してデータを操作し、クライアント側へ適切な情報を送り返します。

リアクティブアプリで画面にデータを取得するには、要素ツリーで画面を右クリックして[Fetch Data from Database]または[Fetch Data from Other Sources]を選択します。

Max Records

ターゲットアプリではMax Recordsへの対応を忘れずに行う必要があります。ソースアプリではバインドされているウィジェットからMax Recordsの値を計算するためです。

依存関係(または依存するAggregate)がないAggregateは画面のAggregateに移動できます。AggregateのMax Recordsが空になっている場合、次の値を入力する必要があります。

  • 単一のウィジェットにバインドされている場合、そのウィジェットのLine Countの値
  • 複数のウィジェットにバインドされている場合、最も想定値が高いLine Countの値

Refresh Data

Refresh Dataノードを移行する際は、データソース間の依存関係と画面におけるデータの用途を分析する必要があります。また、ターゲットモジュールのクライアント側が必要なデータのみを受信するようになっていることを確認し、アプリが機密情報を公開しないようにする必要があります。

更新されるデータソースに依存関係がない場合は、画面のAggregateまたは別のデータアクションにロジックを分離して更新します。

データソース間に依存関係がある場合は、AggregateのFetchプロパティ(On StartOnly On Demand)を使用し、専用の非同期パターンを作成することを検討します。この処理の例については、オンラインヘルプの「Aggregateを使用して非同期データ取得を実装する」をご覧ください。

Send Emailツール

この機能はリアクティブでは現在使用できませんが、OutSystemsが対応中です。当面の回避策を以下に示します。

  • 従来のアプリのロジックを再利用します
  • サードパーティのサービスを使用します

画面アクション

画面アクションのロジックをリファクタリングする際は、アプリのパフォーマンスを常に考慮します。サーバー側で実行するロジックとクライアント側で実行するロジックを特定します。その後、ロジックをサーバーアクションとクライアントアクションに分けます。Preparationの使用を避けるために画面をどう変更するかによって、サーバーアクションに入力パラメータが必要になる場合があります。

ランタイムにサーバーへの直接アクセスが発生するため、次のアクションをUIから直接使用することはできません。

  • クライアント側での代替方法がないシステムアクション。これにはトランザクション関連のアクションやログイン関連のアクションが含まれます。
  • ロールのCheck/Grant/Revoke。なお、ロールをチェックできるJavaScript APIがありますが慎重に使用してください。アプリをセキュアに保つため、デフォルトではクライアント側は現在のロールに関連する情報しか取得できないようにするべきです。
  • サーバーエンティティに対するAggregate。

システムアクション

使用したいサーバーアクションに相当するクライアントアクションがない場合、以下を検討します。

  • パフォーマンスへの影響に留意しつつ、システムアクションをラップしてサーバーアクションにする。
  • カスタムJavaScript実装を作成する。

詳細なアイデアや例については、OutSystemsコミュニティが提供しているReactive Utilities Forgeコンポーネントをご覧ください。

Notify

Webブロックをご覧ください。

Notify Get Message

Webブロックをご覧ください。

ウィジェット

ターゲットアプリで新しいUIエクスペリエンスを作成する際は、クライアント側の開発パラダイムやこのセクションで説明する差異に留意する必要があります。

一般的な考慮事項

以下の考慮事項はすべてのウィジェットに該当するものです。

Min. Height、Width、Height

リアクティブでは、style拡張プロパティを使用します。たとえば、 min-height: 15px;のようになります。Widthがcharsで設定されている場合は、拡張スタイルプロパティとしてemで長さを設定します。

Style

StyleプロパティはリアクティブWebアプリではExpressionです。

Visible

機密情報を非表示にする手段としてウィジェットのVisibleプロパティを使用しないでください。

基本的に、リアクティブアプリでは所定のユーザーロールに対するチェックが行われる前にクライアント側でインターフェイスが描画されます。ウィジェットをターゲットアプリへ移行する際は、適切な情報が適切なクライアント側へ提供されるかどうかを慎重に確認してください。

ウィジェットの比較の概要

このセクションではウィジェットの差異に関する注記を示します。以下の表は従来のウィジェットとそれに対応するリアクティブWebの要素(ある場合)をまとめたものです。

従来のWeb リアクティブWeb
Button Button
Checkbox Checkbox
Combobox Dropdown
Container Container
Comment 該当なし
Edit Record Form
Editable Table セル内に入力を含むTable
Expression Expression
Form Form
If If
Image Image
Input Input、TextArea
Input Password Input
Label Label
Link Link
List Records List
Placeholder Placeholder
Radio Button (開発中)
Show Records Table
Table Records Table
Text Text

Container

Displayプロパティを、if(<式>, "", "display: none;")という形式のstyle拡張プロパティに変換します。

Combobox

ターゲットアプリでは、Comboboxの代わりにDropdownウィジェットを使用する必要があります。Options Contentを使用し、Text Only<span>要素を生成することや、Custom<div>要素をより柔軟に生成することができます。

Expression

Expressionsは簡単に実装できるようにする必要があります。従来のアプリでEscape Contentオプションを使用していた場合、リアクティブでHTMLタグを実装するにはHTML Elementを使用します。

Form

フォームへの入力を検証する方法の例をご覧ください。

If

Ifツールの条件に機密情報が含まれないようにします。たとえば、サーバー側で管理者に対してのみ表示する情報がある場合、ターゲットアプリで同じロジックを再利用すると、リアクティブアプリのクライアント側UIに機密情報が取り込まれるおそれがあります。

Image

リアクティブのImageウィジェットではLabelプロパティを使用できません。画像のタイトルを設定するには、title拡張プロパティのを使用します。

Input

リアクティブのInputウィジェットまたはTextAreaウィジェットを使用できます。パスワードフィールドが必要な場合は、Inputウィジェットを使用し、InputのTypeプロパティをPasswordに設定します。

Label

リアクティブアプリのLabelウィジェットには、テキスト値が含まれるTextプロパティのみがあります。

List Records

ターゲットアプリではListを使用します。Line Separatorがウィジェットの生成に影響します。

  • None: ModeプロパティがCustomに設定され、spanタグが付きます。
  • New Line: ModeプロパティがCustomに設定され、spanタグが付き、末尾のTextウィジェットに「\n」というテキストが付きます。
  • Bullets: ModeプロパティがCustomに設定されます。囲いとなるHTML要素とspanタグが必要です。また、ulタグと、リスト要素ごとに別のHTML要素(およびliタグ)も必要です。

Radio Button

このウィジェットは現在開発中です。

Show Records

Table Recordsをご覧ください。

Table

Table Recordsをご覧ください。

Table Records

リアクティブアプリのTableウィジェットは、表形式データのスキャフォールディング、ページネーション、ソートをサポートする新しいウィジェットです。詳細については、「テーブルの作成および編集」および「テーブルのページネーションおよびソート」をご覧ください。

リッチウィジェットの概要

リッチウィジェットはレガシービルトインウィジェットであり、OutSystems UIではサポートされません。リアクティブアプリでは最新の実装に置き換えられています。新しいアプリでは、以下の表に示されている方法を参考にしてリッチウィジェットを置き換えてください。

リッチウィジェット 注記
Application Switcher Data SourceData Actionに変更します。
Dropdown Menu OutSystems UIのDropdownウィジェットを使用します。
Feedback Ajax Wait リアクティブにはAjaxがありません。UXを見直し、更新します。
Feedback Message クライアント側のMessageツールを使用し、必要なときにサーバーからメッセージを取得します。
Icon 新しいIconを使用します。Font Sizeの代わりにSizeを使用します。
Input Autocomplete InputウィジェットとOnChangeログイン、またはOutSystems UIのDropdownSearchに移行します。
Input Calendar OutSystems UIのDate Pickerウィジェットを使用します。
List Counter 独自に作成するか、OutSystems UIのPaginationウィジェットをご覧ください。
List Navigation OutSystems UIのPaginationウィジェットをご覧ください。
List Sort Column ソート機能があるテーブルをスキャフォールディングしてロジックを点検し、適宜再利用したり調整したりします。
Layout Chicago / Email / Popup ブロックを使用します。
Layout London ブロックと軽量UIを使用します。
Popup Editor PopOver MenuPopupを使用します。
Popup Info Balloon PopOver MenuPopupを使用します。

ウィジェットイベント

ウィジェットイベントの移行に関する注記を以下に示します。

On Click

リアクティブアプリでは、従来のWebのOn Clickプロパティの機能を以下のように実装できます。

  • Destination - 画面アクションまたは画面を参照します
  • Validation - クライアント側のビルトイン検証を使用してチェックしますが、データベースへ値をコミットする前にサーバー側の検証も実装します
  • Method SubmitまたはAjax Submit - ソースアプリから参照先となるサーバーアクションを呼び出す画面アクションに設定します(古いロジックを再利用します)
  • Navigate - 別の移動先にリダイレクトします