We.Finance リファレンスサイトのチュートリアル

前提条件

「AEM Forms リファレンスサイトのセットアップおよび設定」を参照してリファレンスサイトをセットアップします。

We.Finance リファレンスサイトのシナリオ

金融業界をリードする We.Finance 社は、幅広い顧客プロフィール要件に合わせてパーソナライズされた包括的な金融ソリューションを提供しています。クレジットカード、住宅ローンおよび住宅保険のサービスを提供しています。

同社の目標は、優先するデバイス上で既存のおよび見込み客に連絡し、サービスのメリットを説明し、サービスへの登録を支援することです。 さらに同社は、アドオンのカードなど、顧客が興味を抱きそうな金融商品を宣伝していきたいと考えています。

We.Finance 社のユースケースの詳細なチュートリアルをお読みいただき、金融機関が目標を達成するのに AEM Forms がどのように貢献しているかご確認ください。次のチュートリアルを参照してください。

• クレジットカードの申し込みのチュートリアル
• 住宅ローン申し込みのチュートリアル
• Microsoft Dynamics を使用した住宅ローンの申し込みのチュートリアル
• 住宅保険申し込みのチュートリアル
• アセット管理のチュートリアル
• 自動保険申し込みのチュートリアル

クレジットカードの申し込みのチュートリアル

We.Finance 社のクレジットカード申し込みのシナリオでは、以下の人物が登場します。

• Sarah Rose（We.Finance 社の顧客）
• Gloria Rios（We.Finance 社のクレジットカードおよび住宅ローンの責任者）

以下の解説図は、クレジットカードの申し込みのワークフローを図式化したものです。

リファレンスサイトの詳細なシナリオをお読みいただき、We.Finance 社が目標を達成するのに AEM Forms がどのように貢献しているかご確認ください。

Sarah は We.Finance 社からニュースレターを受信し、クレジットカードを申し込む

Sarah Rose は We.Finance 社の既存の顧客です。Sarah は We.Finance 社から新しいクレジットカードのキャンペーンについてのニュースレターを受信します。Sarah はそのキャンペーンに興味を持ち、クレジットカードを申し込むことに決めます。Sarah はニュースレターに表示されている「Apply Now」ボタンをクリックします。これにより、We.Finance 社のポータルサイトにあるクレジットカード申込フォームが表示されます。

仕組み

Sarah に送信されたニュースレターは、特定の電子メール ID への電子メールをトリガーするカスタム実装です。電子メールに記載された「今すぐ申し込む」ボタンはクレジットカードの申込フォームにリンクされます。これはパブリッシュインスタンス上のアダプティブフォームです。

実際の動作確認

パブリッシュインスタンスで次のURLを開き、ニュースレターの電子メールをトリガーにします。 [emailID]を有効な電子メールアカウントに置き換えて、ニュースレターを受け取るようにしてください。 ニュースレターを開き、「Apply Now」をクリックして、クレジットカードの申込フォームに移動します。

https://[publishServer]:[publsihPort]/content/campaigns/we-finance/start.html?app=cc&email=[emailID]&givenName=Sarah&familyName=Rose

Sarah がキャンペーンに関心を抱き、申込みを決意

Sarahはクレジットカードの申し込みを決定し、電子メールの「Apply Now」ボタンをタップします。 We.Finance 社のポータルサイトにあるクレジットカードの申込フォームが表示されます。申込フォームはカードレイアウトを使用してセクションごとに構成されています。

Sarah は利用可能なオプションからクレジットカードを選択して、「Continue」をクリックします。

個人情報のページで社会保険番号を入力すると、使用している資格情報でログインするようにプロンプトが表示されます。

Sarah は We.Finance 社の既存の顧客です。Sarah が We.Finance 社のアカウントの資格情報でログインすると、個人情報の詳細がフォームに自動で入力されます。Sarahは申込フォームの入力を続けます。このとき、出席する必要のある会議のリマインダーがポップアップ表示されます。 Sarahは申込フォームの「Save my progress」をクリックします。 このボタンをクリックすると、その時点までに入力されたすべての情報が保存されます。さらに、ダイアログポップアップが表示され、途中まで入力していたドラフトの内容を後で完成するために申込フォームへのリンクを電子メールで受け取ることを希望するかどうか尋ねられます。

Sarah は「Send mail」をクリックします。彼女はクレジットカードの申込フォームを再開するためのリンクが表示された電子メールを受け取ります。

Sarahはモバイルデバイスからクレジットカード申込書にアクセスします。

Sarah がモバイルデバイスからクレジットカードの申込フォームにアクセスした場合、申込フォームはモバイルデバイス用に最適化されて表示されます。このビューでは、申込フォームは一度に 1 つずつのセクションでレンダリングされます。そのため、Sarah は申込フォームを移動するたびに、順を追って情報の表示および入力を行うことができます。

仕組み

「Apply Now」ボタンから、Sarah は直接クレジットカードの申込フォームにアクセスできます。申し込みフォームはアダプティブフォームで、https://[host]:[Port]/editor.html/content/forms/af/we-finance/cc-app.htmlのオーサリングインスタンスで確認できます。

アダプティブフォームで確認できるいくつかの主な機能は、次のとおりです。

• XSD スキーマに基づいている。
• スタイル設定は We Finance Theme A を使用し、レイアウトは We.Finance テンプレートを使用して構築されている。また、フォームのヘッダー部分にはモバイルナビゲーション用のパネルタイトルが表示されないレイアウトが採用されています。モバイルデバイスから開くと、プログレッシブモバイルレイアウトが表示されます。 テンプレートはhttps://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-financeで、テーマはhttps://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-a/jcr:contentで確認できます。
• フォームデータモデルサービスを呼び出すためのアダプティブフォームルールが含まれ、ログインしたユーザーのユーザー詳細を事前入力する。また、サービスを呼び出す際は、フォームに入力した社会保険番号や電子メールアドレスにより、情報が事前入力されます。フォームデータモデルとそのサービスは、https://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdmで確認できます。
• さまざまなアダプティブフォームコンポーネントを使用して入力内容を取得し、ユーザーレスポンスに適合する。HTML5 入力タイプをサポートする電子メールなどのコンポーネントも使用します。
• 署名ステップコンポーネントを使用して、入力が完了したフォームを表示し、フォーム上で電子署名を行うことができる。
• 「Save my progress」ボタンをクリックすると、ユーザーに対して一意の ID が生成され、AEM リポジトリのノード内に一部入力済みの申込フォームが下書きとして保存される。また、同じアクションによって、申込フォームの下書きを含むノードへのリンクを電子メールで送信する許可を求めるダイアログが表示されます。確認ダイアログの「Send mail」ボタンをクリックすると、下書きを含むノードへのリンクを持つ電子メールが自動送信されます。
• AEM ワークフローを起動する送信アクションを使用して、クレジットカードの承認ワークフローをトリガーする。このフォームで使用されるワークフローはhttps://[host]:[Port]/editor.html/conf/global/settings/workflow/models/we-finance-credit-card-workflow.htmlで確認できます。

フォームを確認して、フォームの作成に使用したスキーマ、コンポーネント、ルール、フォームデータモデル、Forms ワークフロー、送信アクションを理解することをお勧めします。

また、クレジットカード申し込みのアダプティブフォームで使用した機能の詳細については、次のドキュメントを参照してください。

• アダプティブフォームのオーサリングの概要
• XML スキーマを使ったアダプティブフォームの作成
• ルールエディター
• テーマ
• データ統合
• アダプティブフォームで Adobe Sign を使用する
• OSGi 上の Forms 中心のワークフロー

実際の動作確認

Sarah Rose でログインし、クレジットカードの申込フォームで「Apply now」ボタンをクリックします。詳細を一部入力し、様々なアダプティブフォームコンポーネントを確認して「Save my progress」をクリックすると、途中まで入力した下書きの申込フォームにリンクする「Resume」ボタンが表示された電子メールを受信します。申込フォームで電子メール ID を指定し、電子メールを受け取ることを確認します。

We.Finance のテーマは、次の場所で確認できます。

https://<host>:<AuthorPort>/editor.html/content/dam/formsanddocuments-themes/we-Finance/we-Finance-Theme-A/jcr:content

We.Finance のテンプレートは、次の場所で確認できます。

https://<host>:<AuthorPort>/editor.html/conf/we-finance/settings/wcm/templates/we-finance-template/structure.html

Sarah が申込書の入力を再開し、送信

Sarah は会議から戻り、We.Finance 社からの電子メールを見つけます。電子メールに表示された「Resume」ボタンをクリックすると、入力が途中のクレジットカードの申込フォームにアクセスできます。先ほど記入した情報はすでに入力された状態で表示されます。Sarah は申込フォームの残りの項目に記入し、申し込みに署名して送信します。

この方法以外にも、We.Finance 社のホームページにある「My Forms」から、下書きした申込フォームにアクセスできます。

仕組み

電子メールの「Resume」ボタンは、申込書の下書きを含むノードへリダイレクトします。

実際の動作確認

申込フォームの入力時に指定した電子メール ID で、申込フォームの下書きへのリンクが表示された電子メールを受信します。先へ進み、申込フォームの中の残りのセクションに必要な情報を入力し、送信します。

We.Finance 社が申込書を受信および承認

Sarah によって送信されたクレジットカード申込書を、We.Finance 社が受信します。タスクは Gloria Rios に割り当てられます。Gloria は AEM インボックスでタスクを確認し、これを承認します。

仕組み

Sarah がクレジットカードの申込フォームにすべて記入して送信すると、Forms ワークフローがトリガーされ、Gloria の AEM インボックスにタスクが作成されます。

OSGi 上の AEM Forms によって Forms 中心のワークフローが提供され、アダプティブフォームに基づいたワークフローを構築できます。これらのワークフローをレビューや承認、ビジネスプロセスフローに使用して、ドキュメントサービスを開始したり、Adobe Sign 署名ワークフローと統合したりすることができます。詳しくは、OSGi での Forms 中心のワークフローを参照してください。

次の画像では、クレジットカード申込書を処理してその PDF 出力を生成する AEM ワークフローを図式化して説明しています。

実際の動作確認

we.financeサイトのAEMインボックス(https://<hostname>:PublishPort>/content/we-finance/global/en.html)にアクセスできます。 ページで、「サインイン」をタップし、「代表者としてログイン」チェックボックスを選択し、Gloria Riosのユーザー名とパスワードとしてgrios/passwordを使用してAEMインボックスにログインし、クレジットカードの申し込みを承認します。 フォーム中心のワークフロータスクでのAEMインボックスの使用に関する詳細は、「AEMインボックスでのFormsアプリケーションとタスクの管理」を参照してください。

申し込みを承認すると、Sarah は電子メールでウェルカムキットを受け取ります。

Sarah がウェルカムキットを受信し、アドオンカードに適用

Sarah のクレジットカード申込が承認されると、彼女はウェルカムキットへのリンクを含む電子メールを受信します。ウェルカムキットには彼女のクレジットカードアカウントの詳細情報が記載されています。ウェルカムキットには、Sarah向けにパーソナライズされたプロモーションキャンペーンも表示されます。 スクロールダウンすると、埋め込みフォームからアドオンカードへの申し込みができるようになっています。Sarahはウェルカムキットの中から必要事項をすばやく入力し、アドオンカードを申し込みます。 アドオンカード申込の確認ダイアログが表示されます。

ウェルカムキットは Sarah に合わせてパーソナライズされており、彼女に関わる情報を表示します。ウェルカムキットの PDF バージョンをダウンロードするオプションを彼女に提供します。

ウェルカムキットにはもうひとつの申込フォームが含まれています。Sarah がこれに入力して送信すると、We.Finance 社のポータルサイトを訪れることなく、ウェルカムキットの中からアドオンカードの申し込みを行うことができます。

仕組み

ウェルカムキットは、cq-we-finance-content-pkg.zipパッケージに含まれるインタラクティブ通信です。 デスクトップバージョンのウェルカムキットの中でクレジットカードのメリットを表示するインタラクティブカードは、ドキュメントフラグメントのデフォルトカードレイアウトを使用して作成されたカスタムレイアウトです。

アドオンカード申込フォームは、ウェルカムキットのインタラクティブ通信に埋め込まれたアダプティブフォームです。

実際の動作確認

前の手順で受け取った電子メールの「再開」ボタンをクリックします。 申込書の下書きが開きます。各項目に詳細を入力し、申込書を送信します。するとウェルカムキットを受信するので、その内容を確認します。

次の URL でもウェルカムキットが表示されます。

https://<host>:<port>/content/aemforms-refsite/doclink.html?document=/content/forms/af/we-finance/credit-card/creditcardwelcomekit&channel=web

作成者インスタンスと発行インスタンスでアクセスできます。

Sarah がクレジットカード明細を受信

Sarah は、クレジットカードの使用開始後に、自らのクレジットカード明細を含む別の電子メールを We.Finance 社から受信します。以下の画像では、クレジットカード明細へのリンクを含む電子メールのモバイルバージョンを紹介しています。

Sarah は「View Statement」（明細を表示）ボタンをクリックし、クレジットカード明細を確認します。この文はインタラクティブ通信です。 Web版と印刷(PDF)版の両方が含まれています。 この文はFormsデータモデルと統合され、顧客固有のデータをデータベースから取得します。 この明細はインタラクティブステートメントであり、様々な要素から構成されています。

• 明細概要
• 支払細目レポート
• 支払分析のグラフィック表示
• 明細の中から支払合計額の支払方法を選択するオプション
• 支払受領書のダウンロード

Sarahは、オフラインでのアーカイブ用にクレジットカード明細のPDF版を入手するために、ポータルや電子メールで検索をおこなう必要はありません。 Sarahは、「Download Statement」（文のダウンロード）をクリックするだけで、文のPDF版をダウンロードできます。

詳細な文は、レスポンシブテーブルにレイアウトされます。 明細書には、明細の中から一部または全額を支払うオプションも用意されています。

Sarahは明細の中から支払いをスケジュールします。 Sarahは、「Flexi Pay」オプションを使用して、支払を同じ部分に分割することもできます。

仕組み

クレジットカード明細は、インタラクティブ通信です。 明細中の支払細目一覧はレスポンシブテーブルです。経費分析のグラフィックは、グラフコンポーネントで、経費テーブルを読み取り、円グラフを生成します。

実際の動作確認

インタラクティブなクレジットカード明細を確認するには、次の URL を参照します。

https://<hostname>:<port>/content/aemforms-refsite/doclink.html?document=/content/forms/af/we-finance/credit-card/credit-card-statement&channel=web

作成者インスタンスと発行インスタンスでアクセスできます。

クレジットカード明細には、明細書の最後に向けて、プロモーションキャンペーン情報が表示されます。 Adobe TargetをAEM Formsインタラクティブ通信と統合して、特定の顧客セグメントに基づいたプロモーションターゲットオファーを提供できます。 Adobe Targetをカスタマイズおよびターゲットオファーに使用するようにインタラクティブ通信を設定するには、ターゲットエクスペリエンスの作成を参照してください。

We.Finance 社がクレジットカード申込フォームのパフォーマンスを分析

We.Finance 社は、時折、自社のクレジットカード申し込みを見直して、顧客が直面しうる問題についてチェックします。同社はこの分析を使用して、クレジットカード申込フォームの中で必要な変更について、情報に基づいた判断を行います。その目的は、ユーザーエクスペリエンスを強化し、申込希望者がフォームを途中で破棄する割合を低減し、カードの乗り換えをしやすくすることにあります。同社は、分析のために AEM Forms を Adobe Analytics と統合しています。以下の画像では、同社の Analytics ダッシュボードを紹介しています。

Analytics ダッシュボードの見方について詳しくは、「AEM Forms の分析レポートの確認方法と詳細」を参照してください。

仕組み

クレジットカード申込フォームのパフォーマンス指標は、Adobe Analytics を使用して追跡されます。Adobe Analytics の設定とレポートの表示について詳しくは、「フォームおよびドキュメント用の Analytics の設定」を参照してください。

実際の動作確認

Analytics レポートを閲覧および検討したい方のために、リファレンスサイトでクレジットカード申込フォームのシードデータが提供されています。シードデータを使用する前に、「Analytics の設定」を参照してください。シードデータを使用したレポートを閲覧するには、作成者インスタンスで以下の手順を実行します。

1. https://<hostname:<AuthorPort>/aem/forms.html/content/dam/formsanddocumentsの​Formsとドキュメント UIに移動します。

2. We.Finance フォルダーをクリックし、開きます。

3. 「Application for Credit Card」アダプティブフォームを選択し、ツールバーで「Analyticsを有効にする」をクリックします。

4. アダプティブフォームを再度選択し、ツールバーの「Analyticsレポート」をクリックしてレポートを生成します。 最初は、空白のレポートが表示されます。

シードデータを使用してAnalyticsレポートを生成するには：

1. CRXDE liteのアドレスブラウザーで、次のように入力します。/apps/we-finance/demo-artifacts/analyticsTestData/Credit card Analytics Test Data

2. 左側のディレクトリ構造でテストデータが選択されます。

3. 選択されたファイルをダブルクリックして、右側のパネルにファイルのコンテンツを開きます。

4. シードデータファイル内のすべての内容をコピーします。

5. CRXDEで、次の場所に移動します。/content/dam/formsanddocuments/we-finance/cc-app/jcr:content/analyticsdatanode/lastsevendays

6. プロパティ​の下の​analyticsdata​フィールドに、シードデータファイルのコピーした内容を貼り付けます。

7. 「Application for Credit Card」アダプティブフォームを選択し、ツールバーの「Analyticsレポート」をクリックして、シードデータを含むレポートを生成します。

クレジットカード申込書の A/B テスト

クレジットカード申込フォームのパフォーマンスを分析し継続的にその改善を図ることに加えて、We.Finance 社は、AEM Forms と Adobe Target を統合し、A/B テストを作成します。このテストにより、クレジットカード申込フォームの異なるエクスペリエンスを提供し、フォームの完成および送信という見地から乗り換えの促進につながるエクスペリエンスを突き止めることができます。

AEM FormsサーバーでTargetを設定するには、「 AEM FormsでのTargetの設定と統合 」を参照してください。

以下の手順を実行し、We.Finance 社クレジットカード申込フォームのための A/B テストを試作しましょう。

1. https://<hostname:<AuthorPort/aem/forms.html/content/dam/formsanddocumentsで​Formsとドキュメント​に移動します。

2. We.Finance フォルダーをクリックし、開きます。

3. 「Application for Credit Card」アダプティブフォームを選択します。

4. ツールバーの「その他」をクリックし、「A/B テストを設定」を選択します。「A/B テストを設定」ページが開きます。

5. 「アクティビティ名」を指定します。

6. オーディエンスドロップダウンリストから、そのフォームの異なるエクスペリエンスの提供対象オーディエンスを選択します。例えば、Chrome を使用している訪問者​を選択します。

7. エクスペリエンス A および B に対する​エクスペリエンス配布​フィールドで、パーセンテージの見地から配信内容を指定し、全オーディエンス間のエクスペリエンスの配信を決定します。例えば、エクスペリエンス A および B に対してそれぞれ 40、60 を指定すると、エクスペリエンス A はオーディエンスの 40 % に配布され、残りの 60 % にはエクスペリエンス B が表示されます。

8. 「設定」をクリックします。A/B テストの作成を確認するダイアログが表示されます。

9. 「完了」をクリックします。

10. 「Application for Credit Card」フォームを選択し、「Edit」をクリックします。 その後表示されるオプションにより、エクスペリエンスの一方を開くことができます。「エクスペリエンス B」をクリックします。フォームが編集モードで開きます。

11. 必要に応じてフォームを修正し、デフォルトのエクスペリエンス A とは異なるエクスペリエンスを作成します。

12. 「フォームとドキュメント」UI へ進み、フォームを選択し、「その他」をクリックし、「A/B テストを開始」をクリックします。

13. 次のURLを使用して、Chromeブラウザーでフォームを数回開きます。

    https://[hostname]:[port]/content/dam/formsanddocuments/we-finance/cc-app/jcr:content?wcmmode=disabled

    メモ

    次回以降、フォームを開く前に mbox という名前を持つ Cookie を、ブラウザーの Cookie パーシステンスから削除してください。そうすると、フォームのエクスペリエンス A および B をランダムに確認することになります。

14. フォームを選択し、「その他」をクリックし、「A/B テストを開始」をクリックします。テスト開始直後には、レポートに多くのデータが表示されることはありません。シードデータを使用して、A/B テストレポートがどのように表示されるか確認しましょう。

15. CRXDE Lite を開き、次のファイルのバックアップを作成します。 /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js

16. 上記のファイルの関数onReportLoadSuccessの定義を、次のファイルの関数定義に置き換えます。/apps/we-finance/demo-artifacts/targetreport.js

    注意： これらの変更はデモ目的でのみおこなわれます。この手順を完了した後、必ずファイルの中身を元に戻してください。

17. 生成したレポートを更新すると、以下のような画面が表示されます。レポートダッシュボードを確認します。

A/B テストを終了するには、レポートダッシュボードの「A/B テストを終了」ボタンをクリックします。ここで、一方のエクスペリエンスを公表するように求めるダイアログが表示されます。推奨結果を選択し、A/B テストの終了を確認します。

エクスペリエンス A を優れていると判断した場合は、A/B テストの終了後は、エクスペリエンス A のみが Chrome ユーザーを含むすべてのオーディエンスに配信されます。

住宅ローン申し込みのチュートリアル

We.Finance 社の住宅ローンのシナリオでは、以下の人物が登場します。

• Sarah Rose（We.Finance 社の顧客）
• Gloria Rios（We.Finance 社のクレジットカードおよび住宅ローンの責任者）
• John Doe（We.Finance 社の顧客担当代表）

以下の解説図は、住宅ローン申し込みのワークフローを図式化したものです。

リファレンスサイトのシナリオを順に詳しく見ていきながら、AEM Forms が We.Finance 社の目標達成にどのように貢献しているか確認しましょう。

Sarah は We.Finance 社の Web サイトにアクセスして住宅ローンを申し込む

Sarah Rose は家を購入する計画を立て、住宅ローンのプランを探しています。Sarah は We.Finance 社の顧客なので、We.Finance 社のポータルサイトにアクセスして住宅ローンのプランを探しています。住宅ローンのセクションに移動すると、ポータルサイトでローンの計算ができることが分かりました。Sarah が詳細を入力して「Calculate my mortgage」をクリックすると、住宅ローンのプランが表示されます。

図： 住宅ローン計算ツール

図： 住宅ローン計算ツールの結果

仕組み

ローンページにある住宅ローン計算機は、AEM サイトページのアダプティブフォームに埋め込まれています。https://[authorHost]:[authorPort]/editor.html/content/we-finance/global/en/loan-landing-page.htmlで、編集モードのローンページを確認できます。

埋め込まれた住宅ローン計算機はアダプティブフォームです。これは、計算機フィールドに入力されたローンの詳細に基づいて、ルールを使用して EMI 総額を算出します。アダプティブフォームはhttps://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/hm-calc.htmlで確認できます。

実際の動作確認

https://<publishHost>:<publishPort>/content/we-finance/global/en.htmlのWe.Financeポータルに移動し、「ローン」をクリックします。 住宅ローン計算機に詳細を入力すると、その結果が表示されます。

Sarah がキャンペーンに関心を抱き、申し込みを決意

Sarahは住宅ローンの申し込みを選択し、住宅ローン計算ツールの結果で「Apply Now」をクリックします。 住宅ローンの申込フォームが開きます。

Sarah がモバイルデバイスから住宅ローンの申込フォームにアクセスした場合は、申込フォームはモバイルデバイスの表示用に最適化されたビューで開かれます。この表示では、申込フォームは一度に1つのセクションをレンダリングします。 そのため、Sarah は申込フォームを移動するたびに、順を追って情報の表示および入力を行うことができます。

以下の画像では、Sarah が住宅ローンの申し込み時にモバイルデバイス上で閲覧したワークフローを紹介します。

Sarah がデスクトップから「Apply now」をクリックすると、以下のように住宅ローン申込フォームが表示されます。Sarah が住宅ローン計算機に入力した情報は、申込フォームに事前入力されます。Sarah は残りの情報を入力し、「Continue」をクリックします。

Sarah が住宅ローン計算機に入力した情報に基づいて、いくつかの住宅ローンプランが提示されます。その中から自分の要件に適したプランを選択し、申込フォームへの入力を続けます。最後に署名を行い、申込書を送信します。

送信された申込書は、承認用に We.Finance 社に送られます。

仕組み

「Apply Now」ボタンから、Sarah は直接住宅ローンの申込フォームにアクセスできます。申し込みフォームはアダプティブフォームで、https://[host]:[Port]/editor.html/content/forms/af/we-finance/hm-app.htmlのオーサリングインスタンスで確認できます。

アダプティブフォームで確認できるいくつかの主な機能は、次のとおりです。

• XSD スキーマ、homeMortgageApplication.xsd に基づいている。

• スタイル設定は We Finance Theme B を使用し、レイアウトは We.Finance テンプレートを使用して構築されている。また、フォームのヘッダー部分にはモバイルナビゲーション用のパネルタイトルが表示されないレイアウトが採用されています。モバイルデバイスから開くと、プログレッシブモバイルレイアウトが表示されます。 アダプティブフォームで使用されるテンプレートおよびテーマは、AEM オーサーインスタンスの次の場所で確認できます。

  • https://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance
  • https://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-b/jcr:content

• 申込フォームにある最初のタブの「Getting Started」は、動的な住宅ローン計算機で、ユーザーの選択内容に基づいてオプションを表示する。例えば、購入のオプションと借り換えのオプションではフィールドおよび値が異なります。この機能は、表示または非表示のルールを使用して実行されます。さらに、「Continue」をクリックして「Plans」タブを初期化すると、フォームデータモデルで設定された Web サービスが呼び出され、住宅ローンプランが取得されて表示されます。フォームデータモデルと設定済みサービスは、https://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdmで確認できます。

• さまざまなアダプティブフォームコンポーネントを使用して入力内容を取得し、ユーザーレスポンスに適合する。HTML5 入力タイプをサポートする電子メールなどのコンポーネントも使用します。

• 署名ステップコンポーネントを使用して、入力が完了したフォームを表示し、フォーム上で電子署名を行うことができる。

• AEM ワークフローを起動する送信アクションを使用して、We Finance 住宅ローン AEM ワークフローをトリガーする。このフォームで使用されるワークフローはhttps://[host]:[Port]/editor.html/conf/global/settings/workflow/models/we-finance-home-mortgage-workflow.htmlで確認できます。

フォームを確認して、フォームの作成に使用したスキーマ、コンポーネント、ルール、フォームデータモデル、Forms ワークフロー、送信アクションを理解することをお勧めします。

また、住宅ローン申し込みのアダプティブフォームで使用した機能の詳細については、次のドキュメントを参照してください。

• アダプティブフォームのオーサリングの概要
• XML スキーマを使ったアダプティブフォームの作成
• ルールエディター
• テーマ
• データ統合
• アダプティブフォームで Adobe Sign を使用する
• OSGi 上の Forms 中心のワークフロー

実際の動作確認

https://[server]:[port]/content/we-finance/global/en/all-forms.htmlに移動し、住宅ローン申し込みの「今すぐ申し込む」ボタンをクリックします。 「Getting Started」タブに詳細を入力し、さまざまなオプションを試して、申込書を送信します。

申込フォームで有効な電子メール ID を指定し、インボックスで確認のメールを受信します。

We.Finance 社が申し込みを受信

Sarah によって送信された住宅ローン申込書を、We.Finance 社が受信します。申し込みの承認または拒否のタスクが Gloria Rios に割り当てられます。彼女は申し込みを確認し、行政 ID が入力されていないことに気付きます。

Gloria はタスクを開き、「Need More Info」をクリックして、行政 ID が入力されていないというコメントを入力します。

これにより、タスクは We.Finance 社の顧客担当代表の John Doe に割り当てられます。John はタスクを開き、Gloria のコメントを確認します。John は Sarah に連絡を取り、ID のコピーを送信してくれるように伝えます。Sarah の ID のコピーを受け取ったら、タスクに添付して再評価するために申込書を送信します。

タスクは Gloria に再度割り当てられます。添付された ID を確認し、申し込みを承認します。

仕組み

Sarah が住宅ローンの申込フォームにすべて記入して送信すると、Forms ワークフローがトリガーされ、Gloria の AEM インボックスにタスクが作成されます。Gloria が申込書を確認して追加の情報をリクエストしたため、タスクは John Doe に割り当てられます。John Doe が ID を添付して申込書を再度送信すると、申込書は Gloria に割り当てられます。これは、住宅ローンの申し込みに関連する AEM ワークフローで定義されています。

OSGi 上の AEM Forms によって Forms 中心のワークフローが提供され、アダプティブフォームに基づいたワークフローを構築できます。これらのワークフローをレビューや承認、ビジネスプロセスフローに使用して、ドキュメントサービスを開始したり、Adobe Sign 署名ワークフローと統合したりすることができます。詳しくは、OSGi での Forms 中心のワークフローを参照してください。

以下の図は、住宅ローンの申し込みに関連する AEM ワークフローを図式化したものです。

実際の動作確認

AEMインボックスには、https://<hostname:<AuthorPort>/content/we-finance/global/en/login.html?resource=/aem/inbox.htmlからアクセスできます。 Gloria Rios のユーザー名とパスワード（grios/password）と、John Doe のユーザー名とパスワード（jdoe/jdoe）をそれぞれ使用して AEM インボックスにログインし、住宅ローンの申し込みワークフローを参照します。

フォーム中心のワークフロータスクでのAEMインボックスの使用に関する詳細は、「AEMインボックスでのFormsアプリケーションとタスクの管理」を参照してください。

Sarah がウェルカムキットを受信

Sarah の住宅ローン申込が承認されると、彼女はウェルカムキットへのリンクを含む電子メールを受信します。Sarah はウェルカムキットを開き、これにはカルーセルスライド式のディスプレイが含まれており、そこに Sarah 向けにカスタマイズされたプロモーションキャンペーン情報が表示されます。

ウェルカムキットは Sarah に合わせてパーソナライズされており、彼女に関わる情報を表示します。ウェルカムキットの PDF バージョンをダウンロードするオプションを彼女に提供します。画面下の矢印ボタンにより、Sarah は画面をスクロールダウンし、ウェルカムキットの他のセクションを次々に閲覧できます。

仕組み

ウェルカムキットは、cq-we-finance-content-pkg.zipパッケージに含まれるインタラクティブ通信です。 ウェルカムキットの中のプロモーションキャンペーン情報は、Adobe Target サーバーから配信されます。キャンペーン情報は個別の顧客セグメントを対象としてカスタマイズされます。ウェルカムキットは、前もって設定された Adobe Target サーバーから、女性利用客の閲覧者セグメントのためのキャンペーン情報を取得します。

デスクトップバージョンのウェルカムキットにあるインタラクティブカードは、ドキュメントフラグメントのデフォルトのカードのレイアウトを使用して作成されたカスタムレイアウトを使用します。

実際の動作確認

住宅ローンの申込フォームの入力時に電子メール ID を入力した場合、ウェルカムキットへのリンク先が表示された電子メールを受信します。インボックスをチェックしてウェルカムキットを確認します。

これは次の URL にある AEM パブリッシュインスタンスに表示されます。

https://[host]:[port]/content/forms/af/we-finance/mortgage-loan-welcome-kit.html

Sarah が取引明細書を受信

Sarah が住宅ローンの利用を開始し、賦払金の返済を開始すると、自らの毎月の取引明細を含む別の電子メールを We.Finance 社から受信します。

Sarah は「View Statement」（明細を表示）ボタンをクリックし、住宅ローン明細を確認します。この明細はインタラクティブステートメントであり、様々な要素から構成されています。

• 明細概要
• 明細詳細

以下の画像では、デスクトップバージョンの取引明細の別の部分を紹介しています。

細目が記載された明細はレスポンシブテーブルとしてレイアウトされており、明細の中で一部または全額を支払う選択を行うことができるようになっています。

仕組み

住宅ローン明細はインタラクティブなコミュニケーションです。 これは JSON バッチプロセスを使用して生成されます。明細中の支払細目一覧はレスポンシブテーブルです。

実際の動作確認

インタラクティブな住宅ローン明細を確認するには、次の URL を参照します。

https://<<hostname>:<port/content/forms/af/we-finance/mortgage-account-statement.html?wcmmode=disabled

作成者インスタンスと発行インスタンスでアクセスできます。

We.Finance 社が住宅ローン申込フォームのパフォーマンスを分析

We.Finance 社は、時折、自社の住宅ローン申し込みを見直して、顧客が直面しうる問題についてチェックします。同社はこの分析を使用して、住宅ローン申込フォームの中で必要な変更について、情報に基づいた判断を行います。その目的は、ユーザーエクスペリエンスを強化し、申込希望者がフォームを途中で破棄する割合を低減し、カードの乗り換えをしやすくすることにあります。同社は、分析のために AEM Forms を Adobe Analytics と統合しています。以下の画像では、同社の Analytics ダッシュボードを紹介しています。

Analytics ダッシュボードの見方について詳しくは、「AEM Forms の分析レポートの確認方法と詳細」を参照してください。

仕組み

住宅ローン申込フォームのパフォーマンス指標は、Adobe Analytics を使用して追跡されます。Adobe Analytics の設定とレポートの表示について詳しくは、「フォームおよびドキュメント用の Analytics の設定」を参照してください。

実際の動作確認

Analytics レポートを閲覧および検討したい方のために、リファレンスサイトで住宅ローン申込フォームのシードデータが提供されています。シードデータを使用する前に、「Analytics の設定」を参照してください。シードデータを使用したレポートを閲覧するには、作成者インスタンスで以下の手順を実行します。

1. https://<hostname:<AuthorPort>/aem/forms.html/content/dam/formsanddocumentsの​Formsとドキュメント UIに移動します。

2. we-finance フォルダーをクリックし、開きます。

3. 「住宅ローンの申し込み」アダプティブフォームを選択し、ツールバーで「Analyticsを有効にする」をクリックします。

4. フォームを再度選択し、ツールバーの「Analyticsレポート」をクリックしてレポートを生成します。 最初は、空白のレポートが表示されます。

シードデータを使用してAnalyticsレポートを生成するには：

1. CRXDE liteのアドレスブラウザーで、次のように入力します。/apps/we-finance/demo-artifacts/analyticsTestData/HomeMortgageAnalyticsTestData
2. 左側のディレクトリ構造でテストデータが選択されます。
3. 選択されたファイルをダブルクリックして、右側のパネルでファイルのコンテンツを開きます。
4. シードデータファイル内のすべての内容をコピーします。
5. CRXDEで、次の場所に移動します。/content/dam/formsanddocuments/we-finance/hm-app/jcr:content/analyticsdatanode/lastsevendays
6. 「プロパティ」の下にあるanalyticsdataフィールドに、シードデータファイルのコピーした内容を貼り付けます。
7. 住宅ローン申し込みフォームの分析レポートを再生成します。 シードデータが含まれたレポートが表示されます。

住宅ローン申込書の A/B テスト

住宅ローン申込フォームのパフォーマンスを分析し継続的にその改善を図ることに加えて、We.Finance 社は、AEM Forms と Adobe Target を統合し、A/B テストを作成します。このテストにより、申込フォームの異なるエクスペリエンスを提供し、フォームの完成および送信という見地から乗り換えの促進につながるエクスペリエンスを突き止めることができます。

AEM FormsサーバーでTargetを設定するには、「 AEM FormsでのTargetの設定と統合 」を参照してください。

作成者インスタンスで以下の手順を実行して、We.Finance 社の住宅ローン申込フォームのための A/B テストを試作しましょう。

1. https://<hostname:<AuthorPort/aem/forms.html/content/dam/formsanddocumentsで​Formsとドキュメント​に移動します。

2. We.Finance フォルダーをクリックし、開きます。

3. Application for Home Mortgage​アダプティブフォームを選択します。

4. ツールバーの「その他」をクリックし、「A/B テストを設定」を選択します。「A/B テストを設定」ページが開きます。

5. 「アクティビティ名」を指定します。

6. オーディエンスドロップダウンリストから、そのフォームの異なるエクスペリエンスの提供対象オーディエンスを選択します。例えば、Chrome を使用している訪問者​を選択します。

7. エクスペリエンス A および B に対する​エクスペリエンス配布​フィールドで、パーセンテージの見地から配信内容を指定し、全オーディエンス間のエクスペリエンスの配信を決定します。例えば、エクスペリエンス A および B に対してそれぞれ 40、60 を指定すると、エクスペリエンス A はオーディエンスの 40 % に配布され、残りの 60 % にはエクスペリエンス B が表示されます。

8. 「設定」をクリックします。A/B テストの作成を確認するダイアログが表示されます。

9. 「完了」をクリックします。

10. 「住宅ローンの申し込み」アダプティブフォームを選択し、「編集」をクリックします。 その後表示されるオプションにより、エクスペリエンスの一方を開くことができます。「エクスペリエンス B」をクリックします。フォームが編集モードで開きます。

11. 必要に応じてフォームを修正し、デフォルトのエクスペリエンス A とは異なるエクスペリエンスを作成します。

12. 「フォームとドキュメント」UI へ進み、フォームを選択し、「その他」をクリックし、「A/B テストを開始」をクリックします。

13. 次のURLを使用して、Chromeブラウザーでフォームを数回開きます。

    https://[hostname]:[port]/content/dam/formsanddocuments/we-finance/hm-app/jcr:content?wcmmode=disabled

    メモ

    次回以降、フォームを開く前に mbox という名前を持つ Cookie を、ブラウザーの Cookie パーシステンスから削除してください。そうすると、フォームのエクスペリエンス A および B をランダムに確認することになります。

14. フォームを選択し、「その他」をクリックし、「A/B テストを開始」をクリックします。テスト開始直後には、レポートに多くのデータが表示されることはありません。シードデータを使用して、A/B テストレポートがどのように表示されるか確認しましょう。

15. CRXDE Lite を開き、次のファイルのバックアップを作成します。 /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js

16. 上記のファイルのonReportLoadSuccess関数の定義を、次のファイルの関数定義に置き換えます。/apps/we-finance/demo-artifacts/targetreport.js

    メモ

    これらの変更はデモのためだけに行われます。この手順を完了した後、必ずファイルの中身を元に戻してください。

17. 生成したレポートを更新すると、以下のような画面が表示されます。レポートダッシュボードを確認します。

A/B テストを終了するには、レポートダッシュボードの「A/B テストを終了」ボタンをクリックします。ここで、一方のエクスペリエンスを公表するように求めるダイアログが表示されます。推奨結果を選択し、A/B テストの終了を確認します。

エクスペリエンス A を優れていると判断した場合は、A/B テストの終了後は、エクスペリエンス A のみが Chrome ユーザーを含むすべてのオーディエンスに配信されます。

Microsoft Dynamics を使用した住宅ローンの申し込みのチュートリアル

Microsoft Dynamics を使用した We.Finance 社の住宅ローンのシナリオでは、以下の人物が登場します。

• Sarah Rose（We.Finance 社の顧客）
• We.Finance Microsoft Dynamics インスタンスの管理者

Microsoft Dynamicsを使用した住宅ローン申し込みのチュートリアルでは、リファレンスサイトでデータ統合用にMicrosoft Dynamicsを使用する場合に、We.Finance社のお客様がサイトを使用して住宅ローンの申し込み方法を示します。 このチュートリアルは、Microsoft Dynamics で受信されたユーザーがデータ入力を完了するところで終わります。このシナリオを進める前に、We.Financeリファレンスサイト🔗の住宅ローンワークフローのMicrosoft Dynamics 365設定を完了する必要があります。

Sarah は We.Finance 社の Web サイトにアクセスして住宅ローンを申し込む

Sarah Rose は家を購入する計画を立て、住宅ローンのプランを探しています。Sarah は We.Finance 社の顧客なので、We.Finance 社のポータルサイトにアクセスして住宅ローンのプランを探しています。住宅ローンのセクションに移動すると、ポータルサイトでローンの計算ができることが分かりました。Sarah が詳細を入力して「Calculate my mortgage」をクリックすると、住宅ローンのプランが表示されます。

図： 住宅ローン計算ツール

図： 住宅ローン計算ツールの結果

仕組み

ローンページにある住宅ローン計算機は、AEM サイトページのアダプティブフォームに埋め込まれています。https://[authorHost]:[authorPort]/editor.html/content/we-finance/global/en/loan-landing-page.htmlで、編集モードのローンページを確認できます。

埋め込まれた住宅ローン計算機はアダプティブフォームです。これは、計算機フィールドに入力されたローンの詳細に基づいて、ルールを使用して EMI 総額を算出します。アダプティブフォームはhttps://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/ms-dynamics/home-mortgage-calculator.htmlで確認できます。

実際の動作確認

https://<publishHost>:<publishPort>/content/we-finance/global/en.htmlのWe.Financeポータルに移動し、「ローン」をクリックします。 住宅ローン計算機に詳細を入力すると、その結果が表示されます。

Sarah がキャンペーンに関心を抱き、申し込みを決意

Sarahは住宅ローンの申し込みを選択し、住宅ローン計算ツールの結果で「Apply Now」をクリックします。 住宅ローンの申込フォームが開きます。

Sarah がモバイルデバイスから住宅ローンの申込フォームにアクセスした場合は、申込フォームはモバイルデバイスの表示用に最適化されたビューで開かれます。この表示では、申込フォームは一度に1つのセクションをレンダリングします。 そのため、Sarah は申込フォームを移動するたびに、順を追って情報の表示および入力を行うことができます。

以下の画像では、Sarah が住宅ローンの申し込み時にモバイルデバイス上で閲覧したワークフローを紹介します。

Sarah がデスクトップから「Apply now」をクリックすると、以下のように住宅ローン申込フォームが表示されます。Sarah が住宅ローン計算機に入力した情報は、申込フォームに事前入力されます。Sarah は残りの情報を入力し、「Continue」をクリックします。

Sarah が住宅ローン計算機に入力した情報に基づいて、いくつかの住宅ローンプランが提示されます。その中から自分の要件に適したプランを選択し、申込フォームへの入力を続けます。最後に署名を行い、申込書を送信します。

送信された申込書は、承認用に We.Finance 社に送られます。

仕組み

「Apply Now」ボタンから、Sarah は直接住宅ローンの申込フォームにアクセスできます。申し込みフォームはアダプティブフォームで、https://[host]:[Port]/editor.html/content/forms/af/we-finance/ms-dynamics/application-for-home-mortgage.htmlのオーサリングインスタンスで確認できます。

アダプティブフォームで確認できるいくつかの主な機能は、次のとおりです。

• XSD スキーマ、homeMortgageApplication.xsd に基づいている。

• スタイル設定は We Finance Theme B を使用し、レイアウトは We.Finance テンプレートを使用して構築されている。また、フォームのヘッダー部分にはモバイルナビゲーション用のパネルタイトルが表示されないレイアウトが採用されています。モバイルデバイスから開くと、プログレッシブモバイルレイアウトが表示されます。 アダプティブフォームで使用されるテンプレートおよびテーマは、AEM オーサーインスタンスの次の場所で確認できます。

  • https://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance
  • https://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-b/jcr:content

• 申込フォームにある最初のタブの「Getting Started」は、動的な住宅ローン計算機で、ユーザーの選択内容に基づいてオプションを表示する。例えば、購入のオプションと借り換えのオプションではフィールドおよび値が異なります。この機能は、表示または非表示のルールを使用して実行されます。さらに、「Continue」をクリックして「Plans」タブを初期化すると、フォームデータモデルで設定された Web サービスが呼び出され、住宅ローンプランが取得されて表示されます。フォームデータモデルと設定済みサービスは、https://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdmで確認できます。

• さまざまなアダプティブフォームコンポーネントを使用して入力内容を取得し、ユーザーレスポンスに適合する。HTML5 入力タイプをサポートする電子メールなどのコンポーネントも使用します。

• 署名ステップコンポーネントを使用して、入力が完了したフォームを表示し、フォーム上で電子署名を行うことができる。

フォームを確認して、フォームの作成に使用したスキーマ、コンポーネント、ルール、フォームデータモデル、Forms ワークフロー、送信アクションを理解することをお勧めします。

管理者は送信されたデータを Microsoft Dynamics インスタンスで表示する

Microsoft Dynamics インスタンスで Sarah によって送信された住宅ローン申込書を、We.Finance 社が受信します。管理者は、潜在顧客の列のエントリをタップし、Sarah Rose 用に作成された潜在顧客のレコードに移動します。

住宅保険申し込みのチュートリアル

We.Finance 社の住宅保険のシナリオでは、以下の人物が登場します。

• Sarah Rose（We.Finance 社の顧客）
• Gloria Rios（We.Finance 社のクレジットカードおよび住宅ローンの責任者）
• Frank De Costa（We.Finance 社の保険代理店）

以下の解説図は、住宅保険の申し込みシナリオのワークフローを図式化したものです。

リファレンスサイトのシナリオを順に詳しく見ていきながら、AEM Forms が We.Finance 社の目標達成にどのように貢献しているか確認しましょう。

Sarah は We.Finance 社からニュースレターを受信し、住宅保険を申し込む

Sarah Rose は We.Finance 社の住宅ローンの顧客で、住宅保険をいろいろと探しています。Sarah は We.Finance 社のポータルサイトにアクセスし、住宅保険のプランを探します。We.Finance 社は彼女が既存の顧客であることを特定し、対象となる内容のニュースレターを電子メールで送信します。このニュースレターには、お勧めの住宅保険のプランが含まれています。

仕組み

Sarah に送信されたニュースレターは、特定の電子メール ID への電子メールをトリガーするカスタム実装です。ニュースレターに表示された「Apply Now」ボタンは住宅保険の申込フォームにリンクされます。これはパブリッシュインスタンス上のアダプティブフォームです。

実際の動作確認

次の URL を開くと、ニュースレターの電子メールがトリガーされます。[emailID]を有効な電子メールアカウントに置き換えて、ニュースレターを受け取るようにしてください。 ニュースレターを開き、「今すぐ適用」をクリックして住宅保険の申し込みに移動します。

https://[authorServer]:[authorPort]/content/campaigns/we-finance/start.html?app=ins&email=[emailID]&givenName=Sarah&familyName=Rose

Sarah がお勧めの住宅保険に関心を抱き、申し込みを決意

Sarah はニュースレターに載っていた住宅保険プランが気に入り、この保険を申し込むことに決めました。Sarah がニュースレターの「Apply Now」ボタンをクリックすると、We.Finance 社のポータルサイトの住宅保険の申込フォームが開きます。申込フォームはカードレイアウトを使用してセクションごとに構成されています。

個人情報のページで社会保険番号を入力すると、使用している資格情報でログインするようにプロンプトが表示されます。

Sarah は We.Finance 社の既存の顧客です。Sarah が We.Finance 社のアカウントの資格情報でログインすると、個人情報の詳細がフォームに自動で入力されます。彼女は引き続き申込書を記入し、提出する。

Sarah がモバイルデバイスから申込書を送信した場合は、次の画面で順に進んで行きます。

仕組み

ニュースレターの「Apply Now」をクリックすると、We.Finance 社のポータルサイトの住宅保険の申込フォームに移動します。申し込みフォームはアダプティブフォームで、https://[host]:[Port]/editor.html/content/forms/af/we-finance/insurance/application-for-insurance.htmlのオーサリングインスタンスで確認できます。

アダプティブフォームで確認できるいくつかの主な機能は、次のとおりです。

• XSD スキーマ、insurance.xsd に基づいている。

• スタイルに保険テーマを使用して構築されており、フォームのヘッダー部分にはモバイルナビゲーション用のパネルタイトルが表示されないレイアウトが採用されている。モバイルデバイスから開くと、プログレッシブモバイルレイアウトが表示されます。 テンプレートはhttps://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-financeで、テーマはhttps://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/insurance/jcr:contentで確認できます。

• フォームデータモデルサービスを呼び出すためのアダプティブフォームルールが含まれ、ログインしたユーザーのユーザー詳細を事前入力する。また、サービスを呼び出す際は、フォームに入力した社会保険番号や電子メールアドレスにより、情報が事前入力されます。フォームデータモデルとそのサービスは、https://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdmで確認できます。

• さまざまなアダプティブフォームコンポーネントを使用して入力内容を取得し、ユーザーレスポンスに適合する。HTML5 入力タイプをサポートする電子メールなどのコンポーネントも使用します。

• 「Save my progress」ボタンをクリックすると、ユーザーに対して一意の ID が生成され、AEM リポジトリのノード内に一部入力済みの申込フォームが下書きとして保存される。また、同じアクションによって、申込フォームの下書きを含むノードへのリンクを電子メールで送信する許可を求めるダイアログが表示されます。確認ダイアログの「Send mail」ボタンをクリックすると、下書きを含むノードへのリンクを持つ電子メールが自動送信されます。

• AEM ワークフローを起動する送信アクションを使用して、住宅保険の承認ワークフローをトリガーする。このフォームで使用されるワークフローはhttps://[host]:[Port]/editor.html/conf/global/settings/workflow/models/we-finance-insurance-workflow.htmlで確認できます。

フォームを確認して、フォームの作成に使用したスキーマ、コンポーネント、ルール、フォームデータモデル、Forms ワークフロー、送信アクションを理解することをお勧めします。

また、住宅保険申し込みのアダプティブフォームで使用した機能の詳細については、次のドキュメントを参照してください。

• アダプティブフォームのオーサリングの概要
• XML スキーマを使ったアダプティブフォームの作成
• ルールエディター
• テーマ
• データ統合
• アダプティブフォームで Adobe Sign を使用する
• OSGi 上の Forms 中心のワークフロー

実際の動作確認

電子メールで受信したニュースレターの「Apply now」ボタンをクリックします。または、https://[publishHost]:[publishPort]/content/we-finance/global/en/all-forms.htmlに移動し、保険申込書の「適用」をクリックします。 「Social Security Number」フィールドで 123456789 を指定します。プロンプトが表示されたら、ユーザー名とパスワードに srose/srose と入力してログインします。

詳細を入力し、アダプティブフォームの各種コンポーネントを確認して、申込書を送信します。 アダプティブフォームはhttps://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/insurance/application-for-insurance.htmlで確認できます。

We.Finance 社が申し込みを承認し、Sarah が契約書に署名

Sarah によって送信された住宅保険申込書を、We.Finance 社が受信します。タスクは Gloria Rios に割り当てられます。Gloria は AEM インボックスで申込書を確認し、これを承認します。

Gloria が Sarah の住宅保険の申し込みを承認すると、Frank De Costa の AEM インボックスにタスクが作成されます。Frankはタスクをレビューします。 Frank は Sarah 用に住宅保険の保険契約書を準備し、この契約書を Sarah の申込書に添付して彼女に送信して、契約書に署名をしてもらいます。エージェントUIの下に表示される契約は、インタラクティブ通信の印刷バージョンです。

Sarah は、署名を行う住宅保険の保険契約書へのリンクを含む電子メールを受信します。Sarah は契約書を確認して、署名します。

仕組み

Sarah が住宅保険の申込フォームを送信すると、Forms ワークフローがトリガーされ、Gloria の AEM インボックスにタスクが作成されます。Gloria が申込書を確認して承認したため、タスクは Frank De Costa に割り当てられます。1つのペルソナから別のペルソナへのタスクのフローは、保険申込書に関連付けられたAEM Workflowで定義されます。 ワークフローについて詳しくは、OSGi上のForms中心型ワークフローを参照してください。

以下の図は、保険の申し込みに関連する AEM ワークフローを図式化したものです。

Frank は Correspondence Management を使用して、住宅保険の保険契約書を準備します。彼は契約書の PDF をダウンロードして Sarah の申込書に添付し、「Send Contract」をクリックします。このワークフローにより、署名を行う住宅保険の保険契約書を含む Sarah へのメールがトリガーされます。

実際の動作確認

以下の操作を実行します。

1. AEM Inbox(https://[publishHost]:[publishPort]/content/we-finance/global/en/login.html?resource=/aem/inbox.html)に移動し、Gloriaのペルソナのユーザー名パスワードとしてgrios/griosを使用してログインします。 Sarah の住宅保険の申し込みを承認します。

2. 次に、Frank のユーザー名とパスワード（fdcosta/password）を使用して AEM インボックスにログインします。タスクが表示されます。

3. 次に、https://[authorHost]:[authorPort]/aem/forms.html/content/dam/formsanddocuments/we-finance/insuranceに移動し、HomeInsuranceWelcomeKitのレターテンプレートをプレビューします。

4. 「Data」パネルで情報を指定します。「Preview」をクリックして、PDF をローカルのファイルシステムにダウンロードします。この PDF ファイルは、contract.pdf filename という名前で保存するようにしてください。

5. Frank の AEM インボックスに移動してタスクを開き、ダウンロードした契約書の PDF を添付して「Send Contract」をクリックします。

6. 契約書が含まれる電子メールを開き、ドキュメントに署名します。

Sarah がウェルカムキットを受信

Sarah が住宅保険の契約書に署名すると、保険契約の詳細が含まれる電子メールを受信します。

つまり、彼女は保険契約のウェルカムキットを使用して We.Finance 社から別の電子メールを受信します。ウェルカムキットから、Sarah は契約ドキュメントにアクセスしてステートメントを確認することができます。

実際の動作確認

申込フォームで電子メール ID を指定している場合は、ウェルカムキットへのリンクを含む電子メールを受信します。「My Welcome Kit」をクリックしてウェルカムキットを開きます。

アセットマネジメントの案内

We.Finance Wealt Managementのシナリオには、次の人物が含まれます。

• Sarah Rose（We.Finance 社の顧客）

ウェルス・マネジメントのチュートリアルでは、We.Finance社のお客様が、このサイトをどのように使用して、投資信託であるBlue Chip Growth Fundについて学ぶかを示しています。 リファレンスサイトは、インタラクティブ通信を使用して、ファンドに関する情報を表示します。 この情報は、Web形式とPDF形式の両方で利用できます。 このチュートリアルは、顧客がPDF版の情報をSarahの兄に電子メールで送信することで終わります。

次の画像は、アセットマネジメントのチュートリアルのワークフローを示しています。

SarahはWe.Finance社のWebサイトを訪問し、 Blue Chip Growth Fundの案内書を開きます。

サラ・ローズは、投資信託への投資を計画している。 Sarahは既にWe.Finance社の顧客であるため、We.Finance社のポータルサイトにアクセスして、利用可能なミューチュアルファンドを調査します。 彼女はアセットマネジメントのセクションに移動し、We.Finance Blue Chip Growth Fundページを開きます。 このページには、現在と過去の価格、月次業績、部門ごとの多様化、費用、手数料、税金、その他の資金に関する詳細を含む案内書へのリンクが含まれています。

仕組み

Blue Chip Growth Fundの目論見書は、インタラクティブなコミュニケーションです。 テキスト、画像、グラフ、表コンポーネント（ドキュメントフラグメント）を使用して、製品概要、在庫スタイル、資金実績、資金詳細、その他の関連情報を表示します。 https://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/wealth-management/wealth-management/channels/web.htmlで、インタラクティブ通信を編集モードで確認できます。

グラフとテーブルは、フォームデータモデルからデータを取得します。 フォームデータモデルは、このチュートリアルのデータベースである設定済みデータソースに接続して、FUND固有の情報を取得します。 フォームデータモデルは、 https://[authorHost]:[authorPort]/aem/fdm/editor.html/content/dam/formsanddocuments-fdm/we-finance/wealt-managementで確認できます。

実際の動作確認

https://[publishHost]:[publishPort]/wefinanceのWe.Financeポータルに移動し、「We.Finance」をタップし、「Funds by Asset Class」をタップして、「We.Finance Blue Chip Growth Fund」をタップします。 We.Finance Blue Chip Growth Fundの案内が開かれます。

Sarahは、Blue Chip Growth Fundの案内書を調べて、ファンドについて学びます。

Sarahは、現在と過去の価格、過去の成長、S&P 500指数との比較、部門ごとの多様化、資金を管理する人、資金に関連する費用を調べるために、目論見書の「概要」、「価格とパフォーマンス」、「Portfolio管理」、「手数料と最小」、「税金と支払」の各タブを調べます。 関連情報は、異なるタブに分けられます。 目論見書は対話型のコミュニケーションです インタラクティブ通信はレスポンシブデザインを持ちます。 Sarahは、任意の画面サイズのデバイスでインタラクティブ通信を開くことができ、インタラクティブ通信は、基になるデバイスに合わせてデザインをリフローします。

仕組み

Blue Chip Growth Fundのインタラクティブ通信は、親パネルと子パネルを使用して、関連情報を異なるセクションに分離します。 親パネルでは、すべての子パネルがタブに編成されています。

すべての子パネルをタブに変換するには、親タブのレイアウトを上のタブに設定します。 https://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/wealth-management/wealth-management/channels/web.htmlで、編集モードでインタラクティブ通信のパネルを確認できます。

実際の動作確認

https://[publishHost]:[ publishPort]/content/forms/af/we-finance/wealth-management/wealth-management/channels/web.html?wcmmode=disabledで、Blue Chip Growth Fundのインタラクティブ通信を開きます。 すべてのタブを表示します。

SarahはPDF版のBlue Chip Growth Fundページを閲覧し、電子メールで送信します。

サラは週末に田舎へ旅行に行く。 彼女は兄とブルーチップ成長基金について話し合う予定だ。 彼女の兄は銀行と働き、金融に関する決定を助ける。 Sarahは、オフラインでの閲覧用に、ノートパソコンからBlue Chip Growth FundページのPDF版をダウンロードします。 彼女はまた、彼女の兄にPDF版のコピーをメールする。

仕組み

Blue Chip Growth Fundの目論見書は、インタラクティブなコミュニケーションです。 WebチャネルとPDFチャネルがあります。 このインタラクティブ通信は、AEMワークフローと統合され、PDFバージョンをEメールで送信します。 ワークフローモデルは、https://[authorHost]:[ authorPort]/editor.html/conf/global/settings/workflow/models/wealthmanagement.htmlで確認できます。

実際の動作確認

PDF版をダウンロードするには、 Blue Chip Growth Fundのインタラクティブ通信https://[publishHost]:[ publishPort]/content/forms/af/we-finance/wealth-management/wealth-management/channels/web.htmlに移動し、「PDFをダウンロード」をタップします。

PDFを電子メールで送信するには、 Blue Chip Growth Fundインタラクティブ通信https://[publishHost]:[ publishPort]/content/forms/af/we-finance/wealth-management/wealth-management/channels/web.htmlに移動し、「EMAIL PDF」をタップします。 姓名​と​電子メールアドレス​を指定します。 「電子メールを送信」をクリックします。

自動保険申し込みのチュートリアル

We.Finance自動保険の申し込みシナリオには、次の人物が含まれます。

• Sarah Rose（We.Finance 社の顧客）
• We.Finance社の保険代理店、Conrad Simms氏

Sarah Rose は We.Finance 社の既存の顧客で、自動保険契約を購入しています。今が保険の更新の時期だ。 We.Finance社の保険代理店であるConrad Simms氏は、Sarahにポリシーの更新に関するリマインダーを送信します。 リマインダーのEメールには、ポリシー更新の詳細を含むPDFと、インタラクティブ通信のWebバージョンへのリンクが含まれています。 インタラクティブ通信は、モバイルに適したレスポンシブデザインを備えています。 Sarahは任意のデバイスでインタラクティブ通信を開くことができ、インタラクティブ通信は基になるデバイスの画面サイズに合わせてリフローされます。 PDF版のインタラクティブ通信は、オフラインでの読み取りに役立ちます。PDF版はEメールに添付されています。

Sarahは、電子メールに記載された手順に従い、プロセスを正常に更新します。 次の画像は、自動保険申し込みのチュートリアルのワークフローを示しています。

ConradはWe.Finance社から保険契約の更新に関する連絡を送信します。

ConradがAEMインスタンスにログインし、自動保険のダッシュボードを開くと、Sarahの​顧客ID​が指定され、「ポリシーを更新」がクリックされます。 エージェントUI​が開き、Sarah Roseのポリシーの詳細が既に入力済みとなります。 Sarahの電子メールアドレスを確認し、「送信」をクリックします。 Sarahは、Your Auto Insurance Renewal​という件名の電子メールを受信します。

仕組み

保険証券の更新コミュニケーションは、インタラクティブなコミュニケーションです。 Conrad Simmsは、エージェントUIを使用して、保険契約の更新に関する連絡をSarahに送信します。 この通信は、印刷(PDF)と、インタラクティブ通信のWebチャネルへのリンクを含む。 インタラクティブ通信は、AEM Workflowを使用してEメールを送信します。 ワークフローは、https://[authorHost]:[authorPort]/editor.html/conf/global/settings/workflow/models/we-finance-auto-insurance-renewal.htmlで確認できます。

実際の動作確認

We.Finance Auto Insurance Dashboard​にConrad Simms(csimms/password)としてログインします。 URLはhttps://[publishhost]:[publishport]/content/we-finance/global/en/login.html?resource=/content/we-finance/ccdashboard.htmlです。 顧客ID​を指定します。 Sarah Roseの顧客IDは900001です。 「ポリシーを更新」をクリックします。 エージェント UI でインタラクティブ通信が開きます。エージェントUIで、有効な電子メールアドレスを入力し、ポリシードキュメントが添付された電子メールを送信し、「送信」をクリックします。 送信開始済みというメッセージが画面に表示され、数秒後に別のメッセージ「送信に成功しました」が表示されます。 件名が​自動保険更新​の電子メールが、指定の電子メールアドレスで送信されます。 Sarah Roseに提供されるポリシーはプレミアムポリシーです。

自動保険のチュートリアルには、別の顧客であるAlison Jonesも含まれています。 Alison Jonesの顧客IDは900002です。 インタラクティブ通信をAlison Jonesに送信すると、標準ポリシーが送信されます。 標準ポリシーとプレミアムポリシーの違いは次のとおりです。

• プレミアムポリシーはバナー画像を持ち、標準ポリシーはアドレスブロックの下にテキストのみを持ちます。
• 標準ポリシーは、プレミアムポリシーよりも低コストです。
• プレミアムポリシーは盗難防止報酬を有し、標準ポリシーはスマートライド報酬を有する

両方のポリシーが同じインタラクティブ通信を使用します。 ポリシーのセクションは、ポリシータイプの条件に基づいて変更または非表示になります。 https://[authorHost]: [authorPort]/aem/formdetails.html/content/dam/formsanddocuments/we-finance/autoinsurance/auto-insurance-renewalから直接、自動保険更新のインタラクティブ通信にアクセスして確認できます。

Microsoft Dynamicsをデータソースとして使用する

また、このリファレンスサイトでは、Microsoft Dynamicsをフォームデータモデルのデータソースとして使用するインタラクティブ通信も提供します。 次の手順を実行して、自動保険のチュートリアル用のインタラクティブ通信を設定します。

1. https://[author]:[port]/crx/deに管理者としてログインします。
2. /apps/we-finance/components/ccrui/ccrui.jspファイルを開きます。
3. FormFieldRequestParameterの値を/content/dam/formsanddocuments/we-finance/autoinsurance/auto-insurance-renewal-dynamicsに設定します。
4. 「すべて保存」をタップします。リファレンスサイトは、MS Dynamicsをデータソースとして使用するインタラクティブ通信を使用するように構成されています。

次に、We.Finance Auto Insurance Dashboard​にConrad Simms(csimms/password)としてログインします。 URLはhttps://[publishhost]:[publishport]/content/we-finance/global/en/login.html?resource=/content/we-finance/ccdashboard.htmlです。 顧客ID​を指定します。 Sarah Roseの顧客IDは900001です。 「ポリシーを更新」をクリックします。 エージェント UI でインタラクティブ通信が開きます。エージェントUIで、有効な電子メールアドレスを入力し、ポリシードキュメントが添付された電子メールを送信し、「送信」をクリックします。 送信開始済みというメッセージが画面に表示され、数秒後に別のメッセージ「送信に成功しました」が表示されます。 件名が​の電子メールが、指定の電子メールアドレスに送信されます。

Sarah は We.Finance 社から保険契約の更新通知を受信し、更新を決める

Sarahは、自動保険の契約期限が近づいていることを知らせる添付ファイルを含む電子メールをWe.Finance社から受信します。 添付ファイルは、自動保険契約の更新の詳細を印刷したバージョンです。

Sarahは「 今すぐ更新 」をクリックし、自動保険レターのWeb版にリダイレクトされます。 この手紙の上に、Sarahはポリシーの有効期限が切れるまでの残り日数を見つけます。 このページには、Sarahの保険契約の詳細（ポリシー番号、支払額、割引オファーやロイヤルティ報酬など）が表示されます。 Sarahは再度、ポリシーの下部にある「今すぐ更新」をクリックします。

仕組み

自動保険レターのWeb出力と印刷出力は、インタラクティブ通信のマルチチャネル機能を使用して作成されます。 電子メール内の「今すぐ更新」ボタンが、自動保険更新アプリケーションにリンクされます。これは、パブリッシュインスタンス上のインタラクティブ通信です。

実際の動作確認

PDF が添付された電子メールを受信します。PDFは、自動保険レターの印刷版です。 「今すぐ更新」をクリックして、ポリシーのWebバージョンに移動します。 個人情報とポリシーの詳細を確認し、「今すぐ更新」をクリックします。 これにより、支払用にアダプティブフォームが表示されます。

電子メールの「今すぐ更新」ボタンを押すと、SarahはポリシーのWebバージョンに移動します。 次の URL にアクセスできます。

https://[publishServer]:[publishPort]/content/document.html?schema=fdm&documentId=/content/forms/af/we-finance/autoinsurance/auto-insurance-renewal/channels/web.html&customerId=900001

自動保険更新の詳細な概要を確認し、ページ下部の「今すぐ更新」をクリックします。

Sarahは支払いページを開き、支払いを行い、処理を完了します。

Sarahがインタラクティブ通信のWeb版の「 今すぐ更新 」をクリックすると、支払いページが開きます。 Sarahは、自分のレコードと共にポリシー番号と有効期限を再確認します。 ページの右側で、Sarahは更新の「Payment Summary」をチェックし、合計金額に対して10%のプレミアム割引を適用します。 Sarahはクレジットカードの詳細を入力し、「支払いを行う」をクリックします。

仕組み

「今すぐ更新」ボタンをクリックすると、支払いページに移動します。 支払いページはアダプティブフォームです。 Sarahはクレジットカードの詳細を入力し、「Submit」をクリックします。 クレジットカードでの支払いが処理され、アダプティブフォームで設定された「ありがとうございます」メッセージが画面に表示されます。

実際の動作確認

「今すぐ更新する」をクリックして支払いページにアクセスします。クレジットカード情報を入力し、「支払いを行う」をクリックします。 オーサリングインスタンスの支払いページには、次の場所でアクセスできます。

https://[authorServer]:[authorPort]/content/document.html?documentId=/content/forms/af/we-finance/credit-card/ccbillpayment.html&schema=fdm&customerId=900001

「Make Payment」ボタンをクリックすると、「thank you」メッセージが表示されます。