【LANSA Tips】WebアプリケーションでのQRコードの読み取り
質問
Visual LANSA WebのアプリケーションでQRコードの読み取りはできますか？
回答
ウィジェットとLANSAのアプリ LANSA Mobileを使用することでQRコードの読み取りが可能です。
1. サンプル
ウィジェット xDeviceBarcodeScannerを使用した、QRコードを読み取るWebページのサンプルです。
xDeviceBarcodeScannerの使用には、LANSA MobileからWebページを実行する必要があります。
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME) Height(480) Width(576) Layoutmanager(#Layout1)
Define_Com Class(#PRIM_VS.Style) Name(#Style1) Foregroundbrush(#Brush1)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(Theme500)
Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Layout1Row1) Displayposition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Layout1Column1) Displayposition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item1) Alignment(TopLeft) Column(#Layout1Column1) Manage(#Icon) Parent(#Layout1) Row(#Layout1Row1) Sizing(None) Flow(Right) Marginleft(5)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item2) Alignment(TopLeft) Column(#Layout1Column1) Manage(#STD_TEXT) Parent(#Layout1) Row(#Layout1Row1) Sizing(None) Flow(Right) Marginleft(5)
Define_Com Class(#STD_TEXT.Visual) Name(#STD_TEXT) Componentversion(1) Displayposition(1) Height(48) Parent(#COM_OWNER) Tabposition(1) Usepicklist(False) Width(300) Caption('QRコードの値’) Labeltype(Caption) Marginleft(100) Left(5)
Define_Com Class(#PRIM_MD.Icon) Name(#Icon) Displayposition(2) Icon('qr_code_scanner’) Left(310) Parent(#COM_OWNER) Tabposition(2) Top(0) Enabled(False) Iconheight(48)
Define_Com Class(#xDevice03) Name(#BarcodeScanner)
Evtroutine Handling(#BarcodeScanner.Initialize)
Set Com(#Icon) Enabled(True) Style(#Style1)
Set Com(#BarcodeScanner) Cameraposition(BACK) Scanmultiple(False) Allowduplicates(False) Scannerengine(Default)
#BarcodeScanner.AddBarcodeType Type(QRCODE)
Endroutine
Evtroutine Handling(#Icon.Click)
#BarcodeScanner.ActivateScanner()
Endroutine
Evtroutine Handling(#BarcodeScanner.Completed) Status(#lStatus) Barcodecount(#lCount) Message(#lMessage)
Define Field(#vrbcIx) Type(*INT)
If (#lStatus = OK)
Begin_Loop Using(#vrbcIx) From(0) To(#lCount – 1)
#STD_TEXT := #BarcodeScanner.GetScannedValue( #vrbcIx )
End_Loop
Endif
Endroutine
End_Com
(1) 読み取り領域のサイズ
プロパティViewfinderheightとViewfinderwidthを使い、QRコードの読み取り領域のサイズを指定可能です。
端末の高さと幅に対して比率（%）で指定します。下記の場合、端末の30%の読み取り領域が表示されます。
例 Set Com(#BarcodeScanner) Cameraposition(BACK) Scannerengine(System) Viewfinderheight(30) Viewfinderwidth(30)
(2) スキャンエンジン
実行端末のOSが限定されますが、プロパティScannerengineに指定するスキャンエンジンによって、スキャンの精度が向上する可能性があります。
iOS
例 Set Com(#BarcodeScanner) Cameraposition(BACK) Scannerengine(System)
Android
例 Set Com(#BarcodeScanner) Cameraposition(BACK) Scannerengine(Google)
2. ウィジェット
ウィジェットはLANSAのコントロールには無い、JavaScriptの機能を使用するコントロールです。
ウィジェット マニュアル
https://docs.lansa.com/15/ja/lansa017/index.htm#lansa/vlwebeng02_0015.htm
ウィジェット xDeviceBarcodeScanner マニュアル
https://docs.lansa.com/15/ja/lansa017/index.htm#lansa/vlwebeng02_0100.htm
3. LANSA Mobile
(1) ご使用の端末にLANSA Mobileをインストールしてください。
iOS
https://apps.apple.com/jp/app/lansa-mobile/id1031456850
Android
https://play.google.com/store/apps/details?id=com.lansa.mobile.lansa
Windows
https://apps.microsoft.com/detail/9nblggh4wd3c
(2) LANSA Mobileのアプリを起動し、Webページを登録してください（以下はiOSでのオペレーションになります、タップするアイコンや機能名はOSによって異なります）。
① 画面右下の＋をタップし、「LANSA ページの追加」を実行してください。
② 下記の値を入力後に完了をタップしてください。
タイトル：メニューの記述
ホスト：Webページを実行するサーバーのIPアドレス
ページ名：Webページの名前
LANSA システム：LANSA システム名（例 dcxpgmlib）
区画：LANSA 区画名
言語：LANSA 区画の言語名（例 JPN）
③ ②で入力したメニューをタップするとWebページが実行されます。
サンプルは「QRコードの値」の右のアイコンをタップすると背面カメラを起動し、QRコードを読み取ると「QRコードの値」にその値を入力します。
サンプルのWebページはブラウザでも実行可能ですが、QRコードの読み取りに使用しているウィジェット xDeviceBarcodeScannerはブラウザでは使用できないため、「QRコードの値」の右のアイコンが有効になりません。
④ 登録したメニュー定義は画面右下の共有のアイコンから、他の端末のLANSA Mobileへエクスポート/インポートが可能です。
LANSA MobileはLANSA Webページ以外のURLも登録可能です。
様々なWebサイトやWebアプリケーションを実行するためのポータルアプリとしてご使用いただけます。