RAD Studio勉強会@大阪「スマートデバイスで簡易画面署名 etc （iOS / Android 、...

RadStudio勉強会@大阪 RadStudio勉強会@大阪

スマートデバイスで簡易画面署名 etc （iOS / Android 、 IntraWeb）

株式会社ミガロ.

吉原泰介


【アジェンダ】

1. iOS / Androidネイティブアプリでの画面署名

2. IntraWebアプリでの画面署名



• タッチ操作を利用した署名の仕組みスマートデバイスではディスプレイのタッチ操作の機能を利用して、署名を行う場合、描画領域を用意してタッチの軌跡で表現します。

描画領域 ①タッチ操作でマウスのように軌跡を表現

マウスとしてハンドリング可能

②署名が終わったらスクリーンショットで画像に保存


座標から描画する

変数を生成・破棄する

操作で座標登録する

軌跡から画像生成する


• タッチ操作を利用した署名機能実装のポイント機能の実装としては、軌跡情報制御、描画制御、初期・終了制御、タッチ操作制御、署名画像生成で構成を組み立てます。

描画領域

B.描画制御

C.初期・終了制御

D.タッチ操作制御

E.署名画像生成

座標を管理する A.軌跡情報制御


• 署名機能の実装手順① フォームに次のコンポーネントを配置 TTRoundRect、Timage、TButton


TRoundRect

TImage

TButton

描画領域

画像生成確認用（実際の実装では不要）

署名画像生成

TButton 署名クリア



• 署名機能の実装手順②

private { private 宣言 } Signature : TList<TSigCapRec>; //軌跡情報持用（座標クラスの配列） DrawFlg : Boolean; //描画制御用 procedure Addpoint(const aX, aY: Single; const aState:Byte); //座標追加手続き

グローバル変数・手続きの宣言

必要なクラス・変数・手続きの宣言

type //座標クラス TSigCapRec = Record CurPos : TPointF; PosState : Byte; end;

軌跡情報クラスの宣言

A.軌跡情報制御



• 署名機能の実装手順③

座標位置手続きの実装

procedure TForm1.Addpoint(const aX, aY: Single; const aState: Byte); var P :TSigCapRec; // H,M,S,Sm:Word; begin //カーソル位置とステータスを軌跡クラスに保持 P.CurPos := PointF(aX, aY); P.PosState := aState; //軌跡情報が空であればステータスを0に変更 if Signature.Count - 1 < 0 then P.PosState := 0; //ステータスが1以外であれば座標を追加 if P.PosState <> 1 then begin Signature.Add(P); end

座標位置追加手続き


描画領域

座標位置の管理



• 署名機能の実装手順④

座標位置手続きの実装

//ステータスが1で軌跡距離が規定より大きければ座標を追加 else if P.CurPos.Distance(Signature.Last.CurPos) > 8.0 then begin Signature.Add(P); end; //軌跡情報を使って描画領域に描画 RoundRect1.Repaint; end;

座標位置追加手続き（前ページ続き）


描画領域

座標位置の管理



• 署名機能の実装手順⑤

軌跡描画処理イベントの実装

procedure TForm1.RoundRect1Paint(Sender: TObject; Canvas: TCanvas; const ARect: TRectF); var P : TSigCapRec; P1 , P2 : TPointF; begin // 軌跡情報が空であれば描画しない if not (Signature.Count - 1 > 0) then Exit; //描画設定 Canvas.Stroke.Dash := TStrokeDash.sdSolid; //実線 Canvas.Stroke.Thickness := 4; //太さ Canvas.Stroke.Color := TAlphaColorRec.Red; //色

OnPaint処理（軌跡描画）

B.描画制御

描画領域

軌跡情報を描画



• 署名機能の実装手順⑥

軌跡描画処理イベントの実装 //軌跡情報の配列を回して描画 for P in Signature do begin case P.PosState of //ステータスが0であれば初期値に設定 0: P1 := P.CurPos; //ステータスが1であれば初期位置から描画して、次の初期位置に設定 1: begin P2 := P.CurPos; Canvas.DrawLine(P1, P2, 1, Canvas.Stroke); P1 := P.CurPos; end; //ステータスが2であれば初期位置から描画のみ 2: begin P2 := P.CurPos; Canvas.DrawLine(P1, P2, 1, Canvas.Stroke); end; end; end; end;

OnPaint処理（軌跡描画前ページ続き）

B.描画制御

描画領域

軌跡情報を描画



• 署名機能の実装手順⑦

procedure TForm1.FormDestroy(Sender: TObject); begin FreeAndNil(Signature); //軌跡情報の破棄 end;

OnDestroy処理（画面終了）

画面初期処理・終了処理の実装

procedure TForm1.FormCreate(Sender: TObject); begin Signature := TList<TSigCapRec>.Create; //軌跡情報の生成 end;

OnCreate処理（画面初期）

C.初期・終了制御



• 署名機能の実装手順⑧

タッチ操作（マウス）の制御実装A

procedure TForm1.RoundRect1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single); begin //タッチ操作状態のときだけ処理 if ssLeft in Shift then begin //描画フラグがOFFであれば、ステータス0で座標を追加して //描画フラグをONに設定 if not DrawFlg then begin Addpoint(X, Y, 0); DrawFlg := True; end //描画フラグがONであれば、ステータス1で座標追加 else begin Addpoint(X, Y, 1); end; end; end;

OnMouseMove処理（タッチ操作制御）


タッチを移動したとき



• 署名機能の実装手順⑨

タッチ操作（マウス）の制御実装B

procedure TForm1.RoundRect1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); begin //描画フラグをOFFに設定 DrawFlg := False; //ステータス2で座標追加 Addpoint(X, Y, 2); end;

OnMouseUp処理（タッチ操作終了）


タッチを離したとき



• 署名機能の実装手順⑩

procedure TForm1.Button2Click(Sender: TObject); begin Signature.Clear; //軌跡情報の初期化 end;

OnClick処理（署名初期化）＜補足＞

各Buttonクリックイベントの実装

procedure TForm1.Button1Click(Sender: TObject); begin //スクリーンショットで画像を生成して //確認用Imageに表示 Image1.Bitmap := RoundRect1.MakeScreenshot; end;

OnClick処理（署名画像生成）

E.署名画像生成

画像生成



• 署名機能の実行

タッチで署名ができる

ボタンを押すと画像ファイルを生成して下部に表示

（実際の実装では必要ありません。）

署名画像が生成できている！



• WindowsのコンパイルもOK

マウスで署名ができる

動きは同じです



• タッチ操作を利用した署名の仕組みの応用応用すれば、写真や画像に対して署名やメモをする機能としても実装できます。画像はスクリーンショットとして生成しているので特別な制御も不要です。

画像（TImage）

②タッチ操作でマウスのように軌跡を表現

③メモが終わったらスクリーンショットで画像に保存

描画領域例）

①撮影した画像を重ねて表示



VCLでモバイル開発ができる！


IntraWebで開発するモバイルアプリケーションのメリット

・インターネット環境とブラウザがあれば、利用できる。

・iOS、Android、PCでも利用できる。

・クライアントにアプリケーションの配布が不要。・従来のVCLで開発ができる。

・FastReportをそのまま組み込んでPDF帳票開発も楽。



IntraWebで開発するモバイルアプリケーション手順 DelphiのVCL上でWEBアプリが開発できる機能詳細は過去のデベロッパーキャンプ資料参考ください（第10回？結構昔ですが基本変わりません） http://edn.embarcadero.com/jp/article/images/38706/a5.pdf

①プロジェクトの作成 ②コンポーネントの配置

③プログラムの記述 ④コンパイル&実行



IntraWebのスマートデバイス市販コンポーネント IWCGjQUeryMobile活用

【 IWCGjQUeryMobile 】スマートデバイス向けWebアプリケーション用 http://www.cgdevtools.com/skill/iwcgjquery-mobile-suite/

■特徴

・いわゆるjQueryMobileがコンポーネントで使用できる。

・コンポーネントの種類・機能が豊富に揃っている。画面署名コンポーネントもある。・コンポーネントがオープンソースを取り込んだ特殊な形のため、開発画面の動作が若干使いづらい。


http://www.cgdevtools.com/skill/iwcgjquery-mobile-suite/






IWCGjQUeryMobileのコンポーネント ■コンポーネント例

【画面デザイン】【入力部品】【ダイアログ】

【特殊機能】

日付、月、時間など様々なモードで設定可能

【メニュー】

ファイルのアップロードダウンロードが可能

署名が可能



IWCGjQUeryMobileの購入 ■購入先 / 価格 ※2014/11/27時点。

CentralGest（http://www.cgdevtools.com）

※実際はIntraWebもXE以降であればISAPI(DLL)アプリケーション開発のために製品版（Ultimate版）の購入も必要です。

http://www.atozed.com/IntraWeb/Buy/index.EN.aspx IWCGjqueryMObileはIntraWebの詳細バージョン毎にリリースされているのでバンドル版のバージョンでは導入自体ができません。


ライセンス数価格1ユーザーライセンス 99 €サイトライセンス 299 €

ライセンス数価格1ユーザーライセンス 399 €

http://www.cgdevtools.com/skill/iwcgjquery-mobile-suite

http://www.atozed.com/IntraWeb/Buy/index.EN.aspx


IWCGjQUeryMobile注意点5箇条！

第1箇条

IWCGjqueryMObileはIntraWebの詳細バージョン毎にリリースされているのでバンドル版のバージョンでは導入自体ができません。 IntraWeb CGDevTools


IntraWebと詳細バージョンを合わせる！



第2箇条

インストールすると同社のIWCGjQuery製品もセットで導入されます。（使う場合は別購入）似ていますが、同じフォームで共存はできないで混在はNGです！ IWCGjQuery IWCGjQueryMobile


IWCGjQueryコンポーネントと間違えないで！



第3箇条


エラーが発生したらまずSynchronizeで同期！

jQueryMobileのjs

と同期エラーになることもしばしば



第4箇条


斬新なコンポーネントは驚かずに楽しむ！

例えばプロパティにイベントが出現してもあわてない。たまにjQueryMobileにある属

性を用意しただけで未実装プロパティなどの罠もあります。



第5箇条


ちょっと理不尽なリリーススピードは追わない！

毎日リリースされることも多いのでアプリに問題がなければ、深追いしない。

逆に直接質問やリクエストをすると対応が早い！（但し英語です）


署名実装の話ですが、 IWCGJQMSignatureコンポーネントを使うとかなり簡単に実装できます



コンポーネント化されているのでコードも数行


procedure TCGJQMMainForm.IWCGJQMButton1JQMButtonOptionsEventsVClick (Sender: TObject; AParams: TStringList); begin //Imageコンポーネントへ画像出力処理 IWCGJQMSignature.JQSignatureOptions.ExportToImage(IWCGJQMImage); end;

画像として出力

procedure TCGJQMMainForm.JQMReadDataBtnJQMButtonOptionsEventsVClick( Sender: TObject; AParams: TStringList); begin //EditのテキストデータをSignatureの描画へ出力 IWCGJQMSignature.JQSignatureOptions.SetData (JQMExportResult.JQMEditOptions.TextAreaOptions.Lines.Text); end;

テキストデータとして出力


簡単にスマートデバイス向け署名アプリを作れます。


テキストデータとして出力・読み込みする機能もある


もちろん画像とセットでの署名も可能

IWCGJQMSignatureのStyleプロパティで

background属性に設定できます。


署名域の画像表示

コードで書く場合 IWCGJQMSignature1.Style.Add('background') ; IWCGJQMSignature1.Style.Values['background']:= ('url････


補足）IntraWebではPDF帳票も実装が容易

IntraWeb上ではFastReportも組み込むことができため TfrxReportとTfrxPDFExportを張り付けて下記のような単純なコードだけでPDFを出力することができます。


PDF出力

procedure TIWForm1.IWButton1Click(Sender: TObject); var ms : TMemoryStream; begin ms := TMemoryStream.Create; frxReport1.PrepareReport(); frxPDFExport1.Stream := ms; frxReport1.Export(frxPDFExport1) ; WebApplication.SendStream(ms, false, 'application/pdf', 'test.pdf'); end;


ご静聴ありがとうございました

RAD Studio勉強会@大阪「スマートデバイスで簡易画面署名 etc （iOS / Android 、...

Technology

Transcript of RAD Studio勉強会@大阪「スマートデバイスで簡易画面署名 etc （iOS / Android 、...

RAD Studio勉強会@大阪 「スマートデバイスで簡易画面署名 etc （iOS / Android 、...

Technology

Transcript of RAD Studio勉強会@大阪 「スマートデバイスで簡易画面署名 etc （iOS / Android 、...

RAD Studio勉強会@大阪「スマートデバイスで簡易画面署名 etc （iOS / Android 、...

Transcript of RAD Studio勉強会@大阪「スマートデバイスで簡易画面署名 etc （iOS / Android 、...