4.0
サンプルアプリケーション

The English Version of this documentation is under construction.

1. サンプルアプリケーションについて

オンライン書店を題材にしたサンプルアプリケーションです。
テナントにサンプルアプリ用のメタデータとEntityデータを取り込むことで動作します。

2. アプリケーション全体像

サンプルアプリは2つの機能で構成されています。
  • 運営者向け(管理画面)
    運営者が、オンライン書店の商品や注文、問い合わせ、配送状況などの情報を管理するための機能です。
    iPLAssが標準提供するGEMモジュールの汎用データ操作画面を利用して実装されています。

  • 一般消費者向け(ECサイト)
    一般消費者が、オンライン書店の商品を閲覧したり、購入したりするためのECサイト機能です。
    実装は3つのパターンを用意しています。Java/JSP、Groovy/GroovyTemplate、Vue.js/WebAPIを利用して独自カスタマイズで実装されています。

2.1. 運営者向け(管理)画面

  • ログイン画面にテナント作成時に登録した管理者IDとパスワードを入力してログインします。

  • メニューの変更リストを確認します。このサンプルアプリでは、 Manager(マネージャー)Operator(オペレーター)Worker(利用ユーザー) という3つのロールに対応する管理画面がそれぞれ用意されています。

    sample ec mantainance top page menu
  • Manager(マネージャー)に属する運営者向けのTop画面

    sample ec mantainance top page

2.2. 一般消費者向け(ECサイト)画面

  • 運営者向け(管理画面)のTop画面にリンクが表示されています。クリックすると、一般消費者向け(ECサイト)のTop画面に遷移することができます。

    sample ec consumer top page transition
  • 一般消費者向け(ECサイト)のTop画面

    sample ec consumer top page md width

3. サンプルアプリの業務フロー

sample ec fullcustomize flow

※ ワークフロー起動はEnterprise Editionの機能です。

3.1. 一般消費者向け(ECサイト)画面

商品の購入

ECサイトの画面で商品を購入することができます。

  • 購入したい商品の詳細画面を開きます。「カートに入れる」ボタンをクリックすると、カートに商品が追加されます。

    sample ec consumer buy product detail

  • 商品詳細画面の右上でカートに入れた商品の数量を確認できます。
    「カートの中を見る」ボタンをクリックすると、カートの詳細画面に遷移します。

    sample ec consumer buy product detail 2

  • カートの詳細画面では、カートに入れた商品を削除したり、商品の購入数量を更新したりすることができます。
    商品数量を変更し、「リフレッシュ」アイコンをクリックすることで商品の合計金額を更新できます。
    「お会計」ボタンをクリックすると、ログイン画面に遷移します。

    sample ec consumer buy product cartinfo

  • ログイン画面では、会員アカウントでログインするか、または、会員登録せずに購入手続きへ進むかを選択できます。
    会員アカウントでログインした場合、次の配送先情報入力画面で登録済みの情報が自動で入力された状態になっています。

    sample ec consumer buy product login

  • 配送先情報を入力し、「上記の届き先に送る」ボタンをクリックします。
    配送先情報入力画面には、Bean Validation機能が組み込まれており、入力値に対するバリデーションが行われます。

    sample ec consumer buy product input shippinginfo

  • 前画面で入力した配送先情報を確認できます。
    「編集」ボタン、または、「配送先入力画面に戻る」ボタンをクリックすると、配送先情報を編集することができます。
    「注文する」ボタンをクリックすると、注文処理が実行されます。

    sample ec consumer buy product confirm shippinginfo

  • 注文処理が正常に完了した場合、注文完了画面に遷移します。
    新規注文が登録された場合、注文処理ワークフローが自動で起動します。 運営者は、管理画面でワークフローで振り当てられたタスクに対する操作が行えます。
    「ホーム画面に戻る」ボタンをクリックすると、ECサイトのTop画面に遷移します。

    ※ ワークフロー起動はEnterprise Editionの機能です。

    sample ec consumer buy product ordersuccess

お問い合わせの登録

  • 一般消費者向け(ECサイト)画面の下で「お問い合わせ」リンクをクリックすると、お問い合わせ登録画面に遷移することができます。

    sample ec consumer inquiry regist top
  • お問い合わせ内容を入力し、「上記の内容でお問い合わせをする」ボタンをクリックすると、お問い合わせの登録処理が実行されます。
    お問い合わせ登録画面には、Bean Validation機能が組み込まれており、入力値に対するバリデーションが行われます。

    sample ec consumer inquiry regist input
  • お問い合わせ登録処理が正常に完了した場合、お問い合わせ登録完了画面に遷移します。
    新規お問い合わせ情報が登録された場合、お問い合わせ処理ワークフローが自動で起動します。運営者は、管理画面でワークフローで振り当てられたタスクに対する操作が行えます。
    「ホームに戻る」ボタンをクリックすると、ECサイトのTop画面に遷移します。

    ※ ワークフロー起動はEnterprise Editionの機能です。

    sample ec consumer inquiry regist success

会員登録

  • 一般消費者向け(ECサイト)画面の右上で「お会計」ボタンをクリックすると、ログイン画面に遷移します。

    sample ec consumer user regist top
  • ログイン画面で「会員登録をする」ボタンをクリックします。

    sample ec consumer user regist login
  • 会員情報入力画面で会員情報を入力し、「会員規約に同意して登録」ボタンをクリックすると、会員情報確認画面に遷移します。
    会員情報入力画面には、Bean Validation機能が組み込まれており、入力値に対するバリデーションが行われます。

    sample ec consumer user regist input
  • 前画面で入力した会員情報を確認できます。
    「登録」ボタンをクリックすると、会員情報の登録処理が実行されます。

    sample ec consumer user regist confirm
  • 会員情報の登録処理が正常に完了した場合、会員登録完了画面に遷移します。
    ※ ECサイトの画面で登録した会員は、デフォルトで Worker(利用ユーザー) に属するユーザーとして登録されます。
    ※ ローカルの開発環境で送信されたメールの中身を確認したい場合、ユーザーについてを参照してください。

    sample ec consumer user regist success

商品検索

商品のキーワード検索ができます。
※ デフォルトの設定では商品検索に必要な全文検索機能が有効化されていません。全文検索機能を有効化するためには、全文検索についてを参照してください。

  • 一般消費者向け(ECサイト)画面の下で「検索」リンクをクリックすると、商品検索画面に遷移することができます。

    sample ec consumer fulltext search top
  • キーワードを入力し、「検索」ボタンをクリックすると、キーワードにマッチした検索結果の一覧が表示されます。

    sample ec consumer fulltext search input
  • 検索結果一覧

    sample ec consumer fulltext search result

3.2. 運営者向け(管理)画面

運営者向けの管理画面は以下のiPLAss標準機能を利用して作られています。

  • エンティティの汎用データ操作画面

  • 管理画面へのカスタムテンプレートの組み込み
    Admin Consoleの共通設定の一括更新画面の章を参照してください。

  • Calendar機能
    Admin Consoleの共通設定のCalenderの章を参照してください。

  • TreeView機能
    Admin Consoleの共通設定のTreeViewの章を参照してください。

  • EntityListing機能

  • Aggregation機能

  • Dashboard機能

  • Workflow機能

    Enterprise Edition機能の追加パッケージのWorkflowの章を参照してください。

  • SavedList機能

Admin Consoleで作成されたカスタムの機能を各ロールのメニューに組み込む形になっています。
マネージャー用メニューを例として説明します。

マネージャー用メニュー

EC基本情報管理
  • ショップ情報管理

  • 特定商取引法

  • 支払方法設定

  • 会員規約

EC商品管理
  • 商品
    商品画面のカスタマイズ(検索結果の一括更新機能の有効化)
    Admin Consoleの共通設定の検索結果の一括更新機能の章を参照してください。

  • カテゴリ

  • 商品サブ情報

  • 在庫一括更新
    Admin Consoleの共通設定の一括更新画面の章を参照してください。

注文管理
  • 注文

  • 注文明細

  • 注文明細カスタム検索

    Enterprise Edition機能の追加パッケージのEntityListingの章を参照してください。

  • 請求

  • 売上集計

    Enterprise Edition機能の追加パッケージのDashBoardの章を参照しください。

お問合せ管理
  • 新着情報

  • お問い合わせ

  • お問い合わせ状況

    Enterprise Edition機能の追加パッケージのクロス集計の章を参照してください。

権限情報管理
  • ロール

  • Action権限

  • WebApi権限

  • Entity権限

  • Workflow権限

  • Cube権限

基本情報管理
保存リスト

Enterprise Edition機能の追加パッケージの保存リストを参照してください。

4. サンプルアプリのグローバル設定

4.1. ユーザーについて

  • サンプルは3つのグループ(≒ロール)によって機能を分けています。

    1. マネージャー (「EC01(マネージャー001)」グループ)

      このグループで管理画面が参照できるように親グループを GemUser に指定する必要があります。
    2. オペレーター (「EC01(オペレーター001)」グループ)

      このグループで管理画面が参照できるように親グループを GemUser に指定する必要があります。
    3. 利用ユーザー (「 EC01(利用ユーザー001)」グループ)

      利用ユーザーは管理画面を参照することができないので、親グループを GemUser に指定する必要はありません。
  • 各グループによって実行可能な権限などをあらかじめ登録してあります。実際に各グループの権限によってどのように挙動が変わるのかを確認したい場合は、それぞれのグループに属するユーザーを登録してください(サンプルアプリ用のメタデータとEntityデータををインポートしたタイミングでは、ユーザー情報は登録されません)。

  • iPLAssセットアップで入力したテナント管理者ユーザーで管理画面にログインし、マネージャーとオペレーターグループの親グループを GemUser に変更します。変更を反映するために、一度ログアウトして再ログインしてください。

    鉛筆マークの「編集」アイコンをクリックします。

    sample ec usergroup edit

    該当グループの親グループを GemUser に指定し、「保存」ボタンをクリックします。

    sample ec usergroup detail

    「EC01(マネージャー001)」グループと「EC01(オペレーター001)」グループの親グループが GemUser になっていることを確認します。

    sample ec usergroup list
  • ローカルの開発環境での実行時にユーザーを新規登録したい場合、仮パスワードの送信メールがログに出力できるように src/main/resouces/mtp-service-config.xml に以下の設定を追加してください。

        <service>
            <interface>org.iplass.mtp.impl.mail.MailService</interface>
            <!-- ■ for develop only (additional="true) ■ -->
            <!-- 送信メールをデバッグ出力する場合、以下を有効にしてください。 -->
    
            <property name="listener" class="org.iplass.mtp.mail.listeners.LoggingSendMailListener" additional="true"/>
    
        </service>

    実行例

    15:56:17.038 [http-nio-8080-exec-9] DEBUG 26 907 gem/generic/detail/InsertCommand  o.i.m.m.l.LoggingSendMailListener -   From:test@contract.dentsusoken.com ReplyTo:test@contract.dentsusoken.com To:(1)NewUser001@test.co.jp; Cc:(0) Bcc:(0) Subject:【testTenant】ユーザー登録のお知らせ FileName: PlainMessage:新規ユーザー001様  testTenantに「新規ユーザー001」様のユーザー登録が行われました。  ユーザーIDと仮パスワードが発行されましたので、下記URLからtestTenantにアクセスし、 パスワードの登録作業を実施して下さい。     URL: XXXXXXXX    ユーザーID: NewUser001    ユーザー名: 新規ユーザー001    仮パスワード: i7~n.5,!  ===================================================================== □ 本メールにお心当たりが無い方へ  本メールは、testTenantにてユーザー登録を頂いたお客様にお送りしています。 このメールにお心当たりのない場合は、お手数ですが下記、アドレス (送信元アドレス)までご連絡下さい。    testTenant事務局     =====================================================================  送信元:株式会社 電通総研 COPYRIGHT 2011 DENTSU SOKEN INC. ALL RIGHTS RESERVED. HtmlMessage:
    15:56:17.038 [http-nio-8080-exec-9] DEBUG 26 907 gem/generic/detail/InsertCommand  o.i.mtp.impl.mail.MailServiceImpl - send mail flag of tenat configration is off, so don't send mail.

4.2. 多言語対応について

  • 多言語対応を有効化するためには以下の操作を行う必要があります。
    ※カレンダー、集計にて一部多言語対応されていない部分があります。

    • Admin Consoleのテナント情報の設定で、多言語利用を「利用する」、利用可能言語で「日本語」と「English」を選択して保存します。
      ※ Java/JSP版とVue.js/WebAPI版の場合、多言語利用に設定が必要です。
      ※ Groovy/GroovyTemplate版の場合、テナント情報のメタデータがPackaging機能を利用してインポートされるため、多言語利用に設定は不要です。

      sample ec admin console tenant multilang
    • 多言語の利用
      下図のように言語選択がメニューに表示されます。言語を選択後、新たに遷移した画面から選択言語が有効になります。

      sample ec mantainance top page multilang sel
  • 管理者向けのTop画面(英語版)

    sample ec mantainance top page en
  • 一般消費者向けのTop画面(英語版)

    sample ec consumer top page md width en

4.3. 全文検索について

  • 管理画面で利用可能です。詳細な利用方法は開発者ガイドの全文検索の章を参照ください。

    sample ec mantainance top page fulltext search

    プルダウンでエンティティを選択すると選択したエンティティを対象に、選択しない場合はクロール対象となっている全エンティティを対象に、全文検索を実施します。

    sample ec mantainance top page fulltext search result
  • 一般消費者向け画面で全文検索を利用したい場合、 Containsクラス を利用している箇所のソースコードのコメントを外し、関連するJavaパッケージをインポートしてください。

    ファイル名

    /src/main/java/samples/ec01/command/search/FulltextSearchCommand.java

    public class FulltextSearchCommand implements Command {
        ......
        public String execute(RequestContext request) {
            String productName = request.getParam(PARAM_PRODUCT_NAME);
            String categoryOid = request.getParam(PARAM_CATEGORY_OID);
    
            List<Product> productList = null;
            Condition cond = null;
            String[] properties = new String[] { Product.OID, Product.NAME, Product.PRODUCT_IMG, Product.PRICE };
            if (ALL.equals(categoryOid) == false) {
                // ※ Containsを使いたい場合は、全文検索機能を設定し、有効化する必要があります。
                // cond = new And(new Contains(productName),
                //                new Equals(PRODUCT_CATEGORY_OID, categoryOid)); (1)
                cond = new And(new Like(Product.NAME, productName, MatchPattern.PARTIAL),
                               new Equals(PRODUCT_CATEGORY_OID, categoryOid)); (2)
            } else {
                // ※ Containsを使いたい場合は、全文検索機能を設定し、有効化する必要があります。
                // cond = new Contains(productName); (1)
                cond = new Like(Product.NAME, productName, MatchPattern.PARTIAL); (2)
            }
            productList = EntityDaoHelper.searchDistinctEntity(Product.DEFINITION_NAME, cond, properties);
            if (productList.size() > 0) {
                // 実行結果をdefaultResultとしてセットする
                request.setAttribute(RESULT_DEFAULT_RESULT, productList);
            }
    
            return Constants.CMD_EXEC_SUCCESS;
        }
        ......
    }
    1 コメントを外します。
    2 コメントアウトします。

5. サンプルアプリの実装

一般消費者向け(ECサイト)画面の実装は3つのパターンを用意しています。 それぞれ、Java/JSP、Groovy/GroovyTemplate、Vue.js/WebApiを利用して独自に実装しています。