iframeの使用方法

iframe要素（内部フレームの略）は、他のソースからのコンテンツをHTMLページに埋め込むために設計されたものです。例えば、iframe を使用することで、独自のビデオプレーヤーを作成し、大きなビデオファイルを保存することを考える必要はありません。代わりに、YouTubeを使用し、iframeを使用して必要なビデオをWebアプリケーションに追加することができます。

YouTubeのビデオにiframeを使用する

具体的な例を見てみましょう。AppMaster YouTube チャンネルから、ビジネスプロセスにおけるファイルの使用についてのビデオを見るためのページを作ってみましょう。これを行うには、キャンバス上に iframe 要素を配置し、必要な設定 (サイズやインデントなど) を行い、目的のビデオへのリンクを Srcフィールドに目的の動画へのリンクを設定する必要があります。

同時に、YouTube は当初、このような動画埋め込みが可能であることを想定し、プロセスを最大限に便利にするために必要なツールを提供しています。動画の下にある"Share" ボタンをクリックすると、ビデオの下にある "Embed" オプションを使用することができます。

YouTube は動画をページに配置するために必要な HTML コードをすべて提供しますが、この場合、すべてのコードに興味があるわけではなく、必要な動画へのリンクのみが必要です。それをコピーして、iframe の設定に配置する必要があります。

デフォルトの幅と高さの設定である 560 と 315 もここに表示されています。

アプリケーションを公開し、本当にビデオが埋め込まれていることを確認することができます。

同様に、他のソースから他のタイプのデータを埋め込むことができます。たとえば、地図を追加します。

これらの設定の結果、地図を太い点線のボーダーを持つ円として表示することができます。

iframeでカスタムHTMLを使用する

もっと複雑なオプションについて考えてみましょう。iframe用のhtmlページを独自に作成し、サードパーティのソースからのデータを使用しないようにします。これを行うには、キャンバスに RichtextEditor要素をキャンバスに追加します。これにより、便利なビジュアルエディタの助けを借りて、またHTMLコードを直接編集して、HTMLを作成することができます。

エディターで作成した任意のHTMLをファイルとして保存し、iframeで表示できるようにする必要があります。ボタンを追加し、それがクリックされたときに起動される対応するビジネスプロセスを作成しましょう。

ビジネスプロセスの一部として、以下のことを行ってください。

1. エディタからHTMLを取得するには Richtext Get Propertiesブロックを使用してエディターから HTML を取得します。
2. HTMLをバイトに変換する(To Bytes).
3. を使用します。 Make Fileブロックを使ってファイルを作成します。ファイルを作成するには、その内容(Bytes前のステップで取得したもの)と名前(何でも良いが、インストールされている必要がある)だけが必要であることに注意してください。
4. 作成したファイルをサーバーに送信し、データベースに保存します(Server request POST /_files/).
5. 作成したファイルのIDを取得する(Expand File - ID)
6. IDを文字列に変換する(To String)
7. を使用してファイルへのリンクを収集します。 Concat String.結果は https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/ のようなリンクになるはずです。"vdjyien-app.apms.io" はあなたのサーバーアドレス、"dQhJVTYrToCqr9G4KWKRD" は前のステップで得たファイルIDです。ブラウザでリンクが表示されるはずです。ファイル受信側のエンドポイント(GET /_files/:id/download/)が認可を必要とせず、アクセス可能であることを確認してください。
8. リンクに問題がなければ、あとはそれをiframeに渡して、その結果を見るだけです(iFrame Update Properties).

で作成したHTMLは、データベースに保存して表示することができます。 Richtext Editorで作成されたHTMLは、データベースに保存され、アプリケーションで表示することができます。このように、iframeブロックを使えば、デザイナーが当初提供しなかった要素をアプリケーションに追加したり、非標準のフォントを使用したり、カスタムHTMLコードでブロックを作成したりすることも可能です。