LoginSignup
5
3

More than 3 years have passed since last update.

VisualforceでQRコード作成してみた

Last updated at Posted at 2020-08-06

 LWCでQRコードリーダのコンポーネントを作成できること(Beta版)を知りました。
そちらを試す前にVisualforce上でQRコードを作成する機能を作ってみました。

LWCの開発者ガイド(Scan Barcodes)

成果物

ダウンロード (1).gif

※表示しているレコードはDevEditionに初期保存されている取引先責任者のレコードです。

オブジェクトのアクションをVisualforceページで作成しております。
Visualforce内のJavaScriptで現在のURLのQRコードを生成しています。
(オブジェクト固有のLightning Actionにするために拡張コントローラを指定していますが、コントローラ側では特に処理を行っていません。)
このページでは取引先責任者のレコードページのURLのQRコードを表示しています。

CreateQRcode.vfp
<apex:page standardcontroller="Contact" extensions="CreateQRcodeController" docType="html-5.0" standardStylesheets="false"
  showheader="false" sidebar="false">
  <apex:includeScript value="https://code.jquery.com/jquery-3.4.1.min.js" />
  <apex:includeScript value="http://jeromeetienne.github.io/jquery-qrcode/src/jquery.qrcode.js" />
  <apex:includeScript value="http://jeromeetienne.github.io/jquery-qrcode/src/qrcode.js" />

  <h1>Create QR Code</h1>
  <div id="qrcode"></div>
  <script>

    $('#qrcode').qrcode(location.href);
  </script>
</apex:page>

 Visualforceで行いましたが、AuraでもLWCでも同様の機能を作成できると思います。
また、本番組織での実装の際は、jQueryのファイルを静的リソースにアップロードする方が良いと思われます。

まとめ

 今回はVisualforceでQRコードを表示するだけの機能を作成しました。余裕があれば、AuraやLWCでの表示や、作成したQRコードを画像ファイルとしてレコードの添付ファイルに保存する機能を作成してみたいと思います。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3