ユーザ関数
アクションはJavaScriptを使って記述しますが、繰り返し使うJavaScriptの内容やSQLやRESTなど呼び出しに準備が必要なものについてはユーザ関数を利用します。
ユーザ関数はGUIを使って作成し、作成した関数はアクションから呼び出すことが可能です。
ユーザ関数の種類
ユーザ関数は、2種類存在します。
関数 | スコープ |
---|---|
ローカル関数 | |
グローバル関数 |
Tips
JavaScript
アクションで繰り返し使うJavaScript処理は関数として登録することができます。
作成方法
- アクションエディタの左パネルにある
[追加]
ボタンをクリックします。 - 関数タイプから
[スクリプト]
を選択します。 - 関数名に任意の英字から始まる英数字+アンダースコアの文字列を入力します。
[保存]
ボタンをクリックします。- 関数タイプを選択します。
- JavaScript 関数のエディタを表示します。
- JavaScript エディタに関数処理を記述します。
Tips
引数
引数は唯一の param オブジェクトになります。
名前 | 型 | 引数追加 |
---|---|---|
param | オブジェクト | 不可 |
JavaScript 関数の中で引数 param から値を取得するには、次のように関数エディタで記述します。
一方、関数を呼び出す場合は以下のように呼び出します。
Tips
サンプル
2つの数値を加算するJavaScript関数をアクションで利用するサンプルを示します。
ステップ 1
UIに引数となる3つの数値フィールドとボタンを用意します。
コンポーネント | コンポーネント ID | コンポーネントラベル |
---|---|---|
数値フィールド | number_field_1 | 数値フィールド 1 |
数値フィールド | number_field_2 | 数値フィールド 2 |
数値フィールド | number_ans | 計算結果フィールド |
ボタン | button_calc | 計算ボタン |
ステップ 2
button_calcのアクションエディタを開き、 my_funcという名前でJavaScript関数を作成します。
[my_funcの内容]
ステップ 3
アクションボードにmy_funcの呼び出しを行い、結果を計算結果フィールドに表示する記述を行います。
ステップ 4
アクションを保存し、アプリケーションのデプロイを行います。
ステップ 5
アプリケーションから数値フィールド1, 数値フィールド2に数値を入力し、計算ボタンをクリックします。計算結果フィールドに加算結果が表示されることを確認します。
SQL
データベースに SQL を発行してその結果を取得します。SQL エディタにはSQL文のみを記述します。
Tips
作成方法
- アクションエディタの左パネルにある
[追加]
ボタンをクリックします。 - 関数タイプから
[SQL]
を選択します。 - 関数名に任意の英字から始まる英数字+アンダースコアの文字列を入力します。
[保存]
ボタンをクリックします。- SQL 関数のエディタを表示します。
- SQL エディタにSQLを記述します。
引数
引数は唯一の param オブジェクトになります。
名前 | 型 | 引数追加 |
---|---|---|
param | オブジェクト | 不可 |
Tips
非同期関数とawait演算子
SQL関数は非同期で処理されます。値が返るまで待機するために、SQL関数実行時には、次のようにawait演算子を使用してください。
戻り値
SQL関数の戻り値は次のプロパティを含むオブジェクトになります。
プロパティ | 型 | 説明 |
---|---|---|
data | object array | SQL結果のROWデータの配列、またはDMLステートメントを実行した結果 |
sqlState | string | SQLSTATE 値 |
errorCode | string | エラーコード |
errorMessage | string | エラーメッセージ |
Tips
トランザクション制御について
トランザクションはアクション単位です。
アクション内で複数のSQL関数のコールがあった場合、一つでも例外が発生するとすべてロールバックします。 すべてのSQL関数のコールが成功した時のみコミットを行います。 コミット、およびロールバックは暗黙的に行われます。 アクション内でユーザ記述によって、throw new Error(); がコールされた場合においても、すべてロールバックします。ただし、try-catch文で例外をcatchした場合には、catch句内でthrowを行わなければ呼び出し側のアクションが例外を補足しないためロールバックが行われません。
サンプル
アクションにおいてテーブルに向けて SELECT の SQL を発行し、結果を JSON 文字列でテキストエリアコンポーネントに表示する例を説明します。
ステップ 1
UI に結果を表示するテキストエリアコンポーネントとアクションを実行するボタンを用意します。
コンポーネント | コンポーネント ID | コンポーネントラベル |
---|---|---|
テキストエリア | text_area_1 | 結果 JSON |
ボタン | button_sql | SELECT |
ステップ 2
mydb という名前のデータベースにt1という名称でテーブルを以下の構成で作成します。
カラム名 | データタイプ | M | D | fsp | PK | NN | UQ | AI |
---|---|---|---|---|---|---|---|---|
id | INT | True | True | |||||
name | VARCHAR | 20 |
カラムのデータタブよりテスト用データを格納しておきます。
id | name |
---|---|
1 | a |
2 | b |
ステップ 3
button_sqlのアクションエディタを開き、 sql1という名前でSQL関数を作成します。
[sql1の内容]
ステップ 4
アクションボードに SQL 関数の呼び出しを行い、データ取得結果をテキストエリアに表示する記述を行います。
Tips
[アクションボードの内容]
ステップ 5
アクションを保存し、アプリケーションのデプロイを行います。
ステップ 6
アプリケーションから SELECT ボタンをクリックします。結果 JSON テキストエリアに SQL の SELECT 結果が JSON 形式で表示されることを確認します。
REST
REST 関数は REST API や Amazon API Gateway を呼び出すための関数です。
作成方法
- アクションエディタの左パネルにある
[追加]
ボタンをクリックします。 - 関数タイプから
[REST]
を選択します。 - 関数名に任意の英字から始まる英数字+アンダースコアの文字列を入力します。
[保存]
ボタンをクリックします。- REST 関数のエディタを表示します。
- REST エディタに REST API を呼び出すための設定をします。
基本設定
項目 | 説明 |
---|---|
関数名 | 関数作成時に設定した名称が表示されています。 |
引数 | 引数は他のユーザ関数と同様、唯一の param オブジェクトです。 |
メソッド | 呼び出すAPIによって、次の中から選択します。
|
URL | REST API のURLを記入します。 任意の箇所で次の書式を使ってパラメータ値を埋め込めます。 ${param.property_name} |
リクエストヘッダ | リクエストヘッダを設定します。[追加] ボタンをクリックすると、ヘッダ名と値のエントリを追加できます。ヘッダ名は代表的なものが選択肢にありますが、任意入力も可能です。 |
リクエストボディ | POST/PUT/PATCH/DELETEメソッドの場合、リクエストボディの指定が可能です。 ヘッダの Conent-Type の指定により、入力形式が変わります。 |
バイナリ取得 | レスポンスの戻り値は string ですが、バイナリを返却するサービスの場合はこのチェックボックスにチェックを入れることで、Buffer オブジェクトとして戻り値を取得できます。 |
リクエストヘッダ
リクエストヘッダは[ヘッダー]
タブから設定します。リクエストヘッダは選択肢として用意されていますが、直接入力することも可能です。
ヘッダ名 | 値 |
---|---|
Accept | / application/ audio/ image/ text/ |
Accept-Charset | utf-8 |
Accept-Encoding | compress deflate gzip |
Accept-Language | en-US ja |
Authorization | |
Cache-Control | max-age=3600 no-cache no-store |
Connection | close keep-alive |
Content-Length | |
Content-Type | application/json application/octet-stream application/x-www-form-urlencoded application/xml multipart/form-data text/css text/html text/plain |
Cookie | name=value name=value; name2=value2; name3=value3 |
Date | Wed, 21 Oct 2015 07:28:00 GMT |
Expect | 100-continue |
From | webmaster@example.org |
Host | |
Proxy-Authorization | |
Referer | https://example.com/ |
User-Agent | |
X-Amz-Content-Sha256 | |
X-Amz-Date | |
X-Amz-Security-Token | |
X-API-Key |
Tips
リクエストボディ
リクエストボディは[ボディ]
タブから設定します。リクエストヘッダの Content-Type 指定により入力形式が変化します。
リクエストヘッダの Content-Type | 入力形式 | 入力内容 |
---|---|---|
application/json | テキストエリア | テキスト |
application/octet-stream | テキストフィールド | ファイルパス |
application/x-www-form-urlencoded | [追加] ボタンテキストフィールド (名前) テキストフィールド (値) | パラメータ名 パラメータ |
application/xml | テキストエリア | テキスト |
multipart/form-data | [テキストパート追加] ボタン [ファイルパート追加] ボタン テキストフィールド(名前) テキストフィールド (値) | パラメータ名 パラメータ値 |
text/css | テキストエリア | テキスト |
text/html | テキストエリア | テキスト |
text/plain | テキストエリア | テキスト |
非同期関数と await 演算子
REST 関数は非同期で処理されます。値が返るまで待機するために、REST 関数実行時には、次のように await 演算子を使用してください。
戻り値 = await REST 関数
戻り値
REST関数の戻り値は次のプロパティを含むオブジェクトになります。
プロパティ | 型 | 説明 | ||||||
---|---|---|---|---|---|---|---|---|
status | object | HTTPステータスオブジェクト
| ||||||
headers | object | レスポンスヘッダ | ||||||
body | string | Buffer | レスポンス | ||||||
errorMessage | string | エラーメッセージ |
サンプル
アクションにおいて GET タイプの REST API(パラメータ1つ)を呼び出し、結果を JSON 文字列でテキストエリアコンポーネントに表示する例を説明します。
Tips
パラメーター | JSON 文字列 |
---|---|
URL | https://bl2dqouo8g.execute-api.ap-northeast-1.amazonaws.com/dev/res1?name=文字列 |
API キー | bcVrf52Wvs3jAKMFYOK596hlLsTtmczH5tTCjQxI |
ステップ 1
UIにテキストフィールド、テキストエリア、ボタンを用意します。
コンポーネント | コンポーネント ID | コンポーネントラベル |
---|---|---|
テキストフィールド | text_field_name | 名前 |
テキストエリア | text_area_response | レスポンス |
ボタン | button_rest | REST API |
ステップ 2
button_restのアクションエディタを開き、 my_restという名前でREST関数を作成します。
[my_restの基本設定]
関数名 | my_rest |
---|---|
引数 | param |
メソッド | GET |
URL | https://bl2dqouo8g.execute-api.ap-northeast-1.amazonaws.com/dev/res1?name=${param.name} |
リクエストヘッダ | 名前 - X-API-Key 値- bcVrf52Wvs3jAKMFYOK596hlLsTtmczH5tTCjQxI |
バイナリ取得 | チェックなし |
ステップ 3
アクションボードに REST 関数の呼び出しを行い、レスポンスをテキストエリアに表示する記述を行います。
Tips
[アクションボードの内容]
const encoded_name = encodeURIComponent($ui.text_field_name.value);
const obj = {name: encoded_name};
const ret = await my_rest(obj);
$ui.text_area_response.value = ret.body;
ステップ 4
アクションを保存し、アプリケーションのデプロイを行います。
ステップ 5
アプリケーションから[名前]
テキストフィールドに任意の文字列を入力し、[REST API]
ボタンをクリックします。[レスポンス]
テキストエリアに「Hello 入力文字列」が表示されることを確認します。
(例) Hello World!
同期のJavaScript関数で非同期関数を呼び出す時のサンプル
JavaScript関数で非同期関数(SQL関数、REST関数、ビルトイン関数の$fn.getFile等)を呼び出す際は、サンプルの様にPromiseオブジェクトとして返却する必要があります。
下記executeScript関数内では、REST関数、SQL関数、JavaScript関数、ビルトイン関数を実行し、結果を返却する例を記載しています。
アクションボードでは、executeScript関数から返却された結果を、各テーブルコンポーネントの値に設定する例を記載しています。