ウェブサイトの iframe でアプリを実行する

場合によって、既存のウェブサイト内でアプリをホストする必要が生じることがあります。技術的には、アプリは、ウェブサイトに組み込まれる iframe（インラインフレーム）要素内にホストされます。実際、AppSheet ウェブサイト上のアプリエミュレータはこの方法で動作しています。

注: iframe を使用してアプリをホストする場合、スキャナや、プッシュ通知のようなモバイル専用機能など、一部の機能は動作しません。また、オフラインの動作が制限され、カメラの動作が変更されます。

ウェブサイトの iframe でアプリを実行するには、以下の手順を実行する必要があります。

アプリの埋め込みを有効にする
iframe にアプリを埋め込む

アプリのクリエイターが iframe 内でアプリを実行できないようにするには、アプリのクリエイターが iframe にアプリを埋め込めないようにするをご覧ください。

トラブルシューティングのヒントについては、Google サイトに埋め込まれたアプリに関する問題のトラブルシューティングをご覧ください。

アプリの埋め込みを有効にする

ウェブサイトの iframe でアプリを実行できるようにするには、次のようにアプリの埋め込みを有効にします。

アプリエディタでアプリを開きます。
[Security] アイコン > [Options] を選択します。
[Allow app embedding] をオンにします。

iframe にアプリを埋め込む

以下の各セクションでは、アプリが一般公開されているのか、または制限されているのかに応じて、iframe にアプリを埋め込む方法についてそれぞれ説明しています。

iframe に一般公開アプリを埋め込む
iframe に制限付きアプリを埋め込む

iframe に一般公開アプリを埋め込む

任意のウェブサイトで iframe に一般公開アプリを埋め込むことができます。

iframe に一般公開アプリを埋め込むには、以下の手順を実行します。

次のオプションのいずれかを使用して、アプリの ID を取得します。
- アプリについてユーザーに通知するの手順に沿って、[Share] ダイアログを開き、[Share links] をクリックして、[Open in browser] リンクをコピーします。
- アプリエディタでアプリを開き、次の URL 内の appId 値をコピーします。
  
  https://www.appsheet.com/template/AppDef?appName=NewApp-2959733&appId=f88b2122-4e1c-4e1f-111f-12eb567c89cf
- [Settings] アイコン > [Integrations] を選択して、アプリ ID を表示し、コピーします。
ウェブサイトに HTML iframe 要素を追加します。次の iframe コード構造を使用して、appId 値をステップ 1 でコピーしたアプリ ID に置き換えます。
<iframe src="https://www.appsheet.com/start/appId" />
必要に応じて、width と height を設定します。たとえば、スマートフォンのおおよその寸法を使用して表示するには、<iframe src="https://www.appsheet.com/start/b3756bde-b741-4609-bf7d-e2eee77852d6" width="320" height="568"/> の設定を試してみてください。
必要に応じて、次のオプションを構成します。
- ウェブサイトが開かれるたびにホストしたアプリの定義とデータを自動更新する場合は、refresh オプションをオンにします。
- ホストしたアプリが開かれるたびに未保存のデータを破棄する場合は、wipe オプションをオンにします。
以下に、両方のオプションが有効になっている場合の iframe 要素の例を示します。
<iframe src="https://www.appsheet.com/start/b3756bde-b741-4609-bf7d-e2eee77852d6?refresh=1&wipe=1" width="320" height="568"/>

iframe に制限付きアプリを埋め込む

制限付きアプリを使用するには、ユーザーのログインが必要です。

iframe で制限付きアプリを実行する場合は、次の点を考慮してください。

現時点で、制限付きアプリを埋め込むことができるのは、Google サイトのウェブサイトのみです。自社サイトのカスタムドメインを使用することはできません。
アプリユーザーは、サードパーティ Cookie をブロックしないウェブブラウザを使用する必要があります。
制限付きアプリは、サードパーティ Cookie を使用して、ユーザーの同意なしでドメインをまたいでユーザーアクティビティを追跡します。Chrome のシークレットモードでブラウジングしている場合、またはサードパーティ Cookie をブロックするようにブラウザを設定している場合、埋め込まれたコンテキストで認証情報を渡すことはできません。Chrome を使用している場合は、標準ユーザープロファイルセッションを開始することをおすすめします
コンテンツをサイトにページ全体として埋め込むことは現時点ではサポートされていません。

トラブルシューティングのヒントについては、Google サイトに埋め込まれたアプリに関する問題のトラブルシューティングをご覧ください。

iframe に制限付きアプリを埋め込むには、以下の手順を実行します。

次のいずれかの方法でアプリの URL または ID を取得します。
- アプリの URL をコピーする: アプリについてユーザーに通知するの手順に沿って、[共有] ダイアログを開き、[リンクを共有] をクリックして、[ブラウザで開く] リンクをコピーします。
- 次のいずれかの方法でアプリ ID をコピー します。
  - アプリエディタでアプリを開き、次の URL 内の appId 値をコピーします。
    
    https://www.appsheet.com/template/AppDef?appName=NewApp-2959733&appId=f88b2122-4e1c-4e1f-111f-12eb567c89cf
  - [Settings] アイコン > [Integrations] を選択して、アプリ ID を表示し、コピーします。
Google サイトでサイトを作成するか、開きます。
ウェブサイトに HTML iframe 要素を追加するには、[Insert] > [Embed] > [By URL] を選択し、アプリの URL を貼り付けます。
前の手順でアプリ ID をコピーした場合は、次の URL を入力し、appId 値をコピーしたアプリ ID に置き換えます。
https://www.appsheet.com/start/appId
[ページ全体] を選択します。
[プレビュー] は選択しないでください。
Google サイトエディタで iframe のサイズを変更します。
必要に応じて、次のオプションを構成します。
- ウェブサイトが開かれるたびにホストしたアプリの定義とデータを自動更新する場合は、refresh オプションをオンにします。
- ホストしたアプリが開かれるたびに未保存のデータを破棄する場合は、wipe オプションをオンにします。
必要に応じて、iframe の下部にある次の再承認ブロックを削除できます。

アプリのクリエイターが iframe にアプリを埋め込めないようにする

アプリのクリエイターが iframe 内でアプリを実行できないようにするには、以下に示す手順に沿って [Disallow apps in iframes] ポリシーを使用します。詳しくは、ガバナンスポリシーを定義するをご覧ください。

アプリのクリエイターが iframe 内でアプリを実行できないようにするには:

[My account] > [Policies] を選択します。
[+ Organization Policy] または [+ Team Policy] をクリックして、アカウントまたはチームのポリシーを追加します。
[Policy Template] プルダウンから [Disallow apps in iframes] を選択します。
[次へ] をクリックします。
このポリシーは事前構成されています。任意のフィールド値を変更できます。各フィールドの説明については、事前定義ポリシーを追加するをご覧ください。
重要: [Condition] フィールドを変更する場合は、以下で定義した機能を維持してください。
NOT([AllowAppInIFrame])
[保存] をクリックします。

Google サイトに埋め込まれたアプリに関する問題のトラブルシューティング

Google サイトに埋め込まれたアプリに関する問題のトラブルシューティングは、次のとおりです。

コンテンツをサイトにページ全体として埋め込むことは現時点ではサポートされていません。
AppSheet アプリをサイトページの iframe に埋め込んだ後、iframe のツールバーに編集アイコンが表示されないことがあります。回避策として、サイトを公開し、公開したサイトを開いて、ページの右下にある編集アイコンをクリックします。

このページには、AI 技術を使用して翻訳されたコンテンツが含まれている場合があります。AI 翻訳には誤りが含まれている可能性があります。

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。