名前 S.K.
会社名 アクセンチュア株式会社
Screen Personas 3.0を活用し、シンプルで楽しい
Fiori UXを！
SAP Inside Track 2019
TOKYO
SNS投稿 写真撮影 動画撮影 資料公開 ハッシュタグ
〇 〇 × Slide
Share
#sitTokyo
#chillSAP

Copyright © 2019 Accenture. All rights reserved. 2
AGENDA
SAP Fiori UXの選択肢
SAP ScreenPersonas概要
SAP ScreenPersonas技術概要
SAP ScreenPersonasを「やってみた」
参考情報

Copyright © 2019 Accenture. All rights reserved.
SAP Fiori UXの選択肢

Copyright © 2019 Accenture. All rights reserved. 4
機能ベースのSAPからロールベースのSAPへ
引用01： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P8
• 機能ベースのシステムから、ロールベース・人間中心のUXへという潮流が存在する。
あらゆるロール・産業・国のユーザが一つのGUIを使用 1ユーザまたは1グループのために1つのアプリを抽出

Copyright © 2019 Accenture. All rights reserved. 5
SAP Screen PersonasのFlavor
標準 Fiori
カスタム Fiori
Fiori Element
SAP Fiori UXの選択肢
引用02： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P11
• TechEd 2019で提示されたFiori UXの主な選択肢は下記の4パターン。
新規のビジネスシナリオ既存のビジネスシナリオ

Copyright © 2019 Accenture. All rights reserved. 6
SAP Fiori UXの選択方法
既存の
ビジネスシナリオか？
既存のFloorplanを
使えるか？
Fiori Apps Library
のアプリを使えるか？
カスタムFiori Fiori Element Screen PersonasでT-
Codeをシンプル化
標準Fiori App
(必要に応じて修正)
YESNO
YES
YES NONO
引用03： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P27
• TechEd 2019では、最適なFiori UXを決定するためのデシジョンツリーも示された。

Copyright © 2019 Accenture. All rights reserved.
SAP Screen Personas 概要

Copyright © 2019 Accenture. All rights reserved. 8
SAP Screen Personasとは
引用04： SAP TechEd 2019, UX265 Bring the Full SAP Fiori User Experience to Your Screens in SAP GUI with SAP Screen Personas , P8
画面要素の
非表示・再配置。
SAP S/4HANAのト
ランザクションを
SAP Fioriの
デザインに変換。
SAP Fiori
Launchpadにタイ
ルとしてFlavorを
追加。
項目に対しデフォ
ルト値やプルダウ
ンメニューを追加。
トランザクション
において繰り返し
行われる操作の
自動化。
• SAP Screen Personasは、既存の複雑なERP画面(GUI for HTML, GUI for Windows, GUI for Java)を
ユーザのロールに合わせてシンプル化する。
デスクトップ・タ
ブレット・スマー
トフォンに適応し
たレンダリング。

Copyright © 2019 Accenture. All rights reserved. 9
SAP Screen Personas の変遷
引用05：https://blogs.sap.com/2015/07/06/sap-screen-personas-30-is-generally-available-including-service-pack-1/
引用06：https://blogs.sap.com/2018/01/16/sap-screen-personas-slipstream-engine-delivers-flavors-on-your-ipad-or-other-mobile-device/
• 2018年のSlipstream Engine導入が直近の大きな転換点だった。
2015 20192018
• アーキテクチャの刷新
(Silverlightへの依存性を無しに)
• SAP GUI for HTMLとの統合
• SAPのロールとの統合
• JavaScriptによる拡張
• Slipstream Engineの導入
• モバイルデバイスでのレンダリング
• SAP Fiori Clientを用いた、カメラ・
位置情報などモバイルネイティブ機
能との連携
• よりスマートなテーブルの表示
• より柔軟なスクリプト
• etc...
・・・ 3.0 SP1 ・・・ 3.0 SP6 3.0 SP9・・・
・・
・・・
・・・

Copyright © 2019 Accenture. All rights reserved.
SAP Screen Personas 技術概要

Copyright © 2019 Accenture. All rights reserved. 12
SAP Screen Personasの主要な技術的概念
引用8：https://help.sap.com/viewer/b6a24c359e2142e3a86ff405f43ba282/3.0.8/en-US/4e9d1fdba35740899786de28e17fbffe.html
• SAP Screen Personasの主要な技術的概念として、Flavor, Theme, Templateが挙げられる。
Flavor
Theme Template
特定のトランザクションの特定のパーソナラ
イゼーションを示す、Screen Personasの基本単
位。1つのトランザクションに対し、無数の
Flavorを作成できる。
任意のFlavorに含めることのできる、視覚的な
設定。1つのFlavorは1つのThemeしか含むこと
ができない。
一貫した見た目のFlavorを作成するための共通
部品。1つのFlavorは、複数のTemplateを含むこ
とができる。

Copyright © 2019 Accenture. All rights reserved. 13
SAP Screen Personasの5機能
引用9：https://help.sap.com/viewer/20993a0c28654a26beb2b63b722d74f2/3.0.9/en-US/0f88d651b65ff53ae10000000a44176d.html
• Screen Personasの機能は下記の5つに大別できる。
Flavor Bar Flavor Editor Script Editor Theming Administration
フレーバーを閲覧・
登録・共有・削除
テーマを編集 ユーザロールや
その他の管理
フレーバーを
編集
スクリプトをレコー
ド・生成・デバッグ

Copyright © 2019 Accenture. All rights reserved. 14
Screen Personas Gallery
• すでに作成されたFlavorやTemplateやTheme、その他のリソースをダウンロードできる。
引用10：https://personasgallery-imagineering.dispatcher.us1.hana.ondemand.com/index.html#/?

Copyright © 2019 Accenture. All rights reserved.
SAP Screen Personas を「やってみた」

Copyright © 2019 Accenture. All rights reserved. 16
「やってみた」① ： SAP Screen Personas でバーコードスキャンし品目照会(MM03)してみた
実装概要
• Web GUIの品目照会画面(MM03)を元に、バーコードスキャンで品目コードを読み取って品目の情
報を表示するFlavorを作成し、 iPhoneにインストールしたSAP Fiori ClientでそのFlavorを実行した。
バーコードスキャ
ンボタンを押下
iPhoneのカメラで
バーコードを読取
商品情報検索ボタ
ンを押下
商品情報が表示さ
れる
SAP Fiori Clientを起
動

Copyright © 2019 Accenture. All rights reserved. 17
「やってみた」① ：SAP Screen Personas でバーコードスキャンし品目照会(MM03)してみた
実装内容詳細：Screen Personas Gallery
• Screen Persona GalleryのTemplate (Barcode Scanner) をダウンロードし、活用した。
Screen Persona GalleryのTemplate
“Barcode Scanner” をダウンロード
SAP GUI T-code /personas/adminよ
り
Templateをインポート
Screen Personasの
Flavor EditorでTemplateを
選択するだけで使用可能

Copyright © 2019 Accenture. All rights reserved. 18
「やってみた」① ： SAP Screen Personas でバーコードスキャンし品目照会(MM03)してみた
実装内容詳細：Flavor Editor
• 品目照会画面(MM03)を元に、Flavor EditorでUIを編集した。使用しないUIコンポーネントを非表
示にし、UIをシンプル化した。また、Barcode ScannerのTemplateや、別画面から取得した情報を
表示するためのUIコンポーネントを追加した。
ヘッダ部分は
非表示
品目コード入
力欄は非表示
フッタ部分は
非表示
Barcode
Scannerを追加
検索ボタンを
追加
商品情報表示
用のテキスト
フィールドを
追加
画面タイトル
を「商品情報
検索」に変更
MM03(品目照会)元画面 MM03画面を元に作成したFlavor

Copyright © 2019 Accenture. All rights reserved. 19
「やってみた」① ： SAP Screen Personas でバーコードスキャンし品目照会(MM03)してみた
実装内容詳細：Script Editor
• 「商品情報検索」ボタン押下後に実行されるロジックをScript Editorで編集した（Barcode
Scanner起動時のロジックは、Templateに含まれているので実装不要）。
JavaScriptでロ
ジックを記述
レコードボタ
ンで、画面操
作ロジックを
自動生成
オブジェクト
セレクタで、
画面要素を簡
単に取得
今回実装したロジックの概要
・バーコードスキャン結果を取得
・品目コード入力欄(非表示)に結果をセット
・「続行」ボタン(非表示)を押下して検索 [画面遷移]
・品目のテキストを取得
・別タブを押下 [タブ遷移]
・品目の長文テキストを取得
・戻るボタンを押下 [画面遷移]
・品目のテキスト・長文テキストを画面表示
RPAのように
UI操作に関す
るロジックを
記述
Script Editor画面

Copyright © 2019 Accenture. All rights reserved. 20
「やってみた」②：SAP Screen PersonasでVA05画面（受注伝票一覧）を使いやすくしてみた
実装概要
• TechEdのハンズオンでは、VA05（受注伝票一覧）画面をScreen Personasによってシンプル化し、
画面上のデータを元にしたチャート表示を行った。また、デスクトップ向けのFlavorを元に、モ
バイル向けのFlavor (Adaptive Flavor)も作成した。
引用13：https://blogs.sap.com/2019/10/07/sap-teched-2019-sap-fiori-ux-summary/
検索画面とリ
スト表示画面
を統合
検索画面の簡
素化（検索項
目を一部非表
示）
リスト表示さ
れた検索結果
を元にチャー
トを表示
ユーザは
チャートの基
準軸となる項
目を選択可能
リスト表示画
面の簡素化
（テーブルの
列を一部非表
示）
VA05画面を元に作成したデスクトップ向けのFlavor

Copyright © 2019 Accenture. All rights reserved. 21
SAP Screen Personas を「やってみて」気づいたこと
 SAP Screen Personas を使うべきシチュエーションは、
• SAP GUI画面のUI要素をユーザのロールに合わせてシンプル化または変更したい場合や、
モバイルやタブレットで画面を使用したい場合。
• なおかつ、使用したい画面が標準Fioriとして用意されていない場合。
 SAP GUIがあれば、SAP Screen Personasを使うために追加ライセンスは不要なので、SAP
GUIが中心の現場でも気軽にFiori UXを開始することができる。
 Screen Personas Galleryにはすぐに使える部品が充実しているので、積極的に活用すべき。
 SAP Screen Personas を実装するためにはJavaScriptスキルがある方が良いが、Script Editor
にはオブジェクトセレクタやレコード機能もあるので、コーディングの深い知識はあまり求
められない。
 SAP Screen Personasの良いところは、実装が手軽でありながらもかなり柔軟である点。
Script Editorではif文やtry-catch文も書けるので、細かいエラーハンドリングまで比較的柔軟
に行えそうだと感じた。

参考情報

Copyright © 2019 Accenture. All rights reserved. 23
SAP Screen Personas 関連リソース
引用XX： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P31
http://link.personas.help/PractitionersForum/Signup
http://link.personas.help/SAPScreenPersonasFlavorGallery
https://open.sap.com/courses/sps2
https://open.sap.com/courses/sps3
https://open.sap.com/courses/sps4
https://wiki.scn.sap.com/wiki/display/Img/SAP+Screen+Personas+
Product+Support
https://www.sap-press.com/using-sap-screen-personas_3975/
http://www.sapscreenpersonas.com/

Copyright © 2019 Accenture. All rights reserved. 24
引用資料一覧
 引用01： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P8
 引用02： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P11
 引用03： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P27
 引用04： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P20, 21
 引用05： SAP TechEd 2019, UX104 Building SAP Fiori Apps Quickly and Simply , P22
 引用06： SAP TechEd 2019, UX265 Bring the Full SAP Fiori User Experience to Your Screens in SAP GUI with
SAP Screen Personas , P8
 引用07：https://blogs.sap.com/2015/07/06/sap-screen-personas-30-is-generally-available-including-service-pack-
1/
 引用08：https://blogs.sap.com/2018/01/16/sap-screen-personas-slipstream-engine-delivers-flavors-on-your-ipad-
or-other-mobile-device/
 引用09：https://help.sap.com/viewer/e9aec5d380204249836a4fc3fc76f38e/3.0.9/en-
US/3809246c590746c3a0e0ac47b0163384.html
 引用10：https://help.sap.com/viewer/b6a24c359e2142e3a86ff405f43ba282/3.0.8/en-
US/4e9d1fdba35740899786de28e17fbffe.html
 引用11：https://help.sap.com/viewer/20993a0c28654a26beb2b63b722d74f2/3.0.9/en-
US/0f88d651b65ff53ae10000000a44176d.html
 引用12：https://personasgallery-imagineering.dispatcher.us1.hana.ondemand.com/index.html#/?
 引用13：https://blogs.sap.com/2019/10/07/sap-teched-2019-sap-fiori-ux-summary/

Copyright © 2019 Accenture. All rights reserved.
Thank you!