初心者のFileMaker pro Q&A (旧掲示板)

みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。

1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 (優しく回答しましょう)

You are not logged in.

Announcement

新しい掲示板は、こちら:https://fm-aid.com/forum/t/filemaker


#1 2022-09-11 19:50:09

テラ
Guest

WebビューアでJavaScriptを実行をプレビュー画面でも表示したい

Filemaker19で導入された「WebビューアでJavaScriptを実行」で連携が簡単になったようでQRコードを生成するjsを組み込んだのですが、プレビュー時や印刷時には表示されません。
手動でスクリプトを実行しても表示されないので何らかの設定が必要なのかと思うのですが、このスクリプトだとできないものなんでしょうか?

#2 2022-09-11 22:02:12

himadanee
Guest

Re: WebビューアでJavaScriptを実行をプレビュー画面でも表示したい

Webビューアは、プレビューするときにリロードする仕様が変わってないようなので、プレビューや印刷は無理では?
例えばこのサイトで言えば、「検索」ボタンを押してからプレビューしても、元の画面をプレビューしてしまいます。
(低解像度になる問題はどうなったかな)

Javascriptを使うにしても、アドオンの「バーコードジェネレータ」は、生成したバーコードをオブジェクトフィールドに入れるようになってます。

#3 2022-09-12 00:20:47

テラ
Guest

Re: WebビューアでJavaScriptを実行をプレビュー画面でも表示したい

himadaneeさん、ありがとうございます。
自分も画像にして格納しようかと考えました。

ただ、わざわざ格納するのもな...と思って更に調べた結果下記の方法のほうが簡単に実現できそうでした。
https://frudens.jp/filemaker-simple-qr-code-view/

置換しているだけなので広く使える方法ではないですが今回の場合コチラで対応できそうです。

一応解決していますが、他の方の意見も聞きたいのでもう少し解決済みにするは待ちます。

#4 2022-09-12 07:50:39

koko009
Guest

Re: WebビューアでJavaScriptを実行をプレビュー画面でも表示したい

曖昧な情報で申し訳ないないですが。
「WebビューアでJavaScriptを実行」以前の方法で印刷に関し調べていたとき確かビューア表示される表示画像の大きさに関係してたと思う。かなり小さくすれば他のフィールドと共に全体(印刷ページに納まっているなら)を印刷できたような・・・最近物忘れがひどいので自信はない
どちらにしてもWebビューアだけならビューア部の右クリックで「開発者ツールで調査する」等が出るダイアログに印刷設定があるのでそこで印刷をすれば画像だけは印刷できる。但し解像度はWindowsの関係で固定されているらしい

#5 2022-09-13 13:42:21

koko009
Guest

Re: WebビューアでJavaScriptを実行をプレビュー画面でも表示したい

過去にWebビューアを含む範囲をどうしても印刷したくて教えてもらいました。
https://fm-aid.com/bbs2/viewtopic.php?id=11445
これだとwebビューアで画像サイズが100%でもオブジェクトフィールドの大きさに合わせて表示できるから簡単にできるしページのレイアウトも自由・・・
そのままプレビュー、印刷とはならない方法ですが参考まで・・・

#6 2022-09-17 15:44:41

koko009
Guest

Re: WebビューアでJavaScriptを実行をプレビュー画面でも表示したい

Webビューアのプレビュー問題と趣旨がズレていて申し訳ないですが、#5の場合かなりシチュエーションが違うので、試しにQRコードの生成をQRcode.js(かなり古いライブラリーらしい)を使ってコードの生成と画像化(今回はpngで)をしてみました。
テーブルには、読込用のテキストフィールドとと画像保存用のオブジェクトフィールド及びWebビューア
web アドレス
"<!DOCTYPE html>
<html>
<body>
<div id=\"qrcode\"></div>
<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js\"></script>
<script type=\"text/javascript\">
function Qrcode(QRtext){
const qrcode = new QRCode(document.getElementById(\"qrcode\"), {
   text: JSON.parse(QRtext),
   width: 128,
   height: 128,
   render: 'canvas',
   colorDark : \"#ffffff\",
   colorLight : \"#000000\",
   correctLevel : QRCode.CorrectLevel.H
});
}
function imageDownload() {
const canvas = document.getElementsByTagName(\"canvas\")[0];
const image = canvas.toDataURL();
FileMaker.PerformScript(\"script01\", image);
}
</script>
</body>
</html>"

スクリプト1

    #スクリプトを連続して実行でビューアにコードが連続して描画されるのを防止
    Web ビューアの設定 [ オブジェクト名: "Web"; 処理: リセット ]
    #Web ビューアにQRコードを生成
    スクリプト一時停止/続行 [ 間隔(秒): .001 ]
    Web ビューアで JavaScript を実行 [ オブジェクト名: "Web"; 関数名: "Qrcode"; 引数 1: Quote (QR_image::text) ]
    #オブジェクトフィールドに画像としてコピー
    スクリプト一時停止/続行 [ 間隔(秒): .05 ]
    Web ビューアで JavaScript を実行 [ オブジェクト名: "Web"; 関数名: "imageDownload" ]
    現在のスクリプト終了 [ ]

スクリプト2・・・スクリプト名「script01」
    フィールド設定 [ QR_image::QR_image; Base64Decode (Substitute ( Get ( スクリプト引数 ) ; "data:image/png;base64,"; "" );"QR.png" ) ]

手近なライブラリーで作ったのであまり参考にならないと思う。

#7 2023-01-01 16:44:26

koko009
Guest

Re: WebビューアでJavaScriptを実行をプレビュー画面でも表示したい

かなり時間がたちましたが参考まで、プレビューでweb ビューアとフィールドを同時に表示させる方法として、質問にある「Web ビューアで JavaScript を実行」スクリプトを使わずweb ビューアの設定時にweb アドレスに直接下記のコードを書き込むだけの方法を紹介します
"<!DOCTYPE html>
<html>
  <body>
   <canvas id=\"qr\"></canvas>
   <script src=\"https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.js\"></script>
   <script>
      (function() {
        var qr = new QRious({
          element: document.getElementById('qr'),
          value: '"
& QRcode::text &
"'
        });
      })();
    </script>
  </body>
</html>"
テキストフィールド(残念なことにこのJSで処理すると日本語が含まれる場合は、デコードでエラーとなります。)を単純に分割したJavaScriptと&で結合させるだけです。
問題としてテキストフィールドが空白でも常にQRコード作成されるのが難点です。解消法としては別途テーブルに上記のコードにフィールド値を変数として組み込んだJS文を下記の様なweb アドレスで読み込ませる(keyで読み込むJS文を指定)こともできるが・・
Evaluate (
ExecuteSQL ("select \"text\" from \"javascript\" where \"key\" = ?";"";"";QR_image::key)
)
なお、下記のサイトのサンプルを単純にコピペしただけなので細かい設定方法等は勉強していませんので悪しからず。
https://github.com/neocotic/qrious?utm_ … js_library

#8 2023-09-06 17:15:21

koko009
Guest

Re: WebビューアでJavaScriptを実行をプレビュー画面でも表示したい

かなり時間がたっていますが訂正です。
#6の方法で作成されたQRコードは、切り出しシンボル(ファインダパターン)のルールに対し不完全でした。Web ビューアで JavaScript を実行で使うjs文の text: JSON.parse(QRtext),にすると、真ん中の黒四角が出現しませんので

ファインダパターンの外側の黒四角・内側の白四角・真ん中の黒四角の幅の比率は上図のとおり1:1:3:1:1と決められており、このとおりになっていないとQRコードとして読み取られません。

に適合しないためデコードの方法よっては読み込めない結果となります。
一応解決策としてWeb ビューアで JavaScript を実行ではなく Web ビューアの設定で下記のjs文に変数を組み込んで評価式で読み込めば、真ん中の黒四角は表示されます。
"<!DOCTYPE html>
<html lang=\"ja\">
<head>
<meta charset=utf-8 >
</head>
<body>
   <div id=\"qrcode\"></div>
   <script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js\"></script>
   <script type=\"text/javascript\">
    (function() {      var qrcode = new QRCode(document.getElementById(\"qrcode\"), {
         text: \""&$$text&"\" ,
         width: 128,
         height: 128,
         colorDark : \"#000000\",
         colorLight : \"#ffffff\",

         correctLevel : QRCode.CorrectLevel.H
     });
    })();
function imageDownload() {
const canvas = document.getElementsByTagName(\"canvas\")[0];
const image = canvas.toDataURL();
FileMaker.PerformScript(\"script03\", image);
}
   </script>
</body>
</html>"
しかしながらQRcode.jsは日本語対応が不十分ですのでかなり問題がありますので、jQuery.qrcode.jsの方が日本語対応は優れている気がします・・・jQueryは使えないので単純なコピペで変数を使う方法で試したところQRコードは出来、デコードも問題はありませんでした。他に下記のサイトでもjQuery.qrcode.jsを使う方法が紹介されています。
https://qiita.com/kamima/items/7a0bc3bf28ea03645bad
ReadQRCode関数を使ってデコードする方法を勉強していてようやく気付き申し訳ありませんでした。

Registered users online in this topic: 0, guests: 1
[Bot] claudebot

Board footer

Powered by FluxBB
Modified by Visman

[ Generated in 0.005 seconds, 9 queries executed - Memory usage: 548.48 KiB (Peak: 569.39 KiB) ]