apps
2024.10
true
重要 :
このコンテンツの一部は機械翻訳によって処理されており、完全な翻訳を保証するものではありません。 新しいコンテンツの翻訳は、およそ 1 ~ 2 週間で公開されます。
UiPath logo, featuring letters U and I in white

Apps ユーザー ガイド

Automation CloudAutomation Cloud Public SectorAutomation Suite
最終更新日時 2024年12月18日

レスポンシブでモバイルフレンドリーな埋め込みアプリ

外部の Web ページにロジックを追加して、埋め込みアプリを画面サイズの変化に反応させることができます。埋め込みアプリのコンテンツを表示するために何度もスクロールする必要性が減るため、携帯電話などの小型画面デバイスを使用する場合に便利です。

このロジックを Web ページに追加しない場合、埋め込みアプリは一定の高さに固定され、スクロール バーが表示されます。

レスポンシブでモバイルフレンドリーな埋め込みアプリを設計する

  1. 外部ドメインとの通信を許可リストに登録します。そのために、既存の埋め込みアプリまたは iFrame にパラメーター &target=https://mywebsite.com を追加します。次のコードに例を示します。
    <embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com"><embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com">
  2. 埋め込みアプリにサイズが更新されたことを認識させるために、埋め込みアプリをホストしている Web ページに次の JavaScript ロジックを追加します。
    注:

    具体的な値は、アプリのデザインによって異なります。

    <script>  
    const MIN_HEIGHT = 800; // Minimum height of the app  
    var embed = document.querySelector('embed');  window.addEventListener('message', function(event) {  
    if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {  embed.style.height = Math.max(event.data.height, 800);  
    }  
    if (event.data.event === "APP_CONTENT_RESIZED" && event.data.height !== MIN_HEIGHT) {  
    if(event.data.height > 0) {  embed.style.height = Math.max(parseInt(event.data.height) - 10, 850);  
    }  
    }  
    }); 
    </script><script>  
    const MIN_HEIGHT = 800; // Minimum height of the app  
    var embed = document.querySelector('embed');  window.addEventListener('message', function(event) {  
    if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {  embed.style.height = Math.max(event.data.height, 800);  
    }  
    if (event.data.event === "APP_CONTENT_RESIZED" && event.data.height !== MIN_HEIGHT) {  
    if(event.data.height > 0) {  embed.style.height = Math.max(parseInt(event.data.height) - 10, 850);  
    }  
    }  
    }); 
    </script>

このスクリプトは以下の操作を実行します。

  • コントロールがアプリに追加されたり、アプリから削除されたりすると、APP_CONTENT_HEIGHT_UPDATED イベントをトリガーし、embed 変数の高さを更新します。
    • APP_CONTENT_HEIGHT_UPDATED イベントによって APP_CONTENT_RESIZED がトリガーされ、embed 変数の高さが 10 ピクセル縮小されます。
      • APP_CONTENT_RESIZED イベントによって別の APP_CONTENT_RESIZED イベントがトリガーされ、embed 変数の高さがもう一度 10 ピクセル縮小されます。

以下の状態になるまで、これらの操作を繰り返し実行します。

  • embed 変数が最小の高さに設定され、アプリを表示するためにスクロール バーが必要なくなる。
  • embed 変数が初期値 (MIN_HEIGHT で指定) まで縮小される。

デモ

レスポンシブでモバイルフレンドリーな埋め込みアプリ

はじめに

この Web ページには、モバイル アプリがデバイスのフレーム内に埋め込まれています。このアプリには、モバイル用にコンテンツがレスポンシブに表示されます。iFrame にコンテンツが動的に読み込まれ、デバイスのフレーム内に表示されます。スクロール バーが表示されないように、アプリのコンテンツの高さはコンテンツに基づいて調整されます。

埋め込みデモ アプリ (ご自身でお試しください)
iFrame 内のボタンを使用して、アプリと対話してコンテンツを変更します。
  • レスポンシブでモバイルフレンドリーな埋め込みアプリを設計する
  • デモ

このページは役に立ちましたか?

サポートを受ける
RPA について学ぶ - オートメーション コース
UiPath コミュニティ フォーラム
Uipath Logo White
信頼とセキュリティ
© 2005-2025 UiPath. All rights reserved.