2020年5月10日日曜日

Notes で QR コードを表示しよう

今回は LotusScript の NotesHTTPRequest クラスを使って Node.js のアプリと連携する Notes アプリを作ってみましたので、ご紹介します。
※ NotesHTTPRequest クラスは 10.0 の新機能です。

作ったアプリは「テキストを QR コードに変換する」ものです。

(念のため)QRコードとは次のようなものです。


過去のノーツコンソーシアムのイベントでは "notes://" で始まる Notes URL が埋め込まれた QR コードを iPad のカメラで撮影し HCL Nomad ( iOS や Android における Notes クライアントとも言える公式アプリ)で Notes アプリを開くといったデモがありましたね。

iOS 端末には QR コードを読み込む機能がありますが、HCL Nomad からその機能を呼び出して撮影したQRコードに埋め込まれたテキストをフィールドへセットしたり QR コードを生成して表示する機能は、残念ながらまだ Notes 標準の機能にはありません。現状では Notes 以外のものに頼るしかありません。

「ノーツ qr」などとググってみれば、Java や XPages で作ったアプリの例がいくつかヒットします。

けれども現状の Nomad は Java は動かないのです…
XPages ならばブラウザがあれば使えますが... 今後は Domino Volt で!という声も聞こえてきそうですが...

今回は、Notes または Nomad からアクセスできる Web サービスに頼ることにします。

では、Nomad (上の LotusScript )から送信されたテキストから QR コードを生成し、QR コードの画像を返す Web サービスを用意します。

まずは Web サービスを node.js 上に構築します。

私は Windows 10 Pro に node.js をインストールしていますので、コマンドプロンプトから次のコマンドで準備しました。
> mkdir qrapp
> cd qrapp
> npm init
> npm install express
> npm install body-parser
> npm install qrcode

上のコマンドでは、適当な場所(デスクトップなど)に qrapp というディレクトリを作成し、そのディレクトリへ npm init で package.json を作ったら、express, body-parser, qrcode をインストールしています。

QRコードの生成には node-qrcode を利用しています。漢字にも対応しているところが素晴らしい!
https://github.com/soldair/node-qrcode


qrapp ディレクトリに app.js という名前でファイルを作成します。テキストエディタ等で次のコード(たったの14行!)をコピペして保存します。これが Web サービスのメインとなるものです。
const express = require( 'express' );
const bodyParser = require( 'body-parser');
const app = express();
const port = 3000;
const QRCode = require( 'qrcode' );
app.use( bodyParser.urlencoded( { extended: true } ) );
app.use( bodyParser.json() );
app.post( '/qr',( req, res ) => {
    console.log( req.body.qr_text );
    QRCode.toDataURL( req.body.qr_text, function ( err, qrcode ) {
        res.send( qrcode );
    });
});
app.listen( port, () => console.log( 'QR-Code app listening on port 3000.' ) );

この Web サービスは、 http://<host>:3000/qr でユーザーからのリクエストを待ちます。

次の JSON 文字列を http://<host>:3000/qr へ POST すると、QR コード画像をbase64エンコードした値を含む文字列「data:image/png;base64,<base64エンコードされた画像>」を返します。

{
    "qr_text" : "Notes/Dominoと焚き火をこよなく愛する中野です。どうぞよろしくお願いします!"
}

この Web サービスが返す文字列を後述する html へ埋め込むと QRコードが現れるという仕掛けです。


Web サービスを起動するには、コマンドプロンプトから qrapp ディレクトリへ移動して、次のコマンドを投入します。
> node app.js

Ctrl + C(Ctrl キーを押しながら C をタイプ)するとWeb サービスは終了します。



次に Notes アプリを作ります。


データベース内に2つのフォームを作ります。
  • テキストを入力する "Main" フォーム
  • QR コードを表示する "qrcode" フォーム
"Main" フォームには、一つの入力可能なフィールド "qr_text" と、ホットスポットボタンがあります。

以下(Sub Click と Function getQrCode)はホットスポットボタン「QRコード表示」のコードです。
Sub Click(Source As Button)
 Dim ws As New NotesUIWorkspace
 Dim ss As New NotesSession
 Dim req As NotesHTTPRequest
 Dim doc As NotesDocument
 Dim qr_text As String
 Const url = "http://<host>:3000/qr"

 qr_text = ws.CurrentDocument.FieldGetText( "qr_text" )

 Set req = ss.CreateHTTPRequest
 Call req.SetHeaderField( "Content-Type", "application/json; charset=utf-8" )
 req.PreferStrings = True

 Set doc = New NotesDocument( ws.CurrentDocument.Document.ParentDatabase )
 doc.Form = "qrcode"
 doc.qrcode = req.Post( url, |{ "qr_text": "| & qr_text & |"}| )

 Call ws.EditDocument( False, doc, True )
End Sub

7行目の "Const url ="には、Web サービスの URL である http://<host>:3000/qr を指定します。<host>の部分は IPアドレスやホスト名に書き換えます。


もうひとつのフォーム "qrcode" には、ひとつの計算結果テキスト(次の下線部)と、その前後に html タグを書きます。
</form><img src="<計算結果の値>"><form>
</form>から<form>までの文字全体をパススルーHTMLとしています。

計算結果テキストには qrcode フィールドの値を代入しています。なおここではフォーム上に qrcode フィールドを作る必要はありません



以上で完成です。

このサンプルデータベースでは、フォーム”Main”を表示するフレームセットを作りました。データベースのプロパティから、データベースを開いた時に表示するフレームセットとして指定しています。

Web サービスを起動したら、"Main" フォームを開いてテストしてみましょう。
iPad の Nomad でテストする場合、Node.js のアプリが使用するポート 3000 へアクセスできることを確認しましょう。

QR Code アプリをタップすると…

フォーム “Main” が開きます。QR コードにしたい言葉をタイプして「QRコード表示」ボタンをタップすると…

フォーム ”qrcode” 上に QR コードを表示します!




商品コードや URL などの Notes デーベースにある様々な文字列を QR コード化する事ができそうです。

0 件のコメント:

コメントを投稿