Delphi開発者にもできる
SenchaWebアプリ構築
第35回 エンバカデロ・デベロッパーキャンプ

エンバカデロ・テクノロジーズ
セールスコンサルタント 井之上 和弘

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

セッションサマリ
 既存のC/Sの業務向けアプリケーションをWeb対応する場合はWebクライアントとアプリケーションサーバとの開発が必要ですが、Senchaを用いるとVCLアプリ同様のWebアプリ UI部をコンポーネントベースで開発できます。
 このセッションではSenchaによるWebアプリ開発の方法や、SenchaアプリケーションからDelphi/C++で実装の中間サーバの利用について解説します。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

2

Sencha の紹介

ジェネラルセッションでも紹介していますが、参加できなかった方向けのフォローとして紹介いたします

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Senchaとは？
 エンタープライズWebアプリケーションを迅速に構築
Ext JS• JavaScriptによるクロスプラットフォームアプリ開発• カスタマイズ可能なUI部品• 幅広いブラウザをサポート

Sencha Architect• ドラッグ＆ドロップによるHTML5アプリケーション構築をサポート
Sencha Test
• ExtJSアプリの単体・機能テストの最善のソリューション

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

4

Ext JS と Sencha Architect の違い Architect は Ext JS を含むパッケージングです Architect は Ext JS 上位エディション（ Pro, Premium ）に含まれます
Sencha Architect
Ext JS 向けビジュアル開発環境
Ext JS フレームワーク
JavaScript によるクロスプラットフォームアプリ開発
Sencha Cmd
ビルド管理ツール
Java 7 以降 (Sencha Cmd で必要)
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

5

Sencha を選ばない場合は、どれを使いますか？

minifyjs
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ConcatUglifyJS
6

Sencha Ext JS はフルスタックなアプリケーション基盤
機能

ライブラリやツールを組み合わせて独自のアプリ基盤を構築

アーキテクチャExt JS

UI部品

Over 200 UI components built-in

レイアウト

Built-inテーマ

Built-inパッケージ管理

Sencha Cmd

ビルド

Sencha Cmd

テスト

Sencha Test (Q4)
Sencha Inspector

デプロイ

Sencha Cmd
Sencha Web Application Manager

結合, 圧縮、最適化

サポート

Sencha Support Team
Sencha Professional Services Team

第三者からの支援

トレーニング

Sencha Training Team
Official training partners worldwide

第三者からの支援

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

単純なCSS

7

Sencha で作れる Webアプリケーションの例

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

8

開発の手順ツールキットを選ぶ (Modern, Classic)

取り扱うデータのスキーマを設定する (Model)
データの保存先 (Store) 、データソース（Proxy）や受け渡されるデータの Reader/Writer を設定する
アプリの画面を作る (View)

アプリで発生するイベントに対応したコードを実装する (Contoller)

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

9

ツールキット (Modern, Classic) を選ぶ スマートフォン対応が必要な場合は Modern
 Internet Explorer 8 -10 の対応が必要なら Classic
Internet
Explorer 8-10

Internet
Explorer 11Edge, Chrome,FireFox,, Opera

タブレット

スマートフォン

Ext JS Modern

✕

○○○

○

Ext JS Classic○○○○✕* Classic のページはスマートフォンもPC向けの表示となり、操作性に問題が出る* Modern のページは Internet Explorer では正しく表示できない場合がある 今回は Modern を使います
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

10

ここでは、シンプルなものを作ってみます

View にテストのデータをGrid を貼る

表示させる

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ボタンクリックのイベントに処理を書く

11

Sencha で使える UI 部品

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

12

Sencha で使える UI 部品

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

13

Sencha の開発のキーワード
 Architect で UI を設計• Ext JS コンポーネントを使用

 MVC や MVVM による実装• アプリをデータ構造や手続き、画面に分割して設計実装する手法• MVC = Model, View, Controller• MVVM = Model, View, ViewModel REST API に接続し、JSONデータを利用• 多くの Web API で標準的な方法

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

14

Senchaでデータ処理に使用する機能
RAD Server(Delphi / C++Builder)

RDBMS

REST/JSONを使用
Model

レコードのスキーマ定義

Proxy

データソースを指定

Store

レコードのデータセット

WriterReaderDelphi / C++Builderで構築されたネイティブクライアントアプリケーション

Sencha ArchitectでWebアプリケーションを構築

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

既存のDelphi / C++Builderアプリケーション資産15SenchaとつながるRAD Server
Delphi/C++で中間サーバを開発する場合はRAD Server が選択肢の一つとなります
そこでRAD Serverについて説明します

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

RAD Server とは？
エンタープライズデータベース

VCL WindowsアプリケーションFireMoneyマルチデバイス
アプリケーション

RAD Server
REST APIEMSパッケージ

EMSパッケージ…

…

EMSリソース

EMSリソース

EMSリソース

EMSリソース

EMS DB• ユーザー管理• グループ情報• 登録デバイス情報

クラウドサービス

IoTデバイス• エッジモジュール情報• プッシュ通知メッセージ• マルチテナント

Sencha ExtJSWebアプリケーション

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

17

RAD Server を使うには？
 Delphi/C++Builder Enterprise エディション以上で開発可能
 開発環境では• ビルドするだけで、すぐに実行できる• ただし連続稼働日数や認証ユーザ数に制限あります 本番運用では• IIS または Apache + RAD Server 基本モジュール + 作成したAPI で使う• 運用ライセンスを用意する（運用ライセンス１つがDelphi/C++Builder/RAD Studio Enterprise 10.2.2 以降に含まれる）

 内部データベース(EMSDB)には InterBase 2017 や XE7 を使用
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

18

DEMO: RAD Server で REST API を作る

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

19

Senchaからつなげるための実装
Sencha からWeb API を利用するための情報をもうすこし掘り下げて説明いたします

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

DEMO：VCLで作成したC/Sのシステム → Sencha + RAD
Server でWeb化

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

21

Sencha からの接続で必要な機能
 情報の表示、追加、更新、削除• RAD Server 上のカスタム API にアクセスする• Sencha のグリッドやフォームで情報を表示する

 ユーザー認証• 認証情報を入力するためのフォーム• RAD Server の認証APIにアクセスする処理• 認証成功時のトークンの保持

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

22

情報の表示 取り扱う情報の Model を作る• 少なくともフィールドは定義しておく

 取り扱う情報を保持する Store を作る• データの参照先を設定する• データ形式 (JSON, XML など）を指定する• Model を紐づける Grid や Form を作成して Store を紐付ける

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

23

RAD Server のAPI
 DEMOで使用する API (作成済み)
データ酒悦

機能API

取得

顧客情報一覧

/customer◯

個別の顧客情報/customer/{customer_id}

◯

履歴一覧

/purchsehistory◯

個別の履歴レコード/purchasehistory/{order_id}◯/purchasehistory/customer/{customer_id}

◯

購入履歴

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

更新追加削除◯◯◯24

DEMO：データ表示に関するSencha側実装の解説

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

25

ユーザー認証： RAD Serverの認証用DBと認証APIを使う
 RAD Server の標準機能だけで認証が利用可能
 認証が成功すると sessionToken が返される

認証リクエスト POST /users/login{ “username”: “ユーザ名”, “password”: “パスワード文字列” }{ sessionToken: “xxxxx” }リソースの操作 GET /senchaRAD/customer
X-Embarcadero-Session-Token: “xxxxx”
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

RAD Server の内部DB
26

ユーザー認証：認証は設定ファイルで有効化できる
 設定ファイル（emsserver.ini) 記述例の抜粋[Server.Authorization]; 標準のリソースを認証必須にする
Version={"public": false}
Users={"public": false}Groups={"public": false}
Installations={"public": false}
Push={"public": false}
Edgemodules={"public": false}; Users.LoginUser は認証処理に使用するため、未ログイン状態のアクセスを許可する
Users.LoginUser={"public": true}; DCamp35 リソースは group = users に所属する認証済みユーザだけがアクセスできる
DCamp35={"public": false, "groups": ["users"]}

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

27

ユーザー認証：認証APIを利用するフォームの作成
var panel = Ext.first('loginpanel'),usernameField = panel.down('field[name=username]'),passwordField = panel.down('field[name=password]');Ext.Ajax.request({url: MyApp.Settings.serverUrl + '/users/login',method: 'POST',
useDefaultXhrHeader: false,
cors: true,
jsonData: {username: usernameField.getValue(),password: passwordField.getValue()},
success: function(response, opts) {var variables = Ext.getStore('Variables');var record = variables.getAt(0);record.set('sessionToken', Ext.decode(response.responseText).sessionToken);panel.hide();},failure: function(response, opts) {Ext.Msg.alert('エラー', 'ユーザー名またはパスワードが不正です。');}});
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

28

参考：既存アプリをWeb API化したい場合
 リファクタリングを経てクライアントアプリとサーバ側を分離
単にデータアクセスをRESTで公開するのではなく、サービスとして何を供給するのかに着目

ビジネスロジック、データアクセスを中間サーバーに移動してREST APIで公開

2層構成のままのリファクタリング

データアクセス
ビジネスロジック
REST API

データアクセス

データアクセス

ビジネスロジック

ビジネスロジック

UI周りのコードUI周りのコード

UI
クライアントアプリケーション

UI
クライアントアプリケーション

データモジュール

プレゼンテーション層とロジック層を明確に分離する
リファクタリングを実施

RESTクライアントコード

UI周りのコード

UI

Model
ProxyStore

UI

クライアントアプリケーション
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

29

まとめ Sencha Architect のWebアプリ開発は Delphi/C++Builder と同様にビジュアル開発で効率的に行える Webアプリケーションサーバは Delphi/C++Builderで開発可能
 既存のC/Sアプリはリファクタリングを経てWeb API化本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

30

THANKS!
www.embarcadero.com/jp
第35回 エンバカデロ・デベロッパーキャンプ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。