2025年1月7日火曜日

Canvaで作成したプレゼンテーションをAPEXのアプリケーションに埋め込む

Canvaで作成したプレゼンテーションをOracle APEXのアプリケーションに埋め込んでみます。Canvaでは作成したデザインを他のWebページに埋め込むためのスニペットを生成してくれるため、Oracle APEXのアプリケーションへ容易に埋め込めます。

Canvaでの作業はオンライン・ドキュメントの以下のセクションで説明されています。

デザインの埋め込みと埋め込みの非公開化

以下のように、APEXアプリケーションにCanvaで作成したプレゼンテーションを埋め込みます。


以下にCanvaのプレゼンテーションの埋め込み手順を紹介します。

最初にCanvaで埋め込むスニペットを生成します。

画面左上の共有をクリックし、埋め込みを探します。表示されていない場合は、すべて表示をクリックします。


共有の埋め込みをクリックします。


埋め込みをクリックし、スニペットを生成します。


Oracle APEXのアプリケーションへの埋め込みでは、HTML埋め込みコードの方を使用します。こちらのコードをコピーします。


Oracle APEXへの埋め込みにはタイプが静的コンテンツのリージョンを使用します。

Oracle APEXのページにリージョンを作成し、タイプを静的コンテンツとします。ソースのHTMLコードに、さきほどCanvaよりコピーしたHTML埋め込みコードをそのままペーストします。

通常は装飾は不要なので、外観のテンプレートにはBlank with Attributes (No Grid)を選択します。


以上でCanvaで作成したプレゼンテーションの埋め込みは完了です。ページを実行すると、以下のように表示されます。


埋め込んだプレゼンテーションは、親要素である静的コンテンツのリージョンの幅に合わせてスケールします。

例えば、レイアウトの列を６、列スパンを３とします。


埋め込んだプレゼンテーションは６番目の列から開始し、列幅が３になります。そのレイアウトに合わせて、Canvaのプレゼンテーションが縮小されて表示されます（以下のスクリーンショットでは、開発者ツールバーより、レイアウト列の表示を有効にしています）。


共有を停止する場合は、Canvaの画面から埋め込みリンクを削除します。


埋め込みリンクが削除されると、Oracle APEXの静的コンテンツの領域にForbidden (403)と表示されます。


Canva側で再度HTML埋め込みコードを生成すると、埋め込み元として新たなリンクが作成されます。そのため、Canvaのプレゼンテーションを表示するには、APEXの静的コンテンツのソースを更新する必要があります。

Canvaで作成したプレゼンテーションを、Oracle APEXのアプリケーションに埋め込む手順の紹介は以上です。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: