ドキュメントAEMAEM チュートリアルAEM Forms のチュートリアル

サンプルの QR コードコンポーネント

最終更新日： 2025年3月27日
  • 適用対象：
  • Experience Manager 6.5
  • トピック：
  • アダプティブフォーム

作成対象：

  • 初心者
  • 開発者

アダプティブフォームに QR コードを埋め込むと、ユーザーがフォームに関連する追加情報にアクセスする際の利便性と効率を大幅に向上させることができます。

サンプルコンポーネントは QRCode.js を利用します。

QRCode.js は QRCode を作成するための JavaScript ライブラリで、HTML5 Canvas と DOM の table タグによるクロスブラウザーをサポートします。

このコンポーネントは、コンポーネントの設定プロパティで指定された値に基づいて 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