コンテンツにスキップ
ドキュメント

ユーザ関数

アクションはJavaScriptを使って記述しますが、繰り返し使うJavaScriptの内容やSQLやRESTなど呼び出しに準備が必要なものについてはユーザ関数を利用します。
ユーザ関数はGUIを使って作成し、作成した関数はアクションから呼び出すことが可能です。

ユーザ関数の種類

ユーザ関数は、2種類存在します。

関数スコープ
ローカル関数1. アクション内のみ
2. 他のアクションから直接呼び出すことはできません。
グローバル関数1. アプリ
2. アプリ内の他のアクションで利用することが可能です。

JavaScript

アクションで繰り返し使うJavaScript処理は関数として登録することができます。

作成方法

  1. アクションエディタの左パネルにある[追加]ボタンをクリックします。
  2. 関数タイプから[スクリプト] を選択します。
  3. 関数名に任意の英字から始まる英数字+アンダースコアの文字列を入力します。
  4. [保存]ボタンをクリックします。
  5. 関数タイプを選択します。
  6. JavaScript 関数のエディタを表示します。
  7. JavaScript エディタに関数処理を記述します。

引数

引数は唯一の param オブジェクトになります。

名前型引数追加
paramオブジェクト不可

JavaScript 関数の中で引数 param から値を取得するには、次のように関数エディタで記述します。

const input1 = param.arg1;
const input2 = param.arg2;


return input1 + input2;

一方、関数を呼び出す場合は以下のように呼び出します。

const obj = {}; // 空オブジェクト作成
obj.arg1 = 10;
obj.arg2 = 20;


myfunc(obj);

サンプル

２つの数値を加算する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の内容]

const input1 = param.arg1;
const input2 = param.arg2;


return input1 + input2;

ステップ 3

アクションボードにmy_funcの呼び出しを行い、結果を計算結果フィールドに表示する記述を行います。

const obj = {};
obj.arg1 = $ui.number_field_1.value;
obj.arg2 = $ui.number_field_2.value;
$ui.number_ans.value = my_func(obj);

ステップ 4

アクションを保存し、アプリケーションのデプロイを行います。

ステップ 5

アプリケーションから数値フィールド1, 数値フィールド2に数値を入力し、計算ボタンをクリックします。計算結果フィールドに加算結果が表示されることを確認します。

SQL

データベースに SQL を発行してその結果を取得します。SQL エディタにはSQL文のみを記述します。

作成方法

  1. アクションエディタの左パネルにある[追加]ボタンをクリックします。
  2. 関数タイプから[SQL]を選択します。
  3. 関数名に任意の英字から始まる英数字+アンダースコアの文字列を入力します。
  4. [保存]ボタンをクリックします。
  5. SQL 関数のエディタを表示します。
  6. SQL エディタにSQLを記述します。

引数

引数は唯一の param オブジェクトになります。

名前型引数追加
paramオブジェクト不可

非同期関数とawait演算子

SQL関数は非同期で処理されます。値が返るまで待機するために、SQL関数実行時には、次のようにawait演算子を使用してください。

戻り値 = await SQL関数;

戻り値

SQL関数の戻り値は次のプロパティを含むオブジェクトになります。

プロパティ型説明
dataobject arraySQL結果のROWデータの配列、またはDMLステートメントを実行した結果
sqlStatestringSQLSTATE 値
errorCodestringエラーコード
errorMessagestringエラーメッセージ

トランザクション制御について

トランザクションはアクション単位で行われ、コミットおよびロールバックは暗黙的に行われます。 アクション内で複数のSQL関数がコールされた場合、１つでも例外が発生するとロールバックされます。

サンプル

アクションにおいてテーブルに向けて SELECT の SQL を発行し、結果を JSON 文字列でテキストエリアコンポーネントに表示する例を説明します。

ステップ 1

UI に結果を表示するテキストエリアコンポーネントとアクションを実行するボタンを用意します。

コンポーネントコンポーネント IDコンポーネントラベル
テキストエリアtext_area_1結果 JSON
ボタンbutton_sqlSELECT

ステップ 2

mydb という名前のデータベースにt1という名称でテーブルを以下の構成で作成します。

カラム名データタイプMDfspPKNNUQAI
idINTTrueTrue
nameVARCHAR20

カラムのデータタブよりテスト用データを格納しておきます。

idname
1a
2b

ステップ 3

button_sqlのアクションエディタを開き、 sql1という名前でSQL関数を作成します。

[sql1の内容]

select * from mydb.t1;

ステップ 4

アクションボードに SQL 関数の呼び出しを行い、データ取得結果をテキストエリアに表示する記述を行います。

[アクションボードの内容]

const obj = await sql1();
$ui.text_area_1.value = JSON.stringify(obj.data);

ステップ 5

アクションを保存し、アプリケーションのデプロイを行います。

ステップ 6

アプリケーションから SELECT ボタンをクリックします。結果 JSON テキストエリアに SQL の SELECT 結果が JSON 形式で表示されることを確認します。

[
  { "id": 1, "name": "a" },
  { "id": 2, "name": "b" }
]

REST

REST 関数は REST API や Amazon API Gateway を呼び出すための関数です。

作成方法

  1. アクションエディタの左パネルにある[追加]ボタンをクリックします。
  2. 関数タイプから[REST]を選択します。
  3. 関数名に任意の英字から始まる英数字+アンダースコアの文字列を入力します。
  4. [保存]ボタンをクリックします。
  5. REST 関数のエディタを表示します。
  6. REST エディタに REST API を呼び出すための設定をします。

基本設定

項目説明
関数名関数作成時に設定した名称が表示されています。
引数引数は他のユーザ関数と同様、唯一の param オブジェクトです。
メソッド呼び出すAPIによって、次の中から選択します。
1. GET
2. POST
3. PUT
4. PATCH
5. DELETE
URLREST API のURLを記入します。
任意の箇所で次の書式を使ってパラメータ値を埋め込めます。
${param.property_name}
リクエストヘッダリクエストヘッダを設定します。
[追加]ボタンをクリックすると、ヘッダ名と値のエントリを追加できます。
ヘッダ名は代表的なものが選択肢にありますが、任意入力も可能です。
リクエストボディPOST/PUT/PATCH/DELETEメソッドの場合、リクエストボディの指定が可能です。
ヘッダの Conent-Type の指定により、入力形式が変わります。
バイナリレスポンスを取得レスポンスの戻り値は string ですが、バイナリを返却するサービスの場合はこのチェックボックスにチェックを入れることで、Buffer オブジェクトとして戻り値を取得できます。

リクエストヘッダ

リクエストヘッダは[ヘッダー]タブから設定します。リクエストヘッダは選択肢として用意されていますが、直接入力することも可能です。

ヘッダ名値
Accept1. */*
2. application/*
3. audio/*
4. image/*
5. text/*
Accept-Charsetutf-8
Accept-Encoding1. compress
2. deflate
3. gzip
Accept-Language1. en-US
2. ja
Authorization
Cache-Control1. max-age=3600
2. no-cache
3. no-store
Connection1. close
2. keep-alive
Content-Length
Content-Type1. application/json
2. application/octet-stream
3. application/x-www-form-urlencoded
4. application/xml
5. multipart/form-data
6. text/css
7. text/html
8. text/plain
Cookie1. name=value
2. name=value; name2=value2; name3=value3
DateWed, 21 Oct 2015 07:28:00 GMT
Expect100-continue
Fromwebmaster@example.org
Host
Proxy-Authorization
Refererhttps://example.com/
User-Agent
X-Amz-Content-Sha256
X-Amz-Date
X-Amz-Security-Token
X-API-Key

リクエストボディ

リクエストボディは[ボディ]タブから設定します。リクエストヘッダの 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関数の戻り値は次のプロパティを含むオブジェクトになります。

プロパティ型説明
statusobjectHTTPステータスオブジェクト
プロパティ 型
codenumber
text string
headersobjectレスポンスヘッダ
bodystring | Bufferレスポンス
errorMessagestringエラーメッセージ

サンプル

アクションにおいて GET タイプの REST API（パラメータ１つ）を呼び出し、結果を JSON 文字列でテキストエリアコンポーネントに表示する例を説明します。

パラメーターJSON 文字列
URLhttps://bl2dqouo8g.execute-api.ap-northeast-1.amazonaws.com/dev/res1?name=文字列
API キーbcVrf52Wvs3jAKMFYOK596hlLsTtmczH5tTCjQxI

ステップ 1

UIにテキストフィールド、テキストエリア、ボタンを用意します。

コンポーネントコンポーネント IDコンポーネントラベル
テキストフィールドtext_field_name名前
テキストエリアtext_area_responseレスポンス
ボタンbutton_restREST API

ステップ 2

button_restのアクションエディタを開き、 my_restという名前でREST関数を作成します。

[my_restの基本設定]

関数名my_rest
引数param
メソッドGET
URLhttps://bl2dqouo8g.execute-api.ap-northeast-1.amazonaws.com/dev/res1?name=${param.name}
リクエストヘッダ名前 - X-API-Key
値- bcVrf52Wvs3jAKMFYOK596hlLsTtmczH5tTCjQxI
バイナリ取得チェックなし

ステップ 3

アクションボードに REST 関数の呼び出しを行い、レスポンスをテキストエリアに表示する記述を行います。

[アクションボードの内容]

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関数から返却された結果を、各テーブルコンポーネントの値に設定する例を記載しています。

アクションボード

{
  const { books, tasks, plans, files } = await executeScript();
}


// Books
$ui.books.value = books.map((book) => ({
  bookTitle: book?.volumeInfo?.title,
  bookPublisher: book?.volumeInfo?.publisher,
  bookPublishedDate: book?.volumeInfo?.publishedDate,
}));


// Tasks
$ui.tasks.value = tasks;


// Plans
$ui.plans.value = plans.map((plan) => ({
  planId: plan.id,
  planName: plan.name,
}));


// Files
$ui.files.value = files.map((fileName) => ({ fileName }));

JavaScript関数：executeScript（関数タイプ：同期）

const execute = async () => {
  // REST関数呼び出し
  const sendResult = await sendGetBooksRequest();
  const body = JSON.parse(sendResult.body);
  const books = body.items;


  // SQL関数呼び出し
  const selectResult = await selectTaskRecords();
  const tasks = selectResult.data;


  // JavaScript関数呼び出し
  const plans = getPlans();


  // ビルトイン関数呼び出し
  const files = await $fn.getFileNames("/");


  return {
    books,
    tasks,
    plans,
    files,
  };
};


// Promiseオブジェクトを返却する
return execute();

JavaScript関数：getPlans（関数タイプ：同期）

return [
  {
    name: "プラン1",
    id: "p001",
  },
  {
    name: "プラン2",
    id: "p002",
  },
  {
    name: "プラン3",
    id: "p003",
  },
];