QRコードを作成するなんてなんかむずかしそう・・なんて思っていませんか?
JetEngineならとっても簡単にQRコードを作成することができます！
JetEngineのフィールドに入れた情報をサイトに動的に呼び出せば、どこのフィールドのどんな情報でもQRコードにすることができるんです！
QRコード作成方法を紹介するにあたり、この記事のサンプルとしてサイトがモバイルアプリも持っているとし、そのモバイルアプリにアクセスできるQRコードを JetEngineで作成しサイトに表示させるにはどうしたらいいかを以下で説明していきます。
Options Pagesに作成した『TOFUモバイルアプリ』という、アプリのURLが記載されたフィールドのデータを動的に呼び出しQRコードにしていきます。
- JetEngineならどんな動的なテキストデータでもQRコードにすることができる。
- QRコードをサイトに追加するには JetEngineで作成したどこかしらのフィールドにQRコードにしたいものの情報があることが必要。
- サイトでQRコードを作成するにはJetEngineのダッシュボードのModulesにある『QR Code for Dynamic Field widget』を必ず『オン』にする。
- QRコード作成までたったの6ステップで超簡単！
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
また、 JetEngineでQRコードを作成する方法を説明した動画もありますのでよかったらご覧くださいね！
①QR Code for Dynamic Field widgetをオンにする
まず、JetEngineのダッシュボードの『Modules』の画面を開き以下の操作をします。
- 『QR Code for Dynamic Field widget』を『オン』にする。
- 『Save』をクリックする。
②Dynamic Fieldウィジェットを挿入
『Dynamic Fields』ウィジェットをドラッグ＆ドロップでQRコードを表示させたい箇所に挿入します。
すると上記のような表示画面になります。
※このサンプルではDynamic Fieldウィジェットを挿入した箇所に『サンプルページ』と表示されていますが、これはデフォルトで『Source』と『Object Field』で『投稿のタイトル』が表示されるように設定されているためです。
③Sourceを選択
『Source』でどこのソースから追加フィールドの情報を呼び出すかを選択します。
※このサンプルではOptions Pagesからデータを呼び出すので『Option』を選択します。
④Sourceの次項目でQRコードにしたい情報を選択
『次項目』とは、このサンプルでいう『Option』（エディターのSourceの下の項目）に該当します。
※この項目は『Source』で何を選択するかにより表記が変わります。
『Option』でサイトに表示させたい追加フィールドの情報をリストより選択します。
※このサンプルでは『TOFUモバイルアプリ』(アプリのURLを記入したフィールド)を選択しました。
⑤Filter field outputをオンにする
『Filter field output』をオンにします。
するとエディターに『Callback』という項目が追加されます。
※デフォルトはFilter field outputはオフに設定されています。
⑥CallbackでQR Codeを選択
『Callback』のリストから『QR Code』を選択します。
するとこのように、簡単に追加フィールドから呼び出した情報がQRコードになりました。
QR Code Size
『QR Code Size』ではQRコードのサイズをカーソルを左右にスライドさせることにより縮小・拡大することができます。
※上記はQR Code Sizeの値を『400』（最大値）にしたときの表示画面です。
配置の変更（Widget Item Alignment)
QRコードのカラム内での配置の変更は、スタイルタブの中の『Widget Items Alignment』で『左 / 中央 / 右』から選択することができます。
※上記は『中央』に設定したときの表示画面です。
また、さらに詳細な配置変更を行いたい場合は高度な設定のマージンを使用してください。
ちなみにこちらはサイトプレビュー画面です。
リストに『QR Code』がないとき
Callbackのリストの中に『QR Code』がない！となっても焦らないでください。
その場合はJetEngineのダッシュボードの『QR Code for Dynamic Field widget』がきちんと『オン』になっているかを確認しましょう。
案外気づいたらここがオフになっていた、なんてことはよくある話です。
ローカル環境ではQRが表示されないこともある
ローカル環境でサイトを作成してるとQRコードをいざ表示させようとしてもサイトに表示されないこともあります。
そのときはきちんとサーバーにアップロードしている環境で試すようにしてください。
まとめ
JetEngineを使えば動的に呼び出した情報をなんでもQRコードにすることができます！
例えばモバイルアプリのダウンロードなど、サイトの画面から何かしらをモバイルでアクセスさせたいときにQRコードがあればQRを読み取るだけで目的のものにすぐにアクセスできるのでとても便利ですよね。
ご覧のとおりJetEngineがあれば簡単にQRコードを生成できます。
ぜひウェブ制作に役立ててくださいね！
JetEngineは良くも悪くも機能が多いので、使っていると ”あれ？何かおかしいな” となることがたまにあります。
何かがおかしかったら、まずJetEngineの設定を一から見直してみることをみなさんにオススメします。
設定で機能がただオンになかったから表示がされない、などと実はすごく単純な理由だったなんてことはよくある話なんですよ。
また、今回のサンプルのソースで使用したOptions Pageについてくわしく知りたい方は『【JetEngine】Options Pagesでサイト全体で共有できるデータを格納！クライアントがElementorの操作なしでサイトのテキスト変更もできる』の記事をご覧くださいね！
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。