【Ｔ4】Delphi/C++テクニカルセッション「「カラオケの鉄人」店舗で、クーポン作成―DTP並みの印刷システム実現の手法」
株式会社鉄人化計画
新規事業開発部 毛利春幸

「「カラオケの鉄人」店舗で、クーポン作成―DTP並みの印刷システム実現の手法」

はじめに

2

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

はじめに• 株式会社鉄人化計画では、「カラオケの鉄人」の各店舗で、ニーズに合わせてチラシやクーポンを即時発行・印刷でいるシステムを開発しました。Webベースのこのシステムは、RAD StudioのWebBrokerとFireMonkey、更にjQueryを活用し、DTP並みの印刷を実現しています。

3

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

「カラオケの鉄人」と他店の違い(1)• 集中管理カラオケシステムです• メーカのカラオケ再生機が部屋に無い←部屋に置いてない• カラオケ再生機は機械室にありAVをマトリックススイッチャーを使って部屋まで転送させる仕組みです。(今はデジタルデータを転送しています)
4

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

「カラオケの鉄人」と他店の違い(2)
• 構成図

選曲

各部屋にLinux
選曲

コントローラー
映像/音声

RS232C

映像/音声

選曲

選曲

5

AVマトリッ
クスス
イッ
チャー

映像/音声

映像/音声

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

鉄人システムとボーランド• 鉄人システムは2002年ごろ完成• 当時全ての部屋端末はLinux + Kylixの構成• 今でも1000部屋近くLinux + Kylixの構成です• 2008年ごろ会員システム導入 全てDelphi
WebBroker です• 今年 鉄人化計画とシステム開発会社であった、システムプランベネックスが吸収合併しました6

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

なぜKylix• 2001〜2002年ごろLinuxがブームでした。
• 部屋側の端末を1円でも安くあげたいOSの費用もかけたくない• 当時流行ってたGTK+やQtと比較してKylixのIDEは視覚的に理解しやすく開発しやすかった

7

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

なぜ会員システムはWebAPI(1)• 店舗側からの接続がインターネット経由でした• POS側で使われていたSQL Server+ Windows+VBでした• 会員システムも同じ構成をとる事が出来た• IIS+(ISAPI and CGI)構成が取れたなぜ会員システムはWebAPI(2)会員サーバー

• 構成
店舗側
POS

インターネット

Windows + VB
Windows Server

集中管理カラオケ開発者側から見たメリット• カラオケ機器が機械室にある為効率の良い再生管理ができます• フロント(受付)清算POSとの連動• お客様が歌われた歌唱履歴が取れます• 部屋にLinux 端末があるので機能が拡張できる

10

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

部屋の拡張• 電子目次本 カラ鉄ナビの導入• スマホアプリ カラ鉄ナビアプリ導入

11

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

部屋にLinux + Kylix• 部屋にLinux + Kylixがあるので 楽曲の再生管理や楽曲リクエストがスマホなどでできます
カラオケ映像Wi‐Fi経由で部屋端末に接続し楽曲をリクエストできます12

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

Kylix

カラオケの鉄人• カラオケの店舗を運営してる会社なのですが思いついたシステムは社内で作ってしまう文化が根付いていました• 他店とは違い店舗側(社員)は、わりとITに詳しい
13

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

今回の案件• クーポン システム
(入力、(1タイム/期間限定)コード発行、POS連動)• クーポン券 印刷カスタマイズするシステム(店舗側で印刷)

14

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

社内の状況(問題点)• むやみに実行ファイルをインストールできない。
(EXEファイルの配布できるのですがいろいろ手順踏まないといけないので時間もかかります。)• 今回の案件は 年末商戦で利用する為上記の手順を踏むと年明ける

15

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

状況からの結論• Webしか無いかと

16

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

本部からクーポン発行

構成図

メインWeb画面は jQuery

Linuxサーバ

Windowsサーバ

Apache+ｐｈｐ
SQL Server
クーポンDB

店舗側
優待券印刷Web画面
メインWeb画面はjQueryWindowsサーバ

画像生成依頼
優待券画像完成データダウンロード

Ajax JSON + WebBroker
IIS+
Delphi

店舗側
POS
優待券を来店時にフロントバーコードリーダーで読み取る
POSレジがバーコードが正しいかWebBrokerに問合せる

17

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

ADO Query問合せ

２つの案件なぜ来たのか• クーポンシステムに関しては以前 昨年某S社様が営業に来られて そのアイデアを鉄人風にアレンジ• 印刷システムに関しては(次頁)18

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

３月商戦時の画像作成システムをアレンジ• ある日(3月)社内メーリスで「誰かこの画像に社員番号入れたら、自動的に優待券の画像を生成するWebアプリつくれないですか？
マッハでできる人いませんか？」• DelphiならWebサーバーに設置するまで2時間あればできますよね

19

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

その時に作った優待券• メーリスで書いてたようにPNG画像に社員番号を入れるだけのシステムでした
ここに社員番号20

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

WebBroker• 2008年ごろ弊社データセンター側システム運用を開始したのですがシステム全体の9割が現在のところIIS + WebBrokerです• なぜ WebBrokerなのか• いつからあるのか忘れたのですがDelphi3ごろ?から気がつけばすでに存在していた• 枯れた技術なので失敗はない
21

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

フロント側Web画面はjQuery+PHP• データやメソッドはJSONでWebBrokerを使う
Linuxサーバ

Apache+ｐｈｐ

なぜ画面はjQueryなのか？
jQueryはクライアントブラウザ側で実行される為サーバーサイドでプログラム実行する必要が無い。
データ取得などのやりとりだけサーバーサイドで動的プログラムで取得する
22

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

Windowsサーバ

IIS+
DelphiWebBroker基本•••

おさらい的にTWebModuleで継承されたクラスのイベントにプログラムを書きます。
デフォルトではResponse.Content :='<html>' +'<head><title>Web サーバー アプリケーション<title></head>' +'<body>Web サーバー アプリケーション</body>' + '</html>’;

こんな事になってますが最近ブラウザはUTF8デフォなので文字化けます

23

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

WebBroker UTF-8で出力• Response.SendResponse を使うとうまくいきますね24

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

WebBroker JSON出力する• 先ほどのUTF8出力方法と同じ方法でJSONを出力するとUTF8なのでjQueryで取り込む事できます。
• ClientDataSet1に100レコードほど入れたデータをJSON出力します25

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

WebBroker JSON出力する(2)• ClientDataSet1に作成したレコードをTJSONObjectにコピーします。

26

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

JSONデータをjQueryで呼びます(1)• 先ほどDelphiで作成したJSONデータをjQueryから呼び表示させます• クロスドメインなAjaxでJSONを扱う場合
Response.SetCustomHeader(‘Access‐Control‐Allow‐Origin’,‘*’);Response.SetCustomHeader(‘Access‐Control‐Allow‐Headers’,‘Origin, X‐Requested‐With, Content‐Type, Accept’);

上記のお作法が必要です。

27

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

JSONデータをjQueryで呼びます(2)• $(document).on(“pageinit”, function(){
ページ読み込み時にJSONデータを取得します

28

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

JSONP（JSON with padding）• $.ajax()の dataType: ‘jsonp’指定するとJSONPのデータが取得できます。
• データ渡すJSON側の処理は関数()でくくるだけです。
TStringStream.Create(Format(‘hoge(%s)’, [FJsonOut.ToString]), TEncoding.UTF8);• Delphiで作る場合これで良いのかと思います。

29

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

jQueryとJSONを使ってクーポン管理• jQueryとDelphi(WebBroker)のJSONを使ってクーポンの管理画面を作りました。
• 印刷用の画像ファイルを作る方法も同じくDelphi(WebBroker)で構築する事にしました。

30

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

JSON出力をBSONに移行(1)• 10 Seattle からBSONが使えます

BSONは主にMongoDBのデータストレージ及びネットワーク転送フォーマットとして利用されている、データ交換フォーマットである。 単純なデータ構造や連想配列（MongoDBではオブジェクトまたはドキュメントと表す）を示すバイナリ構造であり、 名称はJSON由来であり“バイナリ型JSON”の略語である。→wikipedia• 先ほど WebBrokerで出力したJSONをBSONに変えます。
• uses System.JSON.BSON 追加

31

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

JSON出力をBSONに移行(2)• コードvar
ja: TJSONArray; jo: TJSONObject; bsonw: TBsonWriter; JsonReader: TJsonStringReader;
Begin
FJsonOut.AddPair('c1', ja);
Response.ContentStream := TBytesStream.Create;bsonw := TBsonWriter.Create(Response.ContentStream);
JsonReader := TJsonStringReader.Create(FJsonOut.ToString);bsonw.WriteToken(JsonReader);try
Response.ContentType := 'application/octet‐stream';Response.ContentStream.Position := 0;
Response.SendResponse;
except
end;
end;

32

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

BSONをTNetHTTPClientで受信 (1)• BSONをDelphiで受信するコードです
Beginbson := TBytesStream.Create();NetHTTPClient1.Get('http://127.0.0.1:8080', bson);
BsonReader := TBsonReader.Create(bson);
JsonWriter := TJsonStringWriter.Create;
JsonWriter.Formatting := TJsonFormatting.Indented;
JsonWriter.WriteToken(BsonReader);
Memo1.Lines.Text := JsonWriter.ToString;
end;

33

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

BSONをTNetHTTPClientで受信 (2)• 下絵の様にBSONを解釈してJSON表示できます34

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

WebBroker + Fire Monkey の理由••••

多角形などのTPathが使える
透過PNGファイルが簡単に作れる
グラデーションが使える
ローテーションなどが楽に作れる• Fire Monkey には沢山のメリットがありました。

35

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

WebBroker + FireMonkey(1)• ５種類のアプリケーションが作れます• 弊社の場合IISメインですのでISAP と スタンドアロンCGI実行 を使っています

36

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

WebBroker + FireMonkey(2)• プロジェクトを作成するとツールパレットにはFMX用のコンポーネントが出てきます。

37

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

三角形の透過PNGファイルを作る• これだけで三角のPNGファイルが完成です。

38

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

三角形の透過PNGファイル• 透過になってるか他の画像編集ソフトで確認ファイルを保存

透過PNGで出力されている事が確認できました。
39

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

TBitmap.Canvasにガリガリ書けばいいのですが• 至急の場合や先に確認が必要な場合が多々です。
• フォームに書いた内容がそっくりそのままをWeb出力するとIDEのフォームデザイナー側で設計できるので手間が省けます

40

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

TWebModule以外にTForm追加したプロジェクト• WebBrokerのプロジェクトに フォーム追加します

41

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

TWebModule以外にTForm追加したプロジェクト(2)• WebModuleUnit1の隣にフォーム2が作られています

42

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

TWebModule以外にTForm追加したプロジェクト(3)• フォーム2にTLayout, TRoundRect, TButtonを配置しました

43

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

TWebModule以外にTform追加したプロジェクト(4)• 下記のコードを書いて実行してみますprocedure TWebModule1.WebModule1DefaultHandlerAction(Sender: TObject;
Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
begin
Response.ContentType:= 'image/png';
Response.ContentStream := TMemoryStream.Create;Form2.Layout1.MakeScreenshot.SaveToStream(Response.ContentStream);Response.SendResponse;end;

デザイン側はIDEに任せています

44

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

IDEのデザイン時と同じ• IDEのデザイン時そのままなので作業時間短縮できます
IDE フォームデザイン
ブラウザです45

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

透過の確認• ブラウザで出力されたデータを保存
他の画像ソフトで確認するときちんと透過されたPNGでした

46

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

バーコード表示• DEKOさんのBARCODE.PASを使いました。

バーコードも同じくWeb側でPNG画像にする事が可能です。
47

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

バーコード表示(2)• BARCODE.PASそのままのコードで動きます

48

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

バーコード表示(3)• クーポン画像の上にバーコードをDrawBitmapで貼れば完成• バーコード管理画面で指示したバーコードが反映されます

49

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

「「カラオケの鉄人」店舗で、クーポン作成―DTP並みの印刷システム実現の手法」

まとめ

50

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

まとめ• 何故Webで実装したのか– むやみに実行ファイルを店舗に配布できない。
• 店舗や本社も同じですが 配布するには時間もかかります• フォームを使って画像イメージを作成するメリット/デメ
リット– 本社にてその場で確認できます• フタッフやデザイナーとIDE画面を返して確認しながら作業を進める事ができます。
51

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

Thank you!