Web ページにソリューションを埋め込む

www.altova.com すべてを展開/折りたたむ このトピックを印刷 前のページ 1つ上のレベル 次のページ

ホーム >  埋め込まれた Web ページソリューション >

Web ページにソリューションを埋め込む

Web ページ内に1つ、または、複数の MobileTogether ソリューションを埋め込むことができます。 各ソリューションは HTML IFRAME 要素内に埋め込まれています。 埋め込むには、以下を行ってください:

 

1.ソリューションを表示する Web ページ内の場所に HTML IFRAME 要素を追加します(下のサンプルを参照してください)。
2.IFRAMEsrc 属性を MobileTogether Server 上で埋め込むためのソリューションの URL に設定します (下のリスティングを参照してください)。

 

<iframe src="http://localhost:8083/run?d=/public/my-mt-solution" frameborder="0"></iframe

 

 

HTML ページがロードされると、 その IFRAME 要素 はターゲットとされたソリューションをロードします。 IFrame は MobileTogether Server にアクセスするため3つの 認証に関連したシナリオを使用することができます:

 

匿名のアクセス: MobileTogether Server 上でソリューションへの匿名のアクセスが有効化されている場合、IFrame 上でソリューションは直接表示されます。  ユーザーの認証は必要とされません。匿名のアクセスを設定するには、 サーバーに対して以下を行う必要があります (i) 匿名ログインの許可 (サーバー モバイルクライアントポートのための設定を参照)、 (ii)  (ワークフローのコンテナーのパーミッションを設定container=readworkflow=read,use の最小値に設定することで)ソリューションの匿名の使用を許可します。
ユーザーログイン: 匿名のユーザーログインがサーバー上で有効化されていない場合、 ユーザーは MobileTogether Server ログイン資格を提供するように問われます。 ユーザーが ターゲットとされたソリューションにアクセスするパーミッション を有する場合、ソリューションMobileTogether Server から Web ページの IFrame にダウンロードされます。
JWT 認証:  MobileTogether Server 認証システム外のシステム内でユーザーが認証され、 JSON Web Tokens (JWT) を介して、 MobileTogether 固有の認証を必要とせず、JWT MobileTogether Server に認証の情報がパスされます。認証はロードするためのターゲットとされたソリューションを有効化します。

 

サンプル: 埋め込まれたソリューションを含むシンプルな Web ページ

下にリストされる HTML コード は、ソリューションを埋め込むためにどのように IFRAME 要素が使用されるかを示しています。埋め込まれたソリューションを含む HTML ページ のスクリーンショットがその下に表示されています。ソリューションは(緑の枠で)囲まれています。このリスティングで使用されるサンプルは About という名前のサンプルです。これは、 MobileTogether Server 内にパッケージされており、サーバーの Public コンテナーにデフォルトで存在しています。 このソリューションをソリューション内に正確に埋め込むために、 About ワークフローの匿名のアクセスを許可するようにサーバーをセットアップする必要があります。この機能を試すには、下の HTML コードをコピーし、ファイルに保存し、ファイルをブラウザーから開きます。

 

<!DOCTYPE html>

<html>

  <head>

    <title>Webpage containing an embedded solution</title>

  </head>

  <body>

    <h1>Webpage containing an embedded solution</h1>

    <p>The embedded solution is loaded into an IFrame, which is located immediately below this paragraph.</p>

    <div class="resize">

      <iframe src="http://localhost:8083/run?d=/public/About" frameborder="0"></iframe> 

    </div>

  </body>

</html>

 

src 属性内の URL は、次のパターンを解決する必要があります: http://<serveraddress>:<serverport-for-client>/run?d=/<path-to-container>/<solution-name>

 

 

Click to expand/collapse 完全なリスティング  (IFrame のサイズを調整するための CSS スタイルが含まれます)

 

<!DOCTYPE html>

<html>

  <head>

    <title>Webpage containing an embedded solution</title>

    <style>

      .resize {

        position: relative;

        padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9/16 = 0.5625 or 56.25%) */

        padding-top: 30px;

        height: auto;           /* alternatively, try a value of 0 */

        overflow: hidden;

      }

 

      .resize iframe {

        position: absolute;

        top: 0; 

        left: 0;

        width: 100%;

        height: 100%;

      }                

    </style>

  </head>

  <body>

    <h1>Webpage containing an embedded solution</h1>

    <p>The embedded solution is loaded into an IFrame, which is located immediately below this paragraph. CSS style properties are used to resize the IFrame according to window dimensions so that the IFrame's aspect ratio is maintained at 16:9.</p>

    <div class="resize">

      <iframe src="http://localhost:8083/run?d=/public/About" frameborder="0"></iframe> 

    </div>

  </body>

</html>

 

MTDEWSEx01

 


(C) 2019 Altova GmbH