サンプルの QR コードコンポーネント
アダプティブフォームに QR コードを埋め込むと、ユーザーがフォームに関連する追加情報にアクセスする際の利便性と効率が大幅に向上します。
サンプルコンポーネントは QRCode.js を利用しています。
QRCode.js は、QRCode を作成するための JavaScript ライブラリで、DOM 内で Canvas と table タグをHTML5 で使用するクロスブラウザーをサポートします。
このコンポーネントは、コンポーネントの設定プロパティで指定された値に基づいて QR コードを生成します。
次のコードは、qr-code-generator コンポーネントの body.jsp で使用されています。
「url」は、qr コードに埋め込む必要がある url です。 この URL は、QR コードコンポーネントの設定プロパティで指定されます。
<%@include file="/libs/foundation/global.jsp"%>
<body>
<h2>Scan the QR Code for more information related to this form</h2>
<div data-url="<%=properties.get("url")%>">
</div>
<div id="qrcode">
</div>
</body>
次のコードは、qr-code-generator コンポーネントのクライアントライブラリで、QRCode.js ライブラリの makeCode メソッドを利用しています。生成された QR コードは、id "qrcode" で識別される div に追加されます。
$(document).ready(function()
{
var qrcode = new QRCode("qrcode");
qrcode.makeCode(document.querySelector("[data-url]").getAttribute("data-url"));
});
ローカルサーバーへのアセットのデプロイ
- パッケージマネージャーを使用して QR コードコンポーネントをダウンロードしてインストールします。
- パッケージマネージャーを使用して、サンプルのアダプティブフォームをダウンロードしてインストールします。
- フォームをプレビューします。フォームのヘルプセクションには QR コードがあります。
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e