Skip to main content

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

次の関連タスクは、このモジュールに付随するチャレンジではカバーされていません。 このコンテンツを確認してください。このコンテンツでは、さまざまなユースケースを示し、これらの追加タスクを完了するための手順を説明しています。 これらのタスクは認定の対象です。 試験では、これらのタスクに関する問題が出題される場合があります。

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

Pega Communityのロゴ

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

アプリのコンテンツをモバイルリストページとして表示することで、モバイルアプリのユーザーインターフェイスの応答性とロードタイムを向上させます。 この方法では、スムーズなトランジションとデフォルトでヘッダーに検索バーを備えたネイティブ画面でアプリを強化します。

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

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

リストページの規定のローコードオーサリングでは、Pega アプリケーションのケースタイプを利用します。 その後、アプリケーションがモバイルデバイスでケースタイプのデータを表示する方法を微調整することができます。

補足: オフライン対応のケースタイプを使用してモバイルリストページを作成し、そのリストページをアプリのナビゲーションに追加すると、自動パッケージングプロセスにより、リストページが参照するすべてのケースがオフラインモードで使用できるようになります。 アプリでケースタイプのオフラインサポートを有効にする方法の詳細については、「Enabling case processing in offline-enabled mobile apps」を参照してください。
  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」のリストで、ビジネスプロセスをサポートするケースタイプを選択します。

    例: ユーザーが宿泊カテゴリーなどの異なるカテゴリーの経費を提出するリストページの場合は、経費報告のケースタイプを選択します。
  7. 「Data page」のリストで、ページ画面の入力に使用するリストデータソースを選択します。

    例: 宿泊カテゴリーのすべての経費報告を保存するデータビューを選択します。
    補足: ケースタイプを作成すると、Pega Platform は自動的にリストデータソースを作成し、モバイルリストページで使用できるようになります。
  8. 「List item information」セクションで、ページがワークアイテムをどのように表示するかを設定します。

    選択肢 手順
    ワークアイテムにフィールドを追加する
    1. 「List item information」セクションで、「Add field」をクリックして、フィールドタイプを選択します。

    2. フィールドの横にあるリストで、実行時にフィールドを入力するために使用するプロパティを選択します。

    ワークアイテムからフィールドの削除 「List item information」セクションで、削除したいフィールドの横にある「Delete this row」アイコンをクリックします。
    例: 以下のようなフィールドとプロパティの設定で、経費報告のページを表示することができます。
    • 「Primary」フィールドでは、レポート名を定義する「Label」プロパティを選択します。
    • 「Secondary」フィールドでは、支出の合計金額を定義する「Amount」プロパティを選択します。
    • 次の「Secondary」フィールドでは、経費が提出された日時を定義する「Create Date/Time」プロパティを選択します。
    • 次の「Secondary」フィールドには、宿泊などの支出のカテゴリーを定義するカスタムプロパティを追加します。
    • 「Status」フィールドには、レポートのステータスを定義する「Work status」プロパティを選択します。
  9. 「Swipe actions」セクションでは、実行時にユーザーが選択したワークアイテムをスワイプしたときの動作を指定します。

    選択肢 手順
    右から左へのスワイプアクションの追加 「Right side actions」カテゴリーで、「Add action」をクリックして、追加するアクションを選択します。
    左から右へのスワイプアクションの追加 「Left side actions」カテゴリーで、「Add actions」をクリックし、追加したいアクションを選択します。
    スワイプアクションの削除 削除したいアクションの横にある「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」のカテゴリーにドラッグします。

    スワイプアクションの順序の変更
    補足: このオプションは、スワイプ方向に複数のアクションを追加した場合に使用できます。
    選択したアクションをスワイプ方向リストの上または下にドラッグします。
    補足: ページにとってより重要なアクションが画面の端に最も近い位置に表示されるようにすることで、モバイルアプリのユーザーがアイテムにアクセスしやすくなります。
    例: 経費報告書があるページの場合、以下のようなスワイプアクションを設定できます。
    • 「Right side actions」で、「Edit details」アクションを追加して、ユーザーが左にスワイプして選択した経費報告を編集できるようにします。
    • 「Right side actions」カテゴリーで、「Attach file」ケースワイドアクションを追加し、ユーザーが左にスワイプすることで、選択した経費報告に請求書などのファイルを添付できるようにします。
    • 「Left side actions」カテゴリーに「Follow」アクションを追加して、ユーザーが右にスワイプすることで、選択した経費報告に関する通知の受信を開始できるようにします。
  10. オプション:

    ユーザーがボタンをタップすると新しいワークアイテムを作成するフローティングアクションボタンを追加するには、「Show create item button」のチェックボックスを選択します。

    フローティングアクションボタンは、モバイルアプリのページの下部に表示されるボタンです。
    例: 経費報告書のリストがあるモバイルリストページの場合、フローティングアクションボタンで新しい経費報告書を作成します。
  11. 「Save」をクリックします。

例: モバイルアプリ開発者が、uPlus経費報告アプリのリストページをデザインし、ユーザーが経費をスクロールして、経費のラベルやタイプなどの最も関連性の高い情報を調べることができるようにします。
スワイプアクションとフローティングアクションボタンを備えたカスタム支出リストページのデザイン
補足: モバイルリストページをメニューバーに追加してから、モバイルアプリの変更を確認してください。 詳しくは、「Adding items to the menu bar」および「Previewing mobile apps」を参照してください。
  • Cosmos Reactアプリケーションのモバイルケースページのオーサリング

    ローコードオーサリング環境でケースページをカスタマイズして、最も関連性の高い情報を1つのユーザーフレンドリーなモバイルビューでハイライトします。 このようにして、ユーザーがモバイルデバイスでケースを効率的に表示および編集できるようにします。

  • 検索ガジェットの追加

    検索機能を設定して有効にすることで、モバイルアプリの使い勝手が向上します。 検索範囲を特定のケースタイプに限定することで、より関連性の高い検索結果を保証し、検索速度が向上します。

  • フローティングアクションボタンの追加

    モバイルアプリにフローティングアクションボタンを追加して、ページ上の最も重要なアクションを促進します。 たとえば、経費報告のモバイルアプリで新しい経費報告書を作成するケースフローを開始するフローティングアクションボタンを追加できます。

  • メニューバーへの項目の追加

    メニューバーにページやアクションを追加して、モバイルアプリに効果的なナビゲーションエクスペリエンスをもたらせます。 たとえば、ユーザーが基本的な連絡先情報のある画面に簡単にアクセスできるように、カスタムプロフィールページを経費報告アプリのメニューバーに追加できます。

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

デフォルトの画像アセットをカスタムグラフィックのセットに置き換えることで、モバイルアプリのアイコンを企業やプロジェクトのブランディング要件に合わせることができます。

カスタムアセットを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 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 me instructions」をクリックします。

      補足: デフォルトのメールソフトでメールが開きます。
    2. デフォルトのメールソフトを使用して、モバイルデバイスからアクセス可能なメールボックスにメールを送信します。

    3. モバイルデバイスでメールを開き、モバイルチャネルのURLをコピーしてください。

    4. Pega Mobile Previewで「Enter URL manually」をタップし、モバイルチャネルのアドレスを貼り付けます。

    「Active」リストでは、「Add」アイコンをタップしてチャネルを追加したり、左右にスワイプしてチャネルを削除したりすることができます。
  6. 「Active」リストで、アクセスするチャネルをタップします。

  7. 認証画面でチャネルにログインします。

  8. モバイルチャネルのテストを行い、モバイルアプリのレイアウトと機能が要件を満たしていることを確認します。

  9. オプション:

    Pega Platformでモバイルアプリを変更した後にモバイルチャネルを更新するには、チャネルをリフレッシュします。

    選択肢 手順
    表示画面をリフレッシュする
    1. 画面に表jされているコンテンツを下にスワイプします。

    モバイルチャネルをリフレッシュする
    1. モバイルチャンネルで表示中の画面で「Back」アイコンをタップします。

    2. 「Active」リストで、モバイルチャネル名をタップします。

    トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: Pega Academy サポートのよくある質問 (FAQ).

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

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

    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