SAP BTP Free TrialでSAP Fiori Launchpad サイトを配信してみよう

SAP Tutorialsを参考に、SAP Fiori Launchpad siteを配信してみようと思います。

今回はこちらのTutorialを参考にしています。

https://developers.sap.com/mission.cp-starter-digitalexp-portal.html

## 前提条件
前提条件として、SAP BTPのアカウントが必要です。アカウントをお持ちでない方は、まずは無料のアカウントを作成しましょう。登録手順は、こちらの記事の最初の方をご参考ください。
https://qiita.com/Nel_SAP_Basis/items/1f6c91be2807c1984f86

## SAP Build Work Zoneのセットアップ

SAP BTPのアカウントを用意できましたら、ログインしてSAP BTP Cockpit -> Services -> Service Marketplace の順に開き、SAP Build Work Zoneをクリックします。見つかりにくい場合は、検索ボックスに`SAP`など入力しましょう。
![スクリーンショット 2024-03-02 16.27.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/14643329-500f-54ca-60fd-d5fcaebaa285.png)

右側にSAP Build Work Zoneの概要ページが開きますので、Application Plansを選択した状態で、Createボタンを押します。
![スクリーンショット 2024-03-02 16.34.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/1c1a01fd-df63-90b5-5c15-6f2d3563da9f.png)

New Instance or Subscriptionの画面が開きますので、PlanのプルダウンボタンからSubscriptionsの方のStandardを選択し、Createボタンを押します。
![スクリーンショット 2024-03-02 16.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/cd1da1d2-8bcc-7bac-215d-cc719608289d.png)

Creation in Progressの画面が表示されますので、View SubcriptionからCloseボタンで閉じます。
![スクリーンショット 2024-03-02 16.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/61319b6a-bc8d-b048-79ef-b52f0e765a60.png)

View Subscriptionの方を押しておくと、Subscriptionの画面が開きます。しばらく待つとStatusがProcessingからSubscribedになり、セットアップの完了です。
![スクリーンショット 2024-03-02 16.58.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/a8f280a3-2814-7477-a505-43086af6db0f.png)

## Launchpad_Admin権限の追加

次にLaunchpadを編集するための管理者権限を自身のユーザに追加します。

Security -> Role Collection -> Launchpad_Adminの順に開き、Editボタンを押します。
![スクリーンショット 2024-03-02 17.16.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d370cea6-e959-f2c2-e464-660eb84b4b21.png)

Usersに自身のユーザIDを入力し、Saveボタンを押して完了です。（IDのボックスをクリックすると、登録されているIDのリストが表示されるので、そこから選択するだけでOKです。）
![スクリーンショット 2024-03-02 17.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/16452c7a-76ed-3714-7edb-6787e1e0c64e.png)

## SAP Build Work Zoneへの接続

次に、SAP Build Work Zoneへ接続します。

Services -> Instances and Subscriptionsを開き、SAP Build WOrk ZOne, standard edtionの`・・・`を押して、Go to Applicationをクリックします。
![スクリーンショット 2024-03-02 17.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/a8a24a30-12ba-990a-ae0d-75cb7dd17be8.png)

数秒でサイトマネージャの画面が表示されます。
![スクリーンショット 2024-03-02 17.30.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d9edd795-3e64-9b2a-3261-2dacf90f0d37.png)

言語は何故か日本語しか選択できませんでした。SAP BTPアカウントの言語は英語なので、OSかブラウザの言語に依存するものと思われます。
![スクリーンショット 2024-03-02 17.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/4f44202b-acf6-71b8-1116-96c07fa88149.png)

## サイトの作成

早速サイトの作成を始めます。

＋サイト作成のボタンを押します。
![スクリーンショット 2024-03-02 17.39.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/b18e8d61-04b2-88bf-55a4-c961eadbbea4.png)

サイト作成のボックスに任意の名前を入力し、作成をクリックします。
![スクリーンショット 2024-03-02 17.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/83fa1f34-7413-be31-1843-f8853df75f82.png)

サイトの編集画面が開きますので、編集ボタンを押します。
![スクリーンショット 2024-03-02 17.43.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/5934637c-c337-594b-129e-b4ffd15becac.png)

ビューモードがデフォルトではグループが選択されていますので、スペース及びページ - 新規エクスペリエンスを選択し、保存ボタンを押します。
![スクリーンショット 2024-03-02 17.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/1e06247c-9c2b-3535-4fa0-271e39c471e7.png)

画面左上の < ボタンを押してホーム画面に戻ります。
![スクリーンショット 2024-03-02 17.48.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d9059cac-dcb6-bc9e-d6ea-42c5ba79236f.png)

## SAP Build Work ZoneへのSAPUI5 Appの統合

次は、AP Build Work ZoneへのSAPUI5 Appの統合を行います。

再びコンテンツマネージャの画面を開き、登録ボタンを押して、アプリを選択します。
![スクリーンショット 2024-03-02 17.57.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f2d4775f-27ed-400a-ee51-20e6c044ebf9.png)

新規アプリの登録画面が開きますので、
![スクリーンショット 2024-03-02 17.59.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/5a8c6ac8-6899-b60d-8e55-ae3eed989944.png)

設定タブに以下の項目を入力または選択します。
タイトル： 任意の名前
アプリを開く：　配置済（デフォルト）
システム：　システムなし（デフォルト）
アプリUI接続：　URL（デフォルト）
URL：　`https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html`
![スクリーンショット 2024-03-02 18.01.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d2d9a7bd-b050-dfa6-03e9-68a2b963c974.png)

"ナビゲーション"タブを開き、以下の項目を入力します（入力は英数字のみ）。
セマンティックオブジェクト：　`Order`
アクション： `Display`
![スクリーンショット 2024-03-02 18.06.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/fa1071dd-d8e0-c3d5-7678-12f0c43fde3f.png)

"ビジュアライゼーション"タブを開き、以下の項目を入力し、保存ボタンを押します。
ビジュアル化タイプ：　静的アプリランチャ（デフォルト）
サブタイトル：　任意（ここでは`ショッピングカート`）
情報：　任意（ここでは`今すぐ注文！`）
アイコン： `my-sales-order`
（右端のブラウズアイコンを押すとアイコン選択画面が表示されます。そこから文字を入力して検索し、スクリーンショットのアイコンを選択すると、アイコン名が自動入力されます。）
![スクリーンショット 2024-03-02 18.10.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/ade448ea-c96e-4cbb-73f8-8963a4aec696.png)
![スクリーンショット 2024-03-02 18.10.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/16cff148-2ddd-e052-c95b-41202787a56a.png)

左上のコンテンツマネージャを押して、コンテンツマネージャ画面に戻ります。
![スクリーンショット 2024-03-02 18.14.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f141f4ce-ff9d-110f-96a2-acf47e5f82cf.png)

Everyoneをクリックします。
![スクリーンショット 2024-03-02 18.16.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/5c2fd8af-08c0-7c07-129e-4facf75457f2.png)

画面右上の編集ボタンを押します。
![スクリーンショット 2024-03-02 18.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/608b24fa-cf36-c4b7-2495-e7eb9863eb84.png)

先ほど作成したアプリの割り当てステータスのトグルアイコンをクリックし、
![スクリーンショット 2024-03-02 18.17.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/0a3d1ee8-1136-83e4-9740-b10fc0b5f0b6.png)

割り当てのステータスアイコンが`×`から`✔︎`に変わりましたら、保存ボタンを押します。
![スクリーンショット 2024-03-02 18.18.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/315f7728-0b6f-e476-70f0-a8a3fd5674f1.png)

## SAP Build Work ZoneへのURL Appの統合

次は、AP Build Work ZoneへのURL Appの統合を行います。

再びコンテンツマネージャの画面を開き、登録ボタンを押して、アプリを選択します。
![スクリーンショット 2024-03-02 18.45.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/e59eed48-305e-06ff-07a7-f7f5d03886a8.png)

設定タブに以下の項目を入力または選択します。
タイトル： 任意の名前
アプリを開く：　新規タブ
システム：　システムなし（デフォルト）
アプリUI接続：　URL（デフォルト）
URL：　`https://community.sap.com/topics/work-zone`
![スクリーンショット 2024-03-02 19.06.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/22b86178-cff7-4f29-f8a5-a17fddd9b311.png)

"ナビゲーション"タブを開き、以下の項目を入力します（入力は英数字のみ）。
セマンティックオブジェクト：　`Home`
アクション： `Display`
![スクリーンショット 2024-03-02 19.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/efdd44f1-5cdc-0f6e-7693-bfc68f6333a4.png)

"ビジュアライゼーション"タブを開き、以下の項目を入力し、保存ボタンを押します。
ビジュアル化タイプ：　静的アプリランチャ（デフォルト）
サブタイトル：　任意（ここでは`私たちについて`）
情報：　任意（ここでは`このサイトについて知る`）
アイコン： `visits`　
（右端のブラウズアイコンを押すとアイコン選択画面が表示されます。そこから文字を入力して検索し、スクリーンショットのアイコンを選択すると、アイコン名が自動入力されます。）
![スクリーンショット 2024-03-02 19.13.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/7afee0ab-dae4-3733-62dd-96336ac7548d.png)

コンテンツマネージャの画面に戻り、Everyoneをクリックします。
![スクリーンショット 2024-03-02 19.15.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/bfc7f415-d088-a528-bae1-0157cfaa93e3.png)

画面右上の編集ボタンを押します。
![スクリーンショット 2024-03-02 19.16.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/11c61f01-0953-6cd7-f943-bb6d597d802f.png)

先ほど作成したアプリの割り当てステータスのトグルアイコンをクリックし、
![スクリーンショット 2024-03-02 19.17.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/6b1b9a56-7a00-467d-8962-bafb84c89817.png)

割り当てのステータスアイコンが`×`から`✔︎`に変わりましたら、保存ボタンを押します。
![スクリーンショット 2024-03-02 19.17.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f1085ab3-f015-e76b-d480-076f61b00abf.png)

## SAP Build Work Zoneを用いたサイトのデザイン

最後に、SAP Build Work Zoneを用いたサイトのデザインを行います。

コンテンツマネージャの画面に戻り、登録ボタンを押し、ページを選択します。
![スクリーンショット 2024-03-02 19.40.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d857d17f-4fdc-ed2e-c8b3-d766f701724b.png)

タイトルに`概要`と入力し、"セクションを追加"ボタンを押します。
![スクリーンショット 2024-03-02 19.42.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/44978551-8a28-23f5-36f9-8975a76d49f8.png)

セクションタイトルに`アプリ`と入力し、"ウィジェットを追加"ボタンを押します。
![スクリーンショット 2024-03-02 19.43.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/c27b701c-51c4-619d-1741-8714694a8a46.png)

"ウィジェットを追加"の画面が表示されますので、タイトルをクリックします。
![スクリーンショット 2024-03-02 19.44.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/538a163c-3335-d060-57ed-6a4b035b3483.png)

"タイルを追加"の画面が表示されますので、表示されたタイル（ここでは「初めてのアプリ」と「外部コミュニティ」）のチェックラン鵜をクリックし、チェックされた状態にしてから追加ボタンを押します。
![スクリーンショット 2024-03-02 19.45.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/6bed411b-af54-1015-958c-b605c54022b7.png)

保存ボタンを押します。
![スクリーンショット 2024-03-02 19.46.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/bc3f187c-1432-a52c-6ab8-a27a1a6753b8.png)

コンテンツマネージャの画面に戻り、登録ボタンを押し、スペースを選択します。
![スクリーンショット 2024-03-02 19.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f25929d2-e809-93ab-d0dc-045c02952406.png)

タイトルに`ホーム`と入力し、割当ステータスのトグルボタンをクリックします。
![スクリーンショット 2024-03-02 19.51.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/eeb332e6-4731-c49e-6883-ee31577d5fcb.png)

割当ステータスが`✔︎`になりましたら、保存ボタンを押します。
![スクリーンショット 2024-03-02 19.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/9d0aa59b-f08d-c1cc-63ee-f3173b3b62ec.png)

コンテンツマネージャの画面に戻り、Everyoneをクリックします。
![スクリーンショット 2024-03-02 19.53.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/35907931-42a2-f4f2-d0ed-f882b58c7a16.png)

画面右上の編集ボタンを押します。
![スクリーンショット 2024-03-02 19.54.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/ba9b1d17-a0c0-9db6-2cbd-0d4187f87524.png)

スペースタブをクリックした後、タイトル"ホーム"の割当ステータスのトグルボタンをクリックします。
![スクリーンショット 2024-03-02 19.55.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/01a5f453-c33e-39cf-3a6d-783a976496ea.png)

割当ステータスが`✔︎`になりましたら、保存ボタンを押します。
![スクリーンショット 2024-03-02 19.55.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f89e190a-ee5b-c359-a4ea-67b50ed60bbe.png)

左上の"サイトとにジャンプ"ボタンをクリックし、サイトディレクトリの画面を表示します。
作成したサイト（ここでは「初めてのサイト作成」）のサイトアイコンをクリックします。
![スクリーンショット 2024-03-02 19.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d0dc9898-ea27-acbc-701c-7f897c1d2359.png)

サイトが表示されました。今回のTutorialのトライは、ここで完了になります。
![スクリーンショット 2024-03-02 19.58.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/bcc365b3-d525-e025-1d44-756bccb0ae25.png)

今回作成した"初めてのアプリ"のタイルをクリックすると、こちらのスクリーンショットの画面が表示されます。
![スクリーンショット 2024-03-02 19.59.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/3a655027-4cbe-7e0d-9951-310f679bf725.png)

今回作成した"外部コミュニティ"のタイルをクリックすると、SAP Build Work Zoneのサイトに飛びました。こちらのURLだったようです。
![スクリーンショット 2024-03-02 19.59.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/fec2da8a-631c-8438-1abc-c7ccdebc9901.png)

今回は以上になります。お疲れ様でした。