We.Gov および We.Finance リファレンスサイトのチュートリアル we-gov-reference-site-walkthrough

前提条件 pre-requisites

We.Gov および We.Finance リファレンスサイトのセットアップと設定の説明に従ってリファレンスサイトを設定します。

ユーザーストーリー user-story

  • AEM Forms

    • フォームの自動変換
    • オーサリング
    • フォームデータモデル/データソース
  • AEM Forms

    • データキャプチャ
    • (オプション)データ統合(MS® Dynamic)
    • (オプション)Adobe Sign
  • ワークフロー

  • メール通知

  • (オプション)顧客とのコミュニケーション

    • 印刷チャネル
    • Web チャネル
  • Adobe Analytics

  • データソースの統合

架空のユーザーおよびグループ fictitious-users-and-groups

We.Gov デモパッケージには、次の架空ユーザーが組み込まれています。

  • Aya Tan:政府機関からサービスを受ける資格のある市民

架空のユーザー

  • George Lang:We.Gov エージェンシーのビジネスアナリスト

架空のユーザー

  • Camila Santos:We.Gov エージェンシーの CX リード

架空のユーザー

次のグループも含まれます。

  • We.Gov Forms ユーザー

    • George Lang(メンバー)
    • Camila Santos(メンバー)
  • We.Gov ユーザー

    • George Lang(メンバー)
    • Camila Santos(メンバー)
    • Aya Tan(メンバー)

デモの概要用語集 demo-overview-terms-legend

  1. 別のユーザーとして実行する:AEM デモで定義されたユーザーとグループ。

  2. ボタン:移動のための色付きの長方形または丸付き矢印。

  3. クリック:ユーザーストーリー内でのアクションの実行。

  4. リンク:We.Gov サイトのメインメニューの上部にあります。

  5. ユーザーの手順:ユーザーのストーリーを進める際に従う数字が付いた一連の手順です。

  6. フォームポータルhttps://<aemserver>:<port>/content/we-gov/formsportal.html

  7. モバイルビュー:We.Gov ユーザーは、サイズが変更されたブラウザーでモバイルビューをレプリケートできます。

  8. デスクトップ表示:We.Gov ユーザーは、ノート PC またはデスクトップでデモを表示できます。

  9. 事前スクリーニングフォーム:We.Gov サイトのホームページ上のフォーム。

  10. アダプティブフォーム:We.Gov デモの登録申し込みフォーム。

    https://<aemserver>:<port>/content/forms/af/adobe-gov-forms/enrollment-application-for-health-benefits.html

  11. Adobe We.Gov サイトhttps://<aemserver>:<port>/content/we-gov/home.html

  12. アドビインボックス:AEM バックエンドの上部メニューバーにある ベルのアイコン

    https://<aemserver>:<port>/aem/start.html

  13. メールクライアント:メールを表示する希望の方法(Gmail、Outlook)

  14. CTA:コールトゥアクション

  15. 移動:ブラウザページ上で特定の参照点を見つける。

  16. AFC:フォームの自動変換

フォームの自動変換(Camila) automated-forms-conversion

この節:Camila による CX リードには、紙ベースのプロセスの一部として使用された既存の PDF ベースのフォームがあります。最新化の取り組みの一環として、Camila はこの PDF フォームを使用して、最新のアダプティブフォームを自動的に作成したいと考えています。

フォームの自動変換 - We.Gov(Camila) automated-forms-conversion-wegov

  1. https://<aemserver>:<port>/aem/start.html に移動します。

  2. 以下の資格情報を使用してログインします。

    • ユーザー:camila.santos
    • パスワード:password
  3. メインページから、Forms/Forms とドキュメント/AEM Forms We.gov Forms/AFC を選択します。

  4. Camila は AEM Forms に PDF をアップロードします。

    フォームをアップロード

  5. Camilla は次に、PDF フォームを選択し、自動変換を開始 ​をクリックして、変換処理を開始します。フォームを変換した場合は、変換を上書き ​をクリックする必要がある場合があります。

    note note
    NOTE
    AFC の設定は、エンドユーザーに対して事前設定されているため、変更しないでください。
    • オプション:アクセシブルな Ultramarine テーマを使用する場合は、「アダプティブフォームのテーマを指定」をクリックし、オプションの一覧に表示されるアクセシブルな Ultramarine テーマを選択してください。

    変換処理を開始

    Ultramarine テーマ

    変換処理中に完了率のステータスが表示されます。変換済み ​のステータスが表示されたら、出力 ​フォルダーをクリックし、アダプティブフォームを選択し、編集 ​をクリックして、変換済のフォームを開きます。

  6. Camilla はフォームを確認し、すべてのフィールドが存在することを確認します

    コンバージョンを確認

  7. 次に、Camilla がフォームの編集を開始し、ルートパネル/編集(レンチ)を選択し、パネルレイアウトドロップダウンメニューから「上部のタブ」を選択し、「チェックボックスを選択」を選択します。

    プロパティを確認

  8. 次に、Camilla は必要な CSS とフィールドの変更をすべて追加して、最終製品に仕上げます。

    CSS を追加

フォームデータモデルとデータソース(Camila) data-sources

この節の内容:ドキュメントが変換されてアダプティブフォームが生成されたら、Camila はアダプティブフォームをデータソースに接続する必要があります。

  1. フォームの自動変換 - We.Gov で変換されたフォームのプロパティを開きます。

  2. 次に、Camila はフォームモデルを選択/選択フォームドロップダウンからフォームデータモデルを選択/オプションのリストから We.gov 登録 FDM を選択します。

  3. 「保存して閉じる」をクリックします。

    FDM 選択

  4. Camila が​ 出力 ​フォルダーをクリックし、アダプティブフォームを選択して「編集」をクリックすると、完成した We.Gov フォームが開きます。

  5. Camila はアダプティブフォームフィールドを選択して、 設定アイコン をクリックし、「連結参照」フィールドを使用してフォームデータモデルエンティティとの連結を作成します。Camila は、アダプティブフォーム内のすべてのフィールドに対して、この手順を繰り返します。

フォームアクセシビリティテスト(Camila) form-accessibility-testing

Camila はまた、作成されたコンテンツが企業標準に従って正しく構築され、完全にアクセス可能であることを検証します。

  1. Camila が​ 出力 ​フォルダーを開き、アダプティブフォームを選択して「プレビュー」をクリックすると、完成した We.Gov フォームが開きます。

  2. Chrome デベロッパーツール内の「監査」タブを開きます。

  3. アクセシビリティチェックを実行して、アダプティブフォームを検証します。

    アクセシビリティチェック

アダプティブフォームモバイルビューのデモ(Aya) mobile-view-demo

デモの前に、この節を実行する必要があります。

ユーザー手順:

  1. https://<aemserver>:<port>/content/we-gov/home.html に移動します。

  2. 以下の資格情報を使用してログインします。

    1. ユーザー:aya.tan
    2. パスワード:password
  3. ブラウザーウィンドウのサイズを変更するか、ブラウザーのエミュレーターを使用してモバイルデバイスのサイズを複製します。

We.Gov Web サイト(Aya) aya-user-story-we-gov-website

架空のユーザー

この節の内容:Ayaは市民で、政府機関からサービスを受ける資格があるかもしれないという話を友人から聞きます。Aya は携帯電話から We.Gov の Web サイトにアクセスし、自身が対象となるサービスの詳細を確認します。

We.Gov プリスクリーン(Aya) aya-user-story-we-gov-pre-screener

Aya は、携帯電話で短いアダプティブフォームに入力して適格性を確認するための質問に回答します。

ユーザーの手順:

  1. 各ドロップダウンフィールドで選択を行います。

    note note
    NOTE
    年収が 200,000 ドルを超えるユーザーは、資格を持ちません。
  2. 自分が対象か確認」をクリックします。

  3. 今すぐ申請」をクリックして続行します。

    今すぐ申請リンク

We.Gov アダプティブフォーム(Aya) aya-user-story-we-gov-adaptive-form

Aya は自分が対象であると判断し、モバイルデバイスでサービスをリクエストする申し込みフォームへの入力を開始します。

Aya は、サービスリクエストの申請を完了する前に、自宅でドキュメントを確認する必要があります。Aya は保存してモバイルデバイスからアプリを終了します。

ユーザーの手順:

  1. 「基本情報」フィールドに入力します。次の必須フィールドとドロップダウンがあります。

    1. 基本情報

      1. 名前(名)
      2. 名前(姓)
      3. 生年月日
      4. メール
  2. 次の​ 動的ロジック ​を使用して、家族状況 ​ドロップダウンを使用して動的機能を示します。

    1. 未婚:近親者パネルを表示

    2. 既婚:扶養家族(配偶者)パネルを表示

    3. 離別:近親者パネルを表示

    4. 死別:近親者パネルを表示

    5. 子供の有無:(はい/いいえ)扶養者(子供)パネルを表示するラジオボタン。

      1. 「追加」ボタンと「削除」ボタンを使用して、複数の扶養家族(子供)パネルを追加または削除します。
  3. 灰色のメニューバーの右矢印をクリックします。

  4. 下部にある「保存」ボタンをクリックします。

    アダプティブフォームの詳細

デスクトップデモ desktop-demo

この節: 自宅に戻ると、Aya は必要な情報を見つけ、デスクトップからアプリを再開しました。Aya はオンラインフォームポータルに移動し、申請を再開します。いくつかのシンプルなカスタマイズ機能を使用すると、代理店は自動的にリンクを生成し、メールでアプリケーションを再開することもできます。

アダプティブフォーム(Aya)- 続き aya-user-story-continued-adaptive-form

ユーザーの手順:

  1. https://<aemserver>:<port>/content/we-gov/home.html に移動します。

  2. ナビゲーションバーで、「オンラインサービス」を選択します。

  3. ドラフトフォームパネルから、既存の「医療補助の登録申請書」を選択します。

    医療保障給付申請

    ルックアンドフィールは同じで、データを再度入力する必要はありません。

    ユーザーの手順:

  4. 右側の円の CTA をクリックして、次のセクションに移動します。

    右側の円の CTA

    Aya が最後に入力した時点までの情報がフォームに入力されています。Aya はすべての情報を入力し、提出する準備が整いました。

    アダプティブフォームの送信

    note note
    NOTE
    Aya は、電話番号フィールドに入力する際に、ダッシュ、スペース、ハイフンを含まない連続した 11 桁の数字を入力する必要があります。

    送信すると、Aya は「ありがとうございます」ページを受信します。オプションで、レコードのドキュメントをメールで受信し、Adobe Sign で電子署名を行うこともできます。

オプション:Adobe Sign(Aya) adobe-sign

ユーザー手順:

  1. メールクライアントに移動し、 Adobe Sign メールを検索します。

  2. Adobe Sign へのリンクをクリックします。

    Adobe Sign リンク

ユーザー手順:

  1. 同意します」にチェックを入れます。

  2. 同意する」をクリックします。

  3. レビュー済みドキュメントの下部までスクロールします。

  4. ハイライト表示された黄色のタブをクリックして、ドキュメントに署名します。

    ドキュメントに署名 テストドキュメントに署名

政府職員(George) government-agent-george

政府職員の George

このセクション: George は、Aya がサービスを要求している政府機関のビジネスアナリストです。George は 1 つのダッシュボードで、自分に割り当てられたすべてのサービスリクエストの申請書を確認できます。

AEM インボックス(George) george-user-story-aem-inbox

ユーザー手順:

  1. https://<aemserver>:<port>/aem/start.html に移動します。

  2. ユーザーアイコン(右上隅)をクリックして「ログアウト」を選択します。現在管理者ユーザーとしてログインしている場合は、「別のユーザーとして実行する」メニューオプションを選択します。

    1. 以下の資格情報を使用してログインします。

      1. ユーザー: george.lang
      2. パスワード: password
    2. または別のユーザーとして実行:

      1. 別のユーザーとして実行する」フィールドに「George」と入力します。

      2. 「OK」をクリックして、別のユーザーとして実行します。

  3. 右上隅にある通知(ベル)アイコンをクリックします。

  4. すべて表示」をクリックしてインボックスに移動します。

  5. インボックスから、最新の「医療保障給付申請の確認」タスクを開きます。

    医療保障給付申請の確認

オプション:AEM インボックスと MS Dynamics(George) george-user-story-aem-inbox-and-ms-dynamics

データ統合と自動ワークフローにより、Aya の申請書が、データの送信時に自動的に生成された CRM レコードとともに表示されます。

ユーザー手順:

  1. 読み取り専用アダプティブフォームを開いて検査します。

  2. MS® Dynamics を開く」をクリックして、MS® Dynamics レコードを新しいウィンドウで開きます。

  3. CRM では、更新可能な情報がすべて表示されます。

    1. オプションで、レビューのメモを Dynamics に直接追加します。
  4. 閉じて、AEM インボックス に戻ります。

    MS Dynamics レコード

AEM インボックスに戻る(George) george-user-story-back-to-aem-inbox

George が Aya の申請を承認すると、既存の自動ワークフローにより、Aya にも確認メールが送信されます。

ユーザーの手順:

  1. 左上隅に移動して「承認」をクリックし、申請を承認します。

  2. モーダルには、CX リードに対するメッセージを残すことができます。

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

  4. (市民の役割)メールクライアントを開いて、Aya に送信されたメールを表示します。

    Aya に送信されたメールを表示

CX リード(Camila) cx-lead-camila

Camila(CX リード)

このセクション: CX リードの Camila は、承認された政府サービスの利用方法を Aya に説明するため、歓迎の電話をかけます。

(オプション)AEM インボックスと MS® Dynamics camila-user-story-aem-inbox-ms-dynamics

ユーザー手順:

  1. https://<aemserver>:<port>/aem/start.html に移動します。

  2. ユーザーアイコン(右上隅)をクリックして「ログアウト」を選択します。現在管理者ユーザーとしてログインしている場合は、「別のユーザーとして実行する」メニューオプションを選択します。

    1. 以下の資格情報を使用してログインします。

      1. ユーザー:camila.santos
      2. パスワード:password
    2. または別のユーザーとして実行:

      1. 別のユーザーとして実行する」フィールドに「Camila」と入力します。

      2. 「OK」をクリックして、別のユーザーとして実行します。

  3. 右上隅にある通知(ベル)アイコンをクリックします。

  4. すべて表示」をクリックしてインボックスに移動します。

  5. インボックスから、最新の「新規連絡先の承認」タスクを開きます。

新規連絡先の承認

(オプション)ユーザーの手順:

  1. 読み取り専用アダプティブフォームを開いて検査します。

  2. MS® Dynamics を開く」をクリックして、MS® Dynamics レコードを新しいウィンドウで開きます。

  3. CRM で、すべての情報の更新を確認できます。

    1. 必要に応じて、通話アクティビティを Dynamics に直接追加します。
    2. アクティビティ」セクションを開きます。
    3. 新規通話」をクリックします。
    4. 通話の詳細を追加します。
    5. 保存してウィンドウを閉じます。
  4. AEM に戻り、左上隅に移動して「送信」をクリックし、申請書を送信します。

  5. モーダルで、メッセージを残すことができます。

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

    「アクティビティ」タブ 新しい連絡先を確認

(オプション)市民用ウェルカムキット(Aya) welcome-kit-citizen-aya

このセクション: Aya は、インタラクティブな通信へのリンクが含まれたメールを受信します。この通信には、Aya への給付が要約され、入力すべき申請書のフィールドも含まれています。メールには、給付説明書が PDF で添付され、インタラクティブな通信のためのレターへのリンクが付いています(インタラクティブな通信と同じテーマやブランディングが使用されます)。

メールクライアント通知(Aya) aya-user-story-email-client

ユーザーの手順:

  1. ウェルカムキットのメールを探して開きます。

  2. ページ下部の添付 PDF ファイルまでスクロールします。

  3. クリックして、添付 PDF を開きます。

  4. メールクライアントで上にスクロールし、「ウェルカムキットをオンラインで表示」をクリックします。

    1. 同じドキュメントの web チャネルバージョンが開きます。
  5. PDF を直接参照するには:

    https://<aemserver>:<port>/aem/formdetails.html/content/dam/formsanddocuments/adobe-gov-forms/welcome-handbook/we-gov-welcome-handbook

  6. IC を直接参照するには:

    https://<aemserver>:<port>/content/dam/formsanddocuments/adobe-gov-forms/welcome-handbook/we-gov-welcome-handbook/jcr:content?channel=web&mode=preview&wcmmode=disabled

    ウェルカム給付ハンドブック インタラクティブ通信リンク

市民用更新リマインダー(Aya) renewal-reminder-citizen-aya

このセクション: Camila は 1 年後の通信リマインダーのスケジュールを設定します(メールを自動化/実行するワークフロー手順)。

メールクライアント通知(Aya) aya-user-story-email-client-updated

ユーザーの手順:

  1. メールクライアントに移動します。

  2. 更新リマインダーのメールを探して開きます。

  3. 新しい申請書を送信」をクリックしてアダプティブフォームを開きます。

    1. このセクションは、フェーズ 2 でデータの事前入力に対応するために、意図的に空のままにしています。

    更新リマインダーメール

(オプション)フォームデータモデル(Camila) form-data-model

この節:Camila は AEM Forms データ統合に移動し、フォームデータモデル統合で外部データソースに送信した情報が確かに存在することを確認するために、簡単なテストを実施します。

フォームデータモデル(Camila) form-data-model-camila

この節:Camila はデータソースのページに移動し、サーバーによって Derby データベース内でレプリケートされたデータを検証します。

  1. ユーザーエクスペリエンスが終了し、ユーザーによる送信が完了したら、Camila は AEM Forms の「データソース」タブ(Formsデータ統合)に移動します。

  2. 次に、Camila は AEM Forms の We.gov FDMを選択して、We.gov 登録 FDM ​を編集します。

  3. Camila はテストする必要がある​ 連絡先 > 読み取りサービス ​を選択します。

    連絡先読み取りサービス

  4. Camila はテストサービスに連絡先 ID を入力し、「テスト」ボタンをクリックします。例えばフォームを送信した場合、1 または 2 です。フォームを送信していない場合、データは返されません。

    連絡先読み取りサービス

  5. その後、Caimla はデータがデータソースに正常に挿入されたことを検証できます。

    • Derby DS 内のデータは、次のような形式です。
    code language-xml
       [
          {
          "ADDRESS_COUNTRY": "USA",
          "LAST_NAME": "Tan",
          "ADDRESS_CITY": "New York",
          "FIRST_NAME": "Aya",
          "ADDRESS_STATE": "AL",
          "ADDRESS_LINE1": "123 Street crescent",
          "GENDER_CODE": "2",
          "ADDRESS_LINE2": "123 Street crescent",
          "ADDRESS_POSTAL_CODE": "90210",
          "BIRTH_DATE": "1991-12-12",
          "CONTACT_ID": 1,
          "MIDDLE_NAME": "M",
          "HAS_CHILDREN_CODE": "0"
          }
    ]
    

(オプション)分析(Camila) analytics-cx-lead-camila

このセクション: Camila は、ダッシュボードに移動して、エージェンシーの KPI を確認します。例えば、サービス申込書を記入し始めた後に放棄した市民の割合、申込書の提出から承認または却下の回答までの平均時間、市民に送信した特典ハンドブックのエンゲージメント統計などです。

Adobe Analytics Sites レポート(Camila) camila-reviews-sites-reporting-we-gov-adobe-analytics

  1. https://<aemserver>:<port>/sites.html/content ​に移動します。

  2. AEM Forms We.Gov サイト」を選択して、サイトのページを表示します。

  3. サイトページの 1 つ(例:ホーム)を選択し、「分析と推奨事項」を選択します。

    分析と推奨事項

  4. このページには、AEM Sites ページに関連する Adobe Analytics から取得した情報が表示されます(メモ:設計上、この情報は Adobe Analytics から定期的に更新されますが、リアルタイムには表示されません)。

    Adobe Analytics 主要指標

  5. ページビューページ(手順 3 でアクセス)に戻ると、「リスト表示」の項目を表示する表示設定を変更することで、ページビュー情報を表示することもできます。

  6. 表示 ​ドロップダウンメニューで「リスト表示」を選択します。

    表示ドロップダウンメニューのリスト表示

  7. 同じメニューから「設定を表示」を選択し、「分析」セクションから表示する列を選択します。

    列の表示を設定

  8. 更新」をクリックして、新しい列を使用可能にします。

    新しい列を使用可能にする

Adobe Analytics Forms レポート(Camila) camila-reviews-forms-reporting-we-gov-adobe-analytics

  1. 次に移動します。

    https:///<aemserver>:<port>/aem/forms.html/content/dam/formsanddocuments/adobe-gov-forms

  2. 医療保障給付申込書」アダプティブフォームを選択してから、「分析レポート」オプションを選択してください。

    医療保障給付申請

  3. ページが読み込まれるのを待ち、分析レポートデータを表示します。

    分析レポートデータ

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2