はじめに
CAP Service SDK for Node.jsを使用してapp（UI側）を作成する手順については、
Visual Studio Code を使用して Node.js で CAP ビジネス サービスを作成する
に記載されていますが、
CAP Service SDK for Javaを使用してappを作成する手順については、
記載されているサイトが見当たらなかったため、当記事に記します。
準備
BTP環境のサブアカウントにSpace「dev」が作成されていることが前提です。
手順
①新しくプロジェクトを作成する
vs codeを開き、下記の画像のように、
"demo"フォルダの中にmta.yamlと.gitignoreを作成します。
②CAPプロジェクトを作成する
CDSツールを使用してJavaプロジェクトを作成する
CAP Java Maven Archetype を実行する
と
【SAP BTP】CAP Service SDK for JavaでOData APIを作ってみる(1)
を参考に以下の手順を進めていきます。
下記のコマンドを実行し、①で作成したプロジェクトに移動し、
CAP Java Maven Archetypeを使用して、新しいCAP Javaプロジェクトを作成します。
$ cd demo/
$ mvn archetype:generate -DarchetypeArtifactId="cds-services-archetype" -DarchetypeGroupId="com.sap.cds" -DarchetypeVersion="RELEASE"
groupId、artifactId、packageを求められるため、下記の画像のように入力します。
groupId：jp.co.kyoso.demo
artifactId：capservice
package：デフォルト値
入力し、クリックします。
→demoの中に新しくプロジェクトが作成されていたらOKです。
※下記のコマンドを実行し、CDSツールを使用してJavaプロジェクトを作成する方法もあります。
cds init <PROJECT-ROOT> --add java
サンプルのアプリケーションを生成する
下記のコマンドを実行し、CAPプロジェクトのディレクトリに移動して、サンプルのアプリケーションを生成します。
$ cd capservice/
$ mvn com.sap.cds:cds-maven-plugin:addSample
→上記の画像のように、サンプルが生成されていたらOKです。
③appを作成する
cdsをインストール
コマンドプロンプトを開き、下記のコマンドを実行して、cdsのバージョンを確認します。
cds --version
→上記の画像のようにバージョンが記載されている場合、cdsをインストールできている状態のため、
次の手順「SAP CDS Language Support」をインストールするに移ってください。
※上記のコマンドを実行したときに、バージョンが表示されない場合はインストールがまだできていない状態なので、
下記のコマンドを実行し、cdsをインストールします。
npm i -g @sap/cds-dk
→上記の画像のような内容が表示されたら、インストール完了のため、
次の手順「SAP CDS Language Support」をインストールするに移ってください。
※下記の画像の内容が表示された場合は、ローカルにnpmがインストールできていない可能性が高いです。
この場合は下記の点を確認してください。
1．C:\Users\ユーザ名\AppData\Roaming配下にnpmフォルダがあるか
→ない場合、ローカルにnpmをインストールする
2．環境変数Pathにnpmフォルダは指定されているか
→されていない場合、下記の画像のように指定する
上記の1・2のうち、当てはまるものがある場合、下記の対応を行います。
1．C:\Users\ユーザ名\AppData\Roaming配下にnpmフォルダがない場合
対処法：npmをローカルにインストールする
2．環境変数Pathにnpmフォルダは指定されていない場合
対処法：下記の画像のように指定する
上記を対応後、再度下記のコマンドを実行すると、インストールできます。
npm i -g @sap/cds-dk
「SAP CDS Language Support」をインストールする
マーケットプレイスに移動し、「SAP CDS Language Support」をインストールします。
SAP Fioriテンプレートを使用して、app（UI側）を作成する
vs codeでコマンド パレットを開き、「Fiori: Open Application Generator」を選択します。
Floorplan Selection
Application Typeには「SAPUI5 freestyle」の「SAPUI5 Application」を選択し、「Next」を押下します。
※Application Typeで「SAP Fiori elements」を選択の場合、Launch Padの設定が必要になります。
今回はデモ作成のため、「SAPUI5 freestyle」を選択します。
Data Source and Service Selection
Data sourceには「Use a Local CAP Project」を選択します。
CAP project folder pathにはbooksのディレクトリに移動し、「OK」を押下します。
OData serviceにはサンプルで生成したものを選択し、「Next」を押下します。
Entity Selection
View nameにはViewのファイル名を指定し、「Next」を押下します。
Project Attributes
下記の画像のように、appのフォルダ名やタイトルなどを入力し、「Next」を押下します。
Deployment Configuration
Please choose the targetにはデフォルトでセットされている「Cloud Foundry」を選択したままで、
Destination nameにはDestinationの名前を入力し、「Finish」を押下します。
下記の画像のように、appフォルダが作成されます。
ローカルで動作確認を行う
下記のコマンドを実行し、ローカルでプロジェクトを起動します。
$ cd capservice/
$ cd srv/
$ mvn spring-boot:run
上記のようにspring bootが起動されたら、localhost:8080にアクセスします。
（赤枠で囲んでいるpasswordは後ほど使用するため、コピーします。）
上記のコマンドを実行したときに、下記のようなエラーが発生する場合は、
vs codeを閉じてbashで実行したらエラーが解消されます。
localhost:8080にアクセスします。
アクセスできたら、localhost:8080/画面ID/webapp/index.htmlにアクセスします。
ログイン情報が求められるため、下記の情報を入力し、ログインします。
ユーザー名：user
パスワード：先ほどコピーしたpassword
→上記のようにUIが表示されたらOKです。
おわりに
今回はCAPプロジェクトのローカルでの実装方法と動作確認を記事にまとめました。
CAPプロジェクトのデプロイする際の注意事項や、デプロイ後のCAPのapp（UI側）のアクセス方法については下記の記事にまとめているので、
CAPのデプロイがうまくいかない、デプロイ後のCAPプロジェクトのapp（UI側）が表示されないなどの問題点で悩まれている方がいらっしゃいましたら、
読んでいただけると幸いです。
【SAP BTP】デプロイ後のCAP Service SDK for Javaのapp（UI側）の接続時に「Whitelabel Error Page」が発生する件
参考資料
・Visual Studio Code を使用して Node.js で CAP ビジネス サービスを作成する
・CAP Java Maven Archetype を実行する
・【SAP BTP】CAP Service SDK for JavaでOData APIを作ってみる(1)