SAP Fioriのコンセプトとそれを実現する技術

作成者:濱田 祥利投稿日:2015年8月7日

  • このエントリーをはてなブックマークに追加

こんにちは。SAPジャパンの濱田です。前回書いた記事では、SAPの新しいユーザーインターフェースであるSAP Fioriと従来のSAP GUIとの違いについて、主にデジタルネイティブ(1990年生まれ)なユーザーとしての視点で、いかにSAPのインターフェースがシンプルに使いやすくなったかを説明しました。今回はそのインターフェースを支える技術的な側面について説明したいと思います。

画面設計における方針転換

技術的な話をする前にまず、その技術を採るにいたったSAP Fioriのキーコンセプトについて説明します。それは一言で言うと、「機能中心からユーザー中心へのシフト」です。別の言い方をすると、システム屋目線ではなく、完全なユーザー目線で画面を設計するという方針転換です。実はこの方針転換、SAPのソフトウェア開発のあり方を変えるほど大きな変更でした。

過去SAPは業務プロセスを第一としてソフトウェア開発を行ってきました。(SAPをご存知の方は「SAP=ベストプラクティス(細かく細分化された業務)」の印象をお持ちの方もいると思います)。企業の業務プロセスを把握し、ワンファクト・ワンプレース(事実はひとつだけであり、その事実が1カ所に記録されている状態)を実現するデータモデルを設計し、機能を設計し、そして最後に機能に対応した画面を設計してきました。

SAP Fioriにおいては、そのようなソフトウェア開発のプロセスが大きく異なっています。 これまで最後に行ってきた画面の設計を最初に行い(その際にデザインシンキングという手法を用いる)、業務担当者の業務の進め方を観察し、業務担当者の行動と気持ちを理解し、業務を進める手順に沿って画面をデザインします。そしてその画面で必要となる機能を組合せていきます。SAP Fioriにおいては、そのようなソフトウェア開発の流れになっています。

デザインシンキングは、近年SAPが推進している活動の一つであり、モノやサービスの利用者への共感(Sympathy)に基づいてアイデアを生み出す手法です。具体的には、企業内の典型的なロールにおいて行われる業務を、それぞれ実際の業務手順という細かいレベルで把握し、それに沿ったレイアウトやコントロールの配置、画面遷移などの設計をしました。これを実際の顧客と共同で行い、画面設計のプロトタイプを何度も作ってはレビューを行うことで、ユーザーが流れるように業務を行えるように画面を練り上げました。

 

SAP Fioriを支える技術

「ユーザー中心」のコンセプトを実現するために、上記のような設計方針を見直しただけでなく、技術面も大きく進化させています。現在、SAP Fioriでは以下のような技術を採用しています。

  1. レスポンシブデザイン
  2. 画面とサーバー側のABAPプログラムの分離(SAP Gateway、OData)
  3. オープン系の技術(HTML5、JavaScript、CSS)
  4. 開発のためのライブラリーと統合環境(SAPUI5、SAP WebIDE)

以下でそれぞれについて解説します。

 1. レスポンシブデザイン

SAP Fioriはレスポシブデザインという技術を採用し、単一のコードでスマートフォンやタブレット、PCなど異なるサイズのデバイスに画面が自動で対応するようになっています。それゆえユーザーはデバイスを選ばずにシステムを利用できます。例えば社内ではPC、社外ではモバイル、それを同一の画面で利用することができます。また、それぞれのデザインはマウスでも指先でも操作できるよう工夫されています。画面開発を行う際も、1つ画面を作ればどのようなデバイスでも利用できるため、画面開発の生産性が向上します。

 2. 画面とサーバー側のABAPプログラムの分離

SAP Fioriの画面にはオープンなWeb技術を採用しています。一方バックエンドサーバー側のSAP ERPはABAPでプログラムが組まれています。画面を自由に変更したい際など、ABAPの技術を知らなくても画面を開発できるよう、画面とバックエンドサーバーを分離しているのです。その間の通信は、オープン技術であるODataを利用しています。 SAP ERPの通信プロトコルであるRFCをODataに変換するためにSAP Gatewayを、SAP HANAではODataを生成するためにXS Engineを提供しています。 この2つのモジュールにより、バックエンドの固有な仕組みを意識することなく、画面開発を行うことができるようになっています。また、SAP ERPやSAP HANAなど複数のバックエンドを利用することができるようになっています。

 3. オープン系の技術(HTML5、JavaScript、CSS)

SAP Fioriの画面はHTML5、JavaScript、CSSを利用しています。SAPではすでに500を超えるSAP Fioriの画面を提供しており、ユーザー自身でパーソナライズすることもできます。ユーザー中心を実現するには、さらに新しい画面を作ることもあると思います。オープン技術を採用したことにより、より多くの技術者が画面開発をすることができますし、継続的に最新の画面技術を利用することもできます。

4. 開発のためのライブラリーと環境(SAPUI5、SAP WebIDE)

SAPでは、SAP Fioriの画面を迅速に開発・拡張するためのツールを提供しています。開発のライブラリーとしてはSAPUI5を提供しており、これを利用することで、SAP Fioriのデザインガイドラインに沿ったアプリケーションを迅速に開発することができます。また、SAP WebIDEはSAPUI5を用いたSAP Fioriアプリケーションの開発環境です。SAP WebIDEは、弊社が提供しているSAP HANA Cloud Platformのサービスの一つであり、SaaSの形態で提供されています。

SAP WebIDEに相当する従来のツールとしてはEclipseなどが存在しますが、それに比べSAP WebIDEでは開発効率を最大化するための機能が豊富に用意されています。たとえば、専用のSDKやプラグインのインストールが不要なことはもちろん、既存のテンプレートを利用した開発や、ドラッグ&ドロップでの画面開発(コードによる開発ももちろん可能です)、Gitによるバージョン管理、迅速なテストも可能ですし、デプロイも開発環境内から直接行うことができます。アプリケーションの開発・拡張からテスト、デプロイまでの期間を大幅に短縮することができます。

これまでご紹介したような技術やツールは「ユーザー中心」を実現するために備えました。SAPはSAP Fioriの導入にあたってもデザインシンキングを、特にシステムのエンドユーザーと共に行うことを推奨しています。それによってSAP Fioriをそのまま利用するのか、あるいはどのような機能がどのようなレイアウトで必要となるのか、つまりどこを拡張すべきかを決めることができます。

Picture1

 

以上、技術的な側面からSAP Fioriについてご紹介させていただきました。SAP Fioriは従来のSAPインターフェース設計の方針を大きく転換して作られており、それをささえる技術やツールも大幅に変更を行っています。そしてこのユーザーインターフェースの革新が目指すのはユーザーとシステムのよりシンプルな関係です。

次回はさらにSAP Fioriの開発、拡張についてご紹介する予定です。最後までお付き合いいただきありがとうございました。

技術情報の詳細などについては以下を参照下さい。

All Things SAP Fiori(SAP Community Network、英語)
http://scn.sap.com/docs/DOC-41598

SAP Fiori Apps Reference Library(Fioriアプリケーション一覧、英語)
https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detailInfo

SAPUI5(英語)
https://sapui5.hana.ondemand.com/sdk/#content/Overview.html

SAP WebIDE – SAP Store(英語)
https://www.sapstore.com/solutions/60009/SAP-Web-IDE

ご質問はチャットWebからも受け付けております。お気軽にお問い合わせください。

●お問い合わせ先
チャットで質問する
Web問い合わせフォーム
電話: 0120-554-881(受付時間:平日 9:00~18:00)

  • このエントリーをはてなブックマークに追加

連記事

SAPからのご案内

着記事お知らせメール登録

ブログ記事の情報をメール配信しています。

以下にご指定のメールアドレスを入力し「登録する」ボタンをクリックすると、確認メールが送信されます。そのメールに記載されているURLをクリックすることで登録が確定されます。また、登録の解除も以下からお願いします。


メールアドレス