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

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

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

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

1. 外部ドメインとの通信を許可リストに登録します。そのために、既存の埋め込みアプリまたは iFrame にパラメーター &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>
   

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

• コントロールがアプリに追加されたり、アプリから削除されたりすると、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 内のボタンを使用して、アプリと対話してコンテンツを変更します。GitHub のデモ アプリを使用