LoginSignup
1
0

More than 1 year has passed since last update.

@nakasato310

[Oracle Cloud] Oracle Content Management で作成したWebサイトにGoogleフォームで作成したお問い合わせフォームを配置する

Last updated at Posted at 2022-01-17

はじめに

Oracle Content Management(以降OCM) で作成・公開されたWebサイトに、外部アプリケーションを埋め込み表示することができます。

ここでは、OCM のリモートコンポーネント(Remote Component)を利用して、Googleフォームで作成したお問い合わせフォームを部品化したカスタムコンポーネントを作成し、Webサイト上にドラッグ＆ドロップで配置できるようにします。

この記事は、2022年1月時点でのOCMの最新バージョン(22.1.1)を元に作成されてます

説明

コンポーネント

コンポーネントは、OCMで作成されるWebサイトに配置できる部品です。OCMには、製品標準のコンポーネント（シードコンポーネント）として、タイトル(Title)、段落(Paragraph)、ボタン(Button)、イメージ(Image)などが提供されます。また、OCMのフォルダ内のファイルを一覧表示するファイルリスト(File List)や、フォルダ内のファイルを複数ページの文書をスライド表示するドキュメント(Document)などもシードコンポーネントとして提供されます。

image.png

さらに、Webサイトの要件にあわせてコンポーネントを開発し、ページ上に配置できます。開発されたコンポーネントは、カスタムコンポーネントと言います
image.png

コンポーネント・タイプは2つあります。この記事ではリモートコンポーネントを利用します

  • ローカルコンポーネント
    • コンポーネントで表示するコンテンツは、OCMインスタンスの中に存在
    • OCMのWebサイトで直接レンダリングして表示、もしくはインラインフレーム(iframe)でレンダリングして表示
  • リモートコンポーネント
    • コンポーネントで表示するコンテンツは、OCMの外にある
    • 外部のアプリケーションをリモート・コンポーネントとして登録し、インラインフレーム(iframe)でレンダリングして表示

1. 事前準備

1.1 OCM 環境の準備

OCM環境を準備します。以下の記事を参考に、OCM - Starter Edition 環境を作成し、アセットの登録、Webサイトの作成・公開を実施します

最終的には以下のようなWebサイト(firstSite)が作成・公開された状態になります。

画像

1.2 Googleフォームの作成と埋め込み表示用のHTMLコードのコピー

Googleフォームを利用し、上記firstSiteに埋め込み表示するお問い合わせフォームを作成します。詳しい作成方法は、以下のGoogleフォームのサイトをご確認ください。

今回は以下のようなシンプルなお問い合わせフォームを作成しました

image.png

右上の送信ボタンをクリックし、送信方法で < >（HTMLを埋め込む）を選択します。埋め込み表示用のHTMLコードをコピーし、メモ帳などに記録します

image.png

2. リモートコンポーネントを作成する

  1. OCMインスタンスにサインインします

  2. 左ナビゲーションの開発者→すべてのコンポーネントの表示をクリックします
    image.png

  3. 作成→リモート・コンポーネントの登録をクリックします
    image.png

  4. リモートコンポーネントのダイアログが表示されます。以下を入力し、登録をクリックします

    • 名前: customContactForm
    • 説明: (任意)
    • コンポーネントURL: 1.2項で取得したGoogleフォームの埋め込み表示用のHTMLコードのsrc=https://docs.google.com/forms/d/e/.../viewform?embedded=trueのURLを入力
    • 設定URL: (今回は使用しません。ダミーのURLを入力します)
    • 設定幅: (今回は使用しません。デフォルトのままとします)
    • 設定高さ: (今回は使用しません。デフォルトのままとします)
    • キー: (事前設定されたIDをそのまま利用。変更しません) image.png

  5. customContactFormのリモート・コンポーネントが作成されます
    image.png

3. Webページ上に配置する

  1. 左ナビゲーションメニューでサイトをクリックします

  2. 作成済のWebサイトfirstSiteをサイト編集画面で開きます
    image.png

  3. 編集モードに切り替えます
    image.png

  4. メニューのコンポーネント→カスタムをクリックし、customContactFormをWebページ上に配置します
    image.png

  5. Googleフォームで作成したお問い合わせフォームが表示されます
    image.png

  6. customContactFormのメニュー→設定をクリックします
    image.png

  7. 埋め込んだフォームが表示されるように高さの設定を有効化し、フォーム全体が表示されるようにします（ここでは 800 を設定）
    image.png

  8. 設定パネルを閉じ、編集モードから表示モードに戻します

  9. 保存をクリックします

  10. メニューバーのプレビューボタンをクリックし、保存したサイトをプレビューします。お問い合わせフォームが表示されることを確認します
    image.png

  11. Webサイト上に埋込表示したお問い合わせフォームから問い合わせを1件入力し、送信します。
    image.png

  12. 送信内容をGoogleフォームの管理画面で確認します。先ほど送信した問い合わせが登録されていることを確認します
    image.png

【補足説明】リモートコンポーネントに登録するURLについて

リモートコンポーネントを含むWebサイトを公開すると、リモートコンポーネント作成時に指定した外部アプリケーションのURL(コンポーネントURL)に、Webページとiframeのコンテンツ間の通信を可能にするためのパラメータが追加されます。

外部アプリケーションによっては、この追加パラメータの影響でiframeによる埋め込み表示が正しく動作しないこともあります。その場合は、iframeでの埋め込み表示ができるローカル・コンポーネントの開発をご検討ください。

まとめ

この記事では、OCM のリモートコンポーネントを利用して、Googleフォームで作成したお問い合わせフォームを部品化したカスタムコンポーネント(customContactForm)を作成し、Webサイト上にドラッグ＆ドロップで配置できることを確認しました。

このようにカスタムコンポーネントを作成し、部品化することで、以下のようなメリットや効果が期待できます。

  • WebやHTMLに詳しくないビジネスユーザーでも、直感的な操作で外部アプリケーションをWebページ内に組み込むことができる
  • 複数のページおよびサイトで、同じ部品（=カスタムコンポーネント）を再利用できる

この記事を作成する際に参考にした記事やドキュメントを最後にリンクします

（参考）OCMの製品ドキュメント

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0