SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

EDN CodeZine出張所(AD)

従来型C/SアプリケーションをSenchaを使ってWeb化してみる

  • X ポスト
  • このエントリーをはてなブックマークに追加

データアクセス機能を用意する

Web APIを作る

 それでは、具体的な作業に取り掛かりましょう。最初に用意するのは、データアクセス機能です。C/Sアプリケーションでは、クライアントアプリケーションが直接リモートのRDBMSに接続していました。

 Ext JSによるWebアプリケーションはWebブラウザ上で動作するわけですから、ここから直接RDBMSに接続するわけにはいきません。Ext JSからは、任意のWeb APIにアクセスすることができるので、クエリーの結果をJSONデータで返すWeb APIと、特定のレコードを更新するWeb APIを実装しておきます。

 Ext JS側での処理は後述しますが、データパッケージと呼ばれる機能を使うため、Web APIを扱うためのコーディングは実質不要です。

実装方法は自由

 Web APIの実装は本記事の中心的な話題ではないので、あまり詳細は説明しません。Ext JSからすれば、REST/JSONのようなオープンなプロトコル/データ形式であれば、APIの実装方法は問いません。従って、以前から使用している言語を用いたり、サーバーサイドアプリケーションの構築に最適な言語を選択したりするなど、自由です。

 今回は、元のデータアクセスがC/Sアプリケーションであったということもあるので、C/Sアプリケーションを実装していたDelphiをそのまま使うことにします。

 Delphiにも、現在ではWeb APIを実装するためのテクノロジーが用意されており、コンポーネントを用いた効率的な開発で、主要なRDBMS、クラウドサービス、既存のシステムなどと連携するWeb APIを簡単に構築することができます。

Delphiで実装したWeb API

 以下は、Delphiで実装したWeb APIの開発画面です。パネルのようなところにいくつかのアイコンが並んでいますが、これが、データアクセスやJSONデータ処理を行うためのコンポーネントです。UIはないのですが、ロジックもビジュアル操作で構築できるのです。

図6 DelphiによるWeb APIの実装
図6 DelphiによるWeb APIの実装

 Web APIは以下のようなコードによって実装されています。DelphiにはREST API実装やJSONデータの受け渡しに特化したコンポーネントTEMSDataSetResourceが用意されており、データベースのCRUD操作を行うAPIを、コーディングなしに実装できます。TEMSDataSetResourceよりも細かい制御が必要な場合は、応答するprocedure内のコードで実装できます。

type
  [ResourceName('WebAPI')]   // API のリソース名定義
  TWebAPIResource1 = class(TDataModule)

    // TEMSDataSetResource は操作とサフィックスを定義するだけでAPIとして動作する
    [ResourceSuffix('get'    , 'customers/{id}')]
    [ResourceSuffix('put'    , 'customers/{id}')]
    EMSDataSetResource1: TEMSDataSetResource;
  published
    // データの一覧取得を TEMSDataSetResource よりも細かく制御する場合の定義
    [ResourceSuffix('customers/')]
    procedure Get(const AContext: TEndpointContext; const ARequest: TEndpointRequest; const AResponse: TEndpointResponse);
  end;
implementation

procedure TWebAPIResource1.Get(const AContext: TEndpointContext; const ARequest: TEndpointRequest; const AResponse: TEndpointResponse);
var
  CustomerJSONResponse: TJSONObject;
begin
  // ここで検索の実行やJSONデータの生成などを実装する

  AResponse.Body.SetValue(CustomerJSONResponse,True);
end;

 このAPIには http://localhost:8080/WebAPI/customers/ としてアクセスでき、データの取得はGETメソッドに対して、次のJSONデータを返します。またデータの更新をPUTで受け付けます。

{
  “result”: [
    {
      "CUSTOMER_ID": 1,
      "NAME": "神野 天音",
      "NAMEPHONETIC": "かみの あまね",
      "EMAIL_ADDRESS": "kamino_amane@example.com",
      "BIRTHDAY": "1995-02-14T00:00:00.000+09:00",
      "PREFECTURE": "東京都",
      "PHONE_NUMBER": "03-4540-4148",
      "MOBILEPHONE": "03-4540-4148"
    },
    …
    …
    …
  ],
  “total”: 50000
}

 “total”は、このデータセット全体のレコード数を示しています。

次のページ
Sencha ArchitectでUIを設計する

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
EDN CodeZine出張所連載記事一覧

もっと読む

この記事の著者

EDN編集部(イーディーエヌ編集部)

エンバカデロ・デベロッパーネットワーク(EDN)は、ソフトウェア開発者とデータベース技術者のための技術情報サイトです。Delphi、C++Builderをはじめとする開発ツールやER/Studioなどのデータベースツールに関連する技術記事、ビデオなどを提供しています。EDN編集部は、EDN記事と連携...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11638 2019/07/23 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング