LoginSignup
2
0

More than 1 year has passed since last update.

@nakasato310

[Oracle Cloud] Oracle Content Management でフォームを作成・公開する

Posted at

この記事は以下の技術ブログ（英語）の内容を元に作成しました
Design and publish forms in Oracle Content from the Site Builder editor （Oracle Content Management Blog)

はじめに

Webサイトを訪問したユーザーに何らかの登録や申し込みをしてもらう場合、フォームを使います。例えば以下のようなシーンでフォームを利用します。

  • お問い合わせ
  • 資料ダウンロード
  • メールマガジンの購読
  • イベントやセミナーの参加受付
  • キャンペーンへの登録受付
  • アンケートの収集
    など

Oracle Cloudにはフォーム作成機能を提供するサービスが複数あり、これらを Oracle Content Management(OCM) と組み合わせて利用できます。どのようなクラウドサービスが提供されているのか？どのシーンで利用すべきか？などは、以下のブログ記事（英語）で紹介されています。

また、OCMは3rdパーティのフォーム作成サービスとの組み合わせにも対応できます。以下の記事では、Googleフォームで作成した問い合わせフォームを、OCMで作成したサイトに配置する方法を紹介しました。

この記事で紹介すること

この記事では、以下3点を実現する 『サンプル実装』 を紹介します

  1. 他社及び自社のクラウドサービスを利用せず、OCM製品標準のアセット登録・編集画面をカスタマイズしたフォーム作成機能を実現する

  2. 作成されたフォームはリポジトリ内にアセットとして登録・管理し、OCMのサイト編集画面（Site Builder） を利用してWebサイト上への配置・公開を実現する

  3. Webサイト上のフォームから入力された内容は、OCMのリポジトリでアセットとして登録・管理 する

    image.png

フォーム作成ライブラリの利用

今回、フォーム作成機能を実現するライブラリとして ドラッグ&ドロップ操作でフォーム作成が可能な JQueryベースのformBuilder を利用します。formBuilderをOCMのUIに組み込むことで、フォーム作成機能を実現します

1. 事前準備・条件

2. アセット・タイプの作成

作成するフォームを管理するアセット・タイプと、Webサイト上に配置されたフォームから入力された内容を保管するアセットタイプ、の2つのアセットタイプを作成します。今回はどちらもコンテンツ・タイプとして作成します

2.1 作成したフォームを管理するコンテンツ・タイプ MK Form を作成する

  1. OCMにサインインし、ADMINISTRATION:コンテンツ→アセット・タイプ を開きます

  2. 作成をクリックし、以下の通りに入力します

    • 名前: MK Form （空白は-に自動変換され、MK-Formと表示）
    • 表示名: MK Form （※自動入力）
    • アセット・タイプの選択: コンテンツ・アイテム・タイプの作成
      image.png

  3. 属性を定義します。以下の通りに作成し、保存します

    データフィールド 表示名 名前 必須 データフィールドの外観 説明
    埋め込みコンテンツ Form Definition form_definition 必須 テキスト領域 formBuilderで作成したフォーム定義(JSON形式)を保管
    テキスト URL url 必須 単一テキストボックス フォーム入力された内容を外部サービスに送信するエンドポイントを保管
    テキスト Response response 単一テキストボックス フォーム入力したユーザーに表示される応答メッセージ
    日付 Expiration Date expiration_date 日付ピッカー (※未使用)
    大きいテキスト Form HTML form_html テキスト領域 Form DefinitionのHT​​ML形式バージョン。 Form Definitionフィールドが更新されるたびに更新されます

    image.png

2.2 サイト訪問者がフォーム入力した内容を管理するコンテンツ・タイプ FormDataを作成する

  1. 作成をクリックし、以下の通りに入力します

    • 名前: FormData （空白は-に自動変換され、MK-Formと表示）
    • 表示名: FormData （※自動入力）
    • アセット・タイプの選択: コンテンツ・アイテム・タイプの作成
      image.png

  2. 属性を定義します。以下の通りに作成し、保存します

    データフィールド 表示名 名前 必須 データフィールドの外観 説明
    テキスト Form Name form_name 必須 単一テキストボックス サイト訪問者がフォーム入力したフォームの名前を登録
    埋め込みコンテンツ Form Data form_data 必須 テキスト領域 サイト訪問者がフォーム入力した内容をJSON形式で登録

    image.png

2.3 確認

2つのコンテンツ・タイプMK FormとFormDataが作成されます
image.png

3. リポジトリの作成

リポジトリを2つ作成します。
1つはコンテンツ・タイプMK Formのアセット（=formBuilderで作成したフォームを管理するコンテンツ・アイテム）を保管するアセットリポジトリ、もう1つはコンテンツ・タイプFormDataのアセット（=サイト訪問者がフォーム入力した内容を管理するコンテンツ・アイテム）を保管するビジネスリポジトリをそれぞれ作成します

3.1 アセットリポジトリMKFormRepoの作成

  1. ADMINISTRATION:コンテンツ→リポジトリ を開きます
  2. 作成→アセット・リポジトリを選択します
  3. 以下の通りに入力・設定します。その他の項目はデフォルトのままとします。最後に 保存 します
    • 名前: MKFormRepo
    • アセット・タイプ: MK Form のみを選択
    • デフォルト言語: 日本語 (ja)
      image.png

3.2 ビジネスリポジトリFormDataRepoの作成

  1. 作成→ビジネス・リポジトリを選択します

  2. 以下の通りに入力・設定します。その他の項目はデフォルトのままとします。最後に 保存 します

    • 名前: FormDataRepo
    • アセット・タイプ: FormData のみを選択
    • デフォルト言語: 日本語 (ja)
      image.png

  3. 作成した FormDataRepo の リポジトリID を記録します。FormDataRepoを開き、右パネルを開き API タブをクリックします。リポジトリID をメモします
    image.png

3.3 確認

2つのリポジトリMKFormRepoとFormDataRepoが作成されます
image.png

4. コンテンツフォームの作成

コンテンツ・タイプMK Formのデフォルトのコンテンツ・アイテム作成画面は、以下のようになります。
image.png

このMK Formのコンテンツ・アイテム作成画面をカスタマイズして、フォーム作成画面を実現します。具体的には、カスタム・コンテンツ・フォーム（コンテンツフォーム） を作成し、それをMK Formの コンテンツ・アイテム・エディタ として指定します。コンテンツフォームについては製品ドキュメントをご参照ください。

今回、作成するコンテンツフォームのサンプルコードは、オリジナルのブログの著者のGithubリポジトリで公開されています。ここでは、このサンプルコードをそのまま利用します。

なお、サンプルコードの解説は、オリジナルのブログをご確認ください

4.1 コンテンツフォームの作成

  1. 開発者→すべてのコンポーネントの表示を開きます
  2. 作成→コンテンツ・フォームの作成を選択します
    image.png
  3. 名前に Form Builder と入力します（空白は-に自動変換され、Form-Builderと表示
    image.png
  4. その他はデフォルトのままとし、作成をクリックします
  5. コンテンツフォーム Form-Builder が作成されます
    image.png

4.2 コンテンツ・フォームの開発

コンテンツフォーム Form-Builder は、以下のようなフォルダ構成となります。

フォルダ構成
Form-Builder 
├── assets
│   ├── images
│   │   ├── warning.svg
│   └── edit.html
├── appinfo.json
└── _folder_icon.png

この中の edit.html が、コンテンツ・アイテムの作成画面をカスタマイズするときに編集するhtmlファイルです。
image.png

  1. OCMの assets>edit.html をダウンロードし、任意のエディタで開きます。
  2. エディタで開いたedit.htmlのコードをすべて削除します。
  3. Githubリポジトリ上のedit.htmlのコードをすべてコピーし、ローカルのedit.htmlに貼り付け、保存します
    image.png
  4. OCMの 開発者 > コンポーネント > Form-Builder > assets > edit.html を選択し、新規バージョンのアップロードをクリックします image.png
  5. ローカルで編集した edit.html を指定します。新規バージョン（ここではv2）として edit.html が登録されます
    image.png
  6. 開発者 > コンポーネントに戻り、Form-Builder を選択し、プロモートを実行します
    image.png

4.2 コンテンツフォームをMK Formのコンテンツ・アイテム・エディタとして指定

作成したコンテンツフォームForm-Builderを、MK Formのコンテンツ・アイテム・エディタとして指定します

  1. ADMINISTRATION:コンテンツ→アセット・タイプ→MK Form を選択します
  2. コンテンツ・レイアウト タブをクリックします
  3. コンテンツ・アイテム・エディタの選択 で Form-Builder を選択し、保存します
    image.png

4.3 確認

MK Formコンテンツアイテムを新規作成します。作成画面はForm Builderコンテンツフォームでカスタマイズされているため、アイテム入力項目とフォーム作成画面が1つのUI上に表示されます

  1. アセット→MKFormRepo を開きます

  2. 作成→新規コンテンツ・アイテムの作成します を選択します
    image.png

  3. コンテンツ・タイプで MK Form を選択し、OKをクリックします
    image.png

  4. コンテンツアイテムの作成画面が開きます。作成画面下部に フォーム作成UI が表示されることを確認します
    image.png

  5. MK Formコンテンツアイテムを1件作成します。以下の通りに入力します

    • Name: ニュースレターの購読
    • Description: （任意）
    • Form Action URL: https://ocm/<FormDataRepoのリポジトリIDを設定>
    • Response Message: (任意）
    • Language: 日本語 (ja)
      image.png

      【TIPS】
      Form Action URLの<FormDataRepoのリポジトリIDを設定>は、3.2項でメモしたリポジトリIDを利用します

  6. 続けてForm Builderでフォームを作成します。ここでは、名前 と メールアドレス だけのシンプルな入力フォームを作成します

    1. Telephone の項目を削除します
      image.png

    2. Name と Email のラベルやプレースホルダーを日本語に変えます。項目の Edit をクリックすると各項目の編集画面が開きます。LabelやPlaceholder、Typeを変更します
      image.png
      image.png

    3. 右下の Save をクリックします
      image.png

      【Memo】
      Saveをクリックしたタイミングで、Form Builderで作成したフォーム定義がコンテンツアイテムのForm Definitionに、そのHTMLバージョンがForm HTMLに登録（更新）されます

  7. Form Builderで作成したフォームが表示されます。右上の 完了 をクリックし、コンテンツアイテムの作成を終了します
    image.png

  8. MK Formのコンテンツ・アイテム（ニュースレターの購読）が1件作成されます。
    image.png

  9. コンテンツ・アイテムを開きます。Form DefinitionにJSON形式のフォーム定義が、Form HTMLにForm DefinitionのHTMLバージョンが、それぞれ登録されていることを確認します
    image.png

5. コンテンツ・レイアウトの作成

MK Formコンテンツアイテムとして作成したフォームを、Webサイト上で表示・動作させるために コンテンツ・レイアウト を作成します

作成するコンテンツレイアウトのサンプルコードは、オリジナルのブログの著者のGithubリポジトリで公開されています。ここでは、このサンプルコードを流用します

なお、このコンテンツレイアウトには、アセットをサイト・ページ上で表示するロジックだけではなく、

  • フォームの送信時に、入力内容を指定したリポジトリにREST APIを利用してアセット登録 するカスタムロジック
  • フォームの送信完了後の応答メッセージを表示するカスタムロジック

が追加されています。詳細はオリジナルのブログをご確認ください

5.1 コンテンツ・レイアウトの作成

  1. 開発者→すべてのコンポーネントの表示を開きます

  2. 作成→コンテンツ・レイアウトの作成を選択します

  3. 以下の通りに入力・設定し、作成をクリックします

    • アセット・タイプ: MK Form
    • 表示するフィールドの選択: 詳細
    • コンテンツレイアウトの名前の指定: MK-Form-detail　（※自動入力）
      image.png

5.2 コンテンツ・レイアウトの編集

作成されたMK-Form-detailの構成は次のようになってます。

フォルダ構成
MK-Form-detail 
├── assets
│   ├── common.mjs
│   ├── compile.mjs
│   ├── design.css
│   ├── layout.html
│   ├── render.js
│   ├── render.mjs
│   └── settings.html
├── appinfo.json
└── _folder_icon.png

この中より、assets/layout.html、assets/design.css、assets/render.mjs の3つのファイルを更新します。サンプルのコードは、前述のGithubリポジトリ上にあります。

  1. OCM上の assets/layout.html をローカルにダウンロードし、任意のエディタで開きます

  2. layout.html内のコードをすべて削除します

  3. Github上のサンプルのassets/layout.htmlを開き、すべてのコードをコピーし、ローカルで開いたエディターにペーストします。最後に保存します
    image.png

  4. ローカルで保存したlayout.htmlをOCMの assets/layout.html に新規バージョンとして登録します
    image.png

  5. 同じ手順で、OCM上の assets/design.css をGithub上のサンプルのassets/design.cssで更新します

  6. 同じ手順で、OCM上の assets/render.mjs をGithub上のサンプルのassets/render.mjsで更新します。その際に、152行目の var auth = "xxxxx"のxxxxxをOCMユーザーのユーザーID:パスワードをBase64エンコードした値に変更します

    render.mjs
    // For anonymous forms, you will need to configure a user or app to create assets in OCM
var auth = "Basic <ユーザーID:パスワードをBase64エンコードした値>";
var cred = "omit";

5.3 デフォルト・レイアウトに設定

MK Formコンテンツタイプの デフォルトレイアウト として、前の手順で作成した MK-Form-detail を設定します

  1. ADMINISTRATION:コンテンツ→アセット・タイプ を開き、MK Form を開きます
  2. コンテンツ・レイアウトタブをクリックします
  3. コンテンツ・アイテムのデフォルトのデスクトップ・コンテンツ・レイアウトで、MK-Form-detailを選択し、保存 します
    image.png

5.4 確認

  1. アセット→MKFormRepo を開き、前に作成したアセット（ニュースレターの購読）を プレビュー します
  2. コンテンツ・レイアウトのデフォルト を選択します。Form Builderで作成したフォームが表示されることを確認します
    image.png

6. Webサイト上にフォームを配置する

サイトを作成し、ページ上にフォームを配置します

  1. 新規サイトを作成します。作成する際は、エンタープライズ サイトを選択し、リポジトリは MKFormRepoを指定します
    image.png

  2. 作成したサイトをサイト編集画面（Site Builder）で開きます

  3. コンテンツ・アイテム コンポーネントをページ上に配置し、設定より「ニュースレターの購読」コンテンツ・アイテムを選択します
    image102.jpg

  4. 保存→コミット し、サイト編集画面を閉じます

  5. 作成したサイトを公開→オンラインにします

  6. 公開サイトを別ブラウザで開きます。作成したフォームが表示されることを確認します

  7. フォームに必要事項を入力し、Submit をクリックします
    image103.jpg

  8. 登録が完了します。OCMの管理画面を開き、アセット→FormDataRepo を開きます。先ほどフォームより登録した内容がアセットして登録されていることを確認します
    image.png

まとめ

この記事では、OCMで作成したサイト上に配置するフォームをカスタムフォーム機能を利用して実現する方法と、サイト上に配置したフォームからの入力内容をOCM内にアセットとして登録する 『サンプル実装』 を紹介しました。皆さまの参考になれば幸いです

2
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
2
0