Screen Personas 3.0を活用し、シンプルで楽しいFiori UXを！
•Download as PPTX, PDF•
1 like•683 views
新しくなったScreen Personas について、その概要や技術詳細、具体的な実装方法などをご紹介します。
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Screen Personas 3.0を活用し、シンプルで楽しいFiori UXを！
Similar to Screen Personas 3.0を活用し、シンプルで楽しいFiori UXを！ (20)
More from Accenture Japan
More from Accenture Japan (20)
Recently uploaded
Recently uploaded (10)
Screen Personas 3.0を活用し、シンプルで楽しいFiori UXを！
- 1. 名前 S.K. 会社名 アクセンチュア株式会社 Screen Personas 3.0を活用し、シンプルで楽しい Fiori UXを！ SAP Inside Track 2019 TOKYO SNS投稿 写真撮影 動画撮影 資料公開 ハッシュタグ 〇 〇 × Slide Share #sitTokyo #chillSAP
- 2. Copyright © 2019 Accenture. All rights reserved. 2 AGENDA SAP Fiori UXの選択肢 SAP ScreenPersonas概要 SAP ScreenPersonas技術概要 SAP ScreenPersonasを「やってみた」 参考情報
- 3. Copyright © 2019 Accenture. All rights reserved. SAP Fiori UXの選択肢
- 4. 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つのアプリを抽出
- 5. 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パターン。 新規のビジネスシナリオ既存のビジネスシナリオ
- 6. 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を決定するためのデシジョンツリーも示された。
- 7. Copyright © 2019 Accenture. All rights reserved. SAP Screen Personas 概要
- 8. 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)を ユーザのロールに合わせてシンプル化する。 デスクトップ・タ ブレット・スマー トフォンに適応し たレンダリング。
- 9. 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・・・ ・・ ・・・ ・・・
- 10. Copyright © 2019 Accenture. All rights reserved. SAP Screen Personas 技術概要
- 11. 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を含むこ とができる。
- 12. 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 フレーバーを閲覧・ 登録・共有・削除 テーマを編集 ユーザロールや その他の管理 フレーバーを 編集 スクリプトをレコー ド・生成・デバッグ
- 13. Copyright © 2019 Accenture. All rights reserved. 14 Screen Personas Gallery • すでに作成されたFlavorやTemplateやTheme、その他のリソースをダウンロードできる。 引用10：https://personasgallery-imagineering.dispatcher.us1.hana.ondemand.com/index.html#/?
- 14. Copyright © 2019 Accenture. All rights reserved. SAP Screen Personas を「やってみた」
- 15. Copyright © 2019 Accenture. All rights reserved. 16 「やってみた」① ： SAP Screen Personas でバーコードスキャンし品目照会(MM03)してみた 実装概要 • Web GUIの品目照会画面(MM03)を元に、バーコードスキャンで品目コードを読み取って品目の情 報を表示するFlavorを作成し、 iPhoneにインストールしたSAP Fiori ClientでそのFlavorを実行した。 バーコードスキャ ンボタンを押下 iPhoneのカメラで バーコードを読取 商品情報検索ボタ ンを押下 商品情報が表示さ れる SAP Fiori Clientを起 動
- 16. 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を 選択するだけで使用可能
- 17. 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
- 18. Copyright © 2019 Accenture. All rights reserved. 19 「やってみた」① ： SAP Screen Personas でバーコードスキャンし品目照会(MM03)してみた 実装内容詳細：Script Editor • 「商品情報検索」ボタン押下後に実行されるロジックをScript Editorで編集した（Barcode Scanner起動時のロジックは、Templateに含まれているので実装不要）。 JavaScriptでロ ジックを記述 レコードボタ ンで、画面操 作ロジックを 自動生成 オブジェクト セレクタで、 画面要素を簡 単に取得 今回実装したロジックの概要 ・バーコードスキャン結果を取得 ・品目コード入力欄(非表示)に結果をセット ・「続行」ボタン(非表示)を押下して検索 [画面遷移] ・品目のテキストを取得 ・別タブを押下 [タブ遷移] ・品目の長文テキストを取得 ・戻るボタンを押下 [画面遷移] ・品目のテキスト・長文テキストを画面表示 RPAのように UI操作に関す るロジックを 記述 Script Editor画面
- 19. 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
- 20. 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文も書けるので、細かいエラーハンドリングまで比較的柔軟 に行えそうだと感じた。
- 21. 参考情報
- 22. 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/
- 23. 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/
- 24. Copyright © 2019 Accenture. All rights reserved. Thank you!
Editor's Notes
- それでは、Screen Personasに関する発表を始めます。 この発表は、SNS投稿OK、 写真撮影は、私が写り込まない範囲でスライドだけならOK、 動画撮影はご遠慮ください。 資料公開は、後日SlideShareにて公開可能である見込みです。 ハッシュタグは他の発表と同様、sitTokyo / chillSAPをご使用ください。
- というわけで、本発表のアジェンダです。 私は断然若手の開発者なので、もちろんScreen Personasの概要めいたことも簡単にお話しますが、 比較的技術的な内容、具体的に触ってみて、実装をやってみてどんな感じだったかというところに重点を置いてお話をしようと思います。
- ではまず、SAP Screen Personasの話に入る前に、 Fiori UXの選択肢としてそもそも何があるのかという点について、簡単に前提としてお話します。
- まずそもそもの話として、ご存知の方も多いかと思いますが、 機能ベースのシステムからロールベース・人間中心のUXへという大きな流れが存在します。 SAPの文脈でいえば、さまざまなユーザの用途に対応した機能がリッチで複雑な、従来のクラシックなSAP GUIを使うのではなく、 一人一人のユーザやユーザグループのロールに合わせて、そのユーザ、その従業員にとって使いやすいようなアプリケーションを作成するようにしましょうという流れのことです。
- SAPにおけるFiori UXの理念は、このロールベースのUX、ユーザエクスペリエンスという考え方を含んでいます。 では、具体的にはどのような画面の作り方が提示されているのかというと、TechEd 2019時点ではこの4通りが挙げられていました。 まず左側、 既存のビジネスシナリオ、つまりSAPによってすでに提供されているアプリでまかなえる状況で使用されるべき方法は2つあって、 １つは標準Fioriの活用、もう１つが本日話題にするSAP Screen PersonasのFlavorです。 標準FioriというのはSAP Fiori App Libraryに登録されている、SAP社がすでに提供しているアプリのことで、 ここにあるアプリがすでにその状況において望ましいロールベースの設計になっていれば、それを使用します。 他方で、SAP社によってロールベースで設計された標準Fioriアプリがまだ存在しないGUIのトランザクションも存在します。 そのような画面は従来通りの複雑さを有しているので、こうした画面をシンプル化するのにSAP Screen Personasを活用することができます。 右の2パターンについてはこの発表では扱いませんが、 SAP社によって用意されている標準FioriやGUIのトランザクションでカバーできない範囲のシナリオにおいては、 Fiori Elementを活用してデータソースから画面を生成したり、 カスタムFioriとしてフルスクラッチでアプリを実装することになります。 私はフルスクラッチカスタムFioriをゴリゴリ作るのも個人的には好きなのですが、今日はペルソナの話に的を絞ります。
- こちらの図は、先ほどご説明した話をデシジョンツリーとして整理したものです。
- というわけで、SAP Screen Personasの前提について駆け足ながらもご紹介できたと思うので、 SAP Screen Personasの話題に入っていきたいと思います。
- SAP Screen Personasとは、 比較的歴史の長い技術なのでご存知の方も多いかと思いますが、 既存の複雑なERP画面、具体的にはGUI for HTML いわゆるWeb GUI、デスクトップで使うGUI for WindowsとGUI for Javaを、 ユーザのロールに合わせて、Fioriアプリのようにシンプル化することができます。 具体的には、 画面要素の非表示・再配置によってUIを使いやすくする。 項目に対してデフォルト値やプルダウンメニューを追加して、データを綺麗にする。 トランザクションにおいて繰り返し行われる操作の自動化、 例えば、検索を繰り返すたびにいちいち前の画面に戻って条件を入れ直すのではなく、同じ画面で条件を入れ直してリフレッシュするだけで新しい検索結果が表示できるようにする。 それから、これが比較的新しい点ですが、GUIを元にした画面をデスクトップのみならずタブレットやスマートフォンで操作できるようになりました。 さらに、作成した画面をFiori Launchpadに追加することもできます。
- ちなみに、Screen Personasって別に新しい技術じゃないよ、というのをけっこう会社の先輩方から言われたので、 最近のScreen Personasがどんな風に昔のものと違うのか、簡単にですが調べてみました。 Screen Personas 3.0が出たのが2015年で、ざっくりいうとこれが現在のScreen Personasの原型になっています。 直近の最も大きな転換点は2018年のSlipstream Engineの導入で、 これによって、ざっくりいうと、UIのレイヤーとバックエンドの依存性が最小化され、これによってモバイルデバイスでのレンダリングが可能になり、 また、SAP Fiori Clientを用いた、カメラとか位置情報などのモバイルネイティブ機能との連携が可能になったそうです。 今回のTechEdのアップデートはどちらかというと、かゆいところに手が届く的なアップデートですね。
- それではより技術的な話に移っていきます。
- Screen Personaの主要な技術的概念は主に3つあります。 中心となるのが、Flavor。これは、Screen PersonasによってUI要素をパーソナライズした画面のことです。 1つのトランザクションに対して、複数のFlavorを作成することができます。つまり、SAPGUIのVA05画面1つに対して、Flavorはn個存在できます。 これに対して、Themeというのはよりグラフィカルな一般的な設定で、わかりにくいのかわかりやすいのかわからない言い方をするとCSSみたいなものです。 例えば、Flavorの画面の背景色を一括してその会社のコーポレートカラーにする、みたいな設定ができます。 3つめがTemplateです。 これは、Flavorに含ませることのできるUI要素のセットのことで、 一度登録しておけば繰り返しそのセットの部品を使用できるので、より一貫性のある画面を作成することができます。
- 技術的な機能を大別すると、下記の5つになります。 Flavor Barというのは、Flavorのダッシュボード的なものというか、 Screen Personasへの入り口のようなものです。 Flavor Editorというのは、登録したFlavorを編集する機能です。ここで具体的にUI要素を消したり追加したりします。 Script Editorというのは、その名の通り、Flavorに含まれる画面操作ロジックを記載する機能です。 Themingはテーマの編集、Administrationではユーザロールやその他の管理をします。
- Screen Personasの機能とは別にご紹介しておきたいのは、Screen Personas Galleryです。 これは普通に検索したら誰でもアクセスできるWebページなのですが、 ここからさまざまなFlavor, Template, Themeなどを無料でダウンロードすることができます。 これを活用することで実装工数をだいぶ削減できるのではと思います。
- それではいよいよ「やってみた」コーナーです。
- やってみた1とやってみた2の2つをやってみたのですが、 1つめは私の趣味で、iPhoneのネイティブのカメラでバーコードスキャンをやってみたいなと思ってやってみました。 具体的には、Web GUIの品目照会画面(MM03)を元に、バーコードスキャンで品目コードを読み取って品目の情報を表示するFlavorを作成し、 iPhoneにインストールしておいたアプリSAP Fiori ClientでそのFlavorを実行しました。 ここに実装したFlavorをどのように使うのか、キャプチャを貼ってみたのですが、 まずはSAP Fiori ClientをiPhoneで起動します。 次にバーコードスキャンボタンを押下。 するとiPhoneのカメラが起動するので、そのままバーコードを読み取り。このバーコードが、品目コードの情報を持っています。 読み取りが完了したら、検索ボタンを押下。 検索ボタンを押下すると、MM03画面の検索結果である品目の名称と、ロングテキストが取得され、画面に表示されます。 このキャプチャでは弊社の社内環境にあるとあるDVDの品目情報が表示されていますね。 ここまでの流れで、画面遷移は存在せず、すべて1画面の中で操作は完結しています。 それでは、これをどうやって実装したのかご紹介していきます。
- まずバーコードスキャン部分についてですが、ありがたいことにScreen Persona Galleryにテンプレートが用意されています。 なので、これをダウンロードして、 SAP GUIの、Screen Personaのアドミニ画面からこれをインポートするだけで、 Flavor Editorでこれを選択し、UIパーツとして使用できるようになります。 結構これは拍子抜けするくらい簡単です。
- 次に、Flavor Editorで何をやったかですが、 元々の品目照会画面を元に、画面要素をつけたり消したりしていきます。 今回は元々のヘッダも入力欄もボタンも全部まるまる非表示にして、 代わりにBarcode Scannerと検索ボタン、それから結果表示欄を追加しました。 また、画面タイトルも変更しました。
- さらにScript Editorで、「検索」ボタンを押した時に呼び出されるロジックを書きました。 ちなみに、バーコードボタンを押すとカメラが起動して内容を読み取ってくれる、というロジックはすべてテンプレートに含まれているので、全く実装していません。 で、検索ボタンを押した時に、裏のロジックとしては何が起きているかという話ですが、 皆さんご存知のように、MM03画面は大きく分けると第1画面の検索画面と、第2画面の結果表示画面に分かれていますが、 これをロジックによって統合していきます。 具体的には、まず、画面表示されているバーコードスキャンの結果、つまり品目コードを取得します。 次に、非表示になっている品目コード入力欄にそのスキャン結果をセットします。 それから、非表示になっている「続行」ボタンを押下して、第2画面に遷移します。 ここで、MM03画面ではポップアップ画面がいくつか出てくることがありますが、いい感じにif文やtry-catch文を書いてハンドリングします。 第2画面に遷移したら、品目のテキスト、つまり商品名を取得します。 それからタブ遷移などをして、品目の長文テキストを取得します。 そのあと戻るボタンを押下して、第1画面に戻ります。 最後に、取得したテキストと長文テキストを画面表示します。 このように、ロジックの内容そのものは、すごくRPA的で、シンプルです。 JavaScriptベースでロジックを書くのですが、 Script Editorにはオブジェクトセレクタという機能とレコード機能があって、 オブジェクトセレクタを操作することで然るべきソースが勝手にEditor上に書かれていくし、 レコードボタンを押すと画面操作を勝手にコードにして書いてくれます。 なので、透明性は結構高いのですが、かといってそんなに難しいという感じはしません。
- もう１つだけ、今度は私の趣味ではなく、TechEdで実際に行ったハンズオンについて簡単にご紹介します。 ハンズオンでは、VA05、受注伝票一覧画面をシンプル化し、 また、デスクトップ向けのフレーバーを元に、モバイル向けのFlavorも実装しました。 具体的には、検索画面と結果リスト表示画面を統合、 検索項目を非表示にしてシンプル化し、 また結果の表示されるテーブルの列を一部非表示にしました。 さらに、画面表示された検索結果を元にチャートも表示しました。
- 最後に、Screen Personasをやってみて気づいたことをまとめます。 1点目。これは最初にお話しした点と同様ですが、 ・・・・・・ ・・・・・・
- 最後に参考情報です。
- これはTechEdで紹介された関連リソースですね。 Flavor Galleryは実装の際にはぜひチェックしてください。 openSAPもやってみたいなぁと思っています。
- 最後に、こちらは引用資料の一覧です。
- 以上で終わります。ご静聴いただきありがとうございました〜〜〜