注意：やること「QRコードを生成する」がリリースされていますので、画面のカスタマイズからでもJob RunnerからでもQRコードが生成出来ます！

こちらの記事は参考までにご利用ください。




QRコードはスマートフォンや専用の読み取り機器で簡単に情報を読み取れる、非常に優れた2次元コードです。今回は、 AWS Lambda を利用して kintone のレコード情報を元にQRコードを生成する方法をご紹介します。


追記：2019年1月

kintoneの2018年12月モバイル版JavaScriptアップデートにより、モバイル版でもこちらのカスタマイズが利用可能となりました。

ぜひご活用ください！


事前準備：Lambda 関数について

QRコードを生成するLambda関数は、弊社アールスリーがオープンソースにて提供しております Customine Barcode Lambda をご利用いただくのが簡単かと思います。このLambda関数は、埋め込む文字列と画像サイズを指定すると、QRコードを生成しHTMLのimgタグとして返す簡単な関数です。もちろんご自分で作成していただいても構いません。


このツールは AWS Serverless Application Model (AWS SAM) を利用して Lambda関数のパッケージングと配布を行っています。実行される内容や必要な権限はこちらのSAMテンプレートをご確認ください（Lambda関数そのものと、CognitoのIdentityPool、IAMロールなどを作成します）。


まずGitHubのリポジトリよりソースをダウンロードまたは git clone してください。


コンパイル済みのバイナリファイル（barcodeMaker）をこちらの記事に添付しておりますので、これをダウンロードして上記で取得したソースの build フォルダ以下にコピーしてご利用いただくことも可能です。


Lambda関数のビルド

もしご自分でビルドしたい場合には、Go言語を利用していますので、お持ちでない方はこちらよりダウンロード、インストールしておいてください。


$ go get -u github.com/golang/dep/cmd/dep （ライブラリ管理でdepを利用していない方は入れておいてください）
$ dep ensure （←依存ライブラリの取得は初回の1回だけで構いません）

$ GOOS=linux GOARCH=amd64 go build -o build/barcodeMaker


Lambda関数のデプロイ

ビルド後、またはバイナリファイルをそのまま利用するかたも、以下の手順にてLambda関数をパッケージングして、デプロイします。

あらかじめパッケージを置くS3バケットを作成しておいてください（書き込み権限を持ったバケットであれば既存のバケットでも構いません）。


また以下の内容は、ご自分の環境に合わせて書き換えてください。

  • your_profile_name パッケージングとデプロイに必要なIAM権限を持ったプロファイル名
  • your_bucket パッケージを置くS3バケット名
  • your_region バケットがあるリージョン名（ap-northeast-1など）
  • your_bucket_prefix バケットの中でこのprefixを付けてパケージを置きます（例えば packages などと設定）
  • yourStackName CloudFormationのスタック名を指定します。これがLambda関数のPrefixになります


$ aws cloudformation package \
    --profile your_profile_name \
    --template-file template.yml \
    --s3-bucket your_bucket \
    --region your_region \
    --s3-prefix your_bucket_prefix \
    --output-template-file .template.yml


パッケージングが完了したら、デプロイします。

$ aws cloudformation deploy \
    --profile your_profile_name \
    --template-file .template.yml \
    --capabilities CAPABILITY_IAM \
    --stack-name yourStackName


デプロイが完了すると、マネージメントコンソールのCloudFormation スタックの詳細に Customineの設定時に必要な値が表示されますので、これをご利用ください。こちらは「myTestBarcode」というスタック名でオレゴンリージョンにデプロイした例になります。

事前準備：kintone アプリについて

kintoneアプリ側には、QRコードを出力するスペースと、1度生成したimgタグを保存しておくフィールドを用意しておきます。

活用例：QRコードの作成

ここまでで事前の準備は完了しましたので、早速QRコードの作成に入りたいと思います。


QRコードの利用シーンは非常に幅広く、スマートフォンアプリの開発や専用機器の利用なども考え出すと無限の可能性がありますが、ここではシンプルにレコードの詳細ページを開くURLを埋め込んだQRコードを生成してみることにします。


手順としては以下のような流れを想定しています。

  • 詳細画面でLambda関数を呼び出しQRコードを生成
  • 生成が完了したらスペースに表示し、imgタグをフィールドに保存しておく
  • 次回表示時には、imgタグがあればそれをスペースに表示する


まずLambda関数を実行するための認証を取得するために「AWS Cognito で認証を取得する」を利用します。設定するリージョンとIDプールのIDは、前述のスタックの詳細を参照して設定してください。


条件には、一度Lambda関数を呼び出してQRコードを作成したら再度は実行しないように、「詳細画面を表示した時」に加えて「フィールドの値が特定の値ならば」を追加して、結果が空のときのみ実行するようにしています。


設定は以下のようになります。


認証を取得したら、「AWS Lambda ファンクションを実行する」でLambda関数を実行します。ここで最大のポイントは、「Lambdaに渡すパラメータ」の部分です。


ここでは "sentence" パラメータに現在表示しているレコード詳細のURLをセットしています（ここではスマートフォン用のURLとしています）。この部分を変更することによって、QRコードに埋め込む値や画像サイズを自由に変更することが可能です。

フィールドの値を埋め込むことが可能ですので、自由に任意のQRコードを生成することが出来ます。 

{
    "sentence": "https://yourSubDomain.cybozu.com/k/m/1111/show?record=${record_no}",
    "width": 200,
    "height": 200
}


こちらの設定は以下のようになります。


次に実行結果を一旦フィールドにセットし、それをスペースに表示します。こちらは簡単なので詳細は省略しますが1点だけ、アクション番号2で設定したLambda関数の結果を "${$2.img}" と指定して取り出しているところにご注目ください。Lambda関数の戻り値はこちらの「Response parameters」をご確認ください。

ここまででQRコードを生成する部分は完成なのですが、あとひとつ qr_image フィールドに保存されたイメージも表示されるようにしておきましょう。4番のアクションを複製して、先程のLambda関数の実行条件と反対で、qr_imageのフィールドが空ではない場合に実行します。

これで最低限の設定は完了です。

「kintoneアプリへ登録」をクリックして、実際にアプリの詳細画面を表示してQRコードが表示されるか、またそのQRコードを読み込めるかを確認してください。

kintone 標準メニューの「レコードを印刷」で印刷画面を表示すると、そのまま入退出の受付用として配布できるようなシートを表示することも出来ます。

もう少し改良してみましょう

ここまでで最低限のQRコード生成が動作したと思いますが、もう少し改良してみましょう。

まず、詳細画面で qr_imageフィールドのimgタグが出ているのはあまり格好良くありませんので、それを非表示にしておきます（上記のスクリーンショットではそうなっています）。

設定はこのような形になります。


もう1つ、スマートフォンでQRコードを読み込んだあと、レコード詳細を表示したときに、以下のようなエラーが出るかと思います。これは kintone のスマートフォン版ではスペースの利用が出来ないために出るエラーになります。

冒頭追記しましたとおり、kintoneの2018年12月モバイル版JavaScriptアップデートにより、モバイル版でもスペースが利用可能となったため、このままの設定でスマートフォンからでも利用可能です！


Customineでスマートフォン用とPC用のカスタマイズを実装する方法


【kintoneのアップデートにより、モバイル版でもこのカスタマイズが動作するようになりましたので、こちらの作業は不要ですが、kintoneのイベントそのものを指定する例として記載しております。】


これは Customine の目指す思想から少し外れていってしまうのですが、やることを起動する条件については、「kintoneイベントが発生した時」という条件を利用することで、kintone のイベントそのものを指定することも可能となっています。


これを利用して、（繰り返しますが現在のバージョンでは不要なのですが）スペースを取り扱うときにはPCからのみ取り扱うように条件を設定することで、スマートフォン版ではそのカスタマイズが実行されないようにすることが可能です。例えば以下のような設定になります。


ここでは詳細画面を表示するに変えて、スマートフォン用のイベントを含まず、kintoneイベントを2点選択しています。

まとめ

AWS Lambda を利用した QRコードの生成は以上になります。AWSをすでにご利用の方はIAM権限にさえ気をつければ非常に簡単に導入できますので、是非お試しいただければと思います。もしまたAWSを利用していないが試してみたい、というお客様がいらっしゃいましたら、弊社までご相談いただければ導入のご相談をさせていただくことも可能です。


kintone と QRコードを組み合わせた活用方法は本当に色々あると思います。なにか面白いアイデアを思いつきましたら、ぜひ共有していただけますと幸いです。