ブログ

はじめに

本記事では、RAP（RESTful ABAP Programming Model）で作成したAPIを基盤として、Fioriアプリを構築する手順を解説します。今回は「Quick Fiori Application Generator（以下、Generator）」を使用し、UIの生成からS/4HANA Cloud（Fiori Launchpad）でのタイル表示までの一連の流れについて、個人的に躓きやすいと感じた部分なども含めてご紹介します。

▼この記事は次のような方におすすめです

• 「RAP開発入門！環境開発からGenerate機能を使用したAPI作成まで」をみてAPI作成まで完了している方
• SAP S/4HANA Cloudを用いた開発に携わる技術者の方
• APIをもとにUI作成からデプロイまでを効率的に実施したい方
• ABAP環境でのカスタムアプリの表示方法を知りたい方

Quick Fiori Application Generatorとは

Generatorとは、HTML/JavaScriptなどのUIコードを手動で記述せずにList Report形式のFiori Elementsを生成・デプロイできる機能です。
ABAP Development Tools（ADT）上から直接実行できるため、UI側のコードを一切書かなくても、簡単なステップでアプリを作成することができます。

Generatorを使用したUI作成は、データの検索・照会・更新といった典型的なCRUD操作に特化した、社内ツールや管理画面を迅速に作成したい場合に有効です。
上記に加えて、リアルタイムでの計算や制御をさせる処理などアノテーションだけでは実装ができない処理を入れたい場合やList Report形式以外のフロアプランで作成したい場合は、Visual Studio Code（以下、VSCode）やSAP Business Application Studio（以下、BAS）を使用した開発が必要になります。
もちろん、Generatorを使用した後にADT（Eclipse）以外の開発環境（VSCode/BAS）へ移行し、開発を継続することも可能なので、「まずはGeneratorで素早く基本のUIを作り、高度な追加機能が必要になった段階でコーディングでの拡張開発を行う」という柔軟なアプローチがとれます。どちらか一方を選ぶのではなく、要件に合わせて「使い分ける・組み合わせる」ことが最適だと感じています。

ツール	使用場面	メリット	デメリット
VSCode/BAS	・UI/UXデザインの要件が細かく、Fiori Elements の標準設定（Annotations）だけでは対応できない場合 ・List Report形式以外のフロアプランで作成したい場合	・Gitなどのバージョン管理システムと連携し、複数人でコードを管理 ・視覚的にUIを構成できる	・環境構築の手間がかかる
Quick Fiori App Generator	・List Report形式でデータの検索・照会・簡単な更新（CRUD）ができれば十分なツールを作る時	・コーディングをせずにUI生成からデプロイが可能 ・UI側のコードを書かなくてもいい	・削除、再デプロイ※、アンデプロイ時にはADT（Eclipse）以外の開発環境（VSCode/BAS）を使用する必要がある ・Fiori Elementsの標準機能を超えた高度な拡張には向かない

利用可能な環境

• SAP BTP ABAP環境2505以降または、SAP S/4HANA Cloud Public Edition 2508以降
  （本記事ではSAP S/4HANA Cloud Public Editionを使用しています）
• Eclipseクライアント用ABAP開発ツールバージョン3.50以降

手順

ここからは実際にFioriアプリの生成とS/4HANAでのタイル表示手順を説明します。

Fioriアプリ作成

まずはFioriアプリを作成します。前提は以下の通りです。

【前提】
　・RAP Generatorを使用する場合
　　→「OData UI Service」を選択してください。
　・Unmanagedで作成する場合
　　→Service Binding作成時に「OData V4 – UI」を選択してください。
　　※「OData Web API Service」を選択した場合、今回使用する「Create Fiori Application」が表示されないため注意が必要です。
　・手順内に出てくる移送依頼は今回は行わないためスキップします。

１．Service Bindingを開き、「Create Fiori Application」を押下します。

２．Quick Fiori Application generatorを選択し、作成を押下します。

３．パッケージを選択し、次へを押下します。

４．プロジェクト情報を入力して次へを押下します。入力値の詳細は以下の通りです。

サービスバインディング詳細
　①モジュール名：manifest.jsonのIDにあたる部分
　②Application Title：アプリ上部およびタブに表示されるタイトル
デプロイ詳細
　③リポジトリ名：BSP Application名（カスタムアプリのためZ始まりで記載する）
　④Description：アプリケーションの説明
Fiori Launchpad設定
　⑤Semantic Object：アプリケーションへのナビゲーションに使用される。「セマンティックオブジェクト-実行」の形でアプリ表示時のURLに反映される。
　⑥実行：アプリケーションへのナビゲーションに使用される。「セマンティックオブジェクト-実行」の形でアプリ表示時のURLに反映される。
　⑦タイトル：タイルに表示されるタイトル
　⑧Subtitle：タイルに表示されるサブタイトル

５．以下の２手順はそのまま「次へ」で進めます。

６．生成後「開く」を押下しサービスバインディングを開くと、最初に押下した「Create Fiori Application」ボタンの左にFioriアプリのURLが表示されます。
「Fiori App URL」を押下するとアプリを表示することが可能です。

Fiori Launchpadタイル設定作成

次に、作成したFioriアプリをFiori Launchpadに表示するためにIAM Appとカタログを作成します。

７．パッケージ上で右クリック、「新規 > その他ABAP Repository Object」から「IAM Apps」を選択します。

８．名前、説明を入力し、アプリケーションタイプを選択します。

９．そのまま「完了」を押下します。

１０．IAM App作成後、概要タブの「Fiori Launchpad App Desc Item ID」を入力します。
入力欄にカーソルを合わせてCtrl ＋ spaceを実行すると候補が表示されるため、該当するものを選択します。

【ポイント】
ここでIDを未入力のままにすると、後の「Fiori Launchpadタイル表示」工程でビジネスカタログを検索できなくなります。
手入力によるミスを防ぐためにも、必ず Ctrl + space を押下して、表示されるサジェスト候補から選択するようにしてください。

１１．１０でIDを入力するとサービスタブでサービスが追加されます。追加されていることを確認したらローカルに公開します。

１２．アプリの実行権限を管理する「ビジネスカタログ」を作成し、先ほど作成したIAM Appを紐付けます（今回は新規作成ですが、既存のものがある場合は下の「Assign～」を選択してください）。

１３．名前、説明を入力します。

１４．そのまま「完了」を押下します。

１５．作成したビジネスカタログにIAM Appを割り当てます。すでにカタログ名やIAM Appは入力されているため、パッケージのみ該当のものを選択し入力します。

１６．そのまま「完了」を押下します。

１７．保存してローカルに公開します。

Fiori Launchpadタイル表示

タイル設定の作成まで完了したので、ここからはS/4HANA Cloudにタイルを表示する手順を説明します。

【前提】
　・S/4HANA Cloudの管理者権限を持っている
　　→スペースとページを管理するアプリはAdministrationタブにあるため必須です

１８．「Manage Launchpad Spaces」からスペースとページを作成します。

スペース管理アプリの画面にて、「Also create a page」にチェックを入れることで、スペースに紐づくページも同時に作成することができます。手間が省けるためおすすめです。

１９．作成したスペースとページを保存します。

２０．作成したページに移動し、編集モードに切り替えます。

２１．「Page Content」タブで左側の三点リーダーから「Select Catalog」を選択し、該当のカタログを選択します。

２２．追加したいアプリの「Add」ボタンを押下し、セクションにタイルを追加できたら保存します。

２３．「Maintain Business Roles」でロールを作成します。

２４．作成したロールに対し、スペース、ビジネスカタログ、そして対象となるユーザーを紐付けて保存します。
・スペース
Launchpad Spacesタブを開き「Add」ボタンを押下します。

作成したスペースを選択します。

選択したスペースが追加されていればOKです。

・カタログ
Business Catalogsタブを開き、「Add」ボタンを押下します。

作成したビジネスカタログを選択して「OK」を押下します。

選択したカタログが追加されていればOKです。

・ユーザ
Business Userタブを開き「Add」ボタンを押下します。

任意のユーザを選択して「OK」ボタンを押下します。

スペース、カタログ、ユーザの追加ができたら保存します。

このようなダイアログが表示されたら内容を確認し問題なければ「OK」ボタンを押下します。

２５．作成したスペース内にタイルが表示され、アプリが開けるようになります。

Generatorを使用してみて

普段はSAPUI5アプリ開発を主に行っているためFiori Elementsの開発はほぼ初めてですが、Generatorを使用することでList Report形式の基本的なCRUD要件のアプリケーションを簡単に作成することができました。Fiori Elementsに不慣れでも直感的に扱えるため、開発の生産性向上にとても便利だと実感しています。

しかし、冒頭でも少し触れたようにアノテーションで実装できない場合はADT（Eclipse）以外の開発環境（VSCode/BAS）を使用する必要があります。
今回は、「新規登録時は登録ダイアログを表示させる」や「登録更新削除で保存ボタン押下した時に確認ダイアログを挟む」という仕様にしたかったのですが、生成された画面では「データを新規登録する際には別画面に遷移する」、「保存ボタンを押下したらそのまま保存される」という仕様となっていました。
そのため上記のような要件を組み込む場合には、アノテーションでの実装は難しいためADT（Eclipse）以外の開発環境（VSCode/BAS）での開発が必要になります。

今後は今回作成したベースアプリケーションを活用して、CDSアノテーションでの実装やVSCode/BASを使用したコーディングでの機能追加など、Fiori Elementsでの開発についても学習を進めていきたいと思っています。

おわりに

いかがでしたでしょうか。
今回はQuick Fiori Application Generatorを使用したFioriアプリの作成からS/4HANA Cloudでのタイル表示までの手順をご紹介しました。
実際にわからなかった部分などはポイントとして記載しているため、RAP開発に慣れていない方にもわかりやすい記事になっていましたら幸いです。