タグ：JavaScript

/ 小巻 旭洋

パフォーマンス改善テクニック(FileMaker WebDirect と Web ビューア)を読んで、ヘルプの重要性を再確認した話

こんにちは。

株式会社フルーデンスの小巻です。

2023年11月8日・9日・10日に、Claris Engage Japan 2023が開催されました。

久々のオフラインでの開催となり、すごく刺激的で楽しかったです。本当にありがとうございました。関係者の皆様、本当にお疲れ様でした。

今回は、2023年11月08日 16:00 からのセッション （ T-5 「Claris FileMaker パフォーマンス改善テクニック（Database処理負荷とデータトラフィックの低減 ）」 ） の中で発表された内容において、ヘルプとは違い難易度の高い方法を提示されていると感じましたので、本記事を作成しました。

本記事の目的

ヘルプを確認する重要性を伝えるためです。

また、私自身も間違えて発信することはありますので、自戒の念を込めて記事をかいております。

登壇者の方に対して、なにかしらの意図があるわけではありません。

対象の読者

FileMaker Pro、FileMaker Go、WebDirectにおいて、効率よく Webビューア + JavaScript を活用したい方

上記の方以外は、本記事を読む必要はありません。

環境について

FileMaker Server 20.2.1.19

該当のセッションについて

具体的には、以下のYouTubeで公開されているセッション動画の「38:20」以降に説明している内容になります。

セッション内容の確認と、ヘルプとの相違点

セッション内容

上記の「対象の読者」にも記載している通り、FileMaker Pro、FileMaker Go、WebDirectにおいて、効率よく同じコードでWebビューア + JavaScript を活用したいという説明がされております。

YouTubeの動画を確認しますと、概ね、以下のような内容だと思います。

  1. 例として、サンプルとなるHTMLのコードをフィールドに保存する。
  2. FileMaker Pro、WebDirectで、HTMLが正しく表示されるか確認する。
  3. FileMaker Proでは表示されるが、WebDirectでは表示されない。
  4. そのため、FileMaker Serverの公開ディレクトリにサンプルのHTMLを配置して、そのURLをWebビューアで読み込む方法を提示している。
  5. URLを参照することで、FileMaker Proでも、WebDirectでも、同じように表示される。

続きを読む →

/ 小巻 旭洋

FileMaker 19の新機能「Web ビューアで JavaScript を実行」の使い方とインスペクタの活用方法

こんにちは。

株式会社フルーデンスの小巻です。

2020年05月21日にFileMaker 19がリリースされました。

今回は、タイトルの通りFileMaker 19の新機能「Web ビューアで JavaScript を実行」の使い方とインスペクタの活用方法について書きます。

サンプルファイル

以下のリポジトリからCloneか、ダウンロードしてください。

https://github.com/frudens/filemaker-webviewer-javascript

https://github.com/frudens/filemaker-webviewer-javascript/archive/master.zip

filemaker19-perform-javascript-in-web-viewer-15

filemaker19-perform-javascript-in-web-viewer-16

FileMakerからWeb ViewerのJavaScriptを実行（イメージ）

以下のスクショのように実行できます。

左のFileMakerの「fmToWeb」というボタンをクリックすると、Web ViewerのJavaScriptが実行されます。

filemaker19-perform-javascript-in-web-viewer-1

Web Viewerの準備

ここから、具体的な手順になります。

続きを読む →

filemaker-simple-qr-code-view-1
/ 小巻 旭洋

FileMakerで(jquery.qrcode.jsを使って)簡単にQRコードを表示する

こんにちは。

株式会社フルーデンスの小巻です。

FileMakerで、QRコードを表示したいことがありましたので、比較的簡単に実装できる方法を模索しました。

HTMLソース内で参照しているJavaScriptなどは、ご自分のS3などにホストして使ってください。

更新履歴

2023年9月25日

2023年9月25日に、以下の記事を公開しました。
簡易的にQRコードを生成できるようになりましたので、興味がありましたら、ご確認ください。

FileMakerからQRコードを生成するためのAPIを公開しました | フルーデンス

FileMakerからQRコードを生成するためのAPIを公開しました

できること

  • 生成したQRコードを、Webビューアに表示する。

できないこと

  • 生成したQRコードを、オブジェクトフィールドに保存する。

QRコードをバイナリデータとして取得する部分につていは、AWS Lambda + API Gateway で別途記事にします。

ダウンロード

cloneするか、ダウンロードしてください。

https://github.com/frudens/filemaker-qr

jquery.qrcode.jsのドキュメントを確認する

最近は、積極的にJavaScriptを使うようにしています。(Node.js 楽しい！)

今回は、jquery-qrcodeというjQueryライブラリを使います。

https://github.com/jeromeetienne/jquery-qrcode

exampleをみると、説明の必要がないくらい簡単です。

早速、FileMakeで使えるように実装します。

まずは表示されることを確認する

  1. html(例として)フィールドに以下のHTMLを貼り付けます。
  2. Webビューアの計算式にhtmlフィールドを設定します。
  3. WebビューアにQRコードが表示されます。

filemaker-simple-qr-code-view-1

data:text/html,
<!DOCTYPE html>
<head>
<style>
#qrcodeTable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://jeromeetienne.github.io/jquery-qrcode/src/jquery.qrcode.js"></script>
<script src="http://jeromeetienne.github.io/jquery-qrcode/src/qrcode.js"></script>

<div id="qrcodeTable"></div>
<script>
jQuery('#qrcodeTable').qrcode({
  render  : "table",
  width  : 200,
  height  : 200
  text  : "https://frudens.jp"
});
</script>

</body>
</html>

続きを読む →