はじめてでもわかる!SAP BTP と BAS を使った SAP Fiori開発

SAP Fioriといえば、SAP社が提供する優れたUX(ユーザーエクスペリエンス)のことであり、事前定義されたコンポーネントやテンプレートを活用することで、エンタープライズ領域で求められる「一覧画面」や「詳細画面」、あるいはグラフを使った「ダッシュボード画面」を迅速に作ることができます。

今回は、その事前定義されたテンプレートを使用して開発する方法である「SAP Fiori Elements(フィオーリ エレメント)」について、実際に触れるところまでまとめていきます。はじめての方でも、SAP Fiori開発がわかる記事です!

SAP Fiori Elementsとは

先述の通り、SAP Fiori アプリ開発に使用できる方法の1つです。

一般的なアプリケーション向けに用意されたUIパターン・テンプレートが事前に用意されているため、アプリ開発者はSAP UI5やその他JavaScriptを使った画面のコーディングを必要とせずに、アプリを作成することが可能となります。

そのためこれを使いこなすことができれば、テンプレートによる生産性の向上と、一貫したUIを使用することができるといったメリットを享受することが出来ると言われています。

SAP Fiori Elements 知っておきたい言語と環境

先程、「JavaScriptを使った画面のコーディングを必要とせず」と書きました。

では開発者は、どのような言語を使って開発を行えば良いのでしょうか。

誤解を恐れずに書くのであれば、jsonとxmlです。

これら拡張子のファイルで、各ページの設定と構成を作成します。

ただ、たしかにjsonとxmlであれば、プログラミングを必要とせずに画面を作成できるかもしれません。しかし、これら拡張子のファイルを読むことに慣れていない方にとっては、「プログラミングが必要」と言われていることと大差が無いように感じるのではないでしょうか?

そこで次に押さえておきたい要素が「環境」です。

SAP Fiori Elementsは、開発者に人気の「Visual Studio Code(VS Code)」と、その拡張機能である「SAP Fiori tools – Extension Pack」を用いての開発が行えるようになっています。

また、「都度都度ローカル環境を構築するのは厄介である」や、「開発者間でのバージョン違いをどうするのか」という悩みを解消する(と個人的に思っています)ためのツールとして、onlineのVS Codeといってもよいツール「SAP Business Application Studio」の提供も行われています。

今回はこの、通称BASと呼ばれる「SAP Business Application Studio」を使っての開発を行ってみたいと思います。

SAP S/4HANA 導入支援サービス 基本ガイドブック

SAP Fiori Elementsを開発してみよう

準備と開発の2部構成で進めます。

まず、準備の手順は以下の通りです。

  1. SAP Business Technology Platform(通称 BTP) Trial版にログインする
  2. SAP Business Application Studio を開く
  3. 開発用のスペースを作成する

次に、開発の手順です。

  1. 作成したスペースに入る
  2. ジェネレーターを使い、テンプレートからアプリを作成する
  3. 一覧ページの編集を行う

また、前提条件として以下2つのシステムのアカウント作成を済ませておいてください。

  1. SAP Business Technology Platform Trial
    ※ Regionはお好きなところを選択して大丈夫です。
  2. SAP Gateway Demo System
    ※ もし自社等にOData Serviceがあれば代替可能です。

では早速、準備から進めましょう。

SAP Business Technology Platform (BTP) Trial版にログインする

https://account.hanatrial.ondemand.com にアクセスします。

SAP Business Application Studioを開く

SAP BTP Trialのホーム画面から、SAP Business Application Studioのリンクをクリックします。

Welcomeページに遷移したら、「Create Dev Space」をクリックします。

開発用のスペースを作成する

スペース作成画面にて、任意の名前を記入し、「Create Dev Space」をクリックします。

STARTING から RUNNING にステータスが変われば使用可能となります。

準備はここまでで完了です。

すべて画面の操作で完了するところが、この環境の良いところだと思います。

それでは続いて、実際の開発を行ってみましょう。

作成したスペースに入る

先ほど作成したスペースのステータスが RUNNINGであることを確認した上で、スペース名をクリックします。

この通り、VS Codeに見慣れた方であれば馴染みのあるWelcomeページが展開されます。

ジェネレーターを使い、テンプレートからアプリを作成する

では、いよいよテンプレートを使っての開発を始めましょう。

まずは、先程のWelcomeページの「Start fiori template」をクリックします。

テンプレートの選択画面にて、「SAP Fiori application」を選択し、「Start」ボタンをクリックします。

今回の例では、一覧ページを操作したいため、「SAP Fiori elements」の「List Report Object Page」を選択し、「Next」をクリックします。

データソースの選択画面にて、OData Serviceに接続するよう設定値を入力します。

もし前提条件に記載したDemo Systemをお使いの方は、以下の値を入力してください。

https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN/

Entityの設定値はそのままで進めましょう。

プロジェクトの設定は、任意の値を入力してOKです。

各項の入力を終えたら、「Finish」ボタンをクリックしてください。

しばらく待てば、作成したプロジェクトを使用できるようになります。

さて、この時点でアプリケーションを起動させることが出来るので、検証してみましょう。

作成されたプロジェクト名を右クリックし、「Preview Application」をクリックします。

画面上部に選択肢が表示されるため、「start」を選びます。

すると自動でブラウザのタブが切り替わり、アプリの画面が表示されます。

その際もし、Demo System等のOData Serviceの認証を求められた場合は「Username」と「Password」を入力してください。

無事画面が表示されました。

たったこれだけの手順で、基本的な画面の作成が完了してしまいます。

[Go ボタンを押した後の画面]

さて、だいぶ長くなってしまいましたが、もう少しです。

無事アプリが起動することまで確認できましたが、これだけではどうやって画面を編集したら良いかがわかりません。

そこで「既存の項目変更」と「新規の項目追加」を試してみて、この記事を終わりにしたいと思います。

既存の項目変更

テンプレートから作成したアプリにおける、行選択の項目がラジオボタンになっています。

これをチェックボックスに変更し、複数選択可能となるようにしてみましょう。

まずは、「View」メニューから「Find Command」を選択します。

もちろんショートカットから選択してもOKです。

コマンド入力欄に、「Guided Development」と入力し、「Fiori: Open Guided Development」を選択します。

展開されたガイドページの右上の検索窓に「enable multiple」と入力し、List report Pageの「Enable multiple selection in tables」を選択します。

ガイドのページが表示されるため、「Start Guide」ボタンをクリックします。

Page項目に「ListReport_SEPMRA_C_PD_Product」といった、一覧ページを指す値が設定されていることを確認し、「Insert Snippet」をクリックします。

すると自動で、一覧ページのテーブルを指すjsonファイルの定義が自動で書き換わることが確認できます。

この状態で再度アプリを起動させると、ラジオボタンがチェックボックスに変更されたことが確認できます。

いかがだったでしょうか。

ここまでファイルを操作せずに、既存の項目を操作することが出来ました。

このように簡単な変更であれば、開発ツールが提供する機能を活用することでコードを書き換えること無く画面を修正することが出来ます。

一方、新規の項目追加となると少しだけ手順が複雑化します。

そのイメージの共有をこの記事の最後の項としたいと思います。

新規の項目追加

既存項目を操作したときと同様、コマンド入力欄を表示します。

今回は「Service Modeler」と入力し、「Fiori: Open Service Modeler」を選択します。

ODataから取得できる項目の一覧が表示されるため、今回は「ProductType」を選択する。

選択した項目を、どこに配置するかを選ぶことが出来ます。

今回はフィルタに項目を追加してみるため、「UI.SelectionFields」から「Copy locally」を選択します。

これにより、テンプレートで提供されていた項目のコピーがローカルに作成され、編集の準備が整いました。

先程の操作によって編集された、「annotation.xml」を編集します。

編集内容は、”<PropertyPath>MainProductCategory</PropertyPath>”の下に、

“<PropertyPath>Supplier</PropertyPath>”を挿入すれば良いです。

ただ、上記をコピーして記載いただいてもよいのですが、是非直接編集をしてみてください。

タグはもちろん、値についてもコード補完が効くため簡単に編集することが可能です。

ここまで実施いただいたところで画面を見ていただくと、追加したフィルタが画面にも反映されていることが確認できると思います。

この通り、項目追加においては多少のファイル修正が必要となります。

しかしツールによる補完機能が優秀なので、やり方さえわかってしまえば簡単に画面を作ることができるのではないでしょうか。

SAP Fiori開発 まとめ

ここまでご覧いただいたことにより、SAP Fiori Elementsを使うことによって、ほぼ画面上の操作でアプリを開発できることがご理解いただけたのではないかと思います。

また、SAP BTP用の専用の開発環境・ツールを使うことにより、たとえコードを書くシーンが合ったとしても、強力な支援を得られることもご覧いただけたことと思います。

もちろん、このSAP Fiori Elementsだけでユーザーの要望全てに答えることは難しいことがあるかもしれません。

しかしそれでも「まずは作ってみよう」というシーンや、要望をシンプルに整理できるような開発においては大きな力を発揮する方法であることは間違いないので、是非一度触れてみていただければと思います。SAPアドオン

パソナテックではSAP S/4HANAマイグレーションを検討する際に欠かせない、考慮すべきポイントをまとめた入門資料「SAP S/4HANAへの道知っておくべきこと、今からやれること、とは?」をご用意しました。本資料は、SAP S/4HANAマイグレーションへ進む方へ必見の資料です。ぜひダウンロードいただき、ご覧ください。

SAP FioriとBTPが理解できる基本ガイドブック
SAP FioriとBTPが理解できる基本ガイドブック