Skip to main content

モバイルアプリ体験デザインにおける追加タスク

このコンテンツでは、モジュールチャレンジで取り上げていない手順について説明します。 認定試験には、これらのタスクに関する問題が含まれる場合があります。

モバイルリストページのオーサリング

Pega Communityのロゴ

注: 次のコンテンツはPega Documentationを参照したページで、モジュール内容の理解度を高める目的で含まれています。

アプリケーションのコンテンツをモバイルリストページとして表示することで、モバイルアプリのユーザーインターフェイスの応答性と読み込み時間が改善されます。 このようにネイティブ画面のデフォルトでヘッダーに検索バーを設置し、画面が流れるようにアプリケーションを拡張できます。

たとえば、Lodgingカテゴリーのすべての経費を表示するネイティブリストページを作成できます。 アプリケーションを使用するマネージャーは、特定の従業員名を検索して、その従業員のすべての宿泊費を含む結果を取得できます。

始める前に:

リストページのフレームワークを準備します。
  • アプリのモバイルチャネルを作成します。 詳細については、「Setting up mobile apps」を参照してください。
  • ページ画面の入力に使用できるケースタイプがあることを確認します。 たとえば、経費報告用のケースタイプを作成します。 詳細については、 「ケースタイプ」を参照してください。
  • ユーザーがリストアイテムに対して実行するカスタムスワイプアクションを追加する場合は、 最初にケースワイドアクションを設定します。 詳細については、「Adding optional actions to cases」を参照してください。

リストページでは、規定的なローコードオーサリングを行い、 Pegaアプリケーションのケースタイプを活用できます。 その後、アプリケーションがモバイルデバイスでケースタイプのデータを表示する方法を微調整することができます。
ヒント:オフライン対応のケースタイプを使用してモバイルリストページを作成し、 そのリストページをアプリケーションのナビゲーションに追加すると、自動パッケージ化 プロセスにより、リストページが参照するすべてのケースが利用可能 になるように保証されます。 アプリケーションでケースタイプの オフラインサポートを有効にする方法の詳細については、「オフライン対応のモバイルアプリでのケース処理の有効化」を参照してください。

  1. モバイルチャネルを開く:
    1. App Studioのナビゲーションペインで、 「Channels」をクリックします
    2. 「Current channel interfaces」セクションで、 アプリのモバイルチャネルを示すタイルをクリックします。
  2. モバイルチャネルのページで、「Content」タブの 「List pages」のカテゴリーをクリックします。
  3. 「Add」をクリックして、新しいリストページを作成します。
  4. 「Edit page」セクションで、 「Page name」フィールドにリストページの名前を入力します。
  5. オプション: モバイルリストページのデフォルトのアイコンを変更するには、イメージカタログから アイコンを選択します。
    1. 「Page name」フィールドのとなりの現在のアイコンをクリックします。
    2. 「Icon class picker」ウィンドウで、使用するアイコン を選択します。
  6. 「Case type」リストで、ビジネスプロセスを サポートするケースタイプを選択します。

    たとえば:

    ユーザーがさまざまなカテゴリー (Lodgingカテゴリーなど)で経費をサブミットするリストページの場合、Expense Reportケースタイプを選択します。
  7. 「Data page」リストで、ページ画面に入力するために使用する リストデータソースを選択します。

    たとえば:

    Lodging カテゴリーのすべてのExpense Reportを保存するデータビューを選択します。
    メモ:ケースタイプを作成すると、Pega Platform はモバイルリストページで使用できるリストデータソースを自動的に作成します。
  8. 「List item information」セクションで、 ページにワークアイテムを表示する方法を設定します。
    選択肢手順
    ワークアイテムにフィールドを追加する
    1. 「List item information」セクションで、 「Add field」をクリックし、フィールドタイプを選択します。
    2. フィールドのとなりのリストで、実行時にフィールドにデータを入力するために使用するプロパティを選択します。
    ワークアイテムからフィールドの削除 「List item information」セクションで、 削除するフィールドのとなりの「Delete this row」アイコンをクリックします。

    たとえば:

    次のフィールドとproperty configurationを使用して、 Expense Reportページを表示できます。
    • Primaryフィールドで、 レポートの名前を定義するLabelプロパティを 選択します。
    • Secondaryフィールドで、 費用の合計金額を定義するAmountプロパティを選択します。
    • 次のSecondaryフィールドで 経費が提出される日時を定義するCreate Date/Timeプロパティを選択します。
    • 次のSecondaryフィールドには、宿泊費などの経費の カテゴリーを定義するカスタム プロパティを追加します。
    • Statusフィールドで、 レポートのステータスを定義するWork statusプロパティを選択します。
  9. Swipe Actionsセクションでは、実行時に ユーザーが選択したワークアイテムをスワイプしたときに発生する動作を指定します。
    選択肢手順
    右から左へのスワイプアクションの追加 Right side actionsカテゴリーで、 「Add action」をクリックし、 追加するアクションを選択します。
    左から右へのスワイプアクションの追加 Left side actionsカテゴリーで、 「Add action」をクリックし、 追加するアクションを選択します。
    スワイプアクションの削除 削除するアクションのとなりの 「Remove」アイコンをクリックします。
    スワイプアクションの名前変更
    1. 名前を変更するアクションのとなりの 「Click to edit configuration」アイコンを クリックします。
    2. Nameフィールドに、アクションの新しい名前 を入力します。
    3. 「Submit」をクリックします。
    スワイプアクションのアイコンの変更
    1. アイコンを変更するアクションのとなりの 「Click to edit configuration」アイコンを クリックします。
    2. 「Icon」セクションで、 「Change」をクリックします。
    3. 「Icon class picker」ウィンドウで、使用するアイコンを 選択します。
    4. 「Submit」をクリックします。
    アクションのスワイプ方向の変更 選択したアクションを対応するスワイプ方向 カテゴリーにドラッグします。

    たとえば、スワイプ方向を 右から左に変更するには、アクションをRight side actionsカテゴリーにドラッグします。

    スワイプアクションの順序の変更
    メモ:このオプションは、 スワイプ方向に複数のアクションを追加する場合に使用できます。
    選択したアクションをスワイプ 方向リストの上または下にドラッグします。
    ヒント:ページの重要なアクション が画面の端に 最も近い位置に表示されるようにして、 モバイルアプリのユーザーがアイテムにアクセスしやすくします。

    たとえば:

    Expense Reportのあるページの場合、次のようにSwipe アクションを設定できます。
    • Right side actionsカテゴリーに、 Edit detailsアクションを追加して、ユーザーが左にスワイプして 選択したExpense Reportを編集できるようにします。
    • Right side actionsカテゴリーで、 Attach fileケースワイドアクションを追加して、ユーザー が 左にスワイプして選択したExpense Reportに請求書などのファイルを添付できるようにします。
    • Left side actionsカテゴリーに、 Followアクションを追加して、ユーザーが 右にスワイプすることで、選択したExpense Reportに関する通知の受信を 開始できるようにします。
  10. オプション: ユーザーが ボタンをタップしたときに新しいワークアイテムを作成するフローティングアクションボタンを追加するには、「Show create item button」チェックボックスを選択します。
    フローティングアクションボタンは、 モバイルアプリのページの下部に表示されるボタンです。

    たとえば:

    Expense Reportのリストを含むモバイルリストページの場合、フローティング アクションボタンにより新しいExpense Reportが作成されます。
  11. 「Save」をクリックします。

たとえば:

モバイルアプリ開発者がuPlus Expense Reportアプリケーションのリストページを設計します。これにより、 ユーザーは経費をスクロールして、経費ラベルやタイプなどの最も関連性の高い情報を 調べることができます。


ネイティブモバイルリストページを設定するPega Platformビュー。

スワイプアクションとフローティングアクション ボタンを備えたカスタム経費リストページのデザイン

次にすべきこと:

モバイルリストページをメニューバーに追加し、モバイルアプリへの変更を 確認します。 詳細については、「Adding items to the menu bar」および「Previewing mobile apps」を参照してください。

モバイルアプリの画像アセットのカスタマイズ

Pega Communityのロゴ

注: 次のコンテンツはPega Documentationを参照したページで、モジュール内容の理解度を高める目的で含まれています。

デフォルトの画像アセットをカスタムグラフィックのセットに置き換えることで、 モバイルアプリのアイコンを企業やプロジェクトのブランディング要件に合わせることができます。 カスタムアセットを 1つの.zipファイルにまとめてアップロードすると、モバイルアプリの起動時にホーム画面や 起動画面に表示されるアイコンをカスタマイズできます。

始める前に:

モバイルアプリ用モバイルチャネルを作成します。 詳細については、「Setting up mobile apps」を参照してください。

メモ:この手順は以下の場合にのみ実行してください。
  • iOSアプリとAndroidアプリで異なるアイコンを指定する場合。
  • アイコンの画像を、.pngのようにデフォルトのSVG形式以外の形式でアップロードする場合。
  • 推奨されている512×512ピクセル以外の 解像度のアイコン画像をアップロードする場合。
  • Androidアプリで、モバイルアプリのステータスバーに表示するカスタム通知アイコンをアップロードする場合。

上記に該当しない場合は、ローコード環境でモバイルアプリのアイコンと起動画面をカスタマイズしてください。 詳細については、「Customizing the icon and launch screen of mobile apps」をご覧ください。

重要: .zipファイル内のデフォルト画像ファイルを置き換える際には、カスタムアセット.zip ファイルのディレクトリ構造、 ファイル名、および画像のサイズを、デフォルトの.zipファイルの設定と同じにしてください。 カスタムアセット.zipファイルに特定の画像アセットがない場合、モバイルデバイスのOSは、既存のアセットのサイズを変更するか(Android)、不足しているアセットをシステムのデフォルトリソースに置き換えるか(iOS)のどちらかになります。

  1. Pega Mobile Clientのバージョンに合った簡易アセット.zipファイルを ダウンロードします。
    詳細については、「Branding assets templates for Pega Mobile Client」を参照してください。
  2. .zipファイルのコンテンツを展開します。
  3. .zipファイルから展開したフォルダー内の画像アセットを入れ替えて、以下に挙げる画像をカスタマイズすることができます。
    選択肢手順
    モバイルアプリアイコン(iOS)
    1. common_assetsフォルダーのicon.svgファイルを使用したい画像ファイルに置き換えます。
      メモ:モバイルアプリをApple App Storeで公開する予定がある場合は、長方形のアイコンを使用してください。iOSモバイルデバイスでは、 icon.svgファイルのサイズも変更され、モバイルアプリのステータス バーに通知を表示するアイコンとして 使用されます。
    モバイルアプリアイコン(Android)
    1. common_assetsフォルダーのicon.svgファイルを使用したい画像ファイルに置き換えます。
    2. androidフォルダーのicon_round.svgファイルを使用したい画像ファイルに置き換えます。
      メモ:円形のアイコンを使用します。 円形のランチャーアイコン対応型Androidデバイスでは、アプリケーションアイコンとしてicon.svgファイルの代わりにicon_round.svgファイルが使用されます。
    3. androidフォルダーのnotification_icon.svgファイルを 使用したい画像ファイルに 置き換えます。
      Androidモバイルデバイスでは、モバイルアプリの ステータスバーに通知を表示するためにこのアイコンを使用します。
      注:以下の条件を満たすアイコンを 使用してください。
      • 画像フォーマット - 32ビット.png (アルファ付き)
      • 透過画像
      • 透明インデックスカラー - ホワイト(#FFFFFF)
    4. オプション:モバイルアプリでアダプティブアイコンを有効にするには、androidフォルダー内の「icon_background.svg」icon_foreground.svgを使用したい画像ファイルに置き換えます。
      Android OSにおけるアダプティブアイコンの詳細については、Android Developersウェブサイトの「Adaptive icons」の記事を参照してください。
    スプラッシュスクリーンロゴ(iOS、Android) common_assetsフォルダーのsplashlogo.svgファイルを使用したい画像ファイルに 置き換えます。
  4. .zipファイルから展開したフォルダーのうち、カスタムアセットを含むフォルダーを選択して、1つの.zipファイルに圧縮します。
  5. モバイルチャネルを開く:
    1. App Studioのナビゲーションペインで、 「Channels」をクリックします。
    2. 「Current channel interfaces」セクションで、 アプリのモバイルチャネルを示すタイルをクリックします。
  6. モバイルチャネルのページで、Layoutタブの 「Branding」をクリックします。
  7. 「Branding」セクションで、「Configure advanced branding」アイコンをクリックして、「Advanced Branding」チェックボックスを選択します。
  8. 「Upload custom branding file」セクションで、「Choose file」をクリックし、カスタムアセットが含まれる.zipファイルを選択します。
  9. 「OK」をクリックして選択内容を確認します。
  10. 「Save」をクリックします。

結果:

モバイルアプリの実行時に、モバイルチャネルで アップロードした.zipアセットファイルのカスタム イメージアセットが使用されます。

次にすべきこと:

アプリを生成、インストール、起動して、 モバイルアプリの変更を確認します。 詳細については、「Generating native mobile apps」を参照してください。

モバイルアプリケーションのプレビュー

Pega Communityのロゴ

注: 次のコンテンツはPega Documentationを参照したページで、モジュール内容の理解度を高める目的で含まれています。

モバイルアプリの実行可能ファイルを生成する前に、ページやレイアウトがデザインと一致しているか、アプリケーションロジックが予想通りに機能しているかを確認します。 Pega Mobile Previewアプリでモバイルデバイスを使用して、アプリケーション用に設定した モバイルチャネルをプレビューします。Pega Mobile Previewでは、 モバイルアプリのコンテンツにアクセスする前に、証明書を取得したり、実行可能ファイルを生成したりする 必要はありません。

始める前に:

モバイルアプリのプレビューの準備:
  • モバイルチャネルを設定します。 詳細については、「Setting up mobile apps」を参照してください。
  • モバイルデバイスにて、App Store またはGoogle PlayからPega Mobile Previewをダウンロードしてインストールします。

アプリケーション用のモバイルアプリを開発する際には、アプリケーションに影響する変更を行うたびに、モバイル デバイス上でモバイルチャネルをプレビューしてください。 たとえば、ページの追加、レイアウトの変更、 フローの変更などを行った後に、プレビューを生成します。

注意:Pega Mobile Previewを本稼働環境で使用しないでください。 Pega Mobile Previewは、実行可能ファイルを作成するまで、モバイルアプリの開発と テストに役立つ近似ユーザーエクスペリエンスを表示します。 Pega Mobile Previewでは、特定の機能がサポートされていません。たとえば、プッシュ通知は 有効ではなく、カスタム ブランディングアセットは表示されません。

Pega Mobile Preview に追加したモバイルチャネルは30日後に失効します。

  1. App Studioのナビゲーションペインで、 「Channels」をクリックします。
  2. 「Current channel interfaces」セクションで、 変更したいモバイルチャネルに対応するタイルをクリックします。
  3. モバイルチャネル設定ページの右上にある 「Pega Mobile Preview」アイコンをクリックします。


    この画像はモバイルチャネル設定ページの右上にある強調表示されたアイコンを示しています


    モバイルチャネル設定ページのPegaモバイルプレビューアイコン

    結果:

    QRコードが表示された「Preview your application」ペインが表示されます。
  4. モバイルデバイスでPega Mobile Previewを開き、「Start configuring」をタップします。
  5. チャネル定義画面で、利用可能な モバイルチャネルのリストに追加します。
    選択肢手順
    QRコードの読み取り 「Scan the QR code」をタップして、「Preview your application」ペインのQRコードにカメラを向け、リーダーがコードを認識するのを待ちます。
    モバイルチャネルのURLを入力
    1. App Studioのモバイルチャネル設定ページの 「Preview your application」ペインで、「Email instructions」をクリックします。

      結果:

      デフォルトのメールソフトでメールが開きます。
    2. デフォルトのメールソフトを使用して、モバイルデバイスから アクセス可能なメールボックスにメールを送信します。
    3. モバイルデバイスでメールを開き、モバイル チャネルのURLをコピーします。
    4. Pega Mobile Preview「Enter URL manually」をタップし、 モバイルチャネルのアドレスを貼り付けます。
    Activeリストでは、 「Add」アイコンをタップしてチャネルを追加したり、左 右にスワイプしてチャネルを削除したりできます。
  6. Activeリストで、 アクセスするチャネルをタップします。
  7. 認証画面でチャネルにログインします。
  8. モバイルチャネルのテストを行い、モバイルアプリの レイアウトと機能が要件を満たしていることを確認します。
  9. オプション:Pega Platformでモバイルアプリを変更した後にモバイルチャネルを更新するには、チャネルをリフレッシュします。
    選択肢手順
    表示画面をリフレッシュする
    1. 画面に表示されているコンテンツを下にスワイプします。
    モバイルチャネルをリフレッシュする
    1. モバイルチャネルで表示中の画面で 「Back」アイコンをタップします。
    2. Activeリストで、 モバイルチャネル名をタップします。

このトピックは、下記のモジュールにも含まれています。

If you are having problems with your training, please review the Pega Academy Support FAQs.

このコンテンツは役に立ちましたか?

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice