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

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

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

成果物

※表示しているレコードは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コードを画像ファイルとしてレコードの添付ファイルに保存する機能を作成してみたいと思います。