![WebClient | Embarcadero RAD Studio Delphi C++Builder Blogs webclient](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/WebClient-7441798.gif?resize=735%2C386&ssl=1)
この記事では、RAD Serverデータベースエンドポイントウィザードを使って、FireDAC接続により、RAD ServerのRESTエンドポイント(JSON Webサービス)を作成します。そして、データのCRUD(Create/Read/Update/Delete)操作を行うグリッドを持つSencha Webクライアントを作成し、これを利用します。
RAD Serverの構築手順
1. RAD Studio(DelphiまたはC++Builder)から、[ファイル|新規作成|その他]メニューを選択し、「RAD Server」カテゴリの「RAD Serverパッケージ」を選択して[OK]ボタンをクリックします。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz01-ja-9266948.png?w=750&ssl=1)
2. RAD Serverパッケージウィザードで、「リソースを含むパッケージを作成する」を選択します。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz02-ja-5707153.png?w=750&ssl=1)
[次へ]ボタンをクリックします。
3.「リソース名」に任意の名前を入力します。ファイルの種類に「データモジュール」を選択します。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz03-ja-5948149.png?w=750&ssl=1)
[次へ]ボタンをクリックします。
4.「エンドポイント」ページで、「Sample End Points」と「API Documentation」の選択を解除し、「Database EndPoints」を選択します
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz04-ja-8089083.png?w=750&ssl=1)
[次へ]ボタンをクリックします。
5.「接続名」で既存のFireDAC接続を選択し、データベースにログインします。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz05-ja-3294921.png?w=750&ssl=1)
正しいログイン情報を入力したら、[OK]ボタンをクリックします。
6.Sencha CRUDグリッドdWebアプリケーションに使用する1つ以上のテーブルを選択します。ここでは、EMPLOYEEデータベースからCOUNTRY、CUSTOMER、EMPLOYEEテーブルを選択します。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz06-ja-1027006.png?w=750&ssl=1)
[完了]ボタンをクリックします。
7. ウィザードは、FireDACによるデータベース接続(FDConnection)、COUNTRY、CUSTOMER、EMPLOYEEの各テーブルに対するクエリー(qryCountry、qryCustomer、qryEmployee)、RAD Server (EMS) DataSetResourceコンポーネントが配置されたデータモジュールを生成します。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz07-ja-3467751.png?w=750&ssl=1)
新しいEMSDataSetResourceコンポーネントを使用すれば、RAD Serverアプリケーションに接続するデスクトップ、マルチデバイス、Web、その他のサービスベースアプリケーションによって取得されるデータをより詳細に制御できます。この新しいコンポーネントにより、RAD Serverアプリケーションは、データセットのすべてのデータあるいはデータの特定ページへのアクセス、データセットレコードの更新、新しいデータセットレコードの作成、データセットエントリの削除といった機能を提供できます。
8.手順4で使用したウィザードの「エンドポイント」の箇所では、各テーブルにTEMSDataSetResourceコンポーネントも追加しています。オブジェクトインスペクタで確認すると、これらのテーブルのAllowed Actionsプロパティの各値(List、Get、Post、Put、Delete)にTrueが設定され、完全なCRUD機能が提供されていることが分かります。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz08-ja-5349001.png?w=750&ssl=1)
9.[ファイル|プロジェクトに名前を付けて保存]メニューで、RAD ServerモジュールをRadServer_Sencha_CRUDという名称で保存します。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz09-ja-3111805.png?w=750&ssl=1)
10.RAD Serverモジュールをビルドして実行します。RAD Serverログには、テーブルのデータにアクセスするためのRESTエンドポイントが表示されます。例えば、EMPLOYEEテーブルのGETには、次のようなRESTエンドポイントがあります。
1 |
{“name”:”dsrEMPLOYEE.List”,”method”:”Get”,”path”:”mydata/EMPLOYEE/” |
このエンドポイントは、http://localhost:8080/mydata/EMPLOYEE/ になります。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz10-ja-4031273.png?w=750&ssl=1)
11.このRESTエンドポイントをテストするには、RAD ServerコンソールUIで[ブラウザを開く]ボタンをクリックします。そして、URLに、http://localhost:8080/mydata/EMPLOYEE/ と入力します。これは、従業員テーブルデータを取得するためのJSON Webサービスです。
ブラウザには、JSON配列の形式で返されたEMPLOYEEテーブルのデータが表示されます。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/radserver-wiz11-ja-6274957.png?w=750&ssl=1)
以上でRAD Server側の構築は完了です。次に、このデータを使用するCRUDグリッドが配置されたSencha Webクライアントアプリケーションを作成しましょう。
Sencha Webクライアントアプリケーションの構築手順
1.Sencha Architectを起動します。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/Sencha_Arch-3442168.gif?w=750&ssl=1)
2.[New Project|Blank|Classic Project]を選択し[Create]ボタンをクリックします。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/Sencha_New-2900352.gif?w=750&ssl=1)
3.新しいSencha ExtJS Classsic Webアプリケーションが作成されました。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/Sencha_ExtJS-6123945.gif?w=750&ssl=1)
4.Sencha Data UI Builderアイコン をクリックします。
5.「Data Source」項目で「JSON Web Service」を選択します。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/JONWebService-1909448.gif?w=750&ssl=1)
6.「Model Name」に「MyModel」と設定し、「URL」に使用するREST WebサービスのURL「http://localhost:8080/mydata/EMPLOYEE/」を入力します。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/URL-4410837.gif?w=750&ssl=1)
7.「Parts to Create」で、すべての項目(Model、Store、List View、Details View、Form View、Controller)にチェックを入れ、[Import Fiedls]ボタンをクリックします。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/ImportFields-3396896.gif?w=750&ssl=1)
8.EMPLOYEEテーブルのすべての列(フィールド)が追加されます。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/DataFields-2260660.gif?w=750&ssl=1)
9.[Generate]ボタンをクリックします。
10.Sencha Project Inspectorを見ると、プロジェクトにビューとモデルが追加されたことが確認できます。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/ProjInspect-9164531.gif?w=750&ssl=1)
11.「MyModels」ビューを選択します。Senchaパネルには、初期ビューが表示されています。ここには、データのCRUD機能を提供する[Add][Edit][Remove]ボタンがあります。
![](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2022/05/WebClient-7441798.gif?w=750&ssl=1)
以上で、RAD Server上で動作するFireDAC接続によるRAD ServerのRESTエンドポイント(JSON Webサービス)を、RAD Serverデータベースエンドポイントウィザードを用いて簡単に作成し、Sencha WebクライアントからCRUDグリッドによって利用する例を示しました。一連の手順が、極めて簡単であることをご理解いただけたと思います。
RAD Serverアプリケーションの構築は、RAD Studioトライアル版でお試しいただくことができます。
Sencha Webアプリケーションの構築(およびSencha Architect)については、Sencha Ext JSトライアル版でお試しいただくことができます。
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition