モバイルアプリでのWeb画面の再利用

Last updated
Save as PDF

質問

Webアプリの画面をモバイルアプリで再利用する方法はありますか？

回答

OutSystemsでは、既存の機能をモバイルアプリで直接開発して移行することを推奨しています。

しかし、常にこの方法を選択する必要はなく、Web画面を埋め込んだインラインフレームを使用して既存のWeb画面をモバイルアプリに統合できます。

このためには、以下の手順を実行する必要があります。

Web画面を取得するときに適切なリクエストヘッダーを送信するモバイルアプリで、インラインフレームを使用します。
モバイルアプリのエンドユーザーが自動的にログインするように、Webアプリを更新します。

モバイルアプリでインラインフレームを使用する

以下の手順を実行して、Web画面を表示するインラインフレームを含むブロックを作成します。

InternalBrowserという名前の新しいブロックを作成し、Sourceという名前のテキスト入力をブロックに追加します。
以下のCSSクラスをブロックのプロパティスタイルシートに追加します。
```
.internal-frame {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100px;
}
```
モバイルアプリに埋め込む特定のWeb画面によっては、CSSクラスinternal-frameに微調整を加える必要がある場合があります。
HTML要素をブロックに追加し、Tagプロパティを「iframe」に設定し、アトリビュート「class = “internal-frame”」を追加します。
クライアントアクションFetchIframeをブロックに追加します。FetchIframeアクションで、JavaScriptノードとパラメータSourceを追加し、Webブロックの入力SourceにJavaScriptのパラメータを関連付けます。適切なリクエストヘッダーでWeb画面を取得する以下のコードをJavaScriptノードに追加します。
```
var iframeGetter = new XMLHttpRequest();
iframeGetter.onload = function () {
    document.getElementsByClassName("internal-frame")[0].setAttribute("src", $parameters.Source);
};
iframeGetter.open("GET", $parameters.Source);

// OutSystems 11
iframeGetter.setRequestHeader("X-CSRFToken", require("OutSystems/ClientRuntime/Communication").CSRF.getCSRFToken());

// In OutSystems 10, use this line of code for setRequestHeader:
// iframeGetter.setRequestHeader("X-CSRFToken", require("Communication").CSRF.getCSRFToken());
//

iframeGetter.send();
```
FetchIframeアクションでは、リクエストを保護し、Session_GetMobileAppLoginInfoアクションによるログイン情報の検証を許可する適切なHTTPヘッダーを送信します。
FetchIframeアクションを、InternalBrowserブロックのOn ReadyイベントとOn Parameters Changedイベントのイベントハンドラとして定義します。

これにより、モバイルアプリでブロックが表示されたときとSourceパラメータが変更されたときにFetchIframeアクションが実行されるようになります。
モバイルアプリでInternalBrowserブロックを使用し、ブロックの入力Sourceに埋め込むWeb画面のURLを渡します。

エンドユーザーをWebアプリに自動的にログインさせる

モバイルアプリに埋め込まれるWeb画面を含むUIフローに、OnExceptionハンドラを追加します。OnExceptionのフローは、セキュリティ例外を処理し、現在のエンドユーザーがモバイルアプリで認証済みであるかどうかを検証します。認証済みの場合、Webアプリにユーザーを自動的にログインさせます。以下のロジックをOnExceptionハンドラに追加します。

まだログインしていないエンドユーザーからのリクエストを検出するSecurityExceptionハンドラを追加します。
PlatformRuntime_APIエクステンションのSession_GetMobileAppLoginInfoアクションを参照し、このアクションを使用してエンドユーザーのログイン情報をモバイルアプリから取得します。
Session_GetMobileAppLoginInfo.userId <> NullIdentifier()であるかどうかをテストします。Trueの場合、エンドユーザーはWebアプリにログインしており、Webアプリは自動的にエンドユーザーのログインを進めます。Falseの場合、エンドユーザーはログインしておらず、Webアプリはエラーページにリダイレクトします。
Trueブランチでは、Session_GetMobileAppLoginInfoアクションで取得した以下の値とLoginシステムアクションを使用して、エンドユーザーを自動的にログインさせます。
```
UserId = IntegerToIdentifier(Session_GetMobileAppLoginInfo.userId)
Persistent = Session_GetMobileAppLoginInfo.isPersistent
```
Loginアクションの後、外部サイトを使用し、リクエストされたWeb画面のURLを返すGetExceptionURL()にリダイレクトします。

モバイルアプリに戻るWeb画面内のリンク

モバイルアプリのインラインフレームで表示するWeb画面内にモバイルアプリに戻るリンクが含まれる場合、リンクに必ずtarget = “_top”アトリビュートを含めます。このようにしないと、以下のようなカスケードのループが発生する可能性があります。これは、デフォルトではリンクが最上部のウィンドウではなくインラインフレーム内で開かれるために発生します。