API GatewayとAWS Lambda(Node.js)を使いQRコードを生成するAPIを作成する その2

こんにちは。

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

今回はタイトルの通り、API GatewayとAWS Lambda(Node.js)を使いQRコードを生成するAPIを作成する方法を書きます。

以前、API GatewayとAWS Lambda(Node.js)を使い効率よくWebサービスと連携する その1という記事を書きましたので、その続編になります。

内容は以下の通りです。

目次

  • ローカルでコードを書く
  • AWS Lambda レイヤーを活用する
  • AWS Lambdaで関数を作成する
  • Amazon API GatewayでAPIを作成する
  • Amazon API GatewayのAPIキーを活用する

環境

  • macOS Catalina 10.15.6
  • FileMaker Pro 19.1.2.219

前提

  • AWSのアカウントを作成していること
  • nodeをインストールしていること

少しコードを書きますが、簡単なコードなので、興味がある方は是非とも手を動かして頂ければと思います。

私もNode.jsを勉強中のため、コードに誤りがあったり、より良いコードがあるようでしたらご指摘頂ければと思います。

API化するメリット

  • オンラインであれば、URLから挿入ステップで簡単に作成できる。
  • (開発者として考えると)さまざまなソリューションで使い回せる。

QRコード生成のイメージ

今回のブログの作業が完了すると、FileMakerから簡単にQRコードを生成できます。

filemaker-aws-apigateway-lambda-qrcode-1

filemaker-aws-apigateway-lambda-qrcode-2

// # --- sample param
// # {
  "text": "FileMaker開発者でVimを使っている人はいますか?",
  "options": {
    "type": "png",
    "margin": 0,
    "scale": 4,
    "color": {
      "dark": "#000",
      "light": "#0000"
    }
  }
}
# 
# --- set param
変数を設定 [ $param ; 値: "" ] 
変数を設定 [ $param ; 値: JSONSetElement ( $param ; "text" ; qrcode::text ; JSONString ) ] 
変数を設定 [ $param ; 値: JSONSetElement ( $param ; "options.type" ; qrcode::options_type ; JSONString ) ] 
変数を設定 [ $param ; 値: JSONSetElement ( $param ; "options.margin" ; qrcode::options_margin ; JSONNumber ) ] 
変数を設定 [ $param ; 値: JSONSetElement ( $param ; "options.scale" ; qrcode::options_scale ; JSONNumber ) ] 
変数を設定 [ $param ; 値: JSONSetElement ( $param ; "options.color.dark" ; qrcode::options_color_dark ; JSONString ) ] 
変数を設定 [ $param ; 値: JSONSetElement ( $param ; "options.color.light" ; qrcode::options_color_light ; JSONString ) ] 
# 
変数を設定 [ $debug_url ; 値: api_qrcode_url ] 
変数を設定 [ $debug_option ; 値: api_qrcode_option ( api_qrcode_key ; $param ) ] 
# 
# --- curl
変数を設定 [ $result ; 値: "" ] 
URL から挿入 [ 選択 ; ダイアログあり: オフ ; ターゲット: $result ; api_qrcode_url ; SSL 証明書の検証 ; cURL オプション: api_qrcode_option ( api_qrcode_key ; $param ) ] 
# 
# --- qrcode result
変数を設定 [ $statusCode ; 値: JSONGetElement ( $result ; "statusCode" ) ] 
変数を設定 [ $body ; 値: JSONGetElement ( $result ; "body" ) ] 
If [ $statusCode = 200 ] 
	# --- ok
	フィールド設定 [ qrcode::qrcode ; Base64Decode ( $body ; "qrcode.png" ) ] 
Else
	# --- error
	警告音
	カスタムダイアログを表示 [ "error" ; $body ] 
End If
# 
現在のスクリプト終了 [ テキスト結果:    ] 

filemaker-aws-apigateway-lambda-qrcode-3

"https://api.frudens.com/test-qrcode/"

filemaker-aws-apigateway-lambda-qrcode-4

Let (
$____body____ = _body ;

Substitute (
List (

"--request POST " ;
"--header 'x-api-key: __key__' " ;
"--data-binary @$____body____ "

)  ; /*list*/

[ _singleQuotation_ ; _doubleQuotation_ ] ;
[ "__key__" ; _key ]

) /*substitute*/

) /*let*/

filemaker-aws-apigateway-lambda-qrcode-5

オブジェクトフィールドをエクスポートして…

ターミナルで確認します。

filemaker-aws-apigateway-lambda-qrcode-6

(ins) teruhiro@MacBook-Pro-13:~ $ zbarimg Desktop/qrcode.png
QR-Code:FileMaker開発者でVimを使っている人はいますか?
scanned 1 barcode symbols from 1 images in 0.01 seconds

        . EAN/UPC (EAN-13, EAN-8, EAN-2, EAN-5, UPC-A, UPC-E, ISBN-10, ISBN-13)
        . DataBar, DataBar Expanded
        . Code 128
        . Code 93
        . Code 39
        . Codabar
        . Interleaved 2 of 5
        . QR code
        . SQ code
  - is the barcode large enough in the image?
  - is the barcode mostly in focus?
  - is there sufficient contrast/illumination?
  - If the symbol is split in several barcodes, are they combined in one image?
  - Did you enable the barcode type?
    some EAN/UPC codes are disabled by default. To enable all, use:
    $ zbarimg -S*.enable 
    Please also notice that some variants take precedence over others.
    Due to that, if you want, for example, ISBN-10, you should do:
    $ zbarimg -Sisbn10.enable 

続きを読む →

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

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

続きを読む →

2件のコメント

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

続きを読む →