Apps ユーザーガイド

デリバリー:

Automation Cloud Automation Cloud Public Sector Automation Suite

最終更新日時 2024年12月13日

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

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

このロジックを Web ページに追加しない場合、埋め込みは静的な高さを維持し、スクロールバーを表示します。

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

外部ドメインとの通信を許可リストに登録するには、既存の埋め込みまたは 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">
```
埋め込みにサイズの変更を認識させるには、埋め込みアプリをホストしている 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 はコンテンツを動的に読み込み、デバイスフレーム内に表示します。アプリのコンテンツは、スクロールバーが表示されないように、コンテンツに基づいて高さを調整します。