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 

続きを読む →

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

続きを読む →

6件のコメント

Integromatを使いFileMakerとGoogleカレンダーを簡単に連携する

こんにちは。
株式会社フルーデンスの小巻です。

FM-Tokyoで話すことになったので、とりあえずってことで、簡単ではありますが記事をあげておきます。

後ほど、修正します!

デモファイルのダウンロード

https://github.com/frudens/fm-tokyo-integromat

Integromat

まずは登録してください。

https://www.integromat.com

ログイン後の画面

ログイン後の画面です。

「Create a new Scenario」を選択します。

filemaker-google-integration-integromat-01

シナリオ作成のためのサービスを選択する

「web」と入力し、絞り込みます。

「Webhoook」を選択し、右上の「Continue」を選択します。

filemaker-google-integration-integromat-02

シナリオを作成する

真ん中に「?」が表示されます。

右クリックで「Webhook」を選択します。

filemaker-google-integration-integromat-03

続きを読む →