rad studio勉強会@大阪 「スマートデバイスで簡易画面署名 etc (ios / android 、...
TRANSCRIPT
RadStudio勉強会@大阪 RadStudio勉強会@大阪
スマートデバイスで簡易画面署名 etc (iOS / Android 、 IntraWeb)
株式会社ミガロ.
吉原 泰介
RadStudio勉強会@大阪 RadStudio勉強会@大阪
【アジェンダ】
1. iOS / Androidネイティブアプリでの画面署名
2. IntraWebアプリでの画面署名
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• タッチ操作を利用した署名の仕組み スマートデバイスではディスプレイのタッチ操作の機能を利用して、 署名を行う場合、描画領域を用意してタッチの軌跡で表現します。
描画領域 ①タッチ操作で マウスのように 軌跡を表現
マウスとしてハンドリング可能
②署名が終わったらスクリーンショットで画像に保存
RadStudio勉強会@大阪 RadStudio勉強会@大阪
座標から描画する
変数を生成・破棄する
操作で座標登録する
軌跡から画像生成する
1. iOS / Androidネイティブアプリでの画面署名
• タッチ操作を利用した署名機能実装のポイント 機能の実装としては、軌跡情報制御、描画制御、初期・終了制御、 タッチ操作制御、署名画像生成で構成を組み立てます。
描画領域
B.描画制御
C.初期・終了制御
D.タッチ操作制御
E.署名画像生成
座標を管理する A.軌跡情報制御
RadStudio勉強会@大阪 RadStudio勉強会@大阪
• 署名機能の実装手順① フォームに次のコンポーネントを配置 TTRoundRect、Timage、TButton
1. iOS / Androidネイティブアプリでの画面署名
TRoundRect
TImage
TButton
描画領域
画像生成確認用 (実際の実装では不要)
署名画像生成
TButton 署名クリア
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順②
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.軌跡情報制御
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順③
座標位置手続きの実装
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
座標位置追加手続き
A.軌跡情報制御
描画領域
座標位置の管理
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順④
座標位置手続きの実装
//ステータスが1で軌跡距離が規定より大きければ座標を追加 else if P.CurPos.Distance(Signature.Last.CurPos) > 8.0 then begin Signature.Add(P); end; //軌跡情報を使って描画領域に描画 RoundRect1.Repaint; end;
座標位置追加手続き(前ページ続き)
A.軌跡情報制御
描画領域
座標位置の管理
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順⑤
軌跡描画処理イベントの実装
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.描画制御
描画領域
軌跡情報を描画
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順⑥
軌跡描画処理イベントの実装 //軌跡情報の配列を回して描画 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.描画制御
描画領域
軌跡情報を描画
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順⑦
procedure TForm1.FormDestroy(Sender: TObject); begin FreeAndNil(Signature); //軌跡情報の破棄 end;
OnDestroy処理(画面終了)
画面初期処理・終了処理の実装
procedure TForm1.FormCreate(Sender: TObject); begin Signature := TList<TSigCapRec>.Create; //軌跡情報の生成 end;
OnCreate処理(画面初期)
C.初期・終了制御
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順⑧
タッチ操作(マウス)の制御実装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処理(タッチ操作制御)
D.タッチ操作制御
タッチを移動したとき
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順⑨
タッチ操作(マウス)の制御実装B
procedure TForm1.RoundRect1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single); begin //描画フラグをOFFに設定 DrawFlg := False; //ステータス2で座標追加 Addpoint(X, Y, 2); end;
OnMouseUp処理(タッチ操作終了)
D.タッチ操作制御
タッチを離したとき
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実装手順⑩
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.署名画像生成
画像生成
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• 署名機能の実行
タッチで署名ができる
ボタンを押すと画像ファイルを生成して下部に表示
(実際の実装では必要あり ません。)
署名画像が生成できている!
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• WindowsのコンパイルもOK
マウスで署名ができる
動きは同じです
RadStudio勉強会@大阪 RadStudio勉強会@大阪
1. iOS / Androidネイティブアプリでの画面署名
• タッチ操作を利用した署名の仕組みの応用 応用すれば、写真や画像に対して署名やメモをする機能としても 実装できます。画像はスクリーンショットとして生成しているので特別な 制御も不要です。
画像(TImage)
②タッチ操作で マウスのように 軌跡を表現
③メモが終わったらスクリーンショットで画像に保存
描画領域 例)
①撮影した画像を重ねて表示
RadStudio勉強会@大阪 RadStudio勉強会@大阪
2. IntraWebアプリでの画面署名
VCLでモバイル開発ができる!
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IntraWebで開発するモバイルアプリケーションのメリット
・インターネット環境とブラウザがあれば、利用できる。
・iOS、Android、PCでも利用できる。
・クライアントにアプリケーションの配布が不要。 ・従来のVCLで開発ができる。
・FastReportをそのまま組み込んでPDF帳票開発も楽。
2. IntraWebアプリでの画面署名
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IntraWebで開発するモバイルアプリケーション手順 DelphiのVCL上でWEBアプリが開発できる機能 詳細は過去のデベロッパーキャンプ資料参考ください(第10回? 結構昔ですが基本変わりません) http://edn.embarcadero.com/jp/article/images/38706/a5.pdf
①プロジェクトの作成 ②コンポーネントの配置
③プログラムの記述 ④コンパイル&実行
2. IntraWebアプリでの画面署名
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IntraWebのスマートデバイス市販コンポーネント IWCGjQUeryMobile活用
【 IWCGjQUeryMobile 】 スマートデバイス向けWebアプリケーション用 http://www.cgdevtools.com/skill/iwcgjquery-mobile-suite/
■特徴
・いわゆるjQueryMobileがコンポーネントで使用できる。
・コンポーネントの種類・機能が豊富に揃っている。 画面署名コンポーネントもある。 ・コンポーネントがオープンソースを取り込んだ 特殊な形のため、開発画面の動作が若干使いづらい。
2. IntraWebアプリでの画面署名
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IWCGjQUeryMobileのコンポーネント ■コンポーネント例
【画面デザイン】 【入力部品】 【ダイアログ】
【特殊機能】
日付、月、時間 など様々な モードで設定可能
【メニュー】
ファイルのアップロード ダウンロードが可能
署名が可能
2. IntraWebアプリでの画面署名
RadStudio勉強会@大阪 RadStudio勉強会@大阪
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の詳細バージョン毎にリリースされているので バンドル版のバージョンでは導入自体ができません。
2. IntraWebアプリでの画面署名
ライセンス数 価格1ユーザーライセンス 99 €サイトライセンス 299 €
ライセンス数 価格1ユーザーライセンス 399 €
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IWCGjQUeryMobile注意点5箇条!
第1箇条
IWCGjqueryMObileはIntraWebの詳細バージョン毎にリリースされているので バンドル版のバージョンでは導入自体ができません。 IntraWeb CGDevTools
2. IntraWebアプリでの画面署名
IntraWebと詳細バージョンを合わせる!
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IWCGjQUeryMobile注意点5箇条!
第2箇条
インストールすると同社のIWCGjQuery製品もセットで導入されます。(使う場合は別購入) 似ていますが、同じフォームで共存はできないで混在はNGです! IWCGjQuery IWCGjQueryMobile
2. IntraWebアプリでの画面署名
IWCGjQueryコンポーネントと間違えないで!
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IWCGjQUeryMobile注意点5箇条!
第3箇条
2. IntraWebアプリでの画面署名
エラーが発生したらまずSynchronizeで同期!
jQueryMobileのjs
と同期エラーになることもしばしば
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IWCGjQUeryMobile注意点5箇条!
第4箇条
2. IntraWebアプリでの画面署名
斬新なコンポーネントは驚かずに楽しむ!
例えばプロパティにイベントが出現してもあわてない。 たまにjQueryMobileにある属
性を用意しただけで未実装プロパティなどの罠もあります。
RadStudio勉強会@大阪 RadStudio勉強会@大阪
IWCGjQUeryMobile注意点5箇条!
第5箇条
2. IntraWebアプリでの画面署名
ちょっと理不尽なリリーススピードは追わない!
毎日リリースされることも多いのでアプリに問題がなければ、深追いしない。
逆に直接質問やリクエストをすると対応が早い! (但し英語です)
RadStudio勉強会@大阪 RadStudio勉強会@大阪
署名実装の話ですが、 IWCGJQMSignatureコンポーネントを使うとかなり簡単に実装できます
2. IntraWebアプリでの画面署名
RadStudio勉強会@大阪 RadStudio勉強会@大阪
コンポーネント化されているのでコードも数行
2. IntraWebアプリでの画面署名
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;
テキストデータとして出力
RadStudio勉強会@大阪 RadStudio勉強会@大阪
簡単にスマートデバイス向け署名アプリを作れます。
2. IntraWebアプリでの画面署名
テキストデータとして出力・読み込みする機能もある
RadStudio勉強会@大阪 RadStudio勉強会@大阪
もちろん画像とセットでの署名も可能
IWCGJQMSignatureのStyleプロパティで
background属性に設定できます。
2. IntraWebアプリでの画面署名
署名域の画像表示
コードで書く場合 IWCGJQMSignature1.Style.Add('background') ; IWCGJQMSignature1.Style.Values['background']:= ('url・・・・
RadStudio勉強会@大阪 RadStudio勉強会@大阪
補足)IntraWebではPDF帳票も実装が容易
IntraWeb上ではFastReportも組み込むことができため TfrxReportとTfrxPDFExportを張り付けて 下記のような単純なコードだけでPDFを出力することができます。
2. IntraWebアプリでの画面署名
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;
RadStudio勉強会@大阪 RadStudio勉強会@大阪
ご静聴ありがとうございました