2020/03/27

技術・アーキテクチャ

GIGYA機能紹介:UIビルダー

SAP Customer Data Cloud from GIGYAのシステム構成でも解説されていますが、SAP Customer Data Cloud from GIGYAは管理画面の「UIビルダー」によってユーザ登録/ログイン等の画面を登録・管理することができます。本記事ではその詳細について解説します。

UIビルダーでは、「スクリーンセット」と呼ばれる、SAP Customer Data Cloud from GIGYAで管理する画面群を作成/編集します。
スクリーンセットで管理する主な画面は、ログイン/ユーザ登録/パスワード変更/2要素認証設定等の基本的な画面に加えて、利用規約変更時の再同意取得の画面等の準正常系の処理の画面等も含まれます。これらの画面を1つの「スクリーンセットID」で管理します。

管理画面のメニューから”Screen sets”を選択すると図1のようにスクリーンセットの一覧画面が表示されます。まずスクリーンセットを作成する必要がありますが、デフォルトでサンプルのスクリーンセットが用意されているので、通常はそのサンプルをコピーして自サービス用のスクリーンセットを作成します。

図1:スクリーンセット一覧画面

図1:スクリーンセット一覧画面

管理するスクリーンセットを選択するとUIビルダーの画面が表示されます。デフォルトでは図2のようなレイアウト編集モードの状態になります。図2の「メニュー」は共通メニューとなっており、UIビルダー内では常に表示されています。メニューのボタンの意味にういては図3をご参照ください。

図2:UIビルダー(レイアウト編集モード )

図2:UIビルダー(レイアウト編集モード )

図3: UIビルダーの共通メニュー

図3: UIビルダーの共通メニュー

操作のイメージとしては①画面選択で画面を切替ながらレイアウトを編集し、③④⑤のボタンでスクリーンセット共通の設定(ローカライズ設定、スタイルシート、SAP Customer Data Cloud from GIGYAのイベントに応じたカスタムJavascriptコード)を必要に応じて行います。そして⑥プレビューで、実際のレイアウトをロケール毎にチェックして⑦保存する、というのが基本的な流れになります。

あらためて図2に戻り、レイアウト編集モードについて説明します。図2にあるように左のペインが「パーツ, Widgetボックス」でここからパーツ(チェックボックス、テキスト入力ボックス、ソーシャルログイン選択ウィジェット、等)を選択して、ドラッグ&ドロップで、中央のレイアウト編集ペインに自由に置くことができます。そしてそのパーツ/ウィジェットに対して、詳細な設定を行うのが右側のプロパティ設定ペインです。プロパティ設定ペインでは、テキストのラベルや、パーツのサイズ、チェックボックスや入力ボックスの結果を反映するためのユーザレコードのカラムを指定するなどの設定を行います。 例えば、一度作成したユーザ登録フォームに入力項目を追加する場合には、既存のスクリーンレイアウトにチェックボックスを1追加し、ラベルを設定し、保存するカラムを(あらかじめ管理画面のスキーマ画面で追加しておいたカラムに)指定すればOKです。

作成/編集した画面が実際にどのように表示さるかをプレビューモードで確認が可能です。図3の⑥プレビューを選択すると実際の表示イメージを確認することができます(図4)。

図4: プレビューモードによる実際のレイアウト確認

図4: プレビューモードによる実際のレイアウト確認

プルダウンでロケールを選択することによって、各言語でのレイアウト崩れ、はみ出しがないかなども確認が可能です。(図4では日本語ロケールを選択)
SAP Customer Data Cloud from GIGYAのスクリーンセットはレスポンシブ対応いているので、スマートフォンのレイアウトも確認することができます。

UIビルダーを用いる事により、SAP Customer Data Cloud from GIGYAがお勧めするデフォルトのスクリーンセットを素早く設定する、必要に応じて修正する等の作業を効率的に行えます。一度スクリーンセットをWebサービス/アプリに組み込んでおくと、サービスリリース後の軽微な変更は、このUIビルダーだけで行う事ができます。ユーザ登録は顧客獲得の重要な入り口ですので、問題を発見したら素早く改善することが重要です。ぜひこのUIビルダーを活用して顧客体験をよりよい物にして下さい。
今回はUIビルダーの主な機能を解説しました。さらに詳しい機能にご興味がある方は、是非下記フォームにてお気軽にお問い合わせ下さい。

資料ダウンロード

CRMを成功に導く顧客ID統合に欠かせない3つのポイント

CRMを成功に導く顧客ID統合に欠かせない3つのポイント

GDPR対応など、顧客ID統合の検討時の3つのポイントと、「顧客ID&アクセス管理(CIAM)」がそれらをどのように解決するかについて解説します。