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の準備

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

続きを読む →

1件のコメント

API GatewayとAWS Lambda(Node.js)を使い効率よくWebサービスと連携する その1

こんにちは。

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

2020年03月04日に、Claris Connectがリリースされました。

Claris Connect は単純な自動化を超える飛躍をもたらします
https://www.claris.com/ja/blog/2020/developers-soar-beyond-simple-automation-with-claris-connect

大変素晴らしいサービスだと思います。

さて、今回はタイトルの通り、Claris Connectではなく、AWSの2つのサービスを活用して、効率よくWebサービスと連携する方法を書きます。

具体的には、Amazon API GatewayとAWS Lambdaがどのようなものか、を簡単に説明するための記事です。

FileMakerではなく、Node.jsを使いますので、ご了承ください。

このようなイメージになります。

filemaker-aws-apigateway-lambda-24

記事の対象者

今回の記事に興味あるFileMaker開発者は、ほとんどいないだろうな、と思っております。

FileMakerしかできない方には、Node.jsの話のため参考になりませんし、
FileMaker以外の言語を書ける人には、既に使ったことがある方が多いと思いますので、特に参考になる情報ではないためです。

今回の記事の対象者は、以下のような方だと思います。

  • FileMakerの『URLから挿入』を使って、Webサービスと連携している方。
  • 他の言語を使えば『もっと簡単に書けるのではないか?』と思っている方。
  • 多言語を勉強しようと思っている方。
  • S3やSES、DynamoDBなどのAWSのサービスと連携したい方。

上記に当てはまらない方は、タブを閉じて頂ければと思います。

続きを読む →

filemaker-simple-qr-code-view-1

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

こんにちは。

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

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

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

できること

  • 生成した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>

続きを読む →

Chatwork APIとFileMakerの連携(「URLから挿入」の使い方)

こんにちんは。

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

今回はタイトルの通り、ChatworkとFileMakerの連携をする過程で、「URLから挿入」の使い方を少しでも理解して頂ければと思います。

Chatworkは、GoogleやMicrosoftなどと違い、非常にかんたんにAPIを使うことができますので、初めてAPIに取り組む方には良いサービスだと思います。

ChatworkとFileMakerを連携したい方や、「URLから挿入」ステップを勉強したい方に参考になれば幸いです。

サンプルファイルをダウンロードする

サンプルファイルをGitHubに公開しましたので、cloneするか、ダウンロードをしてください。

リポジトリ

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

ダウンロード

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

Chatworkにログインし、APIトークンを取得する

Chatworkにログインし、画面右上の「API設定」をクリックします。

chatwork-api-filemaker-integration-1

パスワードを入力すれば、APIトークンが取得できます。

chatwork-api-filemaker-integration-2

ドキュメントを確認する

先程のAPIトークン取得画面にある、「ドキュメントはこちら」をクリックします。

chatwork-api-filemaker-integration-3

まず、初めてに一番基本となる自分自身の情報を取得するAPIをリクエストしてみましょう。

サイドバーから「エンドポイント」をクリックし「/me」をクリックします。

http://developer.chatwork.com/ja/endpoint_me.html

chatwork-api-filemaker-integration-4

ターミナルから「自分自身の情報を取得する」APIをリクエストする

※curlコマンドを説明するために、あえてFileMakerではなく、ターミナルを使っています。

ドキュメントのサンプルコードは、以下のようになっています。

サンプルコード

curl -X GET -H "X-ChatWorkToken: 自分のAPIトークン"
"https://api.chatwork.com/v2/me"

curlコマンドは、ターミナルやPowerShellなどで利用するコマンドラインツールです。
ですので、こちらのサンプルコードを実行する場合は、macOSであれば「ターミナル」を開いて、コードをコピペすれば実行できます。

以下の画像のように、ドキュメントのレスポンス部分にあるJSONと同じ結果を取得することができました。

chatwork-api-filemaker-integration-5

続きを読む →

コンサルティング レポート(LINE WORKSとFileMakerの連携)

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

FileMaker カンファレンスに登壇させて頂いたり、Webセミナーをやっていることもあり、技術支援のご依頼を頂く事が少しづつ増えてきました。

今年より、コンサルティングや開発をさせて頂いたお客様に、アンケートのご協力をお願いすることにしました。

ご記入頂いた内容を匿名で公開することにご了承頂きましたので、簡易的な記事にさせていただきました。

ご了承頂きまして、誠にありがとうございました。

お客様からご相談頂いた内容

お客様からは、以下のような内容をご相談頂きました。

  • LINE WORKSとFileMakerを連携したい。
  • FileMakerから「LINE WORKSに送信」などのボタンをクリックし、メッセージを送信したい。
  • FileMakerのスクリプトで、任意のLINE WORKSのメッセージをダウンロードしたい。
  • FileMakerにて管理している顧客情報とLINE WORKS内の連絡先を関連付けたい。

当初は、以下のTwitterの投稿のように、連携できれば… とお話をしていました。

しかし、APIを調べてみると、課題が見えてきました。

課題

  • LINE WORKSでは、トークBot APIを使い連携できるが、任意のアカウントとしてメッセージを送受信するAPIはない。
  • トークBot APIを使う場合、画像ファイルしか投稿できないので、任意のバイナリファイルを投稿できない。

参考

続きを読む →