ベースマキナとは

# ベースマキナとは

![ベースマキナとは](/images/what_is_basemachina/turntoui.png)

「BaseMachina（ベースマキナ）」は自社のデータを使った社内向けシステムを簡単に作成できるサービスです。

- エンジニアの方が開発業務以外で時間を使っていたオペレーション業務
- カスタマーサポート、マーケティング、営業企画の方が行なう顧客対応

などを定型化するため、エンジニアがサービス開発の合間に時間を使って管理画面を実装していました。

ベースマキナを使えば、そうした社内のオペレーション業務を定型化するために1から実装コストを払うことなく、データソースや処理をローコードで登録することにより、必要な画面を揃えることができます。

## ベースマキナの仕組み [](#ベースマキナの仕組み)

ベースマキナを使って社内向けシステムを作るために必要な作業はたった数ステップです。

1. MySQL、PostgreSQL、HTTP API、gRPCなどのデータソースを接続先として登録します。
1. SQLやAPI呼び出しのロジックを登録します（ベースマキナ内ではこれらを「アクション」と呼んでいます）。
1. 権限や加工処理など、呼び出しやアウトプットの方法を設定します。

これだけで社内向けシステムとして機能するUIが自動で作成され、ライブラリのアップデートの追従や画面作成、認証認可などの機能を実装する工数を削減できます。

さらに、セキュリティ面でもシングルサインオンや監査ログ、アクション単位でのきめ細かい権限管理などをサポートしており、顧客情報などの機密性の高いデータを扱う業務にもスムーズに応用できます。

## ドキュメントの利用方法 [](#ドキュメントの利用方法)

本ドキュメントは、いくつかの部分に分かれています。

まず、はじめてベースマキナをご利用の方向けの [スタートガイド](/start_guide/what_is_start_guide/) があります。
こちらで、ベースマキナの基本的な設定方法と、簡単なアクションの作成手順を体系的に学べます。

初回セットアップに必要な情報や、ベースマキナの重要な用語については、 [よくある疑問点](/faq/howto_setup/) に記載しています。

それ以降のドキュメントは、アクションなどの個別の機能に関する詳細な解説となっております。

また、ベースマキナ ドキュメントでは、 [llms-full.txt (opens in a new tab)](https://docs.basemachina.com/llms-full.txt) の配布も行なっています。
AIとのチャット形式でドキュメントを活用したい方は、 [NotebookLM連携](/tips/notebooklm_integration/) および、 [Claude連携](/tips/claude_project_integration/) のドキュメントを参考に `llms-full.txt` 利用の設定を行なってください。

[スタートガイドとは](/start_guide/what_is_start_guide/)
---
アクション

アクショングループ

# アクショングループ

## アクショングループとは [](#アクショングループとは)

![グループの詳細](/images/action_group/group_detail.png)

複数のアクションを1つの画面上で扱えるようにする機能です。

操作する対象のデータが共通していたり、よく併用するアクションをまとめることで、画面移動の手間を省いてオペレーションの作業時間を短縮できます。

## アクショングループの作成・更新方法 [](#アクショングループの作成更新方法)

アクショングループの画面には、画面上部のメニューからグループのアイコンをクリックすることで移動できます。

![グループのアイコン](/images/action_group/nav_icon.png)

新しくグループを作る場合、または設定を更新する場合にも、操作方法は同じです。

グループ名とグループに含めるアクションを選択します。

選択済みのアクションはドラッグアンドドロップで表示順序を変えられます。

![グループの作成](/images/action_group/group_form.png)

## 利用方法 [](#利用方法)

作成されたグループの画面に移動すると、追加されたアクションの実行導線が順序ごとにソートされて表示されます。

実行結果を加工したり、画面移動の設定を追加したい場合はアクション個別の画面から設定を変更してください。

[予約実行](/action/scheduled_jobs/) [一括実行](/action/batch/)
---
アクション

画像や動画の表示

# 画像や動画の表示

アクションの結果表示画面では画像や動画を表示できます。

画像や動画だと判定できるURLの文字列が返ってきたとき、文字列ではなく画像や動画の表示用のUIが代わりに表示されます。

URLの末尾が `png` や `jpg` などの画像の拡張子だった場合は画像表示用のUIが表示されます。

URLの末尾が `mp4` や `m3u8` などの動画の拡張子だった場合や、ドメインが `youtube.com` などの動画配信サイトであった場合、動画表示用のUIが表示されます。

また、HTTP APIの実行結果が画像、動画、PDFファイルだった場合、それに応じたUIが表示されます。

画像をクリックすると別タブで画像が開きます。また、動画も再生や拡大が可能で、手軽にプレビューをする手段としてお使いいただけます。

![レスポンス内容](/images/action_media_result/response.png)

![コンポーネント](/images/action_media_result/media_component.png)

## 画像の表示サイズを調整する/拡張子が画像以外のURLで画像を表示する [](#画像の表示サイズを調整する拡張子が画像以外のurlで画像を表示する)

結果表示のカスタマイズで `image` 関数を利用すると、画像の表示サイズの調整や、拡張子が画像以外のURLでの画像の表示ができます。

詳細は [`image`](/action/transformer_script/builtin_functions/image/) をご参照ください。

[アクションのコピー](/action/copy_action/) [結果のダウンロード](/action/download_result/)
---
アクション

実行権限

# 実行権限

![権限設定](/images/action_permission/basic.png)

アクションの実行者を制限したい場合には、アクションの設定画面のなかで実行権限を変更できます。

初期設定では **誰でも実行可能** となっており、制限は特にかかっていません。

**実行権限を制限する** を選択すると、プロジェクトの中に追加されているユーザー、またはロールをベースにして実行権限を付与する対象を決められます。

![実行権限を制限](/images/action_permission/limited.png)

権限が制限されていない場合は、誰でもアクションを実行できますが、権限を制限すると、実行権限を持っていないユーザーがアクションを実行できなくなります。

![レビュー必須](/images/action_permission/limited_form.png)

### JavaScriptアクションからしか実行できないように実行権限を制限する [](#javascriptアクションからしか実行できないように実行権限を制限する)

実行権限では、権限の持ち主にJavaScriptアクションも設定できます。
権限の持ち主にJavaScriptアクションを設定すると、そのアクションはJavaScriptアクションからしか実行できなくなります。

詳細は [JavaScriptアクションからしか実行できないアクションを作成する](/action/datasources/javascript_action/#JavaScript%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8B%E3%82%89%E3%81%97%E3%81%8B%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B) をご参照ください。

[image](/action/transformer_script/builtin_functions/image/) [レビュー設定](/action/review/)
---
アクション

一括実行

# 一括実行

一括実行は、異なる引数でのアクションの実行を一括で行なえる機能です。

引数の値はフォームからだけでなくCSVファイルによる入力も可能です。

![一括実行画面](/images/action_batch/form.png)

## 一括実行の方法 [](#一括実行の方法)

1. アクション実行画面の右上にある「一括実行へ進む」ボタンから一括実行画面に移動します。

![「一括実行へ進む」ボタン](/images/action_batch/button_to_batch_page.png)

1. アクションの引数の入力画面が表示され、「実行内容を追加する」ボタンを押すと引数の入力フォームが追加されます。
1. 各実行内容の引数の値を入力し、ページ最下部の「一括実行する」ボタンを押すと一括実行が開始されます。

### 一括実行結果を確認する [](#一括実行結果を確認する)

一括実行を開始するとサイドバーに各実行結果のステータスが表示されます。

| アイコン | ステータス |
| --- | --- |
| ⏳ | 実行待ち |
| 🟡 | 実行中 |
| ✅ | 実行成功 |
| ❌ | 実行失敗 |

サイドバーの各項目を選択すると、各実行結果を確認できます。

各実行結果は通常のアクションの実行結果と同様に、CSVやJSON形式でのダウンロードも可能です。

別の引数で一括実行をする場合は、サイドバーの一番上にある「実行内容の入力」ボタンから引数の入力画面に移動し、引数の値を変更して実行してください。

## CSVファイルをアップロードして引数の値を入力する [](#csvファイルをアップロードして引数の値を入力する)

一括実行画面の「CSVで入力する」ボタンからCSVファイルをアップロードして引数の値を入力できます。

### CSVファイルの入力形式 [](#csvファイルの入力形式)

1行目にパラメータ名、2行目以降の各行に実行する引数の値を入力します。

```
text_param,number_param,date_param // パラメータ名
a,1,2023-01-01 // 1件目の実行での引数の値
b,2,2023-01-02 // 2件目の実行での引数の値
```

一括実行画面の右上にある「CSV入力用テンプレート」から、1行目のパラメータ名が入力されたテンプレートのダウンロードも可能です。

パラメータの各入力値の種類ごとの入力形式は以下の通りです。

| 入力値の種類 | 説明 | 例（ `CSVの入力値` → `フォームの値` ） |
| --- | --- | --- |
| テキスト | 任意の値を入力してください。 文字列中で `"`, `,`, `\n` を使う場合は文字列全体を `"` で囲ってください。 `"` を使う場合は `""` と入力してください。 | `…,a,…` → `'a'` `…,"a,b",…` → `'a,b'` `…,"a\nb",…` → `'a\nb'` `…,"""ab""",…` → `'"ab"'` |
| 数値 | 数値に変換できる値を入力してください。 | `…,123,…` → `123` |
| 日付 | JavaScriptのDate型に変換できる値、または UnixTimestamp (秒)を入力してください。 文字列中で `,` を使う場合は文字列全体を `"` で囲ってください。 | `…,2023-01-01,…` → `'2023-01-01'` `…,2023-01-01T01:01:01,…` → `'2023-01-01T01:01:01'` `…,1609459200,…` → `1609459200` |
| 真偽値 | `true` または `false` を入力してください。（大文字小文字の区別なし） 未入力の場合は `false` として扱われます。 | `…,true,…` → `true` |
| JSON値 | JSON値の種類ごとに、各入力値の種類と同じです。 未入力の場合は `null` として扱われます。 | テキスト、数値、日付の例をご参考ください。 |
| SQL | テキストと同じです。 | `…,select * from users;,…` → `'select * from users;'` |
| 配列 | JSON形式の配列の `"` を `""` に置き換えた上で、配列全体を `"` で囲んで入力してください。 | `…,"[""a"",""b""]",…` → `['a','b']` `…,"[1,2]",…` → `[1,2]` `…,"[""a,b"",""\""ab\""""]",…` → `['a,b','"ab"']` `…,"[[""a"",""b""]]",…` → `[['a','b']]` |
| タプル | 配列と同じです。 | `…,"[""a"",1]",…` → `['a',1]` `…,"[""\""ab\"""",12]",…` → `['"ab"',12]` |
| システム値 | テキストと同じです。 | `…,10,…` → `'10'` |
| ファイル | CSV入力には対応していません。 |  |

ExcelやGoogleスプレッドシートではCSVエクスポート時に必要に応じて `"` が付与されるため、各セルの値の入力では不要です。

例えばGoogleスプレッドシートで以下のように入力します。

![一括実行用のCSVファイルをスプレッドシートで作成する例](/images/action_batch/spread_sheet.png)

入力したシートをCSV形式でエクスポートした結果が以下で、そのまま一括実行で利用できます。

```
text1,text2,text3,array1,array2,array3
a,"a,b","""ab""","[""a"",""b""]","[""a,b"", ""c,d""]","[""\""ab\"""", ""\""cd\""""]"
```

[アクショングループ](/action/action_group/) [設定内容のダウンロード](/action/download_action_settings/)
---
アクション

アクションのコピー

# アクションのコピー

アクションの設定を複製して別のアクションを作成できます。アクションの複製は、アクションの設定画面から行なえます。

画面右上に複製用のボタンが置かれているので、そちらをクリックしてください。

複製に成功すると複製されたアクションの画面に移動します。設定内容の変更は、複製後の新しいアクションの編集画面から行なってください。

![複製の導線](/images/copy_action/copy_button.png)

[レビュー設定](/action/review/) [画像や動画の表示](/action/action_media_result/)
---
アクション

データソース別の設定

Amazon Athena

# Amazon Athenaアクション

[Amazon Athena (opens in a new tab)](https://docs.aws.amazon.com/ja_jp/athena/latest/ug/what-is.html) は、Amazon S3に保存されているJSONやCSV形式のデータをSQLで分析できるサービスです。

Amazon Athenaアクションは、ベースマキナからAmazon AthenaのデータベースにSQLを実行できるアクションです。

設定方法は以下をご参照ください。

- [Amazon Athenaデータソースの設定](/action/datasources/amazon_athena/datasource_setting/)
- [Amazon Athenaアクションの設定](/action/datasources/amazon_athena/action_setting/)

また、Amazon Athenaアクションを使用して、監査ログストリーミングでAmazon S3に保存した監査ログの検索も可能です。

詳細は [Amazon S3に保存した監査ログをAmazon Athenaアクションで検索する](/admin/security/audit_log/search/s3/) をご参照ください。

[型定義ファイルのダウンロード](/action/datasources/javascript_action/download_dts_file/) [データソースの設定](/action/datasources/amazon_athena/datasource_setting/)
---
アクション

データソース別の設定

[Amazon Athena](/action/datasources/amazon_athena/)

アクションの設定

# Amazon Athenaアクションの設定

※ Amazon Athena アクションを使用するには事前に Amazon Athena のデータソースの作成が必要です。
データソースの作成方法は [Amazon Athena データソースの設定](/action/datasources/amazon_athena/%7Bprops.dataSourcePath%7D) をご参照ください。

Amazon Athena アクションは以下の手順で設定します。

1. 右上のメニューから「アクション」を選択してアクション一覧画面に移動します。
1. 「アクションの追加」を選択してアクションの作成画面に移動します。
1. 「基本情報の設定」を入力後「次へ」を選択して、「処理の設定」画面に移動します。
1. 「データソース」から事前に作成した Amazon Athena のデータソースを選択します。

![Amazon Athenaのアクションの設定画面](/images/amazon_athena/action_setting.png)

Amazon Athena アクションではパラメーターなどの他のアクションと共通の項目に加えて、以下の項目を設定します。

- SQL文のタイトル
- SQL文
- JSON型の値をパースする

## SQL文のタイトル [](#sql文のタイトル)

SQL文のタイトルを設定します。

## SQL文 [](#sql文)

実行するSQL文を設定します。

SQL文は1つの Amazon Athena アクションに複数設定できます。

※ Amazon Athena アクションでは、それぞれのSQL文は別のトランザクションで実行されます。

### SQL文内でパラメーターを使用する [](#sql文内でパラメーターを使用する)

SQL文内では `{{ パラメーター名 }}` の形式でパラメーターを使用できます。

例えば、パラメーター名が「メールアドレス」のテキストパラメーターを使って `users` テーブルから特定のユーザーを検索するSQL文は以下です。

```
SELECT * FROM users WHERE email = {{ メールアドレス }};
```

`{{ パラメーター名 }}` の部分はアクションの実行時にプレースホルダーへ置換され、パラメーターの値が入力されてSQL文が実行されます。

パラメーターの入力値の種類ごとに、入力される値の形式は以下です。

| 入力値の種類 | 入力される値の形式 | 例 |
| --- | --- | --- |
| [テキスト](/action/parameter/text_parameter/) | 文字列（値が未入力の場合は空文字列） | `'test@example.com'` |
| [数値](/action/parameter/number_parameter/) | 数値（値が未入力の場合は `null` ） | `123`, `4.56`, `0`, `null` |
| [真偽値](/action/parameter/bool_parameter/) （フォーマットなし） | 真偽値 | `true`, `false` |
| [真偽値](/action/parameter/bool_parameter/) （フォーマット形式が文字列） | 文字列 | `'有効'`, `'無効'` |
| [日付](/action/parameter/date_parameter/) （unixtimeとして利用するが有効） | 数値（値が未入力の場合は `null` ） | `1672531200000`, `null` |
| [日付](/action/parameter/date_parameter/) （unixtimeとして利用するが無効） | 文字列（値が未入力の場合は空文字列） | `'2023-01-01'`, `'2023-01-01T00:00:00Z'` |
| [配列](/action/parameter/array_parameter/) （フォーマット形式がSQL） | 配列 | `(10,11,12)` |
| [配列](/action/parameter/array_parameter/) （フォーマット形式がJSON） | 文字列 | `'["taro","jiro","saburo"]'` |
| [配列](/action/parameter/array_parameter/) （フォーマット形式が区切り文字） | 文字列 | `'"taro","jiro","saburo"'` （区切り文字が `,` 、引用符が `"` の場合） |
| [タプル](/action/parameter/tuple_parameter/) （フォーマット形式がJSON） | 文字列 | `'["taro",25,"2023-01-01"]'` |
| [タプル](/action/parameter/tuple_parameter/) （フォーマット形式が区切り文字） | 文字列 | `'"taro","jiro","saburo"'` （区切り文字が `,` 、引用符が `"` の場合） |
| [SQL](/action/parameter/sql_parameter/) | プレースホルダーを使用せずに `{{ パラメータ名 }}` が値にそのまま置換されます。 | SQL型のパラメーターのドキュメントをご参照ください |
| JSON値 | Amazon Athena アクションでは使用できません | - |
| ファイル | Amazon Athena アクションでは使用できません | - |
| システム値 | Amazon Athena アクションでは使用できません | - |

## JSON型の値をパースする [](#json型の値をパースする)

アクションの実行結果に含まれるJSON型の列の値を、JavaScriptのオブジェクトや配列などに変換します。

詳細は [JSON型の列の値をJavaScriptの配列やオブジェクトに変換する](/action/datasources/%7Bprops.dataSourcePath%7D/data_type/#json%E5%9E%8B%E3%81%AE%E5%88%97%E3%81%AE%E5%80%A4%E3%82%92javascript%E3%81%AE%E9%85%8D%E5%88%97%E3%82%84%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B) をご参照ください。

[データソースの設定](/action/datasources/amazon_athena/datasource_setting/) [各データ型の値の扱い](/action/datasources/amazon_athena/data_type/)
---
アクション

データソース別の設定

[Amazon Athena](/action/datasources/amazon_athena/)

各データ型の値の扱い

# Amazon AthenaアクションでのAthenaの各データ型の値の扱い

ベースマキナにはアクションの実行結果に対してJavaScriptで処理を書く機能があります。

- [アクションの実行結果の加工スクリプト](/action/transformer_script/action_transform/)
- [ビュー](/view/what_is_view/)
- [JavaScriptアクション](/action/datasources/javascript_action/)

各アクションの実行結果の値は、それに対応するJavaScriptの型へと自動的に変換されます。
以下の表は、上記の機能でAmazon Athenaアクションの結果として使用される、Amazon Athenaのデータ型と、対応するJavaScriptの型の一覧です。

| Amazon Athenaのデータ型 | アクションの実行結果でのJavaScriptの型 | 対応状況 |
| --- | --- | --- |
| `VARCHAR` | `string | null` | 対応 |
| `CHAR` | `string | null` | 対応 |
| `UUID` | `string | null` | 対応 |
| `IPADDRESS` | `string | null` | 対応 |
| `DATE` | `string | null` | 対応 |
| `TIME` | `string | null` | 対応 |
| `TIME WITH TIME ZONE` | `string | null` | 対応 |
| `TIMESTAMP` | `string | null` | 対応 |
| `TIMESTAMP WITH TIME ZONE` | `string | null` | 対応 |
| `ARRAY` | `string | null` | 対応 |
| `ROW` | `string | null` | 対応 |
| `MAP` | `string | null` | 対応 |
| `DOUBLE` | `number | null` | 対応 |
| `INTEGER` | `number | null` | 対応 |
| `FLOAT` | `number | null` | 対応 |
| `TINYINT` | `number | null` | 対応 |
| `SMALLINT` | `number | null` | 対応 |
| `BOOLEAN` | `boolean | null` | 対応 |
| `BIGINT` | `bigint | null` | 対応 |
| `JSON` （JSON型の値をパースするが有効） | `Record<string, unknown> | unknown[] | string | number | boolean | null` | 対応 |
| `JSON` （JSON型の値をパースするが無効） | `string | null` | 対応 |
| `DECIMAL` | `string | null` | 未対応 |
| `VARBINARY` | `string | null` | 未対応 |
| `INTERVAL YEAR TO MONTH` | `string | null` | 未対応 |
| `INTERVAL DAY TO SECOND` | `string | null` | 未対応 |

各データ型の詳細はAWSのドキュメントの [Amazon Athenaのデータ型 (opens in a new tab)](https://docs.aws.amazon.com/ja_jp/athena/latest/ug/data-types.html) をご参照ください。

## 未対応のデータ型 [](#未対応のデータ型)

対応状況が未対応のデータ型はJavaScriptの型への変換が未対応で、現在は `string | null` に変換されますが、今後別のJavaScriptの型に変更される可能性があります。

なおAmazon Athenaアクションの実行結果に未対応のデータ型の列の値が含まれる場合、アクションの実行結果に以下のメッセージが表示されます。

![未対応のデータ型のメッセージ](/images/amazon_athena/unsupported_column.png)

## 各データ型の列の値を別のJavaScriptの型に変換する [](#各データ型の列の値を別のjavascriptの型に変換する)

以下は各データ型の列の値を、別のJavaScriptの型として扱いたい場合の変換方法です。

### SQL文でデータ型を変換する [](#sql文でデータ型を変換する)

アクションの実行で共通の変換をする場合は、SQL文内で `CAST` 関数を使ってデータ型を変換する方法が便利です。

例えば、以下のように `VARCHAR` 型の列の値を `INTEGER` 型に変換すると、
アクションの実行結果のJavaScriptの型は `number | null` になります。

```
SELECT
    -- ここでVARCHAR型の列「id」の値をINTEGER型に変換
    CAST(id AS INTEGER)
FROM
    users;
```

`CAST` 関数の詳細はTrino（Amazon Athenaのエンジン）のドキュメントの [Conversion functions (opens in a new tab)](https://trino.io/docs/current/functions/conversion.html#cast) をご参照ください。

### JavaScriptで値の型を変換する [](#javascriptで値の型を変換する)

各アクション実行ごとに別の変換をしたい場合は、JavaScriptのコード内で値の型を変換できます。

以下は、アクションの実行結果の加工スクリプトで `string | null` 型の値を `number` 型に変換する例です。

```
return [
  {
    success: results[0].success.map((user) => ({
      // `Number()`コンストラクターで`string | null`型の値を`number | null`型に変換
      id: user.id !== null ? Number(user.id) : null,
      name: user.name,
    })),
  },
];
```

### JSON型の列の値をJavaScriptの配列やオブジェクトに変換する [](#json型の列の値をjavascriptの配列やオブジェクトに変換する)

アクションの設定で「JSON型の値をパースする」を有効にすると、JSON型の列の値がJavaScriptのオブジェクトや配列などに変換されます。

例えば `'{"name": "John", "age": 30}'` という値は `{name: "John", age: 30}` というオブジェクトに変換されます。

### `ARRAY`, `ROW`, `MAP` 型の列の値をJavaScriptの配列やオブジェクトに変換する [](#arrayrowmap型の列の値をjavascriptの配列やオブジェクトに変換する)

通常、 `ARRAY`, `ROW`, `MAP` 型の列の値は `string | null` に変換されますが、以下の手順でJavaScriptの配列やオブジェクトに変換できます。

1. 「JSON型の値をパースする」を有効にする
1. `CAST` 関数で `ARRAY`, `ROW`, `MAP` 型の列の値を `JSON` 型に変換する

```
SELECT
    -- MAP型の列「login_user」の値をJSON型に変換
    CAST(login_user AS JSON)
FROM
    audit_logs;
```

[アクションの設定](/action/datasources/amazon_athena/action_setting/) [パラメーターとは](/action/parameter/action_parameter/)
---
アクション

データソース別の設定

[Amazon Athena](/action/datasources/amazon_athena/)

データソースの設定

# Amazon Athenaデータソースの設定

Amazon Athenaのデータソースは以下の手順で設定します。

## Amazon AthenaのデータベースとIAMユーザーの作成

ベースマキナでAmazon Athenaを利用するには、事前にAWSで以下の操作が必要です。

- Amazon Athenaのデータベースの作成
- IAMユーザーの作成とアクセスキーの発行

### Amazon Athenaのデータベースの作成

AWSのコンソール上で、ベースマキナから接続するAmazon Athenaのデータベースを作成します。

Amazon Athenaのデータベースの作成方法は、AWSのドキュメントの [ステップ 1: データベースを作成する (opens in a new tab)](https://docs.aws.amazon.com/ja_jp/athena/latest/ug/step-1-create-a-database.html) をご参照ください。

### IAMユーザーの作成とアクセスキーの発行 [](#iamユーザーの作成とアクセスキーの発行)

次に、ベースマキナからAmazon Athenaへ接続するために、IAMユーザーを作成しアクセスキーを発行します。

IAMユーザーの作成とアクセスキーの発行は、AWSのドキュメントの [IAM ユーザーのアクセスキーの管理 (opens in a new tab)](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_access-keys.html) をご参照ください。

IAMユーザーには、少なくとも下記の権限を持ったIAMポリシーを割り当てる必要があります。

- `athena:StartQueryExecution`
- `athena:GetQueryExecution`
- `athena:GetQueryResults`
- `athena:GetPreparedStatement`
- `athena:CreatePreparedStatement`
- `athena:DeletePreparedStatement`
- `glue:GetDatabase`
- `glue:GetTable`
- `s3:GetObject`
- `s3:ListBucket`
- `s3:PutObject`

その他、ベースマキナから行ないたいAmazon Athenaに対する操作に応じて、必要な権限を追加してください。

Amazon AthenaでのIAMポリシーの詳細は、AWSのドキュメントの [Athena でのアイデンティティとアクセス権の管理 (opens in a new tab)](https://docs.aws.amazon.com/ja_jp/athena/latest/ug/security-iam-athena.html) をご参照ください。

## データソースの作成 [](#データソースの作成)

![Amazon Athenaのデータソースの作成画面](/images/amazon_athena/datasource_setting.png)

1. 右上のメニューから「データソース」を選択してデータソース一覧画面に移動します。
1. 「データソースの追加」を選択してデータソースの追加画面に移動します。
1. 「Amazon Athena」を選択して、Amazon Athenaのデータソースの作成画面に移動します。
1. 各設定項目を入力します。
1. 「保存」を選択します。

Amazon Athenaのデータソースには以下の項目を設定します。

### 名前 [](#名前)

データソースの名前を設定します。

### リージョン [](#リージョン)

接続するAmazon Athenaのデータベースのリージョンを設定します。

### データベース名 [](#データベース名)

接続するAmazon Athenaのデータベースの名前です。

### クエリの結果の場所 [](#クエリの結果の場所)

接続するAmazon Athenaのデータベースのクエリ結果の場所です。

例） `s3://bucket-name/prefix/object-name`

### アクセスキー [](#アクセスキー)

発行したIAMユーザーのアクセスキーを設定します。

### シークレットアクセスキー [](#シークレットアクセスキー)

発行したIAMユーザーのシークレットアクセスキーを設定します。

## データソースの編集 [](#データソースの編集)

1. 右上のメニューから「データソース」を選択してデータソース一覧画面に移動します。
1. 編集するデータソースを選択してデータソースの編集画面に移動します。
1. 各設定項目を入力します。
1. 「保存」を選択します。

## データソースの削除 [](#データソースの削除)

![データソースの削除](/images/datasource/delete.png)

1. 右上のメニューから「設定」を選択してプロジェクト設定画面に移動します。
1. 「データソース設定」を選択してデータソース設定画面に移動します。
1. 削除するデータソースの行の右端の3点リーダから「削除する」を選択します。
1. 表示される画面で「OK」を選択します。

[Amazon Athena](/action/datasources/amazon_athena/) [アクションの設定](/action/datasources/amazon_athena/action_setting/)
---
アクション

データソース別の設定

Amazon S3

# Amazon S3

Amazon S3アクションでは、ファイルのアップロードとダウンロードを行なえます。

## Amazon S3のデータソースに接続する

1. 右上のメニューから「データソース」を選択する

2. 「データソースの追加」をクリックする

3. データソースの種類の中から「 Amazon S3 」を選択する

![データソースの選択](/images/awss3_integration/select.png)

4. データソースへの接続に必要な情報を入力して保存する

![データソースの接続設定](/images/awss3_integration/connection.png)

### IAMユーザーの作成 [](#iamユーザーの作成)

上記の `4` のステップでは、Amazon S3の操作に必要な認証情報を登録します。

AWSのコンソール上でIAMユーザーを作成しアクセスキーを発行したうえで、そのアクセスキーとシークレットキーを登録してください。

アクセスキー発行の詳しい方法については、 [IAM ユーザーのアクセスキーの管理 (opens in a new tab)](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_access-keys.html) をご参照ください。

### 必要なポリシーの割り当て [](#必要なポリシーの割り当て)

IAMユーザーには、アクションで行ないたい操作によって、下記の権限を持ったIAMポリシーを割り当てる必要があります。

- アップロード： `s3:PutObject`
- ダウンロード： `s3:GetObject`
- オブジェクトの一覧取得： `s3:ListBucket`

IAMポリシーの詳しい作成方法に関しては、 [IAM でのポリシーとアクセス許可 (opens in a new tab)](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/access_policies.html) をご参照ください。

## Amazon S3をアクションで利用する

1. 右上のメニューから「アクション」を選択する

2. 「アクションの追加」をクリックする

3. アクション名やパラメーターを設定する

![データソースの選択](/images/awss3_integration/basic_action.png)

### アップロード [](#アップロード)

![アップロード設定画面](/images/blob_action/upload.png)

1. アクションパラメーターを設定します
  - ファイルパラメーターを **必須** にします
  - またアップロードするファイル名を指定するためにファイル名を入力するためのテキストパラメーターも必須にします
1. バケット名を `test-bucket` のように設定します
1. 実行メソッドを「アップロード」に設定します
1. オブジェクト名（オブジェクトキー）を `images/{{ ファイル名 }}` のように設定します
  - アップロードされるファイルのオブジェクト名となります
1. ファイル内容に使うパラメーターを1で作成したファイルパラメーターに設定します

アクション実行画面でパラメーターとしてファイル名を `test.png` と設定し実行した場合は下記にアップロードされます。

`s3://test-bucket/images/test.png` ### ダウンロード [](#ダウンロード)

![ダウンロード設定画面](/images/blob_action/download.png)

1. アクションパラメーターを設定します
  - ダウンロードするファイル名を指定するためのテキストパラメーターを必須にします
1. バケット名を `test-bucket` のように設定します
1. 実行メソッドを「ダウンロード」に設定します
1. オブジェクト名（オブジェクトキー）を `images/{{ ファイル名 }}` のように設定します
  - ダウンロードされるファイルのオブジェクト名となります

アクション実行画面でパラメーターとしてファイル名を `test.png` と設定し実行した場合は下記のファイルがダウンロードされます。

`s3://test-bucket/images/test.png` ### オブジェクトの一覧 [](#オブジェクトの一覧)

![オブジェクトの一覧設定画面](/images/blob_action/list_object.png)

1. バケット名を入力します。
1. 実行メソッドで「オブジェクトの一覧」を選択します。
1. 必要に応じてオブジェクト名（オブジェクトキー）を入力します。
1. 保存します。

設定したアクションを実行すると、オブジェクトの一覧を取得できます。

指定したオブジェクト名（オブジェクトキー）は、一覧取得時の接頭辞による絞り込みに使われます。

![オブジェクトの一覧の結果画面](/images/blob_action/list_object_result.png)

#### 実行結果の形式 [](#実行結果の形式)

下記の形式のオブジェクトを含んだ配列を返します。

| キー名 | 説明 |
| --- | --- |
| objectKey | オブジェクト名（オブジェクトキー） |
| lastModified | ファイルの更新日時のUnixTimestamp (秒) |
| size | ファイルのバイトサイズ |

### 署名付きURLの発行 [](#署名付きurlの発行)

![オブジェクトの署名付きURL発行の設定画面](/images/blob_action/issue_signed_url.png)

1. バケット名を入力します。
1. 実行メソッドで「署名付きURLの発行」を選択します。
1. オブジェクト名（オブジェクトキー）を入力します。
1. HTTPメソッドを「GET」または「PUT」から選択します。
1. 保存します。

設定したアクションを実行すると、署名付きURLが発行されます。

![オブジェクトの署名付きURL発行の結果画面](/images/blob_action/issue_signed_url_result.png)

#### 実行結果の形式 [](#実行結果の形式-1)

下記の形式のオブジェクトを返します。

| キー名 | 説明 |
| --- | --- |
| signedUrl | 発行した署名付きURL |

### 便利な使い方 [](#便利な使い方)

「バケット名」と「オブジェクト名（オブジェクトキー）」では、アクションのパラメーターのほかに、 [変数・シークレット](/action/parameter/vars_secrets/) と [事前定義パラメーター](/action/parameter/predefined_parameter/) をご利用いただくことができます。環境に応じて値を変更したい場合などにご利用ください。

書式については [変数・シークレットの使用方法](/action/parameter/vars_secrets/#%E5%A4%89%E6%95%B0%E3%82%B7%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95) をご覧ください。

[Google スプレッドシート](/action/datasources/googlespreadsheet_integration/) [Google Cloud Storage](/action/datasources/gcs_integration/)
---
アクション

データソース別の設定

Firestore

# Firestore (Datastore)

## Firestore (Datastore) のデータソースに接続する [](#firestore-datastore-のデータソースに接続する)

Firestoreとの連携では、FirestoreまたはFirestoreのDatastoreモードの操作を行なえます。

1. 右上のメニューから「データソース」を選択する

2. 「データソースの追加」をクリックする

3. データソースの種類の中から「 Firestore 」を選択する

![データソースの選択](/images/firestore_integration/select.png)

4. データソースへの接続に必要な情報を入力して保存する

![データソースの接続設定](/images/firestore_integration/connection.png)

### サービスアカウントキーの保存 [](#サービスアカウントキーの保存)

上記の `4` のステップでは、データベースの操作のために必要なサービスアカウントキーを保存します。

Google Cloudコンソール上で発行し、JSON形式でダウンロードしたファイルの内容をフォームに貼り付けて保存してください。

サービスアカウントキー発行の詳しい方法については、 [Googleのドキュメント (opens in a new tab)](https://cloud.google.com/iam/docs/creating-managing-service-account-keys) を参照ください。

### 必要なロールの割り当て [](#必要なロールの割り当て)

サービスアカウントには、下記 [FirestoreのIAMロール (opens in a new tab)](https://cloud.google.com/firestore/docs/security/iam#predefined_roles) のいずれかの割り当てが必要となります。

Firestoreに関連するIAMロールは、Google Cloudコンソール上では `Cloud Datastore` となっている点にご注意ください。

- 読み書き両方： `Cloud Datastore ユーザー`
- 読み込みのみ： `Cloud Datastore 閲覧者`

もし割り当てが行なわれていない場合は、Google Cloudコンソールの、 `IAMと管理` の [IAMの設定 (opens in a new tab)](https://console.cloud.google.com/iam-admin/iam) にて行なってください。

## Firestore (Datastore) をアクションで利用する [](#firestore-datastore-をアクションで利用する)

Firestoreアクションは、実行内容をJavaScriptのコードとして記述します。
実行は、ベースマキナのアプリケーション本体から隔離された環境下のNode.jsインスタンス上で行なわれます。

コード内では、 [`Firebase Admin SDK` (opens in a new tab)](https://firebase.google.com/docs/admin/setup) および、 [`Cloud Datastore Node.js Client` (opens in a new tab)](https://cloud.google.com/nodejs/docs/reference/datastore/latest) の、初期化済みのクライアントを変数として利用できます。

これらのSDKを通じて取得した、配列またはObjectを `return` 文で返すことで、アクションの実行結果を返すことができます。

Firestoreアクションは、AsyncFunctionとして実行されるため、コードのトップレベルで `await` を使用できます。

### Firestoreの操作を記述する [](#firestoreの操作を記述する)

Firestoreの操作では、 `db` 変数と `firestore` 変数を使用します。
それぞれの変数の型の詳細は下記のGoogle CloudおよびFirebaseのドキュメントでご確認いただけます。

- `db`: [Firestore class (opens in a new tab)](https://googleapis.dev/nodejs/firestore/latest/Firestore.html)
- `firestore`: [firestore module (opens in a new tab)](https://firebase.google.com/docs/reference/admin/node/firebase-admin.firestore?hl=en)

操作の具体的な例については、 [Firebaseのドキュメント (opens in a new tab)](https://firebase.google.com/docs/firestore/quickstart) の各項目の `Node.js` タブをご参照ください。

いくつか例を示します。

#### ユーザーの一覧を取得する [](#ユーザーの一覧を取得する)

```
const collection = await db.collection("users").get();
const users = collection.docs.map((doc) => {
  return {
    id: doc.id,
    ...doc.data(),
  };
});
return users;
```

#### ユーザーを追加し、結果を取得する [](#ユーザーを追加し結果を取得する)

```
const res = await db.collection("users").add({
  name: {{ name }},
  email: {{ email }},
  createdAt: firestore.Timestamp.now(),
});
const user = await db.collection("users").doc(res.id).get();
return {
  id: res.id,
  ...user.data(),
};
```

### Datastoreの操作を記述する [](#datastoreの操作を記述する)

Datastoreの操作では、 `datastore` 変数を使用します。
変数の型の詳細は下記のGoogle Cloudのドキュメントでご確認いただけます。

- `datastore`: [Datastore class (opens in a new tab)](https://googleapis.dev/nodejs/datastore/latest/Datastore.html), [(親class) DatastoreRequest class (opens in a new tab)](https://googleapis.dev/nodejs/datastore/latest/DatastoreRequest.html)

操作の具体的な例については、下記リポジトリのサンプルコードをご参照ください。
[https://github.com/googleapis/nodejs-datastore/tree/main/samples (opens in a new tab)](https://github.com/googleapis/nodejs-datastore/tree/main/samples)

いくつか例を示します。

#### ユーザーの一覧を取得する [](#ユーザーの一覧を取得する-1)

```
const query = datastore.createQuery("User");
const [users] = await datastore.runQuery(query);
return users;
```

#### ユーザーを追加し、追加した情報を返す [](#ユーザーを追加し追加した情報を返す)

```
const userKey = datastore.key('User');
const user = {
    key: userKey,
    data: [
        {
            name: 'name',
            value: {{ name }},
        },
        {
            name: 'email',
            value: {{ email }},
        },
        {
            name: 'createdAt',
            value: new Date(),
        }
    ]
}
await datastore.save(user);
return user;
```

[PostgreSQL](/action/datasources/postgresql_integration/) [HTTP API](/action/datasources/httpapi_integration/)
---
アクション

データソース別の設定

Google Cloud Storage

# Google Cloud Storage

Google Cloud Storageアクションでは、ファイルのアップロードとダウンロードを行なえます。

## Google Cloud Storageのデータソースに接続する [](#google-cloud-storageのデータソースに接続する)

1. 右上のメニューから「データソース」を選択する

2. 「データソースの追加」をクリックする

3. データソースの種類の中から「 Google Cloud Storage 」を選択する

![データソースの選択](/images/gcs_integration/select.png)

4. データソースへの接続に必要な情報を入力して保存する

![データソースの接続設定](/images/gcs_integration/connection.png)

### サービスアカウントの作成 [](#サービスアカウントの作成)

上記の `4` のステップでは、Google Cloud Storageの操作に必要な認証情報を登録します。

Google Cloudコンソール上でサービスアカウントを作成し、JSON形式のサービスアカウントキーをダウンロードします。そのファイルの内容を登録してください。

サービスアカウント作成の詳しい方法については、Google Cloudドキュメントの [サービスアカウントを作成する (opens in a new tab)](https://cloud.google.com/iam/docs/creating-managing-service-accounts?hl=ja) をご参照ください。

### 必要なロールの割り当て [](#必要なロールの割り当て)

サービスアカウントには、下記の権限を与える必要があります。

- アップロード： `storage.objects.create` （既存のオブジェクトを上書きする場合には `storage.objects.delete` も必要です）
- ダウンロード： `storage.objects.get`
- オブジェクトの一覧取得： `storage.objects.list`

ロールの割り当ての詳しい方法に関しては、Google Cloudドキュメントの [サービスアカウントに対するアクセス権の管理 (opens in a new tab)](https://cloud.google.com/iam/docs/granting-roles-to-service-accounts?hl=ja) をご参照ください。

## Google Cloud Storageをアクションで利用する [](#google-cloud-storageをアクションで利用する)

1. 右上のメニューから「アクション」を選択する

2. 「アクションの追加」をクリックする

3. アクション名やパラメーターを設定する

![データソースの選択](/images/gcs_integration/basic_action.png)

### アップロード [](#アップロード)

![アップロード設定画面](/images/blob_action/upload.png)

1. アクションパラメーターを設定します
  - ファイルパラメーターを **必須** にします
  - またアップロードするファイル名を指定するためにファイル名を入力するためのテキストパラメーターも必須にします
1. バケット名を `test-bucket` のように設定します
1. 実行メソッドを「アップロード」に設定します
1. オブジェクト名（オブジェクトキー）を `images/{{ ファイル名 }}` のように設定します
  - アップロードされるファイルのオブジェクト名となります
1. ファイル内容に使うパラメーターを1で作成したファイルパラメーターに設定します

アクション実行画面でパラメーターとしてファイル名を `test.png` と設定し実行した場合は下記にアップロードされます。

`gs://test-bucket/images/test.png` ### ダウンロード [](#ダウンロード)

![ダウンロード設定画面](/images/blob_action/download.png)

1. アクションパラメーターを設定します
  - ダウンロードするファイル名を指定するためのテキストパラメーターを必須にします
1. バケット名を `test-bucket` のように設定します
1. 実行メソッドを「ダウンロード」に設定します
1. オブジェクト名（オブジェクトキー）を `images/{{ ファイル名 }}` のように設定します
  - ダウンロードされるファイルのオブジェクト名となります

アクション実行画面でパラメーターとしてファイル名を `test.png` と設定し実行した場合は下記のファイルがダウンロードされます。

`gs://test-bucket/images/test.png` ### オブジェクトの一覧 [](#オブジェクトの一覧)

![オブジェクトの一覧設定画面](/images/blob_action/list_object.png)

1. バケット名を入力します。
1. 実行メソッドで「オブジェクトの一覧」を選択します。
1. 必要に応じてオブジェクト名（オブジェクトキー）を入力します。
1. 保存します。

設定したアクションを実行すると、オブジェクトの一覧を取得できます。

指定したオブジェクト名（オブジェクトキー）は、一覧取得時の接頭辞による絞り込みに使われます。

![オブジェクトの一覧の結果画面](/images/blob_action/list_object_result.png)

#### 実行結果の形式 [](#実行結果の形式)

下記の形式のオブジェクトを含んだ配列を返します。

| キー名 | 説明 |
| --- | --- |
| objectKey | オブジェクト名（オブジェクトキー） |
| lastModified | ファイルの更新日時のUnixTimestamp (秒) |
| size | ファイルのバイトサイズ |

### 署名付きURLの発行 [](#署名付きurlの発行)

![オブジェクトの署名付きURL発行の設定画面](/images/blob_action/issue_signed_url.png)

1. バケット名を入力します。
1. 実行メソッドで「署名付きURLの発行」を選択します。
1. オブジェクト名（オブジェクトキー）を入力します。
1. HTTPメソッドを「GET」または「PUT」から選択します。
1. 保存します。

設定したアクションを実行すると、署名付きURLが発行されます。

![オブジェクトの署名付きURL発行の結果画面](/images/blob_action/issue_signed_url_result.png)

#### 実行結果の形式 [](#実行結果の形式-1)

下記の形式のオブジェクトを返します。

| キー名 | 説明 |
| --- | --- |
| signedUrl | 発行した署名付きURL |

### 便利な使い方 [](#便利な使い方)

「バケット名」と「オブジェクト名（オブジェクトキー）」では、アクションのパラメーターのほかに、 [変数・シークレット](/action/parameter/vars_secrets/) と [事前定義パラメーター](/action/parameter/predefined_parameter/) をご利用いただくことができます。環境に応じて値を変更したい場合などにご利用ください。

書式については [変数・シークレットの使用方法](/action/parameter/vars_secrets/#%E5%A4%89%E6%95%B0%E3%82%B7%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95) をご覧ください。

[Amazon S3](/action/datasources/awss3_integration/) [JavaScript](/action/datasources/javascript_action/)
---
アクション

データソース別の設定

Google スプレッドシート

# Google スプレッドシート

## Google スプレッドシート のデータソースに接続する [](#google-スプレッドシート-のデータソースに接続する)

1. 右上のメニューから「データソース」を選択する

2. 「データソースの追加」をクリックする

3. データソースの種類の中から「 Google スプレッドシート 」を選択する

![データソースの選択](/images/googlespreadsheet_integration/select.png)

4. データソースへの接続に必要な情報を入力して保存する

![データソースの接続設定](/images/googlespreadsheet_integration/connection.png)

1. Googleスプレッドシートに接続する

Googleスプレッドシートの情報にアクセスするには、GoogleのOAuth認証をパスする必要があります。

「Googleスプレッドシートに接続する」ボタンを押すと、次のような画面が表示されるので、接続を許可して問題がなければ「続ける」ボタンを押してOAuth認証の画面に移動してスプレッドシートへのアクセスを許可してください。

![Google スプレッドシートに接続する](/images/googlespreadsheet_integration/connect_google.png)

認証のステップが中断されず正しく接続されると、データソースの設定内で接続済みの表示がされるようになります。

![Google スプレッドシートに接続済み](/images/googlespreadsheet_integration/connected.png)

## Google スプレッドシート をアクションで利用する [](#google-スプレッドシート-をアクションで利用する)

1. 右上のメニューから「アクション」を選択する

2. 「アクションの追加」をクリックする

3. アクション名やパラメーターを設定する

![データソースの選択](/images/googlespreadsheet_integration/basic_action.png)

1. シートの操作方法を設定する（共通設定）

Googleスプレッドシートのデータソースを選択した後、「スプレッドシート」と「シート」という2種類のアクセス先情報を設定していただく必要があります。

スプレッドシートはGoogleスプレッドシートの画面上部に位置する、シート全体の名前を表しています。

![スプレッドシート名](/images/googlespreadsheet_integration/spreadsheet_label.png)

シートは画面下部に位置する、個別のシートの名前を表しています。

![シート名](/images/googlespreadsheet_integration/sheet_label.png)

1. シートの操作方法を設定する（読み込み編）

シートの内容を読み込みたい場合は、読み込みたい範囲をA1表記（例：A1:G20）で指定した後、値の表示形式を選択してフォーマットを調整してください。

![読み込み編](/images/googlespreadsheet_integration/googlespreadsheet_read_setting.png)

1. シートの操作方法を設定する（書き込み編）

シートにコンテンツを書き込みたい場合は、追加するデータの形式をフォーム上で設定してください。

![書き込み編](/images/googlespreadsheet_integration/googlespreadsheet_write_setting.png)

設定されている行・列のフォーマットに応じた内容がINSERTされます。

![追加するデータ](/images/googlespreadsheet_integration/append_data.png)

セルに入れたい値を変更する場合は、セルごとにクリックされると開く画面上から設定できます。

ここで `{{ 変数名 }}` と入力した場合は、他のアクション実行と同様に実行時の引数を受け渡して入力できます。

![セル編集](/images/googlespreadsheet_integration/edit_cell.png)

[gRPC](/action/datasources/grpc_integration/) [Amazon S3](/action/datasources/awss3_integration/)
---
アクション

データソース別の設定

gRPC

# gRPC

## gRPC のデータソースに接続する [](#grpc-のデータソースに接続する)

1. 右上のメニューから「データソース」を選択する

2. 「データソースの追加」をクリックする

3. データソースの種類の中から「 gRPC 」を選択する

![データソースの選択](/images/grpc_integration/select.png)

4. データソースへの接続に必要な情報を入力して保存する

![データソースの接続設定](/images/grpc_integration/connection.png)

1. サービス情報取得のための設定を行なう

ベースマキナは、gRPCメソッドの一覧を取得するためにステップ4で選択したサービス情報の取得先を使用します。

![サービス情報の取得先](/images/grpc_integration/connection_method.png)

**リフレクションを選択した場合**

gRPCサーバーのリフレクションを有効化する必要があります。お手数ですが [こちらの例 (opens in a new tab)](https://github.com/grpc/grpc/blob/master/doc/server-reflection.md#known-implementations) などをご参考に有効化してください。

**Protocol Buffers定義ファイルを選択した場合**

gRPCサーバーのリフレクションの有効化は不要です。

代わりに、アクションの設定前にProtocol Buffers定義ファイルをAPI経由でアップロードしていただく必要があります。
詳しい方法については [Protocol Buffers 定義ファイルの準備](/action/datasources/grpc_integration/#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B) をご参照ください。

アップロードが完了すると、データソースの編集ページにて、利用するProtocol Buffers定義ファイルのバージョンを指定できるようになります。

![gRPCアクション](/images/grpc_integration/select_protoset_version.png)

### 共通 メタデータ を設定する [](#共通propsheadernameを設定する)

アクション実行時に自動的に付与される共通 メタデータ の設定を行なうことができます。

すべてのアクションに同じ メタデータ の設定を行なう必要があるようなケースでご利用いただけます。

共通 メタデータ では、 [変数・シークレット](/action/parameter/vars_secrets/) をご利用いただくことができます。環境に応じて共通 メタデータ の内容を変えたい場合や、秘匿情報を含めたい場合にご利用ください。

書式については [変数・シークレットの使用方法](/action/parameter/vars_secrets/#%E5%A4%89%E6%95%B0%E3%82%B7%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95) をご覧ください。

![共通メタデータの設定フォーム](/images/grpc_integration/common_metadata.png)

### 認証設定 [](#認証設定)

gRPCアクションでは、認証形式として認証用アクションを選択できます。

#### 認証用アクションの設定 [](#認証用アクションの設定)

認証用アクションを設定すると、アクションの実行前に別のアクションを実行し、その結果を任意の メタデータ に設定できます。

例えば、事前にアクセストークンを取得するためのアクションを実行し、結果から取得したトークンを共通の メタデータ として使えます。

![認証用アクションの設定フォーム](/images/grpc_integration/auth_action_form.png)

アクションの実行結果は、 メタデータ に設定したい文字列を `return` するJavaScriptコードを記述することで処理します。

このJavaScriptコードの書き方は [アクションの結果表示のカスタマイズ](/action/transformer_script/action_transform/) と共通しているので、アクションの実行ページで事前に動作内容を確認できます。

## gRPC をアクションで利用する [](#grpc-をアクションで利用する)

1. 右上のメニューから「アクション」を選択する

2. 「アクションの追加」をクリックする

3. アクション名やパラメーターを設定する

![データソースの選択](/images/grpc_integration/basic_action.png)

1. リクエスト方法を登録する

gRPCメソッドは、データソースの設定を利用して取得したメソッド名の一覧から選択します。

streaming
RPCは現在ベースマキナのサポート対象外となっているため、gRPCメソッド一覧に表示されません。

リクエストボディはJSONとして設定します。 アクション実行時には、ここで設定したJSONに対してアクションパラメーターを展開した結果を、
Protocol Buffersのメッセージに変換してgRPCサーバーに送信します。

![gRPCアクション](/images/grpc_integration/grpc_setting.png)

# Protocol Buffers定義ファイルを選択した場合の設定方法

## ファイルをコンパイルする [](#ファイルをコンパイルする)

gRPCアクションでは、リフレクションのかわりにコンパイル済みのProtocol Buffers定義ファイルからメソッドの一覧を取得できます。

例： `api.proto`

ファイルをコンパイルするには、次のように `protoc` コマンドに `-o` オプションと `--include_imports` オプションを付与して実行してください。

```
syntax = "proto3";

package api;

service Service {
  rpc Method (Request) returns (Response) {}
}

message Request {}

message Response {
  string message = 1;
}
```

```
$ protoc -o out.protoset --include_imports api.proto
```

`protoc` によって生成された `out.protoset` がコンパイル済みProtocol Buffers定義ファイルです。

このファイルをベースマキナへアップロードすることで、リフレクションを使わずにgRPCアクションを実行できます。

## ファイルをアップロードする [](#ファイルをアップロードする)

コンパイル済みProtocol Buffers定義ファイル（以下、protosetファイル）は、API経由でベースマキナにアップロードできます。

アップロードされたprotosetファイルはバージョン管理され、過去にアップロードされたものも使用できます。

デフォルト値は、 **常に最新のバージョンを利用する** に設定されています。

アップロード方法は下記の通りです。

### protosetアップロードAPIのURL [](#protosetアップロードapiのurl)

下記URLにPOSTメソッドでリクエストを送信してください。

- [https://api.basemachina.com/v1/upload\_protoset (opens in a new tab)](https://api.basemachina.com/v1/upload_protoset)

### HTTP Header [](#http-header)

- `X-Basemachina-Grpc-Api-Access-Token` ヘッダーに、gRPC APIアクセストークンを設定してください。
  - アクセストークンは、 [プロジェクトの設定](/admin/user_management/project_settings/) の **gRPC API** メニューを選択すると取得できます。

### リクエストボディの形式 [](#リクエストボディの形式)

multipart/form-data形式で、下記の2つを送信してください。

- `params`: JSON形式のパラメータ
- `file`: protosetファイル

#### パラメータの形式 [](#パラメータの形式)

下記項目を含んだJSONを指定してください。

- environmentId（必須）
  - 環境のID。
  - アップロードしたprotosetファイルを使用したい環境のIDを指定してください。
  - gRPCデータソースの編集画面で、 **サービス情報の取得先** に **Protocol Buffers 定義ファイル** を指定すると表示されます。

![環境ID](/images/grpc_protoset/params_environment_id.png)

- resourceId（必須）
  - gRPCデータソースのID。
  - gRPCデータソースの編集画面で、 **サービス情報の取得先** に **Protocol Buffers 定義ファイル** を指定すると表示されます。

![データソースID](/images/grpc_protoset/params_data_source_id.png)

- name（任意）
  - protosetファイルのバージョンにつける名前。
  - 指定しなかった場合も、アップロードが行なわれた時間で識別可能です。

![protosetファイル名](/images/grpc_protoset/params_name.png)

**パラメータの設定例**

```
{
  "environmentId": "ccp9ee76i1ea3prs2f50",
  "resourceId": "c8uo2q7kobjglbr9u6vg",
  "name": "version 1"
}
```

### アップロード例 [](#アップロード例)

cURLでアップロードするサンプルを掲載します。
実際に使用する場合は、 `{{ }}` で囲った箇所を必要な値に置き換えて実行してください。

```
curl --location --request POST 'https://api.basemachina.com/v1/upload_protoset' \
--header 'X-Basemachina-Grpc-Api-Access-Token: {{ gRPC APIアクセストークン }}' \
--form 'params="{
  \"environmentId\": \"{{ 環境ID }}\",
  \"resourceId\": \"{{ gRPCデータソースID }}\"
}"' \
--form 'file=@"{{ protosetファイルのパス }}"'
```

[HTTP API](/action/datasources/httpapi_integration/) [Google スプレッドシート](/action/datasources/googlespreadsheet_integration/)
---
アクション

データソース別の設定

HTTP API

# HTTP API

## HTTP API のデータソースに接続する [](#http-api-のデータソースに接続する)

1. 右上のメニューから「データソース」を選択する

2. 「データソースの追加」をクリックする

3. データソースの種類の中から「 HTTP API 」を選択する

![データソースの選択](/images/httpapi_integration/select.png)

4. データソースへの接続に必要な情報を入力して保存する

![データソースの接続設定](/images/httpapi_integration/connection.png)

### 共通 ヘッダー を設定する [](#共通propsheadernameを設定する)

アクション実行時に自動的に付与される共通 ヘッダー の設定を行なうことができます。

すべてのアクションに同じ ヘッダー の設定を行なう必要があるようなケースでご利用いただけます。

共通 ヘッダー では、 [変数・シークレット](/action/parameter/vars_secrets/) をご利用いただくことができます。環境に応じて共通 ヘッダー の内容を変えたい場合や、秘匿情報を含めたい場合にご利用ください。

書式については [変数・シークレットの使用方法](/action/parameter/vars_secrets/#%E5%A4%89%E6%95%B0%E3%82%B7%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95) をご覧ください。

![共通ヘッダーの設定フォーム](/images/httpapi_integration/common_header.png)

### 認証設定 [](#認証設定)

HTTP APIアクションでは、認証形式としてBasic認証と、認証用アクションのいずれかを選択できます。

#### Basic認証の設定 [](#basic認証の設定)

Basic認証を使用するには、認証形式としてBasic認証を指定したうえで、ユーザー名・パスワードを入力します。

![Basic認証の設定フォーム。ユーザー名とパスワードの入力欄がある](/images/httpapi_integration/basic_auth.png)

#### 認証用アクションの設定 [](#認証用アクションの設定)

認証用アクションを設定すると、アクションの実行前に別のアクションを実行し、その結果を任意の HTTPヘッダー に設定できます。

例えば、事前にアクセストークンを取得するためのアクションを実行し、結果から取得したトークンを共通の HTTPヘッダー として使えます。

![認証用アクションの設定フォーム](/images/httpapi_integration/auth_action_form.png)

アクションの実行結果は、 HTTPヘッダー に設定したい文字列を `return` するJavaScriptコードを記述することで処理します。

このJavaScriptコードの書き方は [アクションの結果表示のカスタマイズ](/action/transformer_script/action_transform/) と共通しているので、アクションの実行ページで事前に動作内容を確認できます。

## HTTP API をアクションで利用する [](#http-api-をアクションで利用する)

1. 右上のメニューから「アクション」を選択する

2. 「アクションの追加」をクリックする

3. アクション名やパラメーターを設定する

![データソースの選択](/images/httpapi_integration/basic_action.png)

1. リクエスト方法を登録する

APIに対してのリクエスト内容を入力してください。

![HTTP APIアクション](/images/httpapi_integration/httpapi_setting.png)

上記の例はURLのパスパラメーターとして値を利用しています。

他にもヘッダーやクエリパラメーター、リクエストボディの中に3で指定したパラメーターを渡すことができます。

![HTTP APIヘッダーとクエリパラメーター](/images/httpapi_integration/header_and_query.png)

![リクエストタイプとリクエストボディ](/images/httpapi_integration/json_body.png)

### ファイルを送信する [](#ファイルを送信する)

ファイルを送信する場合は、リクエストタイプに `binary` または `form-data` を選択して、表示される入力欄に [ファイルパラメーター](/action/parameter/file_parameter/) を指定してください。

![リクエストタイプにform-dataを選択して、ファイルパラメーターを指定する](/images/httpapi_integration/form_data.png)

リクエストタイプを `form-data` に設定した場合、HTTPリクエスト自体のContent-Typeは `multipart/form-data` となります。
ただし、multipart/form-data内のファイルパラメーターのContent-Typeは、現在はファイルの内容に関わらず `application/octet-stream` となります。

### GraphQL を利用する [](#graphql-を利用する)

HTTP APIのアクションでは、GraphQLサーバーとの通信に使いやすくするため、リクエストタイプに `GraphQL` を用意しています。

![リクエストタイプ GraphQL](/images/httpapi_integration/graphql.png)

`GraphQL` を選択すると、QueryとVariablesを入力するフィールドがそれぞれ表示されます。

GraphQLサーバーへのリクエストは、上記フィールドへの設定内容をもとにJSON形式で送信されます。

Query、Variablesのいずれも、他のリクエストタイプと同様に、パラメーターを渡すことができます。
上記の例では、Variablesの `id` キーに、 `"{{ id }}"` としてパラメーターを渡しています。

### 200系以外のレスポンスステータスコードを実行エラーとして扱う [](#200系以外のレスポンスステータスコードを実行エラーとして扱う)

「200系以外のレスポンスステータスコードを実行エラーとして扱う」を有効にすると、アクション実行時にHTTPのレスポンスステータスコードが200系以外だった場合に、実行エラーとして扱います。

実行エラーの場合、レスポンスの内容が `results[0].failure` に格納されます。

[Firestore](/action/datasources/firestore_integration/) [gRPC](/action/datasources/grpc_integration/)
---
アクション

データソース別の設定

JavaScript

# JavaScriptアクション

※ [（旧）JavaScriptアクション](/deprecated/javascript_action/) は廃止予定です。今後はこちらのJavaScriptアクションをご利用ください。

JavaScriptアクションは、任意のJavaScriptをサーバー上で実行するアクションです。

コード内で別のアクションの実行も可能で、以下のようなワークフローを作成できます。

- ファイルをストレージにアップロードするアクションを実行後、その結果のファイルパスをデータベースに保存するアクションを実行する
- ユーザーのデータを作成するアクションを実行後、その結果を元にslackへ通知するアクションを実行する

## 設定方法 [](#設定方法)

1. 右上のメニューから「アクション」を選択してアクション一覧画面に移動します。
1. 「アクションの追加」を選択してアクションの作成画面に移動します。
1. 「基本情報の設定」を入力後「次へ」を選択して、「処理の設定」画面に移動します。
1. 「データソース」から「JavaScript」を選択します。

JavaScriptアクションではパラメーターなどの他のアクションと共通の項目に加えて、「コード」を設定します。

コードでは、アクションの処理をJavaScriptの関数または非同期関数として記述します。

以下は、パラメーターで受け取った `firstName` と `lastName` を大文字のフルネームに変換する例です。

```
/** @type { import("@basemachina/action").Handler } */
export default (
  // 第1引数からパラメーターの値を参照する
  { firstName, lastName },
) => {
  // firstNameとlastNameを結合
  const fullName = `${firstName}_${lastName}`;
 
  // 大文字に変換
  const upperCaseFullName = fullName.toUpperCase();
 
  // 結果を返す
  return upperCaseFullName;
};
```

![\`firstName\`と\`lastName\`を大文字のフルネームに変換するJavaScriptアクションの例](/images/javascript_action/convert_to_fullname_action.png)

他のアクションと同様に、変数・シークレットなどの [事前定義パラメーター](/action/parameter/predefined_parameter/) も使用できます。

```
/** @type { import("@basemachina/action").Handler } */
export default (
  { customerId },
  // 第2引数から事前定義パラメーターの値を参照する
  // vars.XXX, currentUser.email, environment.idのように参照できます
  { vars, secrets, currentUser, environment },
) => {
  const customerPageUrl = `https://example.com/environments/${vars.ENVIRONMENT_ID}/${customerId}`;
  return customerPageUrl;
};
```

### パラメーターの型 [](#パラメーターの型)

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 数値 (必須) | `number` | - | `{ user_id: 123 }` |
| 日付（unixtimeとして利用する） | `number | null` | 「時刻を含める」が無効な場合、選択された日付の00:00:00のunixtimeが渡ってきます。 | `{ deleted: 1672531200 }` |
| 日付（日付の形式） | `string` | 選択した日付の形式の文字列で渡ってきます。 例では'YYYY-MM-DD'の形式を使っています。 | `{ deleted: '2023-01-01' }` |
| ファイル | `File | null` | 現在 `File` はWeb APIの一部のプロパティにのみ対応しております。 未対応のプロパティやメソッドは今後随時対応する予定です。 | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| ファイル (必須) | `File` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値（文字列フォーマット） | `string` | 「真の場合の値」または「偽の場合の値」が渡ってきます。 | `{ checked: '有効' }` |
| 真偽値（フォーマットなし） | `boolean` | 真偽値がそのまま渡ってきます。 | `{ checked: true }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列（フォーマットなし） | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12]  }` |
| 配列（JSON） | `string` | 詳しくは [配列パラメーター#JSON](/action/parameter/array_parameter/#json) をご参照ください。 | `{ user_names: '["taro","jiro","saburo"]' }` |
| 配列（区切り文字） | `string` | 詳しくは [配列パラメーター#区切り文字](/action/parameter/array_parameter/#%E5%8C%BA%E5%88%87%E3%82%8A%E6%96%87%E5%AD%97) をご参照ください。 | `{ user_names: '"taro","jiro","saburo"' }` |
| タプル（フォーマットなし） | `Array` | 各要素の型が入ったタプル型として渡ってきます。 | `{ values: ['taro', 25, '2023-01-01'] }` |
| タプル（JSON） | `string` | 詳しくは [タプルパラメーター#JSON](/action/parameter/tuple_parameter/#json) をご参照ください。 | `{ values: '["taro",25,"2023-01-01"]' }` |
| タプル（区切り文字） | `string` | 詳しくは [タプルパラメーター#区切り文字](/action/parameter/tuple_parameter/#%E5%8C%BA%E5%88%87%E3%82%8A%E6%96%87%E5%AD%97) をご参照ください。 | `{ values: '"taro","jiro","saburo"' }` |
| JSON値 | - | JavaScriptアクションでは使用できません | - |
| SQL | - | JavaScriptアクションでは使用できません | - |

## JavaScriptアクションで別のアクションを実行する [](#javascriptアクションで別のアクションを実行する)

JavaScriptアクションでは、コード内で別のアクションの実行もできます。

別のアクションの実行には `executeAction` 関数を使用します。

`executeAction` 関数経由でのアクションの実行でも、ログイン中のユーザーが実行権限を持っているか検証されるため安心してご利用いただけます。

以下は、商品の画像ファイルを保存するアクションの例です。

最初にストレージへ画像ファイルをアップロードするアクションを実行し、その後保存したファイルのパスをDBへ保存するアクションを実行しています。

```
// executeAction関数をインポート
import { executeAction } from "@basemachina/action";
 
/** @type { import("@basemachina/action").Handler } */
export default async ({ id, image }) => {
  // ①ストレージに画像ファイルをアップロード
  const uploadResults = await executeAction("upload-product-image", {
    id: id,
    image: image,
  });
 
  // ②保存した画像ファイルのストレージのパスをDBに保存
  const insertResults = await executeAction("insert-product-image", {
    id: id,
    // ①のアクションの結果の画像ファイルのパスを使用する
    path: uploadResults[0].success.objectKey,
  });
  return insertResults[0].success;
};
```

詳細は [`executeAction`](/action/datasources/javascript_action/builtin_functions/execute_action/) をご参照ください。

### JavaScriptアクションからしか実行できないアクションを作成する [](#javascriptアクションからしか実行できないアクションを作成する)

JavaScriptアクションから実行するアクションを、アクション実行画面などから直接実行できないようにする [実行権限](/action/action_permission/) の設定も可能です。

#### 設定方法 [](#設定方法-1)

1. 右上のメニューから「アクション」を選択してアクション一覧画面に移動します。
1. 実行権限を制限するアクションを選択して、アクション実行画面に移動します。
1. 「編集」を選択してアクションの編集画面に移動します。
1. 「権限設定」ステップを選択して、アクションの権限設定画面に移動します。
1. 「権限設定」で「実行権限を制限する」を選択します。
1. 「実行権限のあるユーザー・グループ・アクション」で、このアクションを実行できるJavaScriptアクションを選択します。
1. 保存します。

![JavaScriptアクションの実行権限設定画面](/images/javascript_action/permission.png)

ログインユーザーが実行権限を持たないアクションはアクション一覧画面に表示されないため、実行権限をJavaScriptアクションのみに設定したアクションは、全ユーザーのアクション一覧画面に表示されません。

再度設定を変更する場合は「非表示のアクションを表示する」を有効にすると、アクション一覧画面に表示され実行画面や編集画面へ移動できるようになります。

![非表示のアクションを表示するボタン](/images/javascript_action/display_hide_action_toggle.png)

[Google Cloud Storage](/action/datasources/gcs_integration/) [エラーハンドリング](/action/datasources/javascript_action/error_handlings/)
---
アクション

データソース別の設定

[JavaScript](/action/datasources/javascript_action/)

組み込み関数

createActionJob

# createActionJob

`createActionJob` はアクションを [ジョブ](/action/jobs/) として実行する関数です。

`createActionJob` 関数経由でのアクションのジョブとしての実行でも、ログイン中のユーザーが実行権限を持っているか検証されます。
例外として、ユーザー自身は権限を持っていなくても、 [呼び出し元のJavaScriptアクションが許可されている](/action/datasources/javascript_action/#javascript%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8B%E3%82%89%E3%81%97%E3%81%8B%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B) 場合には実行できます。

## 基本的な使い方 [](#基本的な使い方)

以下は実行に時間のかかるアクションをジョブとして実行している例です。

```
import { createActionJob } from "@basemachina/action";
 
/** @type { import("@basemachina/action").Handler } */
export default async ({ reports }) => {
  const results = await createActionJob("create_reports", { reports });
 
  if (!results[0].failure) {
    throw new Error("レポート作成ジョブの作成に失敗しました");
  }
 
  return `レポート作成ジョブを作成しました: ${results[0].success.actionJobId}`;
};
```

オプションで実行日時を指定してジョブの実行の予約もできます。

```
import { createActionJob } from "@basemachina/action";
 
/** @type { import("@basemachina/action").Handler } */
export default async ({ reports }) => {
  const results = await createActionJob(
    "create_reports",
    { reports },
    // 2024年10月1日22時に実行
    { scheduledAt: "2024-10-01 22:00:00" },
  );
 
  if (!results[0].failure) {
    throw new Error("レポート作成ジョブの作成に失敗しました");
  }
 
  return `レポート作成ジョブを作成しました: ${results[0].success.actionJobId}`;
};
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 必須 ・ 任意 | 説明 | 例 |
| --- | --- | --- | --- | --- |
| `actionId` | `string` | 必須 | 実行するアクションのID、または識別子。 | `'c3hc2ii23akg0sokf9j0'`, `'get-user'` |
| `args` | `object` | 任意 | アクションを実行するための引数で、 キーがパラメータ名、値がパラメータに渡す値のオブジェクト。 | `{ username: 'JohnDoe' }` |
| `options` | `object` | 任意 | ジョブの詳細設定。 | `{ scheduledAt: 1609459200 }` |
| `options.scheduledAt` | `Date | string | number` | 任意 | ジョブの予約実行日時。 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。日時は現在から30日以内の値を指定できます。 | `new Date()`, `'2024-10-01'`, `1609459200` |

なおパラメータの入力値の種類ごとに `args` へ渡せる値の型は以下です。

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `actionJobId` | `string` | 作成したジョブのID。 | `cpt8gkab5gv1ibk8r5h0` |

[executeAction](/action/datasources/javascript_action/builtin_functions/execute_action/) [wait](/action/datasources/javascript_action/builtin_functions/wait/)
---
アクション

データソース別の設定

[JavaScript](/action/datasources/javascript_action/)

組み込み関数

executeAction

# executeAction

`executeAction` はアクションを実行する関数です。

アクションの実行結果の値をパラメーターの値として別のアクションを実行するなどのワークフローを作成できます。

`executeAction` 関数経由でのアクションの実行でも、ログイン中のユーザーが実行権限を持っているか検証されます。
例外として、ユーザー自身は権限を持っていなくても、 [呼び出し元のJavaScriptアクションが許可されている](/action/datasources/javascript_action/#javascript%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8B%E3%82%89%E3%81%97%E3%81%8B%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B) 場合には実行できます。

## 基本的な使い方 [](#基本的な使い方)

以下は、商品の画像ファイルを保存するアクションの例です。

最初にストレージへ画像ファイルをアップロードするアクションを実行し、その後保存したファイルのパスをDBへ保存するアクションを実行しています。

```
// executeAction関数をインポート
import { executeAction } from "@basemachina/action";
 
/** @type { import("@basemachina/action").Handler } */
export default async ({ id, image }) => {
  // ①ストレージに画像ファイルをアップロード
  const uploadResults = await executeAction("upload-product-image", {
    id: id,
    image: image,
  });
 
  // ②保存した画像ファイルのストレージのパスをDBに保存
  const insertResults = await executeAction("insert-product-image", {
    id: id,
    // ①のアクションの結果の画像ファイルのパスを使用する
    path: uploadResults[0].success.objectKey,
  });
  return insertResults[0].success;
};
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `actionId` | `string` | 実行するアクションのID、または識別子。 | `c3hc2ii23akg0sokf9j0`, `get-user` |
| `args` | `object` | アクションを実行するための引数で、 キーがパラメータ名、値がパラメータに渡す値のオブジェクトです。 | `{ username: 'JohnDoe' }` |

なおパラメータの入力値の種類ごとに `args` のプロパティの値に渡せる値の型は以下です。

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `results` | `Array` | アクションの実行結果の配列。各要素には `success` と `failure` のプロパティが含まれます。 | `[{"success":[{"id":1,"name":"山田太郎"}]}]` |

[エラーハンドリング](/action/datasources/javascript_action/error_handlings/) [createActionJob](/action/datasources/javascript_action/builtin_functions/create_action_job/)
---
アクション

データソース別の設定

[JavaScript](/action/datasources/javascript_action/)

組み込み関数

wait

# wait

`wait` は指定した時間だけ処理を待機する関数です。

## 基本的な使い方 [](#基本的な使い方)

```
import { wait, executeAction } from "@basemachina/action";
 
/** @type { import("@basemachina/action").Handler } */
export default async ({ emails }) => {
  for (const email of emails) {
    //  DBにユーザーのデータを作成するアクションを実行
    await executeAction("create-user", { email });
 
    // DBの負荷を下げるために1秒待機
    await wait(1000);
  }
 
  return "ユーザーを作成しました";
};
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `milliseconds` | `number` | 待機する時間をミリ秒で指定します。 | `1000` |

### 戻り値 [](#戻り値)

戻り値はありません。

[createActionJob](/action/datasources/javascript_action/builtin_functions/create_action_job/) [型定義ファイルのダウンロード](/action/datasources/javascript_action/download_dts_file/)
---
アクション

データソース別の設定

[JavaScript](/action/datasources/javascript_action/)

型定義ファイルのダウンロード

# `@basemachina/action` の型定義ファイルのダウンロード

JavaScriptアクションで使用できる `@basemachina/action` の型定義ファイルはダウンロードが可能です。

手元のエディターでJavaScriptアクションのコードを編集する場合などにご活用ください。

**※この機能は将来、別の機能による代替または廃止になる可能性があります。**

![「JavaScriptアクションの型定義ファイルのダウンロード」ボタン](/images/download_js_action_dts_file.png)

## ダウンロード方法 [](#ダウンロード方法)

以下の手順でダウンロードできます。

1. 右上のメニューから「設定」を選択します。
1. サイドバーのメニューから「プロジェクト設定」を選択します。
1. 「JavaScriptアクションの型定義ファイルのダウンロード」ボタンをクリックすると、ダウンロードできます。

## Handlers型の使用方法 [](#handlers型の使用方法)

JavaScriptアクションで設定するコードに型を指定する場合は、 `Handlers` 型を使用して型を指定できます。
（ブラウザのエディターで使用する `Handler` 型は使用できません）

```
// Handlers型のキーには、JavaScriptアクションのIDまたは識別子を指定します
/** @type { import("@basemachina/action").Handlers["getCustomerPageUrl"] } */
export default (
  { customerId },
  { vars, secrets, currentUser, environment },
) => {
  const customerPageUrl = `https://example.com/environments/${vars.ENVIRONMENT_ID}/${customerId}`;
  return customerPageUrl;
};
```

[wait](/action/datasources/javascript_action/builtin_functions/wait/) [Amazon Athena](/action/datasources/amazon_athena/)
---
アクション

データソース別の設定

[JavaScript](/action/datasources/javascript_action/)

エラーハンドリング

# JavaScriptアクションのエラーハンドリング

## エラーの返し方の基本 [](#エラーの返し方の基本)

JavaScriptアクションは、正常終了する場合に `return` を、異常終了する場合に `throw` を使って実行結果を返すことができます。

例えば、アクションへの入力値が想定しない値だった場合に、処理を打ち切りたいケースがあるでしょう。

その場合、Errorを `throw` することで、アクションの実行結果を失敗として返せます。

以下は、ユーザー取得アクションを実行し、ユーザーが見つからなかった場合にエラーを `throw` するJavaScriptアクションの例です。

```
import { executeAction } from "@basemachina/action";
 
// 指定されたユーザーの投稿を作成するアクション
export default async ({ userId, post }) => {
  const getUserResults = await executeAction("getUser", { userId });
  // 不正な入力だったら、処理を中断する
  if (!getUserResults[0].success.length < 1) {
    throw new Error("ユーザーが見つかりませんでした");
  }
 
  // ユーザーが見つかった場合は、投稿を作成する
  await executeAction("createPost", { userId, post });
};
```

このとき、 `throw` されたエラーは以下のように実行結果に表示されます。

![エラーの表示](/images/javascript_action/error_handlings/error_display.png)

アクションの結果加工スクリプトや、executeAction関数の結果としては、 `failure` キーに同様の文字列が設定された形で取得できます。

![エラー結果の形式](/images/javascript_action/error_handlings/error_result_format.png)

一般的なユースケースでは、文字情報としてエラーの内容を伝達できれば問題ありませんが、場合によっては、任意の形式のObjectとして結果を返したいこともあるでしょう。
そうしたケースでは、 [ResultError](/action/datasources/javascript_action/error_handlings/#resulterror) を活用できます。

## ジョブからエラーを返した場合の挙動 [](#ジョブからエラーを返した場合の挙動)

ジョブとして実行したJavaScriptアクションからエラーが `throw` された場合は、ステータスが「実行完了」ではなく「エラー」となります。
「エラー」で終了したジョブの結果を閲覧すると、通常のアクション実行時と同じ形式でエラー情報が表示されます。

## 組み込み関数のエラー [](#組み込み関数のエラー)

JavaScriptアクションから呼び出す組み込み関数は、エラーを `throw` することがあります。

例えば、 `executeAction` 関数を呼び出すときに、引数や、ユーザーの実行権限に問題がある場合にエラーが発生します。

![executeActionによる権限エラーの表示](/images/javascript_action/error_handlings/execute_action_error_example.png)

また、ネットワークの問題などの、システム要因のエラーが発生することもあります。

基本的に、組み込み関数から発生するエラーは、その原因についての情報を含める形で `throw` されるため、明示的にハンドリングせずとも、エラー原因の特定に利用できます。
そのうえで、リトライ処理の実装などのためにエラーハンドリングを明示的に行ないたい場合は、組み込み関数の呼び出しを `try-catch` のブロックで囲んでください。

## ResultError [](#resulterror)

`ResultError` は、 `throw` することで、エラーの内容を任意の形式のObjectとして返すことができるクラスです。

文字情報だけでは情報の視認性に欠ける場合や、別のJavaScriptアクションや加工スクリプト、ビューなどから結果を扱いにくいようなケースで活用できます。

本ページ冒頭の例で、ユーザーの存在有無による判定を行なっていましたが、これに加えてユーザーの属性による判定を加えるケースについて考えてみましょう。

下記の例では、ユーザーのステータスと、年齢による判定を行なっています。

```
import { executeAction } from "@basemachina/action";
 
const isValidUser = (user) => {
  if (user.status !== "ACTIVE") {
    return false;
  }
  if (user.age < 20) {
    return false;
  }
  return true;
};
 
// 指定されたユーザーの投稿を作成するアクション
export default async ({ userId, post }) => {
  const getUserResults = await executeAction("getUser", { userId });
  if (!getUserResults[0].success.length < 1) {
    throw new Error("ユーザーが見つかりませんでした");
  }
  const user = getUserResults[0].success[0];
  if (!isValidUser(user)) {
    throw new Error("ユーザーが有効ではありません");
  }
  // ...
  await executeAction("createPost", { userId, post });
};
```

ここで、「ユーザーが有効ではありません」という文字列で結果を返していますが、「ステータス」か、「年齢」のどちらに問題があったのか読み取ることができません。

このような場合に、 `ResultError` を使うことで、より詳細な情報をエラーに追加できます。

```
import { executeAction, ResultError } from "@basemachina/action";
// ...
export default async ({ userId, post }) => {
  // ...
  if (!isValidUser(user)) {
    throw new ResultError({
      message: "ユーザーが有効ではありません",
      user: {
        status: user.status,
        age: user.age,
      },
    });
  }
```

このとき、アクションの実行結果の表示は次のようになります。

![ResultErrorの表示](/images/javascript_action/error_handlings/result_error_display.png)

詳細な情報が表示されたことで、ユーザーのステータスに問題があったことを突き止めるのが簡単になりました。
エラーの詳細を含む文字列を組み立ててErrorを `throw` するよりも、ResultErrorを使った方が手軽にエラーに詳細情報を付加できます。

アクションの結果加工スクリプトや、executeAction関数の結果としては、 `failure` キーにResultErrorのコンストラクタへ渡したObjectが設定された形で取得できます。

![エラー結果の形式](/images/javascript_action/error_handlings/result_error_result_format.png)

ジョブの実行に失敗したときの詳細な状況を記録するなどといった、デバッグ目的にも活用できます。

ResultErrorを使って返すことのできる値の種類は、基本的にJavaScriptアクション成功時に返すことのできる値の種類と同じですが、現在 `File` および `Blob` はサポートされていません。

[JavaScript](/action/datasources/javascript_action/) [executeAction](/action/datasources/javascript_action/builtin_functions/execute_action/)
---
アクション

データソース別の設定

MySQL

# MySQL

## MySQLのデータソースに接続する [](#mysqlのデータソースに接続する)

1. 右上のメニューから「データソース」を選択する

2. 「データソースの追加」をクリックする

3. データソースの種類の中から「 MySQL 」を選択する

![データソースの選択](/images/mysql_integration/select.png)

4. データソースへの接続に必要な情報を入力して保存する

![データソースの接続設定](/images/mysql_integration/connection.png)

## MySQLをアクションで利用する [](#mysqlをアクションで利用する)

1. 右上のメニューから「アクション」を選択してアクション一覧画面に移動します。
1. 「アクションの追加」を選択してアクションの作成画面に移動します。
1. 「基本情報の設定」を入力後「次へ」を選択して、「処理の設定」画面に移動します。
1. 「データソース」で先ほど追加したデータソースを選択します。
1. 以下の項目を設定します。

- SQL文のタイトル
- クエリの種類
- SQL文

![SQLアクションの設定画面](/images/sql_action/setting.png)

### SQL文のタイトル [](#sql文のタイトル)

SQL文のタイトルを入力します。

設定したSQLのタイトルは、 [結果表示のカスタマイズ](/action/transformer_script/action_transform/) で使用できます。

### クエリの種類 [](#クエリの種類)

SQL文で実行するクエリの種類を以下の2つから選択します。

- 読み込み：SELECT文などの読み込みの場合
- 書き込み：INSERT文、UPDATE文、DELETE文などの書き込みの場合

### SQL文 [](#sql文)

実行するSQL文を入力します。

SQL文は複数個入力できて、それらのSQL文は1つのトランザクションで実行されます。

## SQLのIN/VALUESで配列を使用する場合 [](#sqlのinvaluesで配列を使用する場合)

以下のようにSQL文のINやVALUESで配列を使用する場合は、配列パラメーターが利用できます。

- INで特定の列の値が配列の中に含まれているかどうかを確認する

```
SELECT * FROM table1 WHERE column1 IN {{ array_parameter }};
```

- VALUEで複数の行をバルクインサート（一括で挿入）する

```
INSERT INTO table1 (column1) VALUES {{ array_parameter }};
```

詳細は [配列パラメーターのフォーマット形式SQL](/action/parameter/array_parameter/#sql) をご参照ください。

[用語集](/faq/terminology/) [PostgreSQL](/action/datasources/postgresql_integration/)
---
アクション

データソース別の設定

PostgreSQL

# PostgreSQL

## PostgreSQL のデータソースに接続する [](#postgresql-のデータソースに接続する)

1. 右上のメニューから「データソース」を選択する
1. 「データソースの追加」をクリックする
1. データソースの種類の中から「PostgreSQL」を選択する

![データソースの選択](/images/postgresql_integration/select.png)

1. データソースへの接続に必要な情報を入力して保存する

以下の項目が設定できます。

- 名前
- ホスト
- ポート番号
- データベース名
- ユーザー名
- パスワード
- アプリケーション名
- 接続タイムアウト
- SSLを利用して接続する

### クライアント証明書を使用した SSL 接続 [](#クライアント証明書を使用した-ssl-接続)

SSLを利用して接続する場合、クライアント証明書を使用した接続も可能です。

クライアント証明書を使用した接続をする場合、以下の項目を設定してください。

- server-ca.pemファイル内の認証局（CA）証明書
- client-cert.pemファイル内のクライアントの公開鍵証明書
- client-key.pemファイル内のクライアントの秘密鍵

## PostgreSQL をアクションで利用する [](#postgresql-をアクションで利用する)

1. 右上のメニューから「アクション」を選択してアクション一覧画面に移動します。
1. 「アクションの追加」を選択してアクションの作成画面に移動します。
1. 「基本情報の設定」を入力後「次へ」を選択して、「処理の設定」画面に移動します。
1. 「データソース」で先ほど追加したデータソースを選択します。
1. 以下の項目を設定します。

- SQL文のタイトル
- クエリの種類
- SQL文

![SQLアクションの設定画面](/images/sql_action/setting.png)

### SQL文のタイトル [](#sql文のタイトル)

SQL文のタイトルを入力します。

設定したSQLのタイトルは、 [結果表示のカスタマイズ](/action/transformer_script/action_transform/) で使用できます。

### クエリの種類 [](#クエリの種類)

SQL文で実行するクエリの種類を以下の2つから選択します。

- 読み込み：SELECT文などの読み込みの場合
- 書き込み：INSERT文、UPDATE文、DELETE文などの書き込みの場合

### SQL文 [](#sql文)

実行するSQL文を入力します。

SQL文は複数個入力できて、それらのSQL文は1つのトランザクションで実行されます。

## SQLのIN/VALUESで配列を使用する場合 [](#sqlのinvaluesで配列を使用する場合)

以下のようにSQL文のINやVALUESで配列を使用する場合は、配列パラメーターが利用できます。

- INで特定の列の値が配列の中に含まれているかどうかを確認する

```
SELECT * FROM table1 WHERE column1 IN {{ array_parameter }};
```

- VALUEで複数の行をバルクインサート（一括で挿入）する

```
INSERT INTO table1 (column1) VALUES {{ array_parameter }};
```

詳細は [配列パラメーターのフォーマット形式SQL](/action/parameter/array_parameter/#sql) をご参照ください。

[MySQL](/action/datasources/mysql_integration/) [Firestore](/action/datasources/firestore_integration/)
---
アクション

設定内容のダウンロード

# アクションの設定内容のダウンロード

アクションの設定内容はJSON形式のファイルでダウンロードできます。

**※この機能は将来、別の機能による代替または廃止になる可能性があります。**

![アクションの設定内容のダウンロード](/images/download_action_settings.png)

## ダウンロード方法 [](#ダウンロード方法)

以下の手順でダウンロードできます。

1. 右上のメニューから「設定」を選択します。
1. サイドバーのメニューから「プロジェクト設定」を選択します。
1. 「全アクションの設定内容のダウンロード」ボタンをクリックすると、ダウンロードできます。

以下がダウンロードできるJSONファイルの例です。（一部のキーのみ抜粋）

```
{
  "actions": [
    {
      "id": "aaabbbcccddd",
      "class": "restapi",
      "name": "ユーザー一覧の取得",
      "parameters": [
        {
          "name": "id",
          "rootElement": {
            "inputType": "TEXT",
            "required": false
          }
        }
        // ...
      ],
      "permissions": [
        {
          "target": {
            "targetID": "bbbcccdddeee",
            "name": "安戸 民太郎",
            "unit": "USER"
          }
        }
        // ...
      ],
      "reviewSetting": {
        "id": "cccdddeeefff",
        "name": "開発責任者レビュー"
      }
    }
    // ...
  ],
  "review_settings": [
    {
      "id": "cccdddeeefff",
      "name": "開発責任者レビュー",
      "environmentReviewSettings": [
        {
          "environment": {
            "id": "dddeeefffggg",
            "name": "本番環境"
          },
          "userGroupApprovalConditions": [
            {
              "userGroup": {
                "id": "ggghhhiiijjj",
                "name": "開発責任者"
              },
              "requiredCount": 1
            }
          ]
        }
        // ...
      ]
    }
    // ...
  ]
}
```

[一括実行](/action/batch/) [ビューとは](/view/what_is_view/)
---
アクション

結果のダウンロード

# 結果のダウンロード

アクションの実行結果はファイルでダウンロードできます。

ファイルのフォーマットはCSVまたはJSONをサポートしています。

ダウンロードはアクションを実行した結果の右側にあるメニューから行なえます。

![１つの結果ダウンロード](/images/download_result/single.png)

複数の実行結果が表示されるアクションを実行した後は、すべての結果のファイルをZIPファイルに圧縮したものをダウンロードできます。

![すべての結果ダウンロード](/images/download_result/all.png)

また、HTTP APIアクションの結果が、 `application/octet-stream` などのプレビュー不可能なデータ形式だった場合、データをダウンロードするためのボタンが表示されます。

[画像や動画の表示](/action/action_media_result/) [ジョブ](/action/jobs/)
---
アクション

ジョブ

# ジョブ

## ジョブとは [](#ジョブとは)

アクションは基本的に実行した画面で即座に結果が反映されます。しかし、ビジネスの要件によって必ずしも短時間ですべてのオペレーションが終わるわけではありません。
時間がかかるオペレーションに利用できるのがジョブです。通常のアクションの実行とは異なって、非同期的に実行します。結果は後から確認できます。

ジョブで実行できるオペレーションの最大時間は30分です。

## ジョブを実行する [](#ジョブを実行する)

通常のアクションと同様にアクションの詳細ページから実行できます。

![ジョブとして実行する](/images/jobs_execution.png)

選択肢の中から「ジョブとして実行する」を選択するとボタンの表記が変わります。そしてもう一度「ジョブとして実行する」ボタンをクリックすると非同期でアクションが実行されます。

クリック後、自動的にジョブの詳細ページへ移動されます。詳細ページではジョブに関する情報を確認できます。

![実行者](/images/jobs_left.png)

詳細ページ左側では、ジョブが誰によって、どのアクションが非同期で実行されたのか確認できます。

![ステータス](/images/jobs_right.png)

詳細ページ右側では、ジョブのステータスはどのような状態か、いつ実行されたのかといった情報を確認できます。またここからベースとなったアクションの詳細ページへジャンプできます。

ジョブのステータスは以下の通りです。

| ステータス | 説明 |
| --- | --- |
| 待機中です | ジョブがまだ実行されていません。キャンセルができます。 |
| 実行中です | ジョブが実行中です。キャンセルができます。 |
| 正常に終了しました | ジョブの実行が完了し、実行結果を確認できます。 |
| キャンセルされました | お客さまによるキャンセルとシステムのタイムアウトによるキャンセルの2つが存在します。 |
| 実行時にエラーが発生しました | アクションの実行でエラーが発生しています。何度試しても解消しない場合は大変ご不便をおかけいたしますが、お問い合わせください。 |

### 実行した結果を確認する [](#実行した結果を確認する)

ベースマキナではジョブの実行結果を1週間保持します。この間はジョブの詳細ページでいつでも確認できます。

期限を超えると下記画像のようなメッセージが表示されます。この期間以上記録を残したい場合は結果をダウンロードし、手元に残しておくことを推奨しています。

![](/images/jobs_expired.png)

[結果のダウンロード](/action/download_result/) [予約実行](/action/scheduled_jobs/)
---
アクション

パラメーター

パラメーターとは

# パラメーターとは

アクションの実行時、任意の値を実行時の引数（以下パラメーター）として渡すことができます。

設定したパラメーターは、アクションの実行内容に相当するSQLやAPI呼び出しのなかで、 `{{ パラメーター名 }}` の形式で利用できます。

## パラメーターの追加方法 [](#パラメーターの追加方法)

パラメーターはアクション設定画面の **基本情報の設定** から追加できます。

![パラメーター追加](/images/action_parameter/add_parameter.png)

パラメーター名とその種類（後述）を設定することで、アクション実行画面で設定したパラメーターを入力するフォームの入力欄が生成されます。

![パラメーター追加](/images/action_parameter/added_parameter.png)

## パラメーターの種類 [](#パラメーターの種類)

パラメーターは入力形式に応じて異なるフォームを生成できるように、いくつかの種類が用意されています。

**入力値の種類** という表記がされた項目をクリックすると、種類の詳細設定を行なう画面が表示されます。

[各データ型の値の扱い](/action/datasources/amazon_athena/data_type/) [テキスト](/action/parameter/text_parameter/)
---
アクション

パラメーター

配列

# 配列

配列は複数の値をまとめて送信する場合に設定するパラメーターの種類です。

![配列パラメーターを使ったアクションの実行](/images/action_parameter/array_exec.png)

配列のパラメーターには以下の項目を設定できます。

- 要素の種類
- フォーマット形式
- 最小要素数
- 最大要素数
- 初期値

![配列パラメーターの編集](/images/action_parameter/array_edit.png)

## 要素の種類 [](#要素の種類)

配列の要素の種類は以下から選択できます。

- [文字列](/action/parameter/text_parameter/)
- [数値](/action/parameter/number_parameter/)
- [日付](/action/parameter/date_parameter/)
- [配列](/action/parameter/array_parameter/)
- [タプル](/action/parameter/tuple_parameter/)

さらに要素の種類ごとに **入力必須かどうか** や **正規表現による入力値チェック** などを設定できます。

要素の種類ごとに設定できる項目は、各種パラメーターのドキュメントをご参照ください。

### 配列の要素の種類が配列/タプルの場合 [](#配列の要素の種類が配列タプルの場合)

要素の種類で配列/タプルを設定すると階層構造のある配列を設定できます。

階層構造のある配列の場合は、配列内の配列の要素の種類を以下から選択できます。

- 文字列
- 数値
- 日付

また、配列内のタプルの要素は以下の種類を選択できます。

- 文字列
- 数値
- 日付
- 真偽値

階層構造のある配列の場合でも要素の種類ごとに、 **入力必須かどうか** や **正規表現による入力値チェック** などを設定できます。

## フォーマット形式 [](#フォーマット形式)

配列を送信する際のフォーマット形式を以下から選択できます。

- フォーマットなし
- JSON
- 区切り文字
- SQL

### フォーマットなし [](#フォーマットなし)

配列の形式のまま送信されます。

**フォーマットなし** は以下のデータソースでのみ利用できます。

- [JavaScript](/action/datasources/javascript_action/)

### JSON [](#json)

配列をJSON形式に変換した文字列が送信されます。

| 要素の種類 | 送信される文字列 | 説明 |
| --- | --- | --- |
| テキスト | `["a","b"]` |  |
| 数値 | `[1,2]` | 各要素は二重引用符なしで送信されます |
| 日付（unixtime として利用する場合） | `["1672498800","1672585200"]` |  |
| 日付（unixtime として利用しない場合） | `["2023-01-01","2023-01-02"]` | 各要素は設定した日付の形式で送信されます |
| 真偽値 | `["有効","無効"]` （ `有効` 、 `無効` は設定した真、偽の値） | 各要素は設定した真、偽の値が送信されます |
| 配列 | `[["a","b"],["c","d"]]` | 配列内の配列は二重引用符なしで送信されます |

### 区切り文字 [](#区切り文字)

- 区切り文字
- 引用符

を設定でき、設定内容に基づいて配列を変換した文字列が送信されます。

```
// （例）引用符に `"`、区切り文字に `,` を設定した場合に、送信される文字列
"a","b","c"
```

### SQL [](#sql)

SQL文内で使用できる配列の形式で送信されます。

**SQL** は以下のデータソースでのみ利用できます。

- [MySQL](/action/datasources/mysql_integration/)
- [PostgreSQL](/action/datasources/postgresql_integration/)

フォーマット形式でSQLを選択した場合、 **展開先** を以下から選択します。

- IN
- VALUES

#### IN [](#in)

パラメータの値を、SQL文内で以下のようにIN句の値として利用する場合に選択します。

```
SELECT * FROM table1 WHERE column1 IN {{ array_parameter }};
```

配列の要素の種類がテキストや数値の場合、アクション実行時に上記のSQL文から以下のようなSQL文が生成されます。

```
SELECT * FROM table1 WHERE column1 IN (?, ?, ?);
```

また配列の要素の種類が配列/タプルの場合、アクション実行時に上記のSQL文から以下のようなSQL文が生成されます。

```
SELECT * FROM table1 WHERE column1 IN ((?, ?, ?), (?, ?, ?));
```

#### VALUES [](#values)

パラメーターの値を、SQL文内で以下のようにVALUES句の値として利用する場合に選択します。

```
INSERT INTO table1 (column1) VALUES {{ array_parameter }};
```

VALUESは配列の要素の種類が配列/タプルの場合のみ利用できます。

アクション実行時に上記のSQL文から以下のようなSQL文が生成されます。

```
INSERT INTO table1 (column1) VALUES (?, ?, ?), (?, ?, ?);
```

#### 例）MySQL の IN 句で利用する場合 [](#例mysql-の-in-句で利用する場合)

1. アクションの追加画面または編集画面から **処理の設定** 画面に移動します。
1. **データソースの選択** から **MySQL** のデータソースを選択します。
1. パラメーターを追加し入力値の種類を **配列** 、フォーマット形式を **SQL** 、展開先を **IN** に設定し、任意の要素の種類を設定します。
1. SQL文を入力しIN句で `{{ パラメーター名 }}` の形式で配列のパラメーターを利用します。

![配列パラメーターの編集](/images/action_parameter/array_raw_edit.png)

1. アクションを保存します。
1. アクションの実行画面で配列のパラメーターに値を入力して実行すると、入力した値がIN句に展開されてSQLが実行されます。

## 最小要素数 [](#最小要素数)

入力できる最小要素数を設定できます。

## 最大要素数 [](#最大要素数)

入力できる最大要素数を設定できます。

[真偽値](/action/parameter/bool_parameter/) [タプル](/action/parameter/tuple_parameter/)
---
アクション

パラメーター

真偽値

# 真偽値

値を真・偽の2値で表現したいときに設定するパラメータの種類です。2つのフォーマット形式が用意されており、それに応じて実行時の引数の値が変わります。このページでは各フォーマットの利用例を示します。

## 文字列フォーマット [](#文字列フォーマット)

真の場合・偽の場合のそれぞれに対応する文字列の値を設定します。

下記の例では、ユーザーのプラン情報を使った検索で、プレミアム会員かどうかの値を真偽値として扱う例を示しています。

![文字列フォーマットの真偽値の編集](/images/action_parameter/bool_input_edit.png)

![文字列フォーマットの真偽値の利用](/images/action_parameter/bool_input_action_config.png)

アクション実行時は、真偽値のパラメータはチェックボックス形式で表示され、チェックされているときは真の場合の値、チェックされていないときは偽の場合の値が入力されます。

![文字列フォーマットの真偽値の入力](/images/action_parameter/bool_input_exec.png)

## フォーマットなし [](#フォーマットなし)

真偽値がそのまま実行時の引数として渡されます。以下のデータソースでのみ利用可能です。

- MySQL
- PostgreSQL
- JavaScript

MySQLのusersテーブルからメールアドレスが認証済みのユーザーの一覧を取得する例を示します。

![フォーマットなしの真偽値の編集](/images/action_parameter/bool_raw_input_edit.png)

![フォーマットなしの真偽値の利用](/images/action_parameter/bool_raw_input_action_config.png)

アクション実行時は、真偽値のパラメータはチェックボックス形式で表示され、チェックされているときは `true` 、チェックされていないときは `false` が入力されます。

![フォーマットなしの真偽値の入力](/images/action_parameter/bool_raw_input_exec.png)

[ファイル](/action/parameter/file_parameter/) [配列](/action/parameter/array_parameter/)
---

---
アクション

パラメーター

ファイル

# ファイル

ファイルアップロードする形式で値として扱う場合に設定するパラメーターの種類です。

![ファイルパラメーターの設定画面](/images/action_parameter/file.png)

ファイルパラメーターには以下の項目を設定できます。

- 入力を必須にする
- 最大ファイルサイズ
- 説明

## 入力を必須にする [](#入力を必須にする)

値の入力を必須にするかどうかを設定できます。

## 最大ファイルサイズ [](#最大ファイルサイズ)

ファイルの最大サイズを設定できます。

## 説明 [](#説明)

パラメーターの説明を設定できます。

---

ファイルパラメーターでは他のパラメーターの場合と異なり、 `{{ パラメーター名 }}` のような値の利用はできません。

例えばHTTP APIアクションのform-dataの場合は、以下のようにキーとファイルパラメーターを紐づけます。

![ファイルのリクエストへの紐付け](/images/action_parameter/file_request_setting.png)

実行画面ではファイルアップロード用のフォームが表示されます。

![ファイルのフォーム](/images/action_parameter/file_upload_form.png)

[日付](/action/parameter/date_parameter/) [真偽値](/action/parameter/bool_parameter/)
---
アクション

パラメーター

JSON値

# JSON値

JSONのなかで使う値を設定するパラメーターの種類です。

通常のパラメーターもJSONとして送信できますが、JSON値として設定されたパラメーターは、置き換えるときに値の種類に応じてクオーテーションが自動で付与されます。

また、値を入力したくない場合に、空文字や0ではなく `null` を値として設定できます。

JSON値のパラメーターでは、置き換え方法が異なる点と `null` 値の扱い以外、他の種類のパラメーターとほぼ同様に扱うことができます。

「JSON値の種類」という選択肢のなかで、「テキスト・数値・日付」の3種類から値の種類を選択できます。

ただし、「入力必須かどうか」は項目として選べません。

これは他の種類のパラメーターと異なり、 `null` を入力可能にするのがJSON値の役割の1つであるためです。

![JSON](/images/action_parameter/json.png)

JSON値は種類に応じて以下のように置き換えられます。

| 型 | 値 |
| --- | --- |
| 文字列 | 入力値にダブルクオーテーションを付与した文字列 |
| 数値 | 入力値そのままの文字列 |
| 日付 | ダブルクオーテーションを付与した文字列 |
| 日付(UnixTime) | 入力値そのままの文字列 |

文字列や日付（Unixtime以外）の値には、自動でクオーテーションがつきます。

実際にJSON値を使用したリクエストの設定例は、以下の通りです。

![JSON](/images/action_parameter/json_request_body.png)

実行画面、ならびに実行結果は以下のようになります。

「値にnullを設定する」というトグルが表示され、ONにされた値は送信時に `null` が設定されます。

![JSON](/images/action_parameter/json_example_1.png)

![JSON](/images/action_parameter/json_example_2.png)

#### URLパラメーターによる初期値の設定 [](#urlパラメーターによる初期値の設定)

アクションの実行結果の加工スクリプトの [`linkToAction` 関数](/action/transformer_script/builtin_functions/link_to_action/) などで、URLパラメーターを指定すると、JSON値の初期値は次のように設定されます。

| URLパラメーター | 初期値 |
| --- | --- |
| キーなし | 初期値が設定されていたら初期値。設定されてないならnull。 |
| `?key=` （空文字指定） | null |
| `?key=aaa` | テキスト：aaa, 数値：0, 日付：aaa |
| `?key=123` | テキスト：123（文字列）, 数値：123, 日付：123 |
| `?key=2022-01-01` | テキスト：2022-01-01, 数値：0か設定された初期値, 日付：2022-01-01 |

上記の表の通り、初期値に関わらず `null` を設定したい場合は、空文字を設定していただくと画面移動後に `null` として扱われます。

![JSON URL Param](/images/action_parameter/json_url_param.png)

[タプル](/action/parameter/tuple_parameter/) [SQL](/action/parameter/sql_parameter/)
---
アクション

パラメーター

マスターデータ取得設定

# マスターデータ取得設定

マスターデータ取得設定は **アクションの実行結果から動的な選択肢** を生成し、別のアクションのパラメーターの入力に使用できる機能です。

例えばデータベースに保存されているユーザーIDをパラメーターに入力する場合、ユーザーの一覧を返すアクションの結果から値がユーザーID、ラベルがユーザー名の選択肢を生成して入力できます。

## マスターデータ取得設定の設定方法 [](#マスターデータ取得設定の設定方法)

マスターデータ取得設定一覧画面からマスターデータ取得設定の追加、更新、削除ができます。

1. 右上のメニューから「設定」を選択します。
1. 左のサイドバーから「マスターデータ取得設定」を選択して、マスターデータ取得設定一覧画面に移動します。

![マスターデータ取得設定一覧画面](/images/action_parameter/master_data_fetch_setting/list.png)

### マスターデータ取得設定を追加する [](#マスターデータ取得設定を追加する)

右上の「追加」ボタンをクリックして作成画面に移動します。

マスターデータ取得設定では以下の項目を設定します。

- 名前
- 値の種類
- アクション
- アクションのパラメーター
- 変換スクリプト

マスターデータ取得設定による選択肢は設定したアクション、アクションのパラメーター、変換スクリプトを使って選択肢を使用するタイミングで動的に生成されます。

#### 名前 [](#名前)

マスターデータ取得設定の名前を入力します。

#### 値の種類 [](#値の種類)

マスターデータ取得設定を使用するアクションのパラメーターの種類に合わせて値の種類を選択します。

| 値の種類 | マスターデータ取得設定を使用できるパラメーターの入力値の種類 |
| --- | --- |
| テキスト | テキスト、JSON 値（種類が「テキスト」）、配列（要素の種類が「テキスト」）、タプル（要素の種類が「テキスト」） |
| 数値 | 数値、JSON 値（種類が「数値」）、配列（要素の種類が「数値」）、タプル（要素の種類が「数値」） |

#### アクション [](#アクション)

選択肢の取得元アクションとそのパラメーターの値を入力します。

![マスターデータ取得設定で生成した選択肢](/images/action_parameter/master_data_fetch_setting/setting_form.png)

#### 変換スクリプト [](#変換スクリプト)

アクションとパラメータの値を入力してアクションを実行すると結果が表示され、実行結果からマスターデータへの変換スクリプトが入力できるようになります。

変換スクリプトでは、JavaScriptで実行結果から `{label: string, value: string | number }` 型の配列を返す処理を入力します。

※ `value` の型は値の種類が「テキスト」の場合は `string` 、値の種類が「数値」の場合は `number` を返してください。

変換スクリプトを入力すると選択肢となる変換結果が表示されます。

![マスターデータ取得設定の変換スクリプトと変換結果](/images/action_parameter/master_data_fetch_setting/transformer_script.png)

---

すべての設定項目の入力が終わったら「保存」をクリックします。

### マスターデータ取得設定を使用する [](#マスターデータ取得設定を使用する)

アクション設定画面の「処理の設定」でパラメーターにマスターデータ取得設定を使用できます。

1. メニューから「アクション」を選択します。
1. 「アクションの追加」またはアクション一覧から編集するアクションを選択して、アクション設定画面に移動します。
1. 「処理の設定」のマスターデータ取得設定を使用するパラメーターの詳細設定画面に移動します。
1. マスターデータ取得設定が使用できる「入力値の種類」を選択します。
1. 「複数の選択肢を用意する」を選択します。
1. 「選択肢にマスターデータ取得設定を使う」を選択します。
1. 「マスターデータ取得設定」を選択します。
1. 保存します。

![パラメータ編集画面でマスターデータ取得設定を使用する](/images/action_parameter/master_data_fetch_setting/parameter_edit.png)

アクション実行画面に移動すると、マスターデータ取得設定を使用したパラメーターの入力項目はセレクトボックスになり、クリックするとマスターデータ取得設定の選択肢が表示されます。

※選択肢はアクション実行画面を開いたタイミングで設定されたマスターデータ取得アクションを実行し生成されます。そのため、設定時とアクション実行結果が異なると、場合によっては設定時の変換結果と選択肢の内容に差異が生じます。

![マスターデータ取得設定で生成した選択肢](/images/action_parameter/master_data_fetch_setting/exec_action_form.png)

### マスターデータ取得設定を更新する [](#マスターデータ取得設定を更新する)

マスターデータ取得設定一覧から更新したいマスターデータ取得設定をクリックすると、更新画面に移動できます。

マスターデータ取得設定の追加時と同様に設定項目を編集して「保存」をクリックします。

### マスターデータ取得設定を削除する [](#マスターデータ取得設定を削除する)

マスターデータ取得設定一覧から削除するマスターデータ取得設定にカーソルをホバーし、右端に表示されるボタンをクリックして「削除する」をクリックします。

![マスターデータ取得設定の削除](/images/action_parameter/master_data_fetch_setting/delete.png)

[複数の選択肢](/action/parameter/select_parameter/) [事前定義パラメーター](/action/parameter/predefined_parameter/)
---
アクション

パラメーター

数値

# 数値

数値で値を扱う場合に設定するパラメーターの種類です。

![数値パラメーターの設定画面](/images/action_parameter/number.png)

数値パラメーターには以下の項目を設定できます。

- 最小値
- 最大値
- 入力を必須にする
- 複数の選択肢を用意する
- 初期値
- 説明

## 最小値 [](#最小値)

入力できる値の最小値を設定できます。

## 最大値 [](#最大値)

入力できる値の最大値を設定できます。

## 入力を必須にする [](#入力を必須にする)

値の入力を必須にするかどうかを設定できます。

## 複数の選択肢を用意する [](#複数の選択肢を用意する)

値を入力する際の選択肢を設定できます。

詳細は [複数の選択肢](/action/parameter/select_parameter/) をご参照ください。

## 初期値 [](#初期値)

パラメーターの値の初期値を設定できます。

## 説明 [](#説明)

パラメーターの説明を設定できます。

[テキスト](/action/parameter/text_parameter/) [日付](/action/parameter/date_parameter/)
---
アクション

パラメーター

事前定義パラメーター

# 事前定義パラメーター

事前定義パラメーターは、ログイン情報や [変数・シークレット](/action/parameter/vars_secrets/) などの各アクションで共通して使用できるパラメーターです。

通常のパラメーターと同様に、HTTP APIのヘッダーの値などに `{{ currentUser.email }}` や `{{ secrets.API_TOKEN }}` と設定することで参照できます。

![事前定義パラメータの設定](/images/predefined_parameter/completion_items.png)

## 事前定義パラメーターの一覧 [](#事前定義パラメーターの一覧)

| パラメータ名 | 設定される値 |
| --- | --- |
| `currentUser.email` | アクションを実行した（ [ジョブ](/action/jobs/) の場合はジョブを作成した）ユーザーのメールアドレス |
| `reviewRequest.url` | レビュー依頼の詳細画面のURL。レビュー承認後に実行した場合に設定されます。（現在、レビュー承認後にジョブで実行した場合には設定されませんが今後対応予定です） |
| `job.url` | ジョブの詳細画面のURL。ジョブとして実行した場合に設定されます。 |
| `environment.id` | アクションの実行に使用した環境のID |
| `vars.変数名` | 設定した変数の値 |
| `secrets.シークレット名` | 設定したシークレットの値 |

変数・シークレットの設定方法は [こちら](/action/parameter/vars_secrets/) をご覧ください。

[マスターデータ取得設定](/action/parameter/master_data_fetch_setting/) [変数・シークレット](/action/parameter/vars_secrets/)
---
アクション

パラメーター

複数の選択肢

# 複数の選択肢

**テキスト** と **数値** のパラメーターには選択肢を設定できます。

![アクションパラメータ編集画面での選択肢の設定](/images/action_parameter/multi_select.png)

選択肢には送信される値とラベル（任意）を設定できます。

ラベルを設定すると実行画面のセレクトボックスの選択肢にはラベルが、ラベルが未設定の場合は値が表示されます。

![セレクトボックスに表示される選択肢](/images/action_parameter/multi_select_form.png)

またマスターデータ取得設定を使用すると、データベースに保存されている値やAPIのレスポンスの値から選択肢を生成できます。

設定方法は [こちら](/action/parameter/master_data_fetch_setting/) をご覧ください。

[SQL](/action/parameter/sql_parameter/) [マスターデータ取得設定](/action/parameter/master_data_fetch_setting/)
---
アクション

パラメーター

SQL

# SQL

SQL系のアクションを実行するときに設定するパラメーターの種類です。

通常のパラメーターは、SQLアクションへの埋め込みで、自動的にプレースホルダーへの置換が行なわれ安全に実行されます。

SQL形式のパラメーターは、アクション実行時にSQLの実行内容そのものを変更できます。下記の項目を設定できます。

- 入力必須かどうか
- 初期値
- 選択形式にする場合の選択候補

![SQL](/images/action_parameter/sql.png)

例えば、下記のようなMySQLアクションが存在するとします。

![SQL](/images/action_parameter/sql_example_1.png)

この時、下記のようにパラメーターを設定すると、実行されるSQLは次の内容になります。

![SQL](/images/action_parameter/sql_example_2.png)

![SQL](/images/action_parameter/sql_example_3.png)

SELECT文のテーブル名に相当する箇所が、SQL形式のパラメーターによって置き換えられています。

[JSON値](/action/parameter/json_parameter/) [複数の選択肢](/action/parameter/select_parameter/)
---
アクション

パラメーター

テキスト

# テキスト

テキストは文字列を扱う場合に設定するパラメーターの種類です。

![テキストパラメーターの設定画面](/images/action_parameter/text.png)

テキストパラメーターには以下の項目を設定できます。

- 複数行入力する
- 最小文字数
- 最大文字数
- 正規表現
- 正規表現のエラーメッセージ
- 入力を必須にする
- 複数の選択肢を用意する
- 初期値
- 説明

## 複数行入力する [](#複数行入力する)

複数行の文字列を入力できるかどうかを設定できます。

有効にすると「改行文字を指定する」を設定できます。

### 改行文字を指定する [](#改行文字を指定する)

改行文字を指定するかどうかを設定できます。

有効にすると「改行文字」を設定できます。

#### 改行文字 [](#改行文字)

改行文字を任意の文字に指定できます。
（指定しない場合の改行文字はLF（ `\n` ）です）

![テキストパラメーターの複数行テキストの設定画面](/images/action_parameter/text_multiline.png)

例えば、改行文字を `\r\n` と設定しアクションの実行画面で以下のパラメータの値を入力します。

```
こんにちは
さようなら
```

そしてアクションを実行すると、以下の値がパラメータの値として送信されます。

```
こんにちは\r\nさようなら
```

## 最小文字数 [](#最小文字数)

入力できる最小文字数を設定できます。

## 最大文字数 [](#最大文字数)

入力できる最大文字数を設定できます。

## 正規表現 [](#正規表現)

入力された値をバリデーションする正規表現を設定できます。

## 正規表現のエラーメッセージ [](#正規表現のエラーメッセージ)

入力された値が正規表現と一致しない場合に表示するエラーメッセージを設定できます。

## 入力を必須にする [](#入力を必須にする)

値の入力を必須にするかどうかを設定できます。

## 複数の選択肢を用意する [](#複数の選択肢を用意する)

値を入力する際の選択肢を設定できます。

詳細は [複数の選択肢](/action/parameter/select_parameter/) をご参照ください。

## 初期値 [](#初期値)

パラメーターの値の初期値を設定できます。

## 説明 [](#説明)

パラメーターの説明を設定できます。

[パラメーターとは](/action/parameter/action_parameter/) [数値](/action/parameter/number_parameter/)
---
アクション

パラメーター

タプル

# タプル

タプルは異なる種類の複数の値をまとめて送信する場合に設定するパラメーターの種類です。

![タプルパラメーターを使ったアクションの実行](/images/action_parameter/tuple_exec.png)

タプルのパラメーターには以下の項目を設定できます。

- フォーマット形式
- タプルの要素
- 初期値

![タプルパラメーターの編集](/images/action_parameter/tuple_edit.png)

## タプルの要素 [](#タプルの要素)

タプルの要素には以下の項目を設定できます。

- ラベル
- 要素の種類

### ラベル [](#ラベル)

アクションの実行フォームに表示されるラベルを設定できます。

### 要素の種類 [](#要素の種類)

要素の種類は以下から選択できます。

- [文字列](/action/parameter/text_parameter/)
- [数値](/action/parameter/number_parameter/)
- [日付](/action/parameter/date_parameter/)
- [真偽値](/action/parameter/bool_parameter/)

さらに要素の種類ごとに **入力必須かどうか** や **正規表現による入力値チェック** などを設定できます。

要素の種類ごとに設定できる項目は、各種パラメーターのドキュメントをご参照ください。

## フォーマット形式 [](#フォーマット形式)

タプルを送信する際のフォーマット形式を以下から選択できます。

- フォーマットなし
- JSON
- 区切り文字

### フォーマットなし [](#フォーマットなし)

タプルの形式のまま送信されます。

**フォーマットなし** は以下のデータソースでのみ利用できます。

- [JavaScript](/action/datasources/javascript_action/)

### JSON [](#json)

配列をJSON形式に変換した文字列が送信されます。

（例）要素の種類が文字列、数値、日付（unixtimeとして利用する）、日付（unixtimeとして利用しない）、真偽値（ `有効` は設定した真の値）の場合に送信される文字列の場合。

```
["a",1,"1672498800","2023-01-01","有効"]
```

| 要素の種類 | 説明 |
| --- | --- |
| テキスト |  |
| 数値 | 各要素は二重引用符なしで送信されます |
| 日付（unixtime として利用する場合） |  |
| 日付（unixtime として利用しない場合） | 各要素は設定した日付の形式で送信されます |
| 真偽値 | 各要素は設定した真、偽の値が送信されます |

### 区切り文字 [](#区切り文字)

- 区切り文字
- 引用符

を設定でき、設定内容に基づいてタプルを変換した文字列が送信されます。

（例）要素の種類が文字列、数値、日付（unixtimeとして利用する）、日付（unixtimeとして利用しない）、真偽値（ `有効` は設定した真の値）で、引用符に `"` 、区切り文字に `,` を設定した場合にの場合に送信される文字列の場合。

```
"a","1","1672498800","2023-01-01","有効"
```

[配列](/action/parameter/array_parameter/) [JSON値](/action/parameter/json_parameter/)
---
アクション

パラメーター

変数・シークレット

# 変数・シークレット

変数・シークレットは、環境ごとに値を保存して、複数のアクションの設定で使い回せる機能です。

変数・シークレットは、名前に `vars` および `secrets` と言う接頭辞をつける形で、アクションのパラメーター同様、アクションの設定内で使用できます。また、HTTP APIの共通ヘッダー、gRPCの共通メタデータでも同様の形式で使用できます。

例えば、 `API_TOKEN` シークレットを登録すると、HTTP APIのヘッダーの値などに `{{ secrets.API_TOKEN }}` と設定することで参照できます。

![変数・シークレット設定画面](/images/action_vars_secrets/vars_secrets_list.png)

また、登録した変数は、アクションの加工スクリプトおよびビューのコード内で、BaseMachinaContextを経由して値を取得できます。
シークレットはアクション実行時のみ使用可能で、加工スクリプトおよびビューのコード内では使用できません。
詳細については、アクションの [結果の加工に使える値](/action/transformer_script/action_transform_parameters/#basemachinacontext%E3%83%99%E3%83%BC%E3%82%B9%E3%83%9E%E3%82%AD%E3%83%8A%E3%81%AE%E3%81%94%E5%88%A9%E7%94%A8%E7%8A%B6%E6%B3%81%E8%A8%AD%E5%AE%9A%E6%83%85%E5%A0%B1%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E5%80%A4) と、ビューの [useBaseMachinaContext](/view/function/view_use_basemachina_context/) のドキュメントを参照ください。

## 変数とシークレットの違いについて [](#変数とシークレットの違いについて)

変数とシークレットの機能上の違いは、値の暗号化の有無です。

変数は、値が平文で保存され、その内容を変数・シークレット設定画面上で確認できます。

シークレットは、値が暗号化したうえで保存され、アクションの実行時のみに復号して使用されます。保存した後は、内容を変数・シークレット設定画面上で確認できません。

## 変数・シークレットの作成方法 [](#変数シークレットの作成方法)

変数・シークレットの作成は、プロジェクト設定画面の "変数・シークレット" 設定から行なえます。

変数・シークレットの保存先は、現在選択中の環境となります。アクションの実行時に環境別の値を使用するには、それぞれの環境に同名の変数・シークレットを作成してください。

### 変数を作成する [](#変数を作成する)

変数・シークレット設定画面から変数の追加ボタンをクリックします。

![変数・シークレット設定画面の変数作成画面への導線](/images/action_vars_secrets/create_var.png)

変数の名前と、値を入力して保存します。保存すると、名前に含まれる半角英字は自動的に大文字に変換されます。

![変数作成画面](/images/action_vars_secrets/create_var_page.png)

### シークレットを作成する [](#シークレットを作成する)

変数・シークレット設定画面からシークレットの追加ボタンをクリックします。

![変数・シークレット設定画面のシークレット作成画面への導線](/images/action_vars_secrets/create_secret.png)

シークレットの名前と、値を入力して保存します。変数同様、保存すると、名前に含まれる半角英字は自動的に大文字に変換されます。

![シークレット作成画面](/images/action_vars_secrets/create_secret_page.png)

## 変数・シークレットの編集、削除 [](#変数シークレットの編集削除)

変数・シークレットの編集、削除は、設定画面に表示される一覧の行の右端の3点リーダから行なえます。

![変数・シークレットの編集、削除](/images/action_vars_secrets/var_secret_edit_delete.png)

## 変数・シークレットの使用方法 [](#変数シークレットの使用方法)

変数・シークレットは、アクションの設定内でパラメーターを使用できる箇所および、HTTP APIの共通ヘッダー、gRPCの共通メタデータの設定内で、パラメーターと同様の形式で使用できます。

書式は以下のとおりです。

- 変数： `{{ vars.変数名 }}`
- シークレット： `{{ secrets.シークレット名 }}`

上記の `変数名` 、 `シークレット名` の部分を実際の名前に置き換えて使用してください。

指定された変数、シークレットが現在使用中の環境に存在しなかった場合、アクションの実行に失敗します。

### HTTP APIアクションの例 [](#http-apiアクションの例)

変数として `USER_EMAIL` を、 シークレットとして `USER_PASSWORD` を登録したとき、これらはHTTP APIアクションの設定で下記のように使用できます。

- リクエストタイプ： `form-data`
- フォームデータ
  - キー: `email`, 値： `{{ vars.USER_EMAIL }}`
  - キー: `password`, 値： `{{ secrets.USER_PASSWORD }}`

form-data以外で使用したい場合も、パラメーターを使用できる箇所で同様の設定が可能です。

![フォームデータへの変数・シークレットの設定](/images/action_vars_secrets/http_api_example.png)

## 変数・シークレットを環境ごとに切り替える [](#変数シークレットを環境ごとに切り替える)

アクション実行時に、変数・シークレットを別環境のものに切り替えたいときは、通常通りメニューバーから使用したい環境を選択してください。

![環境切り替えのUI](/images/action_vars_secrets/switch_environment.png)

## 補足 [](#補足)

### 監査ログについて [](#監査ログについて)

変数・シークレットは、アクションのパラメーターに設定された引数とは異なり、 `監査ログのストリーミング` 機能による記録の対象となりません。

[事前定義パラメーター](/action/parameter/predefined_parameter/) [結果を加工する](/action/transformer_script/action_transform/)
---
アクション

レビュー設定

# レビュー設定

レビュー設定はアクションの実行前に他のユーザーによるレビューを必須にできる機能です。

承認に必要な条件は柔軟に設定でき、例えば以下のような条件を設定できます。

- 特定のユーザーからの承認を必須にする
- 特定のグループのユーザー最低○人からの承認を必須にする

またレビューを有効化するかどうかや、承認できるユーザーやグループは環境ごとに別の設定が可能で、例えば本番環境ではレビューを有効、開発環境ではレビューを無効といった設定ができます。

## レビュー設定の作成 [](#レビュー設定の作成)

レビュー設定はプロジェクト設定のレビュー設定から作成できます。

1. 右上のメニューから「設定」を選択します。
1. 左のサイドバーから「レビュー設定」を選択してレビュー設定の一覧画面に移動します。
1. 「追加」ボタンを選択して、レビュー設定の作成画面に移動します。

![レビュー設定の設定画面](/images/review_setting/setting_form.png)

レビュー設定では以下の項目を設定します。

- 名前
- 各環境の設定
  - レビューを有効化する
  - 承認できるユーザー・グループ
  - 自身のレビュー依頼を自動承認する
  - 承認者もアクションを実行可能にする

### 名前 [](#名前)

レビュー設定の名前です。

---

以下は各環境ごとに設定する項目です。

### レビューを有効化する [](#レビューを有効化する)

その環境でレビューを有効化するかどうかを設定します。

有効化すると以下の項目が設定できるようになります。

#### 承認できるユーザー・グループ [](#承認できるユーザーグループ)

レビュアーのユーザー・グループを設定します。

グループを設定する場合は、そのグループのうち最低何人の承認が必要なのかも設定できます。

#### 自身のレビュー依頼を自動承認する [](#自身のレビュー依頼を自動承認する)

レビュー依頼作成時、自分自身がレビュアーの場合に自動で承認するかどうかを設定します。

#### 承認者もアクションを実行可能にする [](#承認者もアクションを実行可能にする)

レビュー依頼の承認後に、承認者もアクションを実行可能にするかどうかを設定します。

「承認者もアクションを実行可能にする」が無効な場合、アクションを実行できるのはレビュー依頼を作成したユーザーのみです。

「承認者もアクションを実行可能にする」が有効な場合でも、承認者がアクションの実行権限を持っていない場合はアクションを実行できません。

## アクションのレビュー設定 [](#アクションのレビュー設定)

アクションの編集画面の「レビュー設定」のタブで、アクションにレビュー設定を紐づけられます。

レビューが有効化されている環境で、アクションの実行権限を持ったユーザーがアクション実行画面に移動すると、アクションの実行フォームの代わりにレビュー依頼フォームが表示されます。

レビューが有効化されている環境では、レビューが承認されてからでなければアクションを実行できません。

![レビュー依頼のフォーム](/images/review/review_request_form.png)

なお、実行権限を持たないユーザーはレビューを依頼できません。

実行権限の設定とレビューの設定の対応関係は、以下のとおりです。

|  | 誰でも実行できる | 実行権限を設定する |
| --- | --- | --- |
| レビュー無効 | すべての人が即実行できる | 実行権限のある人は即実行できる。実行権限のない人は何もできない |
| レビュー有効 | 誰でもレビュー依頼が行なえる | 実行権限のある人はレビュー依頼ができる。実行権限のない人は何もできない |

## 確認と実行 [](#確認と実行)

自分に依頼されたレビュー、または自分が他の人に依頼したレビューの履歴は専用の画面で確認できます。

画面上部のメニューからレビュー依頼のアイコンをクリックして、レビューの一覧画面に移動してください。

レビュー依頼ごとの詳細画面に行くとレビューを出した人や確認状況を見ることができます。

![レビュー依頼のアイコン](/images/review/nav_icon.png)

![レビュー依頼の詳細画面](/images/review/review_history.png)

詳細画面では依頼時点で入力されたパラメーターの値の情報などを確認したうえで、承認・却下、そして承認後の実行などを行なえます。

レビュー依頼をされたユーザーは、画面右上の「レビューをする」ボタンから承認または却下をコメント付きで行なえます。

レビューを依頼したユーザーは、それらのコメントを後から確認することで、なぜレビューが承認・却下されたのかを知ることができます。

レビューを依頼する際に、有効期限を設定できます。 **有効期限をすぎると保存されていたパラメーターの値の情報は破棄され、承認・却下のいずれも行なえなくなります** 。

![レビュー依頼の詳細画面](/images/review/approval_form.png)

レビュー依頼が承認されると「承認者もアクションを実行可能にする」が有効な場合はレビュー依頼の作成者と承認者が、無効な場合はレビュー依頼の作成者のみが、アクションを実行できます。

![レビュー依頼の詳細画面](/images/review/review_status.png)

[実行権限](/action/action_permission/) [アクションのコピー](/action/copy_action/)
---
アクション

予約実行

# 予約実行

予約実行は、アクションの実行を特定の日時に予約できる機能です。

夜間や休日にアクションを実行したい場合や、指定した日時に必ず実行したいアクションを事前に予約したい場合などでご活用いただけます。

## 予約実行する [](#予約実行する)

1. アクションの詳細ページで「実行を予約する」を選択します。

![「実行を予約する」の選択](/images/action_schedule_jobs/select_button.png)

1. 予約日時を設定します。現在時刻から最大で1か月先までの日時を設定できます。

![予約日時の入力](/images/action_schedule_jobs/schedule_time_field.png)

1. 「実行を予約する」をクリックして予約完了です。

予約を完了するとジョブ詳細ページに移動して、予約したジョブの詳細を確認できます。

※予約したアクションは、指定した日時に [ジョブ](/action/jobs/) で実行されます。

## 予約した結果を確認する [](#予約した結果を確認する)

1. アクションの一覧画面から右上の「ジョブ一覧」ボタンをクリックして、ジョブ一覧画面に移動します。
1. ジョブ一覧画面から予約したジョブをクリックして、ジョブ詳細ページに移動して予約実行した結果を確認できます。

![予約日時の入力](/images/action_schedule_jobs/result.png)

ジョブの詳細ページでは、以下の情報を確認できます。

- ジョブのステータス
- 予約時に設定したアクションのパラメーターの値
- アクションの実行結果

ジョブのステータスは以下の通りです。

| ステータス | 説明 |
| --- | --- |
| 待機中です | ジョブがまだ実行されていません。キャンセルができます。 |
| 実行中です | ジョブが実行中です。キャンセルができます。 |
| 正常に終了しました | ジョブの実行が完了し、実行結果を確認できます。 |
| キャンセルされました | お客さまによるキャンセルとシステムのタイムアウトによるキャンセルの2つが存在します。 |
| 実行時にエラーが発生しました | アクションの実行でエラーが発生しています。何度試しても解消しない場合は大変ご不便をおかけいたしますが、お問い合わせください。 |

## 予約したアクションの実行時に通知する [](#予約したアクションの実行時に通知する)

プロジェクトの設定でアクション実行時の通知設定をしている場合は、予約したアクションの実行時に通知が届きます。

通知は以下の3種類です。

- 実行開始時
- 実行完了時
- 実行エラー時

アクション実行時の通知設定の方法は、 [通知設定](/admin/action/notification/) をご覧ください。

[ジョブ](/action/jobs/) [アクショングループ](/action/action_group/)
---
アクション

結果表示のカスタマイズ

結果を加工する

# 結果を加工する

アクションの実行結果は加工して表示できます。アクションを実行後に表示される「結果表示のカスタマイズ」をクリックして開始します。

![結果表示のカスタマイズ](/images/action_transform/start.png)

クリックすると画面下に結果の加工スクリプト（JavaScript）を編集するエディタが表示されます。

1. 左の欄には今まで保存したスクリプトの一覧が表示されます。名前がついてない場合はデフォルトで割り当てられたIDが名前になります。
1. 中央ではスクリプトの名前とそのコードを編集するエディタが表示されます。
1. 右の欄では実行して得られた内容をスクリプトのオブジェクト構造として表示します。コードを編集するときに活用いただけます。

![スクリプトの編集](/images/action_transform/edit_script.png)

スクリプトは各項目を編集して少し待機すると自動で保存され、実行済みの結果に反映されます。次の画像では表示されているラベルを日本語へ変換するスクリプトを記述し反映しています。

![スクリプトの保存](/images/action_transform/save_script.png)

次回から同じアクションを実行し、結果の表示に同じスクリプトを適用する場合は「常にこのスクリプトを加工に使用する」を有効にします。有効になった証として左の欄に緑色でチェックが入ります。

![スクリプトをデフォルトで利用する](/images/action_transform/save_default.png)

実行結果内にある `null` を表示したい場合は、「nullを表示する」を有効にします。新規作成したスクリプトではデフォルトで有効になっています。
また、「結果表示のカスタマイズ」を開いていない場合は常に有効になっています。

![nullを表示する](/images/action_transform/display_null.png)

「結果表示のカスタマイズ」の画面は右上のバツボタンをクリックするかEscキーを入力することで閉じることができます。

[変数・シークレット](/action/parameter/vars_secrets/) [結果の加工に使える値](/action/transformer_script/action_transform_parameters/)
---
アクション

結果表示のカスタマイズ

結果の加工に使える値

# 結果の加工に使える値

アクションの実行結果は加工の加工に使える値は以下の通りです。

## results（アクションの実行結果） [](#resultsアクションの実行結果)

`results` にはアクションの実行結果が格納されています。

![resultsの取得結果](/images/action_transform_parameters/results_response.png)

例えば単一のユーザー情報を取得するアクションがあったとします。アクション実行成功時に、そのレスポンスの中に入っている `id` を取得したい場合は、 `results[0].success.id` と記述します。

![resultsの使用例](/images/action_transform_parameters/results_usage.png)

ご覧の通り、この値は配列形式になっています。これは通常のMySQLやPostgreSQLなど、一部のデータソースの種類に紐づくアクションは実行結果が複数個になる可能性があるためです。

また、 `success` と記載されているとおり、実行成功時にのみ値が格納されます。実行失敗時には `failure` に値（例：エラー文言）が格納されます。

## basemachinaContext（ベースマキナのご利用状況・設定情報に関する値） [](#basemachinacontextベースマキナのご利用状況設定情報に関する値)

`basemachinaContext` にはベースマキナのご利用状況・設定情報に関する値が格納されています。

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `user` | `object` | 現在のユーザーに関する情報を含むオブジェクト。 `id`, `email`, `name`, `groups`, `isTenantAdmin` のプロパティを含みます。 | 詳細は後述します。 |
| `environment` | `object` | 現在の環境に関する情報を含むオブジェクト。 `id`, `name` のプロパティを含みます。 | `{ id: '1', name: 'Environment Name' }` |
| `environmentVariables` | `object` | キーが環境変数の名前、値が環境変数の値のオブジェクト。 | `{ USER_NAME: 'example-user', PROJECT: 'example-project' }` |
| `groups` | `Array` | 現在のプロジェクトに存在するグループに関する情報を含むオブジェクトの配列。各オブジェクトは `id`, `name` のプロパティを含みます。 | `[{ id: '1', name: 'Group1' }, { id: '2', name: 'Group2' }]` |

なお、 `user` プロパティのオブジェクトの各プロパティは以下の通りです。

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `id` | `string` | ユーザーのID | `'1'` |
| `email` | `string` | ユーザーのメールアドレス | `'user@example.com'` |
| `name` | `string` | ユーザー名 | `'User Name'` |
| `groups` | `Array` | ユーザーが所属するグループに関する情報を含むオブジェクトの配列。 | `[{ id: '1', name: 'Group1' }]` |
| `isTenantAdmin` | `boolean` | ユーザーが企業アカウント管理者であれば `true` です。 | `true` |

## experimental（試験的に導入されている値） [](#experimental試験的に導入されている値)

`experimental` の値は、アクションの実行結果を加工するために有用な一方で、今後、破壊的変更がありえます。

具体的な内容は以下のとおりです。

### args（アクション実行時に入力した引数の値） [](#argsアクション実行時に入力した引数の値)

`args` にはアクション実行時に入力した引数の値が格納されています。アクション実行のフォームで入力した値が、そのまま `args` に格納されます。

![argsの入力情報](/images/action_transform_parameters/args_input.png)

![argsの取得結果](/images/action_transform_parameters/args_response.png)

[結果を加工する](/action/transformer_script/action_transform/) [ページネーション](/action/transformer_script/pagination/)
---
アクション

結果表示のカスタマイズ

組み込み関数

image

# image

`image` 関数は、画像の表示方法を指定できる関数です。
画像サイズの指定および、拡張子のないURL（自動的に画像表示されないもの）に対する画像表示に使えます。

## 基本的な使い方 [](#基本的な使い方)

以下は、アクションの実行結果から画像のURLを取得し、表示サイズを設定して表示する例です。

### 使用例 [](#使用例)

```
const src = results[0].success.imageURL;
return {
  widthのみ指定: image({ src, width: 200 }),
  heightのみ指定: image({ src, height: 100 }),
  両方指定: image({ src, width: 200, height: 100 }),
};
```

### 表示結果 [](#表示結果)

![image関数の使用例の表示結果](/images/action_transform/builtin_functions/image.png)

---

`width` と `height` のどちらかのみを指定した場合は、画像の縦横比率を維持したまま表示されます。

## 詳細なインターフェース [](#詳細なインターフェース)

```
function image(params: {
  src: string;
  width?: string | number;
  height?: string | number;
});
```

### 引数 [](#引数)

#### `params.src: string` [](#paramssrc-string)

- 画像のURLを指定します。

#### `params.width?: string | number` [](#paramswidth-string--number)

- 画像の幅を指定します。数値の場合はピクセル単位で指定します。
- 例
  - `"100px"`
  - `100`

#### `params.height?: string | number` [](#paramsheight-string--number)

- 画像の高さを指定します。数値の場合はピクセル単位で指定します。
- 例
  - `"100px"`
  - `100`

[linkToURL](/action/transformer_script/builtin_functions/link_to_url/) [実行権限](/action/action_permission/)
---
アクション

結果表示のカスタマイズ

組み込み関数

linkToAction

# linkToAction

`linkToAction` 関数は、別のアクションの実行画面へ移動できるリンクを表示できる関数です。

## 基本的な使い方 [](#基本的な使い方)

ユーザーの一覧を表示するアクションの実行結果に、ユーザーの詳細を表示するアクションへ移動できるリンクを表示する例を考えます。

移動先のユーザーの詳細を表示するアクションは、以下のようなユーザーのIDをパラメーターとして受け取るアクションです。

![linkToAction関数の使用例の移動先のアクション](/images/action_transform/builtin_functions/link_to_action_target_action.png)

### 使用例 [](#使用例)

以下がユーザーの一覧を表示するアクションに設定するスクリプトです。

```
const users = results[0].success;
return [
  {
    success: users.map((user) => ({
      名前: linkToAction(
        user.name,
        // ユーザーの詳細を表示するアクションの識別子を設定
        "get-user-detail",
        // 移動時にアクションを実行するように設定
        true,
        // ユーザーの詳細を表示するアクションへ渡すパラメータの値を設定
        { userId: user.id },
      ),
      メールアドレス: user.email,
    })),
  },
];
```

### 表示結果 [](#表示結果)

![linkToAction関数の使用例の表示結果](/images/action_transform/builtin_functions/link_to_action.png)

---

表示されたリンクをクリックすると、ユーザーの詳細を表示するアクションのページに移動します。

```
// 移動時にアクションを実行するように設定
true,
```

使用例のコードの上記の部分で、第3引数の `openAndRun` に `true` を設定しているので、ページ移動時にユーザーの詳細を表示するアクションが実行され、以下のように実行結果のみが表示されます。

![linkToAction関数の使用例の移動先のアクションの実行結果](/images/action_transform/builtin_functions/link_to_action_target_action_result.png)

## 詳細なインターフェース [](#詳細なインターフェース)

```
function linkToAction(
  title: string,
  actionId: string,
  openAndRun?: boolean,
  params?: object,
);
```

### 引数 [](#引数)

#### `title: string` [](#title-string)

- リンクとして表示するテキストです

#### `actionId: string` [](#actionid-string)

- 移動先のアクションIDまたは識別子です
- 例
  - `"get-user-detail"`
  - `"u8a64fnmekufv3j2om"`
- アクションのIDまたは識別子は、アクションの実行画面の編集ボタンの下から確認できます

![アクションIDまたは識別子の確認方法](/images/link_to_action/copy_id.png)

#### `openAndRun?: boolean` [](#openandrun-boolean)

- 移動時にアクションを実行するかどうかを指定します
- デフォルト値は `false` です

#### `params?: object` [](#params-object)

- 移動先のアクションへ渡すパラメータです。キーがパラメータ名、値がパラメータに渡す値のオブジェクトです。
- 例
  - `{ userID: 1 }`
- アクションのパラメータの入力値の種類ごとに渡せる値の型は以下です

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

[ページネーション](/action/transformer_script/pagination/) [linkToView](/action/transformer_script/builtin_functions/link_to_view/)
---
アクション

結果表示のカスタマイズ

組み込み関数

linkToActionGroup

# linkToActionGroup

`linkToActionGroup` 関数は、別のアクショングループへ移動できるリンクを表示できる関数です。

## 基本的な使い方 [](#基本的な使い方)

ユーザーの一覧を表示するアクションの実行結果に、ユーザーを編集するアクショングループへ移動できるリンクを表示する例を考えます。

移動先のアクショングループは、ユーザーの更新とユーザーの削除の2つのアクションが設定されたアクショングループです。

![linkToActionGroup関数の使用例の移動先のアクショングループ](/images/action_transform/builtin_functions/link_to_action_group_target_action_group.png)

### 使用例 [](#使用例)

以下がユーザーの一覧を表示するアクションに設定するスクリプトです。

```
const users = results[0].success;
return [
  {
    success: users.map((user) => ({
      名前: linkToActionGroup(
        user.name,
        // ユーザーの詳細を表示するアクションの識別子を設定
        "get-user-detail",
        // ユーザーの詳細を表示するアクションへ渡すパラメータの値を設定
        {
          id: user.id,
          name: user.name,
          email: user.email,
        },
      ),
      メールアドレス: user.email,
    })),
  },
];
```

### 表示結果 [](#表示結果)

![linkToActionGroup関数の使用例の表示結果](/images/action_transform/builtin_functions/link_to_action_group.png)

## 詳細なインターフェース [](#詳細なインターフェース)

```
function linkToActionGroup(
  title: string,
  actionGroupId: string,
  params?: object,
);
```

### 引数 [](#引数)

#### `title: string` [](#title-string)

- リンクとして表示するテキストです

#### `actionGroupId: string` [](#actiongroupid-string)

- 移動先のアクショングループIDです
- アクショングループIDは、アクショングループの詳細画面の編集ボタンの下から確認できます

![アクショングループIDの確認方法](/images/link_to_action_group/copy_id.png)

#### `params?: object` [](#params-object)

- 移動先のアクショングループのアクションへ渡すパラメータです。キーがパラメータ名、値がパラメータに渡す値のオブジェクトです。
- 例
  - `{ id: 1 }`
- アクションのパラメータの入力値の種類ごとに渡せる値の型は以下です

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

[linkToView](/action/transformer_script/builtin_functions/link_to_view/) [linkToURL](/action/transformer_script/builtin_functions/link_to_url/)
---
アクション

結果表示のカスタマイズ

組み込み関数

linkToURL

# linkToURL

`linkToURL` 関数は、任意のURLへ移動できるリンクを表示できる関数です。

## 基本的な使い方 [](#基本的な使い方)

以下は、ユーザーの公開プロフィールへのリンクを設定する例です。

### 使用例 [](#使用例)

```
const user = results[0].success;
return {
  ID: user.id,
  名前: user.name,
  プロフィール: linkToURL("開く", `https://example.com/users/${user.id}`),
};
```

### 表示結果 [](#表示結果)

![linkToURL関数の使用例の表示結果](/images/link_to_url/exec_result.png)

---

`linkToURL` 関数で表示したリンクのURLは、クリックすると新しいタブで開かれます。

## 詳細なインターフェース [](#詳細なインターフェース)

```
function linkToURL(title: string, url: string | URL);
```

### 引数 [](#引数)

#### `title: string` [](#title-string)

- リンクとして表示するテキストです。

#### `url: string | URL` [](#url-string--url)

- 移動先のURLです。

[linkToActionGroup](/action/transformer_script/builtin_functions/link_to_action_group/) [image](/action/transformer_script/builtin_functions/image/)
---
アクション

結果表示のカスタマイズ

組み込み関数

linkToView

# linkToView

`linkToView` 関数は、ビューの閲覧画面へ移動できるリンクを表示できる関数です。

## 基本的な使い方 [](#基本的な使い方)

ユーザーの一覧を表示するアクションの実行結果に、ユーザーの詳細を表示するビューへ移動できるリンクを表示する例を考えます。

移動先のユーザーの詳細を表示するビューは、
以下のようなURLパラメーターから取得したユーザーのIDを使ってユーザー情報を取得するアクションを実行して表示するビューです。

```
import { Heading, Text, VStack, ButtonGroup, Button } from "@chakra-ui/react";
import { useExecuteAction, useURLQueries } from "@basemachina/view";
 
const App = () => {
  // URLパラメーターを取得
  const query = useURLQueries();
  // アクションでユーザーの詳細情報を取得
  const { data, loading } = useExecuteAction("get-user-detail", {
    // アクションのパラメーターにユーザーIDを渡す
    userID: query.userID,
  });
  if (loading) return <LoadingIndicator />;
 
  const user = data?.results[0].success;
  return (
    <VStack spacing="1rem">
      <Heading>{user.name}</Heading>
      <VStack spacing="0.5rem">
        <Text>{user.email}</Text>
        <Text>{user.createdAt}登録</Text>
      </VStack>
      <ButtonGroup spacing="2">
        <Button colorScheme="blue">編集する</Button>
        <Button colorScheme="red">削除する</Button>
      </ButtonGroup>
    </VStack>
  );
};
 
export default App;
```

![linkToView関数の使用例の移動先のビュー](/images/action_transform/builtin_functions/link_to_view_target_view.png)

### 使用例 [](#使用例)

以下がユーザーの一覧を表示するアクションに設定するスクリプトです。

```
const users = results[0].success;
return [
  {
    success: users.map((user) => ({
      名前: linkToView(
        user.name,
        // ユーザーの詳細を表示するビューの識別子を設定
        "get-user-detail",
        // ユーザーの詳細を表示するビューのURLパラメーターに渡す値を設定
        { userId: user.id },
      ),
      メールアドレス: user.email,
    })),
  },
];
```

### 表示結果 [](#表示結果)

![linkToView関数の使用例の表示結果](/images/action_transform/builtin_functions/link_to_view.png)

---

表示されたリンクをクリックすると、ユーザーの詳細を表示するビューのページに移動します。

## 詳細なインターフェース [](#詳細なインターフェース)

```
function linkToView(title: string, viewId: string, params?: object);
```

### 引数 [](#引数)

#### `title: string` [](#title-string)

- リンクとして表示するテキストです。

#### `viewId: string` [](#viewid-string)

- 移動先のビューのIDまたは識別子です。
- 例
  - `"get-user-detail"`
  - `"u8a64fnmekufv3j2om"`

#### `params?: object` [](#params-object)

- 移動先のビューに渡すURLパラメーターです。キーがパラメータ名、値がパラメータに渡す値のオブジェクトです。

[linkToAction](/action/transformer_script/builtin_functions/link_to_action/) [linkToActionGroup](/action/transformer_script/builtin_functions/link_to_action_group/)
---
アクション

結果表示のカスタマイズ

ページネーション

# ページネーション

アクションの実行結果を取得する際に、ページネーションで結果を都度を設定できます。

ページネーションに必要な作業はページネーション時に利用するパラメーターを定義すること、そしてそのパラメーターを使って **結果表示のカスタマイズ** でページネーションの設定を行なうことです。

## ページネーションの種類 [](#ページネーションの種類)

ページネーションの方式にはいくつか種類があります。

- オフセット式ページネーション
- カーソル式ページネーション

データソースのインターフェースに合わせてどちらをご利用するかお選びください。

## オフセット式ページネーション [](#オフセット式ページネーション)

オフセット式ページネーションは、ページごとのデータ数と開始地点を使ってページネーションをするパターンです。

**パラメーターの設定**

オフセット式の場合、2つの数値パラメーターを用意します。

- オフセット値を入力するパラメーター
- ページサイズの値を入力するパラメーター

これらの値は前後のページへ移動するたびにベースマキナ上で値が更新されます。

下記の例ではSQLのアクションにオフセット式ページネーションのパラメーターを利用しています。

それぞれ `offset`, `limit` という値で取り扱っています。

![オフセットのパラメーター](/images/pagination/offset_parameters.png)

**ページネーション設定の紐づけ**

ページネーションの設定は **結果表示のカスタマイズ** から行なえます。

初期状態ではページネーションはしない設定が適用されています。

オフセット式ページネーションを選択すると、「ページサイズ」（ページごとのデータ数）の設定欄と、パラメーターを紐づける選択欄が表示されます。

さきほどパラメーターの設定で用意したパラメーターを選び、移動時に計算されたページネーション関連の値がアクションへ受け渡されるようにしてください。

![ページネーションの設定欄](/images/pagination/offset_set.png)

**ページネーションの動作**

ページネーションの設定を保存したあと、ページを再読み込みしてアクションを再実行するとページネーションが有効になった状態で結果を見られます。

結果一覧のテーブルの下部に、ページネーション用のカーソルが表示されます。左右の矢印を押すとパラメーターに渡される値が変わり、前後のページに移動できます。

オフセット形式の場合は現在のページ番号を保持しているため、それもカーソルとともに表示されます。

![ページネーションの設定欄](/images/pagination/offset_footer.png)

## カーソル式ページネーション [](#カーソル式ページネーション)

カーソル式ページネーションは、パフォーマンスに優れているページネーションの方法でデータの数が多いときによく使われ、Infinite ScrollやAPIなどで使用されることもあります。

なお、このページネーション方法を取る場合はユーザーの皆さまのAPI側の実装がカーソルの値を受け付けられることが前提です。

**パラメーターの設定**

カーソル式の場合は以下の2通りのどちらかの移動形式を取ります。

- 後方向に次々にページ移動する
- 前後のページに移動する

**後方向に次々にページ移動する場合**

次のページ移動に使うカーソル文字列を受け付ける値をテキストパラメーターとして用意します。

**前後のページに移動する場合**

上記に加えて、前方向のページ移動に使うカーソル文字列を受け付ける値をテキストパラメーターとして用意します。

![カーソルのパラメーター](/images/pagination/cursor_parameters.png)

**ページネーション設定の紐づけ**

ページネーションの設定は結果表示のカスタマイズから行なえます。

カーソル式ページネーションを選択すると、必須・任意両方の設定値の入力欄が表示されます。

後方向には必ずページ移動できることを想定しているので、以下の3つの値は必須です。

- 次ページの有無
- 次ページのカーソル
- 次ページのカーソルを入力するパラメーター

また、前方向にも移動したい場合は以下の3つの値も設定してください。

- 前ページの有無
- 前ページのカーソル
- 前ページのカーソルを入力するパラメーター

「次ページのカーソル」のように入力欄が2つ並んでいる設定箇所は、左側が入力値を計算するためのJavaScriptの入力欄、右側が現在表示されている実行結果から値を実際に抜き出してきたときの実行結果を表しています。

そのため、初期状態では右欄の表示が `null` になっています。

実際の設定例として、簡易的に30件ずつ値が返ってくるページネーションを想定します。

![カーソルのJSの設定欄](/images/pagination/cursor_exec.png)

次ページの有無には30件ちょうどで値が返ってくる場合であれば次のページが存在すると仮定してJavaScriptの条件文を設定します。

次に、「次ページのカーソル」にはカーソルとして配列の末尾のIDを指定しています。

このように毎回返ってくるレスポンスの内容を、次のページネーションの情報として受け渡すことができます。

なお、どのようなレスポンスをもとにしてJavaScriptを書けばよいか知りたい方は、 [結果の加工](/action/transformer_script/action_transform/) と同様に **結果の加工スクリプト** のタブの **加工前のデータ** をご確認ください。

最後に、JavaScript経由で取得されたカーソル文字列をどのパラメーターに紐づけるかを設定します。

さきほどパラメーターの設定で用意したパラメーターを選び、移動時に計算されたページネーション関連の値がアクションへ受け渡されるようにしてください。

![カーソルのパラメーターの設定欄](/images/pagination/cursor_set.png)

**ページネーションの動作**

ページネーションの設定を保存したあと、ページを再読み込みしてアクションを再実行するとページネーションが有効になった状態で結果を見られます。

オフセット式とは異なり、現在のページ番号を保持していないため、次ページの有無と前ページの有無のフラグ値に応じたカーソルの矢印のみが表示されます。

[結果の加工に使える値](/action/transformer_script/action_transform_parameters/) [linkToAction](/action/transformer_script/builtin_functions/link_to_action/)
---

---

---
管理設定

アクション実行の設定

IPホワイトリスト

# IPホワイトリスト

皆さまが自社で管理しているAPIやデータベースにアクセスする場合、ファイアーウォールの設定でベースマキナからのアクセスを許可していただく必要があります。

ベースマキナからのアクセスはIPアドレス `34.85.43.93` を通じて行なわれます。シェルスクリプトジョブからは `34.84.42.41` を通じて行なわれます。

データソースを登録する際には、このIPアドレスからのアクセスが許可された経路からリクエストがされる設定になっているかご確認ください。

[プロジェクトの作成・更新](/admin/user_management/project_settings/) [通知設定](/admin/action/notification/)
---
管理設定

アクション実行の設定

通知設定

# 通知設定

アクションの実行時やレビュー依頼などが発生したタイミングで送られるSlack・メール通知を設定できます。

通知設定は [プロジェクトの設定](/admin/user_management/project_settings/) の環境設定から適用できます。

環境ごとに通知先が異なるケースを想定しており、通知先を指定しない場合は通知が送られません。

![modal](/images/notification/modal.png)

## Slackの通知設定 [](#slackの通知設定)

### チャンネルIDの確認方法 [](#チャンネルidの確認方法)

Slack上でチャンネルの設定の画面内にチャンネルIDが表示されます。

![チャンネルID](/images/notification/channel_id.png)

### アクション実行時 [](#アクション実行時)

アクション実行時に誰がどのアクションを実行したのかをSlackに通知できます。

指定されたURLに対してアクション実行後にWebhookでリクエストを送信します。

![メッセージ内容](/images/notification/webhook_message.png)

### レビュー関連 [](#レビュー関連)

以下レビュー関連の操作をした際にSlackへ通知できます。

- レビュー依頼の作成時
- レビュー承認時
- レビュー却下時
- レビュー承認条件の完了時
- レビュー期限が迫ったとき

### エラー関連 [](#エラー関連)

定期実行ジョブによって自動で実行されたジョブが失敗したときに、エラーをSlackに送信できます。

定期実行ジョブは現在一部のお客さまに限定して公開している機能です。

## メールの通知設定 [](#メールの通知設定)

アクション実行やレビュー依頼があったときにメールで通知できます。

通知が不要な場合は画面中央部のトグルをOFFにしてください。

[IPホワイトリスト](/admin/action/ip_whitelist/) [監査ログ](/admin/security/audit_log/)
---
管理設定

環境

環境別の利用制限

# 環境別の利用制限

環境別の利用制限機能は、環境ごとに利用できるユーザー・グループを制限できる機能です。

利用制限を設定すると、設定したユーザー・グループ以外のユーザーはその環境にアクセスできなくなり、環境切り替えメニューにも表示されなくなります。

例えば、本番環境のデータを特定のユーザーだけに閲覧・操作させたい場合などに利用できます。

## 環境別の利用制限の設定方法 [](#環境別の利用制限の設定方法)

プロジェクト設定の環境設定から設定できます。

1. 右上のメニューから「設定」を選択します。
1. 左のサイドバーから「環境設定」を選択して環境一覧画面に移動します。
1. 環境一覧から利用制限を設定したい環境を選択します。

利用制限では以下の項目を設定します。

- 利用制限を有効にする
- 利用できるユーザー・グループ

### 利用制限を有効にする [](#利用制限を有効にする)

利用制限を有効にするかどうかを設定します。

### 利用できるユーザー・グループ [](#利用できるユーザーグループ)

利用制限を有効にすると、利用できるユーザー・グループを設定できます。

![環境別の利用制限の利用できるユーザー・グループの選択画面](/images/environment/access_control/accessible_actors.png)

---

すべての設定項目の入力が終わったら「保存」をクリックします。

## 利用制限されている環境にアクセスした場合 [](#利用制限されている環境にアクセスした場合)

利用制限されている環境にアクセスすると、以下のような画面が表示されます。

![環境別の利用制限された環境にアクセスした場合の画面](/images/403.png)

[環境別のアクション表示・非表示設定](/admin/environment/action_visibility/) [環境別のIPアドレス制限](/admin/environment/ip_restriction/)
---
管理設定

環境

環境別のアクション表示・非表示設定

# 環境別アクションの表示・非表示設定

アクション一覧画面で環境ごとに特定のアクションを非表示にする設定です。

例えば、開発環境でのデバッグ用のアクションを本番環境では非表示にするといった設定が可能です。

## 環境別のアクション表示・非表示設定の方法 [](#環境別のアクション表示非表示設定の方法)

アクション一覧画面の「環境別のアクションの表示・非表示設定」メニューから設定できます。

1. メニューから「アクション」を選択します。
1. アクション一覧画面の右上のメニューボタンをクリックします。
1. 「環境別のアクションの表示・非表示設定」画面に移動します。

![環境別のアクション表示・非表示設定の導線](/images/environment/action_visibility/link.png)

設定画面では、現在の環境での各アクションの表示・非表示を設定できます。

![環境別のアクション表示・非表示設定画面](/images/environment/action_visibility/setting.png)

メニューバーから環境を切り替えると他の環境の設定ができます。

![環境を切り替える](/images/environment/switch_environment.png)

非表示にされたアクションは、アクション一覧画面の「非表示のアクションを表示する」を有効にすると現在の画面に表示できます。
この設定は管理者でないユーザーでも有効にできます。

[環境別のデータソース設定](/admin/environment/datasource/) [環境別の利用制限](/admin/environment/access_control/)
---
管理設定

環境

環境別のデータソース設定

# 環境別のデータソース設定

データソースの情報は環境ごとに設定できます。

環境ごとに別の情報を設定すると、本番環境と開発環境で同じアクションを別のデータベースに対して実行するといったことができます。

## 環境別のデータソース設定の方法 [](#環境別のデータソース設定の方法)

データソースを作成すると作成時の環境にのみ設定が登録されます。

![データソースの作成](/images/environment/datasource/create.png)

環境を切り替えると別の環境の設定ができます。

![環境を切り替える](/images/environment/switch_environment.png)

環境への設定が完了すると「環境ごとの設定状況」にチェックマークがつきます。

![データソースへの環境の設定の登録](/images/environment/datasource/update.png)

## データソースに使用中の環境での設定がされていない場合 [](#データソースに使用中の環境での設定がされていない場合)

アクションに紐づくデータソースへ、現在使用中の環境の設定がされていない場合はアクションを実行できません。

![環境設定の存在しないアクション](/images/environment/datasource/action_unavailable.png)

[環境とは](/admin/environment/what_is_environment/) [環境別のアクション表示・非表示設定](/admin/environment/action_visibility/)
---
管理設定

環境

環境別のIPアドレス制限

# 環境別のIPアドレス制限

環境別のIPアドレス制限は、各環境ごとにベースマキナへのアクセスを一部のIPアドレスからのみに制限できる機能です。

制限はホワイトリスト形式です。

## 環境別のIPアドレス制限の設定方法 [](#環境別のipアドレス制限の設定方法)

プロジェクト設定のネットワーク設定から設定できます。

1. 左上の環境切り替えメニューからIPアドレス制限を設定したい環境を選択します。

![環境を切り替える](/images/environment/switch_environment.png)

1. 右上のメニューから「設定」を選択します。
1. 左のサイドバーから「ネットワーク設定」を選択してネットワーク設定画面に移動します。
1. IPアドレス制限を設定します。

利用制限では以下の項目を設定します。

- IPアドレス制限を有効にする
- アクセスできるIPアドレスの一覧
  - IPアドレス（CIDR形式）
  - 備考

許可するIPアドレスはCIDR表記による範囲指定となります。
具体的なIPアドレス1つのみを許可したいケースでは、CIDRのサブネットマスク部分を `/32` としてください。

![環境別IPアドレス制限の設定画面](/images/environment/ip_restriction/form.png)

---

すべての設定項目の入力が終わったら「保存」をクリックします。

## 企業アカウント単位でIPアドレス制限が設定されている場合 [](#企業アカウント単位でipアドレス制限が設定されている場合)

ベースマキナでは [企業アカウント単位でもIPアドレス制限が設定](/admin/security/ip_restriction/) できます。

企業アカウント単位と環境別のIPアドレス制限が両方設定されている場合、両方で許可されているIPアドレスからのみアクセスできます。

## 許可されていないIPアドレスでアクセスした場合 [](#許可されていないipアドレスでアクセスした場合)

IPアドレス制限が設定されている環境に許可されていないIPアドレスでアクセスすると、以下のような画面が表示されます。

![IPアドレス制限が設定されている環境に許可されていないIPアドレスでアクセスした場合の画面](/images/403.png)

[環境別の利用制限](/admin/environment/access_control/) [SQLのアクションで前のクエリの結果を使用する](/tips/sql_previous_result/)
---
管理設定

環境

環境とは

# 環境とは

環境とは、アクションの設定などを、本番環境・開発環境といった複数の環境で使い回し、切り替えて使うことができる機能です。

例えば、HTTP APIアクションの設定を複数環境で使い回したい場合、HTTP APIデータソースにそれぞれの環境でのホスト名などの接続情報を登録することで実現できます。

環境は、プロジェクトごとに任意の数を作成して切り替えることができます。

## 環境の作成・編集方法 [](#環境の作成編集方法)

環境は、プロジェクト設定画面の"環境設定"から作成・編集できます。

![環境設定](/images/environment/environment_setting.png)

環境を作成するには、右上の"追加"ボタンをクリックしてください。

![環境を作成する](/images/environment/create_environment.png)

ここでは、下記の項目を設定できます。

- 名前（必須）
  - 環境の名前です。使用中の環境名や、切り替え時の選択肢に表示されます。
- メニューバーの背景色（必須）
  - この環境を選択したときに表示される、ベースマキナの画面上部のメニューバーの背景色です。
- Slack Webhook URL（任意）
  - この環境でのSlack通知を行なう対象のWebhook URLです。
  URLは `https://hooks.slack.com/` から始まるフォーマットです。
  Webhook URLの取得方法については [こちら (opens in a new tab)](https://api.slack.com/messaging/webhooks) をご覧ください。
- アクション実行の通知先SlackチャンネルID（任意）
  - この環境でアクションが実行された際に通知されるチャンネルです。
  設定がなければSlack Webhook URLに設定されているデフォルトのチャンネルに通知されます。
  チャンネルIDの確認方法は [こちら](/admin/action/notification/)
- レビュー関連の通知先SlackチャンネルID（任意）
  - この環境でレビュー依頼などが実行された際に通知されるチャンネルです。
  設定がなければSlack Webhook URLに設定されているデフォルトのチャンネルに通知されます。

設定した内容は、環境一覧のメニュー内の導線から編集できます。

![環境を編集する](/images/environment/edit_environment.png)

すべてのプロジェクトには、初めから"初期環境"と言う名前の環境が存在していますが、この環境を編集して名前を変えることも可能です。

使わなくなった環境は、無効化できます。
無効化された環境は、環境切り替えのメニューに表示されなくなります。
ただし、無効化された設定は削除されず、同じ画面上で再び有効化できます。

## 環境の切り替え方法 [](#環境の切り替え方法)

メニューバーに表示されている環境名をクリックすると、切り替え可能な環境の一覧が表示されます。
ここから、使用したい環境を選択してください。
選択すると、メニューバーの背景色が環境に合わせて変化します。

![環境を切り替える](/images/environment/switch_environment.png)

環境を切り替えると、アクションの実行などが使用中の環境の設定で行なわれます。

## 環境に紐づく設定 [](#環境に紐づく設定)

環境には、下記の設定を紐づけることができます。

- [データソースの設定](/admin/environment/datasource/)
- [アクションの表示・非表示の設定](/admin/environment/action_visibility/)
- bridgeの設定
- Slack Webhook URLの設定
- [利用制限](/admin/environment/access_control/)

また、下記のデータは、環境に紐づいて作成されます。

- ジョブ
- レビュー依頼

例えば、"開発環境"で作成されたジョブの情報を、"本番環境"で閲覧する、といった操作はできない点にご注意ください。

## 監査ログ [](#監査ログ)

アクション実行の監査ログに、そのアクションを実行した環境の名前が記録されます。

詳細は [監査ログ](/admin/security/audit_log/) をご覧ください。

[IPアドレス制限](/admin/security/ip_restriction/) [環境別のデータソース設定](/admin/environment/datasource/)
---
管理設定

セキュリティ・監査

監査ログ

# 監査ログ

監査ログではベースマキナで行なわれた操作の記録を確認できます。

監査ログの記録方法には以下の2つがあります。

- 通常の監査ログ
- 監査ログストリーミング

通常の監査ログは、自動的に記録されます。特別な設定する必要はありません。
記録された監査ログの内容は、 [CSVファイルを出力](/admin/security/audit_log/csv_download/) して確認できます。

監査ログストリーミングは、アクションの引数などのセンシティブな情報を含めた監査ログを記録します。記録先として、お客さまご自身で管理しているクラウドストレージを指定いただきます。
詳しくは、 [監査ログのストリーミング](/admin/security/audit_log/streaming/) をご覧ください。

[通知設定](/admin/action/notification/) [CSVファイル出力](/admin/security/audit_log/csv_download/)
---
管理設定

セキュリティ・監査

[監査ログ](/admin/security/audit_log/)

CSVファイル出力

# 監査ログのCSVファイル出力

[監査ログ (opens in a new tab)](https://basemachina.com/settings/audit-log) のページから請求できます。

ログの保持期間は最大で1年間です。「ダウンロードリンクを請求する」をクリックすると請求したお客さまのメールアドレス宛に、監査ログが記録されたCSVファイルをダウンロードできるリンクが送信されます。

![ダウンロードリンクを請求する](/images/audit_log.png)

## 監査ログの内容 [](#監査ログの内容)

| 列名 | 列が出力される操作 | 内容 |
| --- | --- | --- |
| bmrn\_class\_id | アクションの実行、作成、更新、削除 | アクションのデータソースのID |
| bmrn\_class | アクションの実行、作成、更新、削除 | アクションのデータソースの種類 |
| bmrn\_resource | アクションの実行、作成、更新、削除 | アクションのデータソースの名前 |
| client\_ip | すべての操作 | 操作元のIPアドレス |
| context\_id | すべての操作 | 操作のID |
| message | すべての操作 | 操作の種類 |
| username | すべての操作 | 操作したユーザーの名前 |
| email | すべての操作 | 操作したユーザーのメールアドレス |
| project | プロジェクト内でのすべての操作 | 操作したプロジェクトの名前 |
| environment | 環境内でのすべての操作 | 操作した環境の名前 |
| action\_id | アクションの実行、作成、更新、削除 | アクションのID |
| action\_updated\_at | アクションの実行、作成、更新、削除 | アクションの作成日時 |
| action\_created\_at | アクションの実行、作成、更新、削除 | アクションの最終更新日時 |
| action\_name | アクションの実行、作成、更新、削除 | アクションの名前 |
| action\_display\_id | アクションの実行、作成、更新、削除 | アクションの識別子 |
| review\_id | レビュー依頼の作成、承認、却下 | レビュー依頼のID |
| review\_description | レビュー依頼の作成、承認、却下 | レビュー依頼の詳細 |
| review\_expires\_in | レビュー依頼の作成、承認、却下 | レビュー依頼の有効期限 |
| review\_created\_at | レビュー依頼の作成、承認、却下 | レビュー依頼の作成日時 |
| review\_setting | レビュー設定の作成、更新、レビュー依頼の作成、アクションの作成、更新 | レビュー設定のID,名前 |
| review\_setting\_id | レビュー設定の削除 | レビュー設定のID |
| environment\_review\_setting | レビュー設定の作成、更新 | 環境のID,環境の名前,承認できるユーザーの配列,承認できるグループの配列,自身のレビュー依頼を自動承認するか,承認者もアクションを実行可能にするか |
| datasource-id | データソースの作成、更新、削除 | データソースのID |
| datasource-name | データソースの作成、更新、削除 | データソースの名前 |
| datasource-class | データソースの作成、更新、削除 | データソースの種類 |
| view-id | ビューの作成、更新、削除 | ビューのID |
| view-display\_id | ビューの作成、更新、削除 | ビューの識別子 |
| view-name | ビューの作成、更新、削除 | ビューの名前 |
| project\_users | プロジェクトユーザーの作成、削除 | プロジェクトユーザーのID,名前,メールアドレスの配列 |
| user\_group\_assignments | プロジェクトユーザーのグループの更新 | プロジェクトユーザーのID,名前,メールアドレスとグループのID,名前,ロールの配列の配列 |
| target\_user-id | ユーザーの更新 | ユーザーのID |
| target\_user-name | ユーザーの更新 | ユーザーの名前 |
| target\_user-email | ユーザーの更新 | ユーザーのメールアドレス |
| is\_tenant\_admin | ユーザーの更新 | ユーザーが企業アカウントの管理者かどうか |
| target\_users | ユーザーの作成、削除、環境別利用制限の更新 | ユーザーのID,名前,メールアドレスの配列 |
| target\_user\_group-id | グループの作成、更新、削除 | グループのID |
| target\_user\_group-name | グループの作成、更新、削除 | グループの名前 |
| target\_user\_group-admin\_roles | グループの作成、更新、削除 | グループのロールの配列 |
| target\_users | ユーザーの作成、削除、環境別利用制限の更新 | ユーザーのID,名前,メールアドレスの配列 |
| target\_user\_groups | 環境別利用制限の更新 | グループのID,名前,ロールの配列の配列 |
| target\_environment-id | 環境別利用制限の更新 | 環境のID |
| target\_environment-name | 環境別利用制限の更新 | 環境の名前 |
| target\_environment-access\_control\_enabled | 環境別利用制限の更新 | 環境の利用制限が有効かどうか |
| timestamp | すべての操作 | 操作日時 |

配列はJSON形式の配列をCSVエンコードした形式です。

```
"[{""id"":""aaabbbccc"",""name"":""taro"",""email"":""taro@example.com""}]"
```

GoogleスプレッドシートにインポートするとJSON形式の配列で入力されます。

![配列をGoogleスプレッドシートにインポートした例](/images/audit_log/csv_to_gssheets.png)

[監査ログ](/admin/security/audit_log/) [ストリーミング](/admin/security/audit_log/streaming/)
---
管理設定

セキュリティ・監査

[監査ログ](/admin/security/audit_log/)

検索

# 監査ログの検索

通常の監査ログには検索機能がありません。出力されたCSVファイルをお手元で絞り込み検索していただく必要があります。

監査ログストリーミングの出力結果は、アクションを使って検索できます。

監査ログに対してSQL文を実行できるため、特定の条件に一致するログのみの検索や、ログの加工などが可能です。

- [Amazon S3にストリーミングした監査ログをAmazon Athenaアクションで検索する](/admin/security/audit_log/search/s3/)

※現在はAmazon S3にストリーミングした監査ログのみ対応しています。

[ストリーミング](/admin/security/audit_log/streaming/) [Amazon S3](/admin/security/audit_log/search/s3/)
---
管理設定

セキュリティ・監査

[監査ログ](/admin/security/audit_log/)

[検索](/admin/security/audit_log/search/)

Amazon S3

# Amazon S3に保存した監査ログをAmazon Athenaアクションで検索する

以下の手順で、監査ログストリーミングでAmazon S3に保存した監査ログをAmazon Athenaアクションで検索できます。

## 事前準備 [](#事前準備)

監査ログストリーミングに設定するバケットをAmazon S3で作成し、作成したバケットをベースマキナで監査ログのストリーミング先として設定します。

監査ログストリーミングの設定方法の詳細は [監査ログのAmazon S3へのストリーミング](/admin/security/audit_log/#amazon-s3%E3%81%B8%E3%81%AE%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%9F%E3%83%B3%E3%82%B0) をご参照ください。

## 1. Amazon Athenaデータソースを設定する

Amazon Athenaでデータベースを作成し、作成したデータベースをベースマキナのデータソースとして設定します。

データソースの設定方法の詳細は [Amazon Athenaデータソースの設定](/action/datasources/amazon_athena/datasource_setting/) をご参照ください。

## 2. Amazon Athenaでテーブルを作成する

Amazon Athenaで、2で作成したデータベースに1で作成したAmazon S3のバケットを使ってテーブルを作成します。

テーブルの例は [テーブルの例](/admin/security/audit_log/search/s3/#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E4%BE%8B) をご参照ください。

テーブルの作成方法の詳細はAmazon Athenaのドキュメントの [Athena でテーブルを作成する (opens in a new tab)](https://docs.aws.amazon.com/ja_jp/athena/latest/ug/creating-tables.html) をご参照ください。

## 3. Amazon Athenaアクションを設定する

1で設定したデータソースと、2で作成したテーブルに対してクエリを実行するSQL文を設定したアクションを作成します。

```
SELECT *
FROM your_table_name
-- 監査ログの種類を指定
WHERE audit_log_type = 'execute_action'
AND partition_date > '2025-01-01'
ORDER BY timestamp DESC
LIMIT 1000;
```

アクションの設定方法の詳細は [Amazon Athenaアクションの設定](/action/datasources/amazon_athena/action_setting/) をご参照ください。

## 4. アクションを実行する [](#4-アクションを実行する)

アクションを実行すると、設定したSQL文が実行され、監査ログのデータが取得できます。

![監査ログを取得するアクションの実行結果](/images/audit_log/athena_result.png)

さらに `{id=aaabbbcccdddeee, name=開発環境}` のような文字列のAthenaの `MAP` や `ARRAY` 型の列の値は、
以下のようにCAST関数でJSON型に変換するとJavaScriptのオブジェクトや配列などに変換できます。

```
SELECT
    CAST(action AS JSON) AS action,
    CAST(environment AS JSON) AS environment
FROM your_table_name
WHERE audit_log_type = 'execute_action'
AND partition_date > '2025-01-01'
ORDER BY timestamp DESC
LIMIT 1000;
```

![JSON型に変換した監査ログを取得するアクションの実行結果](/images/audit_log/athena_result_json.png)

詳細は [`ARRAY`, `ROW`, `MAP` 型の列の値をJavaScriptの配列やオブジェクトに変換する](/action/datasources/amazon_athena/data_type/#arrayrowmap%E5%9E%8B%E3%81%AE%E5%88%97%E3%81%AE%E5%80%A4%E3%82%92javascript%E3%81%AE%E9%85%8D%E5%88%97%E3%82%84%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B) をご参照ください。

---

## テーブルの例 [](#テーブルの例)

以下は監査ログの形式に合わせたテーブルの例です。

```
-- your_bucket_nameには監査ログストリーミングに設定したAmazon S3のバケットの名前を指定してください。
-- your_database_nameには1で作成したデータベースの名前を指定してください。
-- your_table_nameは任意の名前を指定してください。
CREATE EXTERNAL TABLE IF NOT EXISTS `your_database_name`.`your_table_name` (
    `timestamp` string,
    `message` string,
    `arguments` array<struct<name:string,value:string,type:string>>,
    `bmrn` struct<resource:string,class:string,classid:string>,
    `action` struct<id:string,name:string,display_id:string,created_at:string,updated_at:string>,
    `tenant_id` string,
    `client_ip` string,
    `context_id` string,
    `user` struct<id:string,name:string,email:string>,
    `project` struct<id:string,name:string>,
    `environment` struct<id:string,name:string>
)
PARTITIONED BY (
    `partition_date` string,
    `audit_log_type` string
)
ROW FORMAT SERDE
    'org.openx.data.jsonserde.JsonSerDe'
WITH SERDEPROPERTIES (
    'ignore.malformed.json' = 'FALSE',
    'dots.in.keys' = 'FALSE',
    'case.insensitive' = 'TRUE',
    'mapping' = 'TRUE'
)
STORED AS INPUTFORMAT
    'org.apache.hadoop.mapred.TextInputFormat'
OUTPUTFORMAT
    'org.apache.hadoop.hive.ql.io.HiveIgnoreKeyTextOutputFormat'
LOCATION
    's3://your_bucket_name/'
TBLPROPERTIES (
    'classification' = 'json',
    'projection.enabled' = 'true',
    'projection.partition_date.format' = 'yyyy-MM-dd',
    'projection.partition_date.interval' = '1',
    'projection.partition_date.interval.unit' = 'DAYS',
    'projection.partition_date.type' = 'date',
    'projection.partition_date.range' = '2023-01-01,NOW',
    -- もしパフォーマンスが悪い場合は'injected'から'enum'への変更をお試しください
    -- https://docs.aws.amazon.com/ja_jp/athena/latest/ug/partition-projection-supported-types.html
    'projection.audit_log_type.type' = 'injected',
    'storage.location.template' = 's3://your_bucket_name/${partition_date}/${audit_log_type}'
);
```

## 監査ログの種類ごとの列の定義 [](#監査ログの種類ごとの列の定義)

以下は監査ログの種類（ `audit_log_type` ）ごとの列の定義です。

使用する監査ログの種類に合わせて必要な列の定義をテーブルに追加してご使用ください。

### すべての操作で共通 [](#すべての操作で共通)

```
`timestamp` string,
`message` string,
`tenant_id` string,
`client_ip` string,
`context_id` string,
`user` struct<id:string,name:string,email:string>,
```

### プロジェクト内のすべての操作で共通 [](#プロジェクト内のすべての操作で共通)

```
`project` struct<id:string,name:string>
```

### 環境内のすべての操作で共通 [](#環境内のすべての操作で共通)

```
`environment` struct<id:string,name:string>
```

### `execute_action` [](#execute_action)

```
`arguments` array<struct<name:string,value:string,type:string>>,
`bmrn` struct<resource:string,class:string,classid:string>,
`action` struct<id:string,name:string,display_id:string,created_at:string,updated_at:string>,
```

### `create_review_request` [](#create_review_request)

```
`arguments` array<struct<name:string,value:string,type:string>>,
`action` struct<id:string,name:string,display_id:string,created_at:string,updated_at:string>,
`review_setting` struct<id:string,name:string>,
`review_request` struct<id:string,description:string,created_at:string,expires_in:string>,
```

### `approve_review_request`, `reject_review_request` [](#approve_review_requestreject_review_request)

```
`action` struct<id:string,name:string,display_id:string,created_at:string,updated_at:string>,
`review_request` struct<id:string,created_at:string,expires_in:string>,
`status` string,
```

### `execute_action_with_review_request` [](#execute_action_with_review_request)

```
`arguments` array<struct<name:string,value:string,type:string>>,
`action` struct<id:string,name:string,display_id:string,created_at:string,updated_at:string>,
`review_request` struct<id:string>,
```

### `create_datasource`, `update_datasource`, `delete_datasource` [](#create_datasourceupdate_datasourcedelete_datasource)

```
`datasource` struct<id:string,name:string,typeId:string>,
```

### `create_action`, `update_action` [](#create_actionupdate_action)

```
`bmrn` struct<resource:string,class:string,classid:string>,
`action` struct<id:string,name:string,display_id:string,created_at:string,updated_at:string>,
`review_setting` struct<id:string,name:string>,
```

### `delete_action` [](#delete_action)

```
`bmrn` struct<resource:string,class:string,classid:string>,
`action` struct<id:string,name:string,display_id:string,created_at:string,updated_at:string>,
```

### `create_view`, `update_view`, `delete_view` [](#create_viewupdate_viewdelete_view)

```
`view` struct<id:string,name:string,display_id:string>,
```

### `create_users`, `delete_users` [](#create_usersdelete_users)

```
`target_users` array<struct<id:string,name:string,email:string>>,
```

### `update_user` [](#update_user)

```
`target_user` struct<id:string,name:string,email:string>,
`is_tenant_admin` boolean,
```

### `create_project_users`, `delete_project_users` [](#create_project_usersdelete_project_users)

```
`project_users` array<struct<id:string,name:string,email:string>>,
```

### `create_user_group`, `update_user_group`, `delete_user_group` [](#create_user_groupupdate_user_groupdelete_user_group)

```
`target_user_group` struct<id:string,name:string,admin_roles:array<string>>,
```

### `assign_users_to_user_group` [](#assign_users_to_user_group)

```
`users` array<struct<id:string,name:string,email:string>>,
`user_group` array<struct<id:string,name:string,admin_roles:array<string>>>,
```

### `update_user_group_assignments` [](#update_user_group_assignments)

```
`user_group_assignments` array<struct<user:struct<id:string,name:string,email:string>,user_groups:array<struct<id:string,name:string,admin_roles:array<string>>>>>,
```

### `create_review_setting`, `update_review_setting` [](#create_review_settingupdate_review_setting)

```
`review_setting` struct<id:string,name:string>,
`environment_review_settings` array<struct<environment:struct<id:string,name:string>,self_approval_enabled:boolean,approver_execution_enabled:boolean,user_approval_conditions:array<struct<user:struct<id:string,name:string,email:string>>>,user_group_approval_conditions:array<struct<user_group:struct<id:string,name:string>,required_count:integer>>>>,
```

### `delete_review_setting` [](#delete_review_setting)

```
`review_setting_id` string,
```

### `update_environment_access_control` [](#update_environment_access_control)

```
`target_environment` struct<id:string,name:string,access_control_enabled:boolean>,
`target_users` array<struct<id:string,name:string,email:string>>,
`target_user_groups` array<struct<id:string,name:string,admin_roles:array<string>>>,
```

### `login_succeeded` [](#login_succeeded)

[すべての操作で共通](/admin/security/audit_log/search/s3/#%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E6%93%8D%E4%BD%9C%E3%81%A7%E5%85%B1%E9%80%9A) の列の定義のみです。

[検索](/admin/security/audit_log/search/) [SAML SSO](/admin/security/saml/)
---
管理設定

セキュリティ・監査

[監査ログ](/admin/security/audit_log/)

ストリーミング

# 監査ログのストリーミング

ベースマキナの画面上で操作を行なうたびに監査ログをストリーミングできます。

ストリーミングされる監査ログは通常ベースマキナ内に保存される監査ログの内容に加えて、アクション実行時の引数の入力値など、より詳細な情報を含んでいます。

また、有効期限もお客さまのストレージの設定に依存するため、より長期間にわたって監査ログを保存できます。

社内にのみ保存したい情報を含めてこまめに監査ログを自動で保存したい場合にお使いいただけます。

設定を行なうと、以下の `/2024-08-16/execute_action/2024-08-16T00:02:01.122Z.json` のように、日付、操作の種類、実行時間をキーとしたJSONファイルが保存されます。

![S3 Saved JSON](/images/audit_log/streaming_saved_json.png)

現在、ストリーミング先はAmazon S3および、Google Cloud
Storageのみ指定が可能です。他のストレージへのストリーミングをご希望の場合はご要望の連絡をいただければ幸いです。

## Amazon S3へのストリーミング

Amazon S3へのストリーミングを行なうには、以下の手順を行なってください。

1. Amazon S3のバケットを作成します。

![S3バケットの作成](/images/audit_log/streaming_s3_bucket.png)

1. Amazon S3のバケットに対してPutObject権限を持ったIAMユーザーの作成

ポリシーを定義して `PutObject` の権限を持ったIAMユーザーを作成し、S3バケットに監査ログをストリーミングする権限を用意します。

![PutObjectPolicy](/images/audit_log/streaming_policy.png)

1. アクセスキー・シークレットの発行

IAMユーザーのセキュリティ認証情報から「アクセスキーを作成」し、アクセスキーとシークレットキーを取得します。

![PutObjectPolicy](/images/audit_log/streaming_keygen.png)

1. ベースマキナの [監査ログ (opens in a new tab)](https://basemachina.com/settings/audit-log) のページから、Amazon S3へのストリーミングを設定します。

![S3 Streaming Form](/images/audit_log/streaming_s3_form.png)

## Google Cloud Storageへのストリーミング [](#google-cloud-storageへのストリーミング)

Google Cloud Storageへのストリーミングを行なうには、以下の手順を行なってください。

1. GCSのバケットを作成します。
1. GCSにファイルアップロードするためのサービスアカウントの作成、ロールの割り当てを行ないます。
  - サービスアカウントには、 `storage.objects.create` の権限が必要となります。
  - サービスアカウント作成の手順については、 [Google Cloud Storage連携](/action/datasources/gcs_integration/#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90) のドキュメントを参照ください。
1. サービスアカウントキーをダウンロードします。
1. ベースマキナの [監査ログ (opens in a new tab)](https://basemachina.com/settings/audit-log) のページから、GCSへのストリーミングを設定します。

![GCS Streaming Form](/images/audit_log/streaming_gcs_form.png)

[CSVファイル出力](/admin/security/audit_log/csv_download/) [検索](/admin/security/audit_log/search/)
---
管理設定

セキュリティ・監査

IPアドレス制限

# IPアドレス制限

ベースマキナへのアクセスを一部のIPアドレスからのみに制限できます。制限はホワイトリスト形式です。

- 許可するIPアドレス（CIDR表記）
- 詳細（IPアドレスの説明）

の組み合わせを複数登録できます。

許可するIPアドレスはCIDR表記による範囲指定となります。
具体的なIPアドレス1つのみを許可したいケースでは、CIDRのサブネットマスク部分を `/32` としてください。

![IPアドレス制限](/images/ip_restriction/form.png)

[こちら (opens in a new tab)](https://basemachina.com/settings/security) から設定が可能です。

IPアドレス制限の設定は企業アカウント管理者のみ行なえます。

指定のIPアドレス以外からのアクセスだった場合、同じ企業アカウントのユーザーであってもアクション実行をはじめとする各種画面には移動できません。

また [環境別のIPアドレス制限](/admin/environment/ip_restriction/) の設定も可能です。

企業アカウント単位と環境別のIPアドレス制限が両方設定されている場合、両方で許可されているIPアドレスからのみアクセスできます。

[SAML SSO](/admin/security/saml/) [環境とは](/admin/environment/what_is_environment/)
---
管理設定

セキュリティ・監査

SAML SSO

# SAML SSO

[こちら (opens in a new tab)](https://basemachina.com/settings/security) からSAMLの設定が可能です。

SAMLの設定は企業アカウント管理者のみ行なえます。

ACSのURLやエンティティIDはご利用中のIDプロバイダの指示に従ってご利用ください。

![saml設定画面](/images/saml/saml.png)

ご利用中のIDプロバイダで提供されているSSO URL、エンティティID、X.509証明書の内容をそれぞれコピーして設定を保存します。

設定後、SAML SSOを利用したベースマキナへの認証をご利用できます。

![IDプロバイダ設定画面](/images/saml/id_provider.png)

[Amazon S3](/admin/security/audit_log/search/s3/) [IPアドレス制限](/admin/security/ip_restriction/)
---
管理設定

組織やユーザーの設定

グループ

# グループ

「グループ」はプロジェクトユーザーをグルーピングして管理する機能です。

プロジェクトユーザーにグループを設定すると、以下ができるようになります。

- グループ単位でアクションの実行権限や承認条件などを設定する。
- グループに「開発者」などのロールを設定して、アクションや環境の設定ができるユーザーを制限する。

## グループ管理のページへ移動する [](#グループ管理のページへ移動する)

1. 右上のメニューから「設定」を選択してプロジェクト設定画面に移動します。
1. 左のサイドバーから「グループ管理」を選択してグループ管理画面に移動します。

![グループ管理ページ](/images/admin/user_management/project_group/groups.png)

## グループを追加する [](#グループを追加する)

1. 右上の「追加」ボタンからグループ作成画面に移動します。
1. 各項目を入力して保存します。

グループでは以下の項目を設定します。

- 名前
- ロール

ロールの詳細は「 [ロール](/admin/user_management/project_group/#%E3%83%AD%E3%83%BC%E3%83%AB) 」をご参照ください。

![グループの設定フォーム](/images/admin/user_management/project_group/setting_form.png)

## プロジェクトユーザーにグループを設定する [](#プロジェクトユーザーにグループを設定する)

1. プロジェクトユーザー一覧のユーザーのサブメニューから「グループを変更する」を選択して、グループ管理画面に移動します。

![プロジェクトユーザーの一覧](/images/admin/user_management/project_users/table.png)

1. グループを選択して保存します。

![プロジェクトユーザーのグループ設定](/images/admin/user_management/project_users/update_groups.png)

またグループの一覧から、特定のグループに所属するユーザーをまとめて変更できます。

1. グループ一覧のグループのサブメニューから「ユーザーを管理する」を選択して、グループのユーザー管理画面に移動します。

![グループ一覧のグループのサブメニュー](/images/admin/user_management/project_group/groups_submenu.png)

1. ユーザーを選択して保存します。

![グループのユーザー管理](/images/admin/user_management/project_group/group_user_manage.png)

## グループ単位で設定できる機能 [](#グループ単位で設定できる機能)

プロジェクトユーザーにグループを設定すると、各種機能がグループ単位で設定できるようになります。

- [アクションの実行権限](/action/action_permission/)
- [レビューの承認条件](/action/review/)
- [環境の利用制限](/admin/environment/access_control/)
- [ナビゲーション](/navigation/)

## ロール [](#ロール)

ロールを設定するとそのグループに所属するユーザーは、ロールに応じた管理権限を持ちプロジェクト内の設定ができるようになります。

以下がロールと各ロールが持つ管理権限の一覧です。

| 管理権限 | プロジェクト管理者 | プロジェクトユーザー管理者 | 開発責任者 | 開発者 |
| --- | --- | --- | --- | --- |
| プロジェクトユーザー管理 | ✅ | ✅ | ❌ | ❌ |
| グループ管理 | ✅ | ✅ | ❌ | ❌ |
| プロジェクトの削除 | ✅ | ❌ | ❌ | ❌ |
| プロジェクト名の変更 | ✅ | ❌ | ❌ | ❌ |
| 環境設定 | ✅ | ✅ | ❌ | ❌ |
| ナビゲーション設定 | ✅ | ✅ | ✅ | ✅ |
| アクション管理 | ✅ | ❌ | ✅ | ✅ |
| データソース管理 | ✅ | ❌ | ✅ | ✅ |
| ネットワーク設定 | ✅ | ❌ | ✅ | ✅ |
| 変数・シークレット設定 | ✅ | ❌ | ✅ | ✅ |
| マスターデータ取得設定の設定 | ✅ | ❌ | ✅ | ✅ |
| ビュー管理 | ✅ | ❌ | ✅ | ✅ |
| 実行権限設定 | ✅ | ❌ | ✅ | ❌ |
| レビュー設定の設定 | ✅ | ❌ | ✅ | ❌ |

### プロジェクト管理者 [](#プロジェクト管理者)

「プロジェクト管理者」は他のロールが持つすべての管理権限と「プロジェクト名の変更」「プロジェクトの削除」の管理権限を持つ特別なロールです。

「プロジェクト管理者」のロールは、プロジェクト作成時に自動で作成される「プロジェクト管理者」グループにのみ設定され、他のグループには設定できません。

### 管理権限のないプロジェクトユーザー [](#管理権限のないプロジェクトユーザー)

以下のプロジェクトユーザーは管理権限がないため、アクションの実行やレビューの依頼・承認などの操作のみができます。

- ロールのないグループのみに所属している
- グループに所属していない

[プロジェクトユーザーの管理](/admin/user_management/project_users/) [プロジェクトの作成・更新](/admin/user_management/project_settings/)
---
管理設定

組織やユーザーの設定

プロジェクトの作成・更新

# プロジェクトの作成・更新

## プロジェクトを追加する [](#プロジェクトを追加する)

新規プロジェクトの追加は [プロジェクト管理 (opens in a new tab)](https://basemachina.com/settings/projects) のページから行なえます。

「追加」をクリックします。

![プロジェクトを追加する](/images/project_settings/project_add.png)

追加したいプロジェクト名を入力して保存します。

![プロジェクトの名前を入力する](/images/project_settings/input_project_name.png)

新規プロジェクトの追加は企業アカウント管理者のみ行なえます。この機能は有料プランのお客さまのみご利用いただけます。

## プロジェクトの設定 [](#プロジェクトの設定)

プロジェクトの設定では以下の項目が設定できます。

- プロジェクト名
- 開発者向けメニューを表示しないグループ

![プロジェクトの設定画面](/images/project_settings/project_settings.png)

### プロジェクト名 [](#プロジェクト名)

プロジェクトの名前を設定できます。

### 開発者向けメニューを表示しないグループ [](#開発者向けメニューを表示しないグループ)

以下の開発者向けメニューへ移動する導線を非表示にするグループを設定できます。

![開発者メニューの一覧](/images/project_settings/developer_menu.png)

- アクション一覧
- ビュー一覧
- アクショングループ一覧
- レビュー依頼一覧

また特定の開発者メニューへ移動する導線のみを表示したい場合は、ナビゲーションをご利用ください。

遷移先の種類が「開発者メニュー」の要素を追加すると、アクション一覧画面などへの導線を表示できます。

ナビゲーションの設定方法は [「ナビゲーション」](/navigation/) をご参照ください。

[グループ](/admin/user_management/project_group/) [IPホワイトリスト](/admin/action/ip_whitelist/)
---
管理設定

組織やユーザーの設定

プロジェクトユーザーの管理

# プロジェクトユーザーの管理

## プロジェクトユーザー管理のページへ移動する [](#プロジェクトユーザー管理のページへ移動する)

1. 右上のメニューから「設定」を選択する
1. 左のサイドバーから「プロジェクトユーザー管理」を選択する

![プロジェクトユーザーの一覧](/images/admin/user_management/project_users/table.png)

## ユーザーをプロジェクトへ追加する [](#ユーザーをプロジェクトへ追加する)

企業アカウントに追加したユーザーをプロジェクトに追加します。

1. 「追加」ボタンからプロジェクトユーザー追加画面に移動します。
1. 追加するユーザーを選択して保存します。

※企業アカウントにユーザーを追加する方法は [「企業アカウントのユーザー管理」](/admin/user_management/tenant_add_new_user/) をご参照ください。

![プロジェクトユーザーの追加](/images/admin/user_management/project_users/create.png)

## プロジェクトユーザーにグループを設定する [](#プロジェクトユーザーにグループを設定する)

プロジェクトユーザーに [グループ](/admin/user_management/project_group/) を設定すると、プロジェクトユーザーの権限管理やグループ単位でのアクションの実行権限や承認条件などが設定できます。

1. プロジェクトユーザー一覧のユーザーのサブメニューから「グループを変更する」を選択して、グループ管理画面に移動します。

![プロジェクトユーザーの一覧](/images/admin/user_management/project_users/table.png)

1. グループを選択して保存します。

![プロジェクトユーザーのグループ設定](/images/admin/user_management/project_users/update_groups.png)

またグループの一覧から、特定のグループに所属するユーザーをまとめて変更できます。

1. グループ一覧のグループのサブメニューから「ユーザーを管理する」を選択して、グループのユーザー管理画面に移動します。

![グループ一覧のグループのサブメニュー](/images/admin/user_management/project_group/groups_submenu.png)

1. ユーザーを選択して保存します。

![グループのユーザー管理](/images/admin/user_management/project_group/group_user_manage.png)

[企業アカウントの管理者権限](/admin/user_management/tenant_role/) [グループ](/admin/user_management/project_group/)
---
管理設定

組織やユーザーの設定

企業アカウントのユーザー管理

# 企業アカウントのユーザー管理

[企業アカウント設定のユーザー管理画面 (opens in a new tab)](https://basemachina.com/settings/users) から企業アカウントのユーザーを管理できます。

![企業アカウントのユーザー管理画面](/images/admin/user_management/tenant_add_new_user/users.png)

## ユーザーを追加する [](#ユーザーを追加する)

ユーザーの追加では以下の項目を設定します。

- 名前
- メールアドレス
- 企業アカウントの管理者フラグ

![企業アカウントへのユーザー追加画面](/images/admin/user_management/tenant_add_new_user/create_users.png)

ユーザーを追加すると設定したメールアドレスに招待メールが送信されます。

![招待メール](/images/admin/user_management/tenant_add_new_user/invitation_mail.png)

招待メールを受け取ったユーザーがメールに記載されたリンクからパスワード設定画面に移動できます。

![パスワード設定画面](/images/admin/user_management/tenant_add_new_user/password_setting.png)

パスワードを設定してログインしたらユーザーの追加が完了です。

※Googleアカウントの場合はOAuthログインが可能です。

[ナビゲーション](/navigation/) [企業アカウントの管理者権限](/admin/user_management/tenant_role/)
---
管理設定

組織やユーザーの設定

企業アカウントの管理者権限

# 企業アカウントの管理者権限

「企業アカウントの管理者権限」を設定すると、企業アカウントのユーザー管理やセキュリティ設定などを特定のユーザーのみが設定できるように制限できます。

## 企業アカウントの管理者のみができること [](#企業アカウントの管理者のみができること)

企業アカウントの管理者のみ以下の操作ができます。

- 企業アカウント設定画面内の操作
  - 企業アカウントのユーザー管理
  - 企業アカウントのセキュリティ設定
  - 決済設定の確認
  - 監査ログの設定・出力
- プロジェクトの作成

## 企業アカウントのユーザーの権限の設定方法 [](#企業アカウントのユーザーの権限の設定方法)

[企業アカウント設定のユーザー管理画面 (opens in a new tab)](https://basemachina.com/settings/users) から各ユーザーの「企業アカウントの管理者権限」を設定できます。

![企業アカウントのユーザー管理画面](/images/admin/user_management/tenant_add_new_user/users.png)

[企業アカウントのユーザー管理](/admin/user_management/tenant_add_new_user/) [プロジェクトユーザーの管理](/admin/user_management/project_users/)
---
非推奨の機能

チェックボックスを使ったアクションへの移動

# チェックボックスを使ったアクションへの移動

アクションの実行結果をチェックボックスで選択できるフォームを表示して、別のアクションに選択結果を渡すことができます。

## チェックボックスの利用に使う関数 [](#チェックボックスの利用に使う関数)

チェックボックスを結果加工のカスタマイズで利用する際には、以下の3つの関数を使用します。

```
/**
 * checkboxInput は指定された名前と値、デフォルトのチェック状態をもとに、チェックボックスを作成します。
 */
function checkboxInput(
  name: string,
  value: string | number,
  checked: boolean,
): Checkbox;
```

```
/**
 * submitToActionForm は指定されたフォームの値を使って、アクションに遷移するためのフォームタグを作成します。
 * @param formId フォームの ID です。
 * @param actionId 遷移先のアクションのID、または識別子です。
 * @param params 必須ではありません。指定すると URL パラメータになります。
 * @param data フォームで括りたい、後続のコンポーネントの表示に必要なデータを指定します。
 */
function submitToActionForm(
  formId: string,
  actionId: string,
  params?: Record<string, string>,
  data: any,
): SubmitToActionForm;
```

```
/**
 * submitToAction は指定されたフォームID（アクションへの遷移用）の送信ボタンを作成する。
 */
function submitToActionButton(
  formId: string,
  label: string,
): SubmitToActionButton;
```

チェックボックスの表示に必要な関数が `checkboxInput` です。

別のアクションに移動したり、選択肢を渡すために必要な関数が `SubmitToActionForm`, `submitToActionButton` です。

## チェックボックスを表示する [](#チェックボックスを表示する)

実際にチェックボックスを使ってアクションへの移動を作っていきます。

ID付きのオブジェクトの配列にチェックボックスをつけて、複数のIDを選択して別のアクションに渡しながら移動するような例を取り上げます。

まず、チェックボックスは `checkboxInput` を使って表示できます。

オブジェクトのIDを複数選択して、 `ids` というパラメーター名で別のアクションに渡すような想定をして、以下のような関数を呼び出します。

![チェックボックスの表示スクリプト](/images/checkbox_input/checkbox_input_script.png)

関数が呼び出されるとUI上にはチェックボックスが表示されます。この時点では表示されるだけで選択候補を使って他の画面に移動できません。

![チェックボックスが表示されたUI](/images/checkbox_input/checkbox_input_view.png)

## チェックした候補を使って別のアクションに移動する [](#チェックした候補を使って別のアクションに移動する)

次に、別のアクションへの移動を設定します。

チェックボックスの値が別のアクションへの移動に使われるものだと宣言するために `submitToActionForm` を呼び出します。

![チェックボックスを使ったフォーム](/images/checkbox_input/checkbox_input_form.png)

次に、このフォームの入力値を使ってアクションへの移動イベントを発火されるために、 `submitToActionButton` を呼び出します。

呼び出す際に、どのフォームの値を移動に使うのか識別するため `sample_form` というフォームのIDを `submitToActionForm` と `submitToActionButton` で設定しています。

![アクションボタン](/images/checkbox_input/checkbox_input_button.png)

設定すると以下のような画面が表示されます。

![アクションボタンを使った画面](/images/checkbox_input/checkbox_input_button_view.png)

チェックボックスをクリックして選択候補を選び、ボタンを押すと別のアクションで `ids` というパラメーター名で値が受け渡されていることがわかります。

この時、複数の選択肢の値はカンマつなぎの文字列として移動先のアクションに渡されます。

![遷移先に渡される値](/images/checkbox_input/checkbox_input_arguments.png)

このようにして事前に複数の選択肢をチェックボックスで選び、値を別のアクションへ渡せるようになりました。

[(旧)JavaScriptアクション](/deprecated/javascript_action/) [システム値](/deprecated/system_parameter/)
---
非推奨の機能

(旧)JavaScriptアクション

# (旧)JavaScriptアクション

## (旧)JavaScriptアクションとは [](#旧javascriptアクションとは)

（旧）JavaScriptアクションは、任意のJavaScriptのコードをブラウザ上で実行するアクションです。

（旧）JavaScriptアクションの登録にはデータソースの設定が必要ないため、アクションの追加画面から直接登録できます。

## (旧)JavaScriptアクションの記述方法 [](#旧javascriptアクションの記述方法)

（旧）JavaScriptアクションの内容は、関数の中身として実行されます。

`return` 文を使って返した配列またはObjectがアクションの結果となります。

`{{ パラメータ名 }}` で、アクションに渡されたパラメータを変数として扱うことができます。

（旧）JavaScriptアクションは、Firestoreアクションと異なりAsyncFunctionとして実行されないため、トップレベルで `await` を使うことができません。

### 記述例 [](#記述例)

```
return {
  data: [{ id: 1 }, { id: 2 }, { id: 3 }],
};
```

#### 実行結果 [](#実行結果)

![(旧)JavaScriptアクションの実行結果](/images/deprecated_javascript_action/result.png)

[Claudeのプロジェクトでベースマキナのドキュメントを活用する](/tips/claude_project_integration/) [チェックボックスを使ったアクションへの移動](/deprecated/checkbox_input/)
---
非推奨の機能

システム値

# システム値

システム値はベースマキナ上の処理の結果（例：ページネーション設定時の情報）を値と紐づける際に設定するパラメーターの種類です。

ユーザー自身がシステム値を任意入力で変更することは想定されていません。

特に紐づけがされていない場合は空文字列として送信されます。

システム値を実際に利用する例として [ページネーション](/action/transformer_script/pagination/) の設定があります。

ぜひそちらのドキュメントもご確認ください。

![システム](/images/action_parameter/system.png)

[チェックボックスを使ったアクションへの移動](/deprecated/checkbox_input/)
---
よくある疑問点

ユーザーの権限

# ユーザーの権限

ベースマキナでは、各ユーザーの機能や情報へのアクセスを適切に制御するための各種権限が設定できます。

以下で、企業アカウントとプロジェクトのそれぞれの権限について詳しく説明します。

## 企業アカウントの権限 [](#企業アカウントの権限)

企業アカウントの権限は、以下の2種類で管理できます。

- 管理者
- 通常ユーザー

### 企業アカウントの管理者 [](#企業アカウントの管理者)

企業アカウントの管理者は、以下の操作ができます。

- 企業アカウント設定画面内の操作
  - 企業アカウントのユーザー管理： ユーザーの追加、削除、編集が可能です。
  - 企業アカウントのセキュリティ設定： SSO（シングルサインオン）やIPアドレス制限などの設定ができます。
  - 決済設定の確認： 決済設定の内容が確認できます。
  - 監査ログの設定・出力：企業アカウント内の操作履歴やログを確認できます。
- プロジェクトの作成

### 企業アカウントの通常ユーザー [](#企業アカウントの通常ユーザー)

企業アカウントの通常ユーザーは企業アカウント設定画面を閲覧できず、プロジェクトの権限に応じたプロジェクト内の操作のみができます。

## プロジェクトの権限 [](#プロジェクトの権限)

各プロジェクトの情報の閲覧やアクションの実行などの操作は、プロジェクトに追加されたユーザーのみできます。

たとえ企業アカウントの管理者であっても、プロジェクトに所属していなければプロジェクト内の情報は閲覧できません。

### プロジェクトの各設定の管理権限 [](#プロジェクトの各設定の管理権限)

プロジェクトの各種設定ができる管理権限は、プロジェクトユーザーの [グループ](/admin/user_management/project_group/) に「プロジェクトユーザー管理者」「開発者」などのロールを設定して管理できます。

ロールの設定されたグループに所属するプロジェクトユーザーは、ロールに応じたプロジェクト内の管理権限を持ち「アクション管理」「環境設定」などの設定ができるようになります。

以下がロールと各ロールが持つ管理権限の一覧です。

| 管理権限 | プロジェクト管理者 | プロジェクトユーザー管理者 | 開発責任者 | 開発者 |
| --- | --- | --- | --- | --- |
| プロジェクトユーザー管理 | ✅ | ✅ | ❌ | ❌ |
| グループ管理 | ✅ | ✅ | ❌ | ❌ |
| プロジェクトの削除 | ✅ | ❌ | ❌ | ❌ |
| プロジェクト名の変更 | ✅ | ❌ | ❌ | ❌ |
| 環境設定 | ✅ | ✅ | ❌ | ❌ |
| ナビゲーション設定 | ✅ | ✅ | ✅ | ✅ |
| アクション管理 | ✅ | ❌ | ✅ | ✅ |
| データソース管理 | ✅ | ❌ | ✅ | ✅ |
| ネットワーク設定 | ✅ | ❌ | ✅ | ✅ |
| 変数・シークレット設定 | ✅ | ❌ | ✅ | ✅ |
| マスターデータ取得設定の設定 | ✅ | ❌ | ✅ | ✅ |
| ビュー管理 | ✅ | ❌ | ✅ | ✅ |
| 実行権限設定 | ✅ | ❌ | ✅ | ❌ |
| レビュー設定の設定 | ✅ | ❌ | ✅ | ❌ |

管理権限のないプロジェクトユーザーは、アクションの実行やレビューの依頼・承認などの操作のみができます。

[トラブルシューティング](/faq/troubleshooting/) [bridgeとは](/faq/what_is_bridge/)
---
よくある疑問点

初回セットアップの流れ

# 初回セットアップの流れ

ベースマキナを実際にご利用の際には、以下のような手順をたどるとよりスムーズにご利用いただけます。

## 1. bridgeの設定 [](#1-bridgeの設定)

もしbridgeを利用して、より安全に社内のデータソースへのアクセスを試みる場合は、
自社のVPC内にbridgeを設置してください。bridgeはコンテナイメージを配布しておりますので、自由に配置できます。

詳しい設定方法（必要な環境変数など）はbridgeの設定画面で確認できます。

ベースマキナのサーバーがbridgeを通じてデータソースアクセスできるように固定IPからのアクセスを許可してください。

設定が保存できない場合は、トラブルシューティングを参考にしてください。
もし解決しない場合は、お気軽にサポートにお問い合わせください。

## 2. データソースの設定 [](#2-データソースの設定)

bridgeを通じてアクセスするデータソースを設定してください。

## 3. アクションの設定 [](#3-アクションの設定)

データソースを呼び出すアクションを設定してください。

もしアクションの実行に失敗する場合は、トラブルシューティングを参考にしてください。もし解決しない場合は、お気軽にサポートにお問い合わせください。

## 4. 他のユーザーの追加 [](#4-他のユーザーの追加)

企業アカウント設定画面から必要なユーザーを招待して、その後プロジェクトに追加してください。

### 4.1. サポートアカウントの設定 [](#41-サポートアカウントの設定)

ベースマキナからのサポートが必要な場合、企業アカウント設定画面のユーザー管理からサポートアカウントを追加できます。原因調査時にベースマキナ側からお手伝いできます。

## 5. 組織にあった権限設定（グループの作成） [](#5-組織にあった権限設定グループの作成)

プロジェクトの設定から、承認条件設定やアクション実行権限の設定に使う権限のグループ設定が行なえます。組織内の事情にあった形で、職種や担当業務などに応じた権限設定をしてださい。

[HTTP API/gRPCのデータソースを登録する](/start_guide/datasource/http_or_grpc_datasource/) [トラブルシューティング](/faq/troubleshooting/)
---
よくある疑問点

用語集

# 用語集

こちらは、ベースマキナ上で登場する用語について解説するページです。

### ベースマキナの設定に必要なもの [](#ベースマキナの設定に必要なもの)

| 用語 | 意味・用途 |
| --- | --- |
| 企業アカウント | お客さまの契約アカウントの単位。基本的に１事業者様ごとに１企業アカウントとして扱われます。 |
| プロジェクト | 企業アカウント内で作ることができるワークスペースの単位。別プロジェクトの設定は許可されたユーザーしか閲覧・編集することができません。 |
| 環境 | プロジェクト内で作ることができる運用環境の単位。環境ごとに、データソース・レビュー設定などの設定が切り替わります。「本番環境」「開発環境」などの環境を使い分けることができます。 |
| グループ | プロジェクトユーザーのグループ。グループ単位でのアクションの実行権限やレビューの承認条件の設定も可能です。 |
| プロジェクトユーザー | プロジェクトに追加されたユーザー。 |

### アクション [](#アクション)

| 用語 | 意味・用途 |
| --- | --- |
| アクション | ベースマキナ上に登録されたビジネスロジック。SQLやAPIコールごとに１アクションとして扱います。 |
| アクショングループ | 複数のアクションを束ねて１つの画面で呼び出しができるようにしたもの。 |
| ジョブ | 実行が終了するまで待ち続ける必要がない、非同期で実行されるアクションのこと。 |

[bridgeとは](/faq/what_is_bridge/) [MySQL](/action/datasources/mysql_integration/)
---
よくある疑問点

トラブルシューティング

# トラブルシューティング

## bridgeの接続設定が保存できない [](#bridgeの接続設定が保存できない)

bridgeの接続設定が保存できない場合、疎通確認に失敗している可能性が高いです。原因として以下の項目を確認してください。

- ベースマキナの固定IPからのアクセスが許可されていない
- bridgeのURLが間違っている
- SSL設定が有効になっていない
- 設定されている環境変数に誤りがある
- 前段に立っているロードバランサーとbridgeの間でアクセスが途切れている
  - インスタンスのヘルスチェックができておらず、疎通できていない

#### ※bridgeをコンテナ内から調査したい場合 [](#bridgeをコンテナ内から調査したい場合)

コンテナイメージは調査のしやすさを考慮して [alpine (opens in a new tab)](https://hub.docker.com/_/alpine) イメージをベースに作成しています。

```
$ docker pull gcr.io/basemachina/bridge:latest
$ docker run -it --entrypoint=/bin/sh gcr.io/basemachina/bridge:latest
/ $
```

コンテナ内からの調査の1つとして、正しくDNSの名前解決が行なえるか確認する場合は `nc` コマンドが役に立ちます。

```
/ $ nc -vz example.com 80
example.com (93.184.216.34:80) open
/ $ nc -vz example.com 443
example.com (93.184.216.34:443) open
```

利用可能なコマンド一覧を取得するにはシェル上でタブキーを2回入力します。

```
/ $ # タブキーを二回タイプする
.                       fdflush                 microcom                sh
:                       fdisk                   mkdir                   sha1sum
[                       fg                      mkdosfs                 sha256sum
# ...
```

## アクションの実行に失敗する [](#アクションの実行に失敗する)

アクションの実行に失敗する場合、以下の要素で失敗しているか調べる必要があります。

- ベースマキナのサーバー
- ロードバランサー
- bridge
- データソース

以下の例を参考に、問題の原因を特定してください。

- データソースの接続情報の設定ミス
- bridgeの接続設定に失敗している
- bridgeの接続設定が存在しない環境で、社内のデータソースを呼び出そうとしている
- bridgeからデータソースへのトラフィックが許可されていない
- タイムアウトしている
  - タイムアウトの原因になりやすい箇所は次の通りです
        - bridgeの設定画面で設定されたタイムアウト期限
        - ロードバランサーからbridgeへのタイムアウト期限
        - bridgeからデータソースのタイムアウト期限
        - データソースの設定画面で設定されたタイムアウト期限
- リクエスト内容が不正
  - パラメーターの利用方法に誤りがあり、リクエストの情報がプログラムによって解釈不可能な値になっている

[初回セットアップの流れ](/faq/howto_setup/) [ユーザーの権限](/faq/authorities/)
---
よくある疑問点

bridgeとは

# bridgeとは

![bridgeの概念図](/images/agent.png)

bridgeは、ベースマキナからお客さまが持つデータベースやAPIへアクセスする際に中継する、認証機能付きのゲートウェイのことを指します。

![bridgeの設定ページ](/images/agent_setting_page.png)

## bridgeの役割 [](#bridgeの役割)

bridgeはアクションを実行する際に必ず中継するAPIですが、セキュリティの観点で非常に重要な役割を担っています。

- 認証
- ネットワークセキュリティの担保

### 認証 [](#認証)

bridgeを起動する際には、いくつかの環境変数を設定する必要があります。

bridgeはそのなかで指定される変数と、ベースマキナ上から送信されたリクエストのヘッダーに含まれる認証情報を照合し、正規のリクエストかどうかを検証します。

### ネットワークセキュリティの担保 [](#ネットワークセキュリティの担保)

当bridgeは、ベースマキナ社がホスティングするbridgeのサーバーをご利用いただくか、お客さま自身のクラウドまたはオンプレミス環境にbridgeを設置していただくかの2種類の形での設置方法をお選びいただけます。

ベースマキナのAPIからのアクション実行リクエストは、固定IPを介して送信されます。そのため、固定IPからのアクセスだけを通すためにファイアーウォールの設定をしていただくと最低限のアクセス制限を行なうことができます。

さらにお客さま自身でbridgeを設置した場合には、セキュリティグループなどの設定をbridgeに対して適用することで、ベースマキナのAPIが非公開のデータベースやAPIに直接アクセスしないように多重にセキュリティを強化できます。

## bridgeのセットアップ [](#bridgeのセットアップ)

### 接続設定 [](#接続設定)

bridgeへの接続はベースマキナからHTTP(HTTPS)を用いて確立されます。

bridgeの接続設定は環境ごとに保存されます。
選択中の環境以外で接続情報を保存したい場合は、環境を切り替えてから設定を保存してください。

### bridgeの設定 [](#bridgeの設定)

コンテナイメージを以下で配布しております。対応アーキテクチャはlinux/amd64および、linux/arm64です。

- [ghcr.io/basemachina/bridge (opens in a new tab)](https://ghcr.io/basemachina/bridge)
- [gcr.io/basemachina/bridge (opens in a new tab)](https://gcr.io/basemachina/bridge)
- [public.ecr.aws/basemachina/bridge (opens in a new tab)](https://gallery.ecr.aws/basemachina/bridge)

api.basemachina.comへのリクエストを自社のネットワーク設定で許可してください。
bridgeで行なわれるリクエストの検証に必要な公開鍵を取得するためにアクセスします。

任意で次の環境変数をご利用いただけます。

```
# 認可処理に利用する公開鍵を更新する間隔です。
# 時間として指定します。有効な単位は "ns", "us" (or "µs"), "ms", "s", "m", "h" です。
export FETCH_INTERVAL=1h
# 認可処理に利用する公開鍵を更新するタイムアウトです。
# 時間として指定します。有効な単位は "ns", "us" (or "µs"), "ms", "s", "m", "h" です。
export FETCH_TIMEOUT=10s
# bridge を HTTP としてサーブするために利用します。4321 以外を指定してください。
# 文字列として指定します。
export PORT=8080
# 認可処理に利用します。設定されると指定されたテナント ID 以外からのリクエストを拒否します。
# 文字列として指定します。
# TENANT_IDは設定ページよりご確認ください。
export TENANT_ID=XXXXXX
```

### 推奨される動作環境 [](#推奨される動作環境)

前述の通り、bridgeはコンテナイメージを提供しています。それらを用いてbridgeを起動する場合、以下の環境でのセットアップを推奨します。

- AWSの場合： ECS Fargate
- GCPの場合： Cloud Run

他にも起動方法はございますが、多くのお客さまが上記の環境でbridgeを利用されています。

### ヘルスチェック [](#ヘルスチェック)

bridgeを起動するインスタンスのヘルスチェックを行ないたいケースを想定して、 `/ok` というGETメソッドのエンドポイントを用意しております。

こちらのパスにリクエストを投げていただくことで、bridgeが正常に動作しているかを確認できます。

### IPのホワイトリスト [](#ipのホワイトリスト)

ベースマキナから接続を許可するために以下のIPアドレスをホワイトリストに追加してください。

`34.85.43.93`

### 接続チェック [](#接続チェック)

「bridgeへの接続設定」と同じネットワーク設定画面上で、接続チェックを行なうことができます。
お使いのデータベースやAPIへ、bridgeを経由してTCPで接続できるか確認したい場合にご利用ください。
プライベートなDNSによる名前解決が意図通りに行なわれるかの確認などにご活用いただけます。

接続チェックは、 [ネットワーク設定を行なう権限を持つユーザー](/faq/authorities/#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%90%84%E8%A8%AD%E5%AE%9A%E3%81%AE%E7%AE%A1%E7%90%86%E6%A8%A9%E9%99%90) のみが実行できます。

![bridgeからの接続チェックを行なうフォーム](/images/faq/what_is_bridge/bridge_ping.png)

[ユーザーの権限](/faq/authorities/) [用語集](/faq/terminology/)
---
ナビゲーション

# ナビゲーション

ナビゲーションはよく使うページをサイドバーに設定し簡単にアクセスできる機能です。

ナビゲーションはプロジェクトごとに設定でき、プロジェクト内で複数のナビゲーションを用意して用途ごとに使い分けられます。

![ナビゲーションのサイドバー](/images/navigation/sidebar.png)

## ナビゲーションの設定方法 [](#ナビゲーションの設定方法)

ナビゲーション一覧画面からナビゲーションの追加、更新、削除ができます。

1. 右上のメニューから「設定」を選択します。
1. 左のサイドバーから「ナビゲーション」を選択してナビゲーション一覧画面に移動します。

![ナビゲーション一覧画面](/images/navigation/setting_sidebar.png)

### ナビゲーションを追加する [](#ナビゲーションを追加する)

右上の「追加」ボタンをクリックして作成画面に移動します。

ナビゲーションでは以下の項目を設定します。

- ナビゲーションの名前
- ナビゲーションのグループ
- ナビゲーションの要素
- ログイン時に表示する初期画面
- ナビゲーションを利用できるグループ

![ナビゲーション作成画面](/images/navigation/create.png)

#### ナビゲーションの名前 [](#ナビゲーションの名前)

サイドバーに表示されるナビゲーションの名前を設定します。

#### ナビゲーションのグループ [](#ナビゲーションのグループ)

ナビゲーションの要素は任意のグループを設定でき、グループごとに階層が分かれてサイドバーに表示されます。

![ナビゲーションのサイドバーの階層の説明](/images/navigation/sidebar_hierarcy.png)

#### ナビゲーションの要素 [](#ナビゲーションの要素)

ナビゲーションの要素には以下の項目を設定できます。

- 要素の名前
- 遷移先の種類
- 要素のグループ

##### 要素の名前 [](#要素の名前)

サイドバーに表示される要素の名前を設定します。

##### 遷移先の種類 [](#遷移先の種類)

以下から要素の種類を選択します。

- アクション
- ビュー
- 開発者メニュー

##### 要素のグループ [](#要素のグループ)

要素のグループを設定します。

---

さらに遷移先の種類によって以下の項目を設定できます。

- 遷移先の種類が「アクション」の場合
  - 使用するアクション
  - パラメータのデフォルト値
  - 遷移時に自動でアクションを実行する
- 遷移先の種類が「ビュー」の場合
  - 使用するビュー
  - パラメータのデフォルト値
- 遷移先の種類が「開発者メニュー」の場合
  - 遷移先

##### 使用するアクション/ビュー [](#使用するアクションビュー)

遷移先のアクション/ビューを選択します。

##### パラメータのデフォルト値 [](#パラメータのデフォルト値)

遷移時のアクション、ビューのパラメータにデフォルト値を設定できます。

##### 遷移時に自動でアクションを実行する [](#遷移時に自動でアクションを実行する)

遷移時にアクションを自動で実行するか設定できます。

##### 遷移先 [](#遷移先)

以下から開発者メニューの遷移先を選択します。

- アクション一覧画面
- ビュー一覧画面
- レビュー依頼一覧画面
- アクショングループ一覧画面

![ナビゲーションの要素の作成画面](/images/navigation/create_item.png)

**パラメータのデフォルト値** を設定すると、遷移先への移動時にデフォルト値が入力された状態でフォームが表示されます。

**遷移時に自動でアクションを実行する** を設定すると移動時にアクションが実行され、実行結果のページが表示されます。

なお **パラメータのデフォルト値** が設定されている場合は、その値を使ってアクションが実行されます。

#### ログイン時に最初に表示する画面 [](#ログイン時に最初に表示する画面)

このナビゲーションを使用しているユーザーのログイン時に表示する画面を設定できます。

#### ナビゲーションを利用できるグループ [](#ナビゲーションを利用できるグループ)

ナビゲーションを利用できるグループを制限できます。
選択していないグループのユーザーのサイドバーにはこのナビゲーションは表示されません。

---

すべての設定項目の入力が終わったら「保存」をクリックします。

### ナビゲーションを更新する [](#ナビゲーションを更新する)

ナビゲーション一覧から更新したいナビゲーションをクリックすると、更新画面に移動できます。

ナビゲーションの追加時と同様に設定項目を編集して「保存」をクリックします。

### ナビゲーションを削除する [](#ナビゲーションを削除する)

ナビゲーション一覧から削除したいナビゲーションにカーソルをホバーし、右端に表示されるボタンをクリックして「削除する」をクリックします。

![ナビゲーションの削除画面](/images/navigation/delete.png)

### ナビゲーションを並べ替える [](#ナビゲーションを並べ替える)

ナビゲーション一覧から「並べ替え」をクリックすると、ナビゲーションの並べ替えができます。

[UIビルダーとは](/uibuilder/what_is_uibuilder/) [企業アカウントのユーザー管理](/admin/user_management/tenant_add_new_user/)
---
スタートガイド

データソースへの接続設定をする

開発環境と本番環境を登録する

# 開発環境と本番環境を登録する

ベースマキナには [環境を作成する機能](/admin/environment/what_is_environment/) が用意されています。

機能の詳細は上記のドキュメントをご覧ください。

任意の数の環境を作成してデータソースの接続情報をはじめとした設定を切り替えられます。

ここでは開発環境と本番環境を作成しましょう。

## 環境を登録する [](#環境を登録する)

このとき、使用中の環境がどれかを目視確認しやすいように、テーマカラーを設定できます。

登録後、画面左上のメニューで環境が切り替えられることを確認しましょう。

これで各環境に対応した設定を登録できるようになりました。

## 環境に利用制限をつける [](#環境に利用制限をつける)

環境を作成・更新する際に [利用制限](/admin/environment/access_control/) を設定できます。

例えば開発環境はエンジニアのグループだけがアクセスできるようにして、本番環境は全員がアクセスできるといった設定が可能です。

他にも「開発環境は全員アクセス可能だが、本番環境は運用者のCSやエンジニアだけがアクセス可能」といった設定でも良いでしょう。

[サンプルのアクションを実行する](/start_guide/sample_action/) [ファイアウォールを設定する](/start_guide/datasource/firewall_setting/)
---
スタートガイド

データソースへの接続設定をする

ファイアウォールを設定する

# ファイアウォールを設定する

ベースマキナからお客さまが設定されたデータソースへのアクセスは固定のIPアドレスを通じて行なわれます。

検証段階で厳格さが求められない場合、ファイアウォールの設定は不要です。

一方、本番運用で社内のデータソースへアクセスする際にはアクセス元の制限を推奨しています。

[IPホワイトリスト](/admin/action/ip_whitelist/) を参考に、ファイアウォールの設定を行なってください。

[開発環境と本番環境を登録する](/start_guide/datasource/environment/) [HTTP API/gRPCのデータソースを登録する](/start_guide/datasource/http_or_grpc_datasource/)
---
スタートガイド

データソースへの接続設定をする

HTTP API/gRPCのデータソースを登録する

# HTTP API/gRPCのデータソースを登録する

環境を作成したら、データソースを登録しましょう。

すでにお持ちのAPIが外部に公開されていたり、SaaSのAPIと連携してデータを更新・取得できるケースであれば、後述する [bridge](/faq/what_is_bridge/) をセットアップする手間が不要なケースもあるため、手軽に始められます。

そうした前提を踏まえて、まずはHTTP API/gRPCのデータソースを登録してみましょう。

## 接続情報の登録 [](#接続情報の登録)

データソースの種類の中からHTTP APIまたはgRPCを選択します。

接続先のURLや共通のヘッダー情報を入力する欄が表示されるので、入力しましょう。

詳細な接続情報は [HTTP API](/action/datasources/httpapi_integration/) や、 [gRPC](/action/datasources/grpc_integration/) のページをご覧ください。

認証が必要なAPIでは [環境ごとの変数・シークレット](/action/parameter/vars_secrets/) に設定したAPIキーをヘッダーに含めたり、 [認証用アクション](/action/datasources/httpapi_integration/#%E8%AA%8D%E8%A8%BC%E7%94%A8%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A) を使った動的なトークン取得なども可能です。

[ファイアウォールを設定する](/start_guide/datasource/firewall_setting/) [初回セットアップの流れ](/faq/howto_setup/)
---
スタートガイド

サンプルのアクションを実行する

# このページで説明していること

ベースマキナがサンプルとして用意したアクションを使って、ベースマキナの基本的な動作を説明します。

## アクションについて [](#アクションについて)

ベースマキナではアクションのパラメーター（入力値）の設定を使ってフォームが生成されます。

結果の型に応じて自動で画面が用意されるため、アクションの実行画面をそのまま管理画面としてお使いいただけます。

## サンプルのアクションを開く [](#サンプルのアクションを開く)

プロジェクトにはサンプルのデータソースとアクションが用意されています。

ここでは、ベースマキナがサンプルとして用意しているアクションを開いて実行してみましょう。

画面上部のメニューバーからアクションのアイコンをクリックし、「【サンプル】ユーザーの一覧取得」を実行してみましょう。

アクションの画面を開くと実行ボタンが表示されます。

## サンプルのアクションを実行する [](#サンプルのアクションを実行する)

実行ボタンを押すとサンプル用のHTTP APIのデータソースにGETのリクエストが送信されます。

そしてリクエストが成功すると画面上にレスポンス内容が表示されますが、このとき配列のデータは自動でテーブルの形に整形されて表示されます。

この画面では実行画面にボタンしか表示されていませんが、パラメーターを設定すればそれぞれの値の型に対応したフィールドを含んだフォームが用意されます。

# まとめ

このページでは、ベースマキナがサンプルとして用意しているアクションを開いて実行することで、ベースマキナの基本的な動作を説明しました。

データの変更・読み込みの両面で、まずはアクションを使用して簡素に管理画面化することをおすすめいたします。

# 関連するドキュメント

- [HTTP API](/httpapi_integration/)
- [パラメーターとは](/action/parameter/action_parameter/)

[スタートガイドとは](/start_guide/what_is_start_guide/) [開発環境と本番環境を登録する](/start_guide/datasource/environment/)
---
スタートガイド

スタートガイドとは

# スタートガイドとは

スタートガイドは、ベースマキナにはじめて触れるお客さまへ主要な機能を体系的に説明するコンテンツです。

順番に従ってお読みいただくことで機能をまんべんなく知っていただき、セットアップの助けになることを目的としています。

## スタートガイドの目次 [](#スタートガイドの目次)

- [サンプルのアクションを実行する](/start_guide/sample_action/)
- [データソースへの接続設定をする](/start_guide/datasource/environment/)
- （作成中）アクションを使って画面を作る
- （作成中）画面移動を設定する
- （作成中）必要なメンバーを招待する
- （作成中）安全に実行できるようにする
- （作成中）時間がかかる処理を実行する
- （作成中）複雑な画面をビューで作成する

[ベースマキナとは](/) [サンプルのアクションを実行する](/start_guide/sample_action/)
---
便利な使い方

Claudeのプロジェクトでベースマキナのドキュメントを活用する

# Claudeのプロジェクトでベースマキナのドキュメントを活用する

[Claude (opens in a new tab)](https://claude.ai/) の [プロジェクト機能 (opens in a new tab)](https://support.anthropic.com/ja/articles/9517075-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B) を使用して、ベースマキナのドキュメントを効率的に活用する方法を説明します。

## Claudeのプロジェクトとは [](#claudeのプロジェクトとは)

Claudeのプロジェクトは、有料プランのユーザーが利用できる専用のワークスペース機能です。プロジェクトごとに独立したチャット履歴と知識ベースを持ち、アップロードした文書やテキストをもとに、より文脈に即したAI支援を受けることができます。

## プロジェクト作成方法 [](#プロジェクト作成方法)

### 1. プロジェクトの新規作成 [](#1-プロジェクトの新規作成)

1. [Claude (opens in a new tab)](https://claude.ai/) の「プロジェクト」を開く

![プロジェクトへのメニュー](/images/claude_project_integration/claude_menu.png) 1. 「+新規プロジェクト」をクリック
1. プロジェクト名、 プロジェクトの説明を入力し、「プロジェクトを作成」をクリック

![プロジェクトの作成](/images/claude_project_integration/create_project.png) 1. 以下のURLから、 `llms-full.txt` をダウンロードする

[https://docs.basemachina.com/llms-full.txt (opens in a new tab)](https://docs.basemachina.com/llms-full.txt)

1. プロジェクトナレッジに、先ほどダウンロードした `llms-full.txt` をアップロードする

![ファイルのアップロード](/images/claude_project_integration/add_project_knowledge.png) 1. （必要に応じて）プロジェクトの指示を追加する

設定しなくてもよいですが、設定することで、より目的に沿った回答が行なわれるようになります。

プロジェクトの指示の設定例 ```
あなたはベースマキナの専門知識を持つアシスタントです。
ベースマキナは自社データを使った社内向けシステムを簡単に作成できるローコードのプラットフォームです。

## 回答形式
- 技術的な質問には具体例を含めて回答
  - JavaScriptアクションおよび、ビューのコード例では必ずimport元を明示
- 詳細に調査し、複数の実現手段を検討して提案する
- 正確性に注意し、ドキュメントに記載されている情報で回答する
- 設定手順は段階的に説明
- トラブルシューティングでは原因と解決策を明示

## 知識の範囲
- ベースマキナの全機能について詳細な知識を保持
- 実装パターンとベストプラクティス
- よくある問題と解決方法
- セキュリティ要件と対応方法
```

以上の作業が完了すると、チャット形式でベースマキナの使い方についてClaudeへ質問できるようになります。

Claudeはチャットの回答に生成AIを使用するため、内容の正確性を保証いたしかねます。あらかじめご了承ください。

## 活用方法 [](#活用方法)

### 基本的な質問例 [](#基本的な質問例)

```
Q: 環境ごとにどんな情報を切り替えられますか？
Q: アクションの実行制限はどのように有効化できますか？
Q: あるアクションの実行結果を使って別のアクションを呼ぶ方法は？
Q: ビューでアクションを実行するフォームを作る方法は？
```

#### チャットの例 [](#チャットの例)

![チャットの例](/_next/static/media/chat_example.84bc4152.png)

### チーム機能の活用 [](#チーム機能の活用)

Claude for Workプランでは、 [プロジェクトをチームメンバーと共有できます (opens in a new tab)](https://support.anthropic.com/ja/articles/9519189-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%8F%AF%E8%A6%96%E6%80%A7%E3%81%A8%E5%85%B1%E6%9C%89) 。
各メンバーが個別にプロジェクトの設定を行なうことなく、簡単にご活用いただけます。

[NotebookLMでベースマキナのドキュメントを活用する](/tips/notebooklm_integration/) [(旧)JavaScriptアクション](/deprecated/javascript_action/)
---
便利な使い方

NotebookLMでベースマキナのドキュメントを活用する

# NotebookLMでベースマキナのドキュメントを活用する

Googleの [NotebookLM (opens in a new tab)](https://notebooklm.google.com/) を使用して、ベースマキナのドキュメントを効率的に活用する方法を説明します。

## NotebookLMとは [](#notebooklmとは)

NotebookLMは、Googleが開発したAI搭載の研究支援ツールです。アップロードしたドキュメントをもとに、質問応答や要約、新しいアイデアの提案を行なうことができます。

## ドキュメントの追加方法 [](#ドキュメントの追加方法)

### 1. NotebookLMにアクセス [](#1-notebooklmにアクセス)

1. [NotebookLM (opens in a new tab)](https://notebooklm.google.com/) にGoogleアカウントでログイン
1. 「+新規作成」をクリック
1. 「ソースを追加」画面から、「リンク」の「ウェブサイト」を選択

![「ソースを追加」画面](/_next/static/media/add_source_dialog.0d18acaa.png)

1. 以下のURLを入力して、「挿入」をクリック

```
https://docs.basemachina.com/llms-full.txt
```

![URLの入力](/_next/static/media/input_url.5ec96633.png)

以上の作業が完了すると、チャット形式でベースマキナの使い方についてNotebookLMへ質問できるようになります。

NotebookLMはチャットの回答に生成AIを使用するため、内容の正確性を保証いたしかねます。あらかじめご了承ください。

## 活用方法 [](#活用方法)

### 基本的な質問例 [](#基本的な質問例)

```
Q: 環境ごとにどんな情報を切り替えられますか？
Q: アクションの実行制限はどのように有効化できますか？
Q: あるアクションの実行結果を使って別のアクションを呼ぶ方法は？
Q: ビューでアクションを実行するフォームを作る方法は？
```

#### チャットの例 [](#チャットの例)

![チャットの例](/_next/static/media/chat_example.90ce6a48.png)

### 音声概要の活用 [](#音声概要の活用)

NotebookLMの「音声概要」機能を使用すると、ベースマキナの機能について説明するポッドキャスト形式の音声を生成できます。

[SQLのアクションで前のクエリの結果を使用する](/tips/sql_previous_result/) [Claudeのプロジェクトでベースマキナのドキュメントを活用する](/tips/claude_project_integration/)
---
便利な使い方

SQLのアクションで前のクエリの結果を使用する

# SQLのアクションで前のクエリの結果を使用する

ベースマキナのSQL系のデータソース（MySQL、PostgreSQL）では、複数のクエリを登録して順番に実行できます。

この機能を使う際に、前のクエリの結果を次のクエリで使用できます。

ここでは、次のように指定のメールアドレスのユーザー情報を取得してから、取得したユーザーIDを使用してユーザーの決済情報を無効化するクエリを実行する例を紹介します。

```
-- 指定したメールアドレスのユーザーIDを取得する
SELECT id FROM users WHERE email = {{ email }} LIMIT 1;
 
-- 取得したユーザーIDを使用してユーザーの決済情報を無効化する
DELETE FROM payment_settings WHERE user_id = （取得したユーザーID）;
```

## 変数を利用する方法（MySQLのみ） [](#変数を利用する方法mysqlのみ)

変数を定義して、取得したユーザーIDを格納し、その変数を次のクエリで使用する方法です。

まず最初のクエリで変数を定義します。

```
SET @userId = '';
```

次に、指定のメールアドレスのユーザー情報を取得して、取得したユーザーIDを変数に格納します。

```
SELECT id INTO @userId FROM users WHERE email = {{ email }} LIMIT 1;
```

最後に、取得したユーザーIDを使用してユーザーの決済情報を無効化するクエリを実行します。

このクエリだけ「書き込み」の種類のクエリとして登録します。

```
DELETE FROM payment_settings WHERE user_id = @userId;
```

以上のように、 `@` を付けた変数を定義することで、前のクエリの結果を次のクエリで使用できます。

最終的な設定は次の画像のようになります。

![変数を使って前のクエリの結果を使用する](/_next/static/media/sql_previous_result_variable.08ce37c8.png)

なお、ベースマキナのSQL系のアクションは、複数のクエリを登録していても1つのセッション内で処理されます。

したがって一度変数に格納した値は、後続のクエリのいずれでも使用できます。

## 一時テーブルを使う方法（MySQL / PostgreSQL） [](#一時テーブルを使う方法mysql--postgresql)

一時テーブルを定義して、取得したユーザーIDを格納し、その一時テーブルのレコードを次のクエリで使用する方法です。

指定のメールアドレスのユーザー情報を取得して、取得したユーザーIDを一時テーブルに格納します。

```
CREATE TEMPORARY TABLE temp_user AS SELECT id FROM users WHERE email = {{ email }} LIMIT 1;
```

そして、取得したユーザーIDを使用してユーザーの決済情報を無効化するクエリを実行します。

このクエリだけ「書き込み」の種類のクエリとして登録します。

```
DELETE FROM payment_settings WHERE user_id = (SELECT id FROM temp_user);
```

以上のように、 `CREATE TEMPORARY TABLE` を使って一時テーブルを定義することで、前のクエリの結果を次のクエリで使用できます。

最終的な設定は次の画像のようになります。

![一時テーブルを使って前のクエリの結果を使用する](/_next/static/media/sql_previous_result_temporary_table.524518c4.png)

なお、ベースマキナのSQL系のアクションは、複数のクエリを登録していても1つのセッション内で処理されます。

したがって一時テーブルに格納した値は、後続のクエリのいずれでも使用できます。

一時テーブルはセッションが終了すると自動的に削除されます。

[環境別のIPアドレス制限](/admin/environment/ip_restriction/) [NotebookLMでベースマキナのドキュメントを活用する](/tips/notebooklm_integration/)
---
UIビルダー

UIビルダーとは

# UIビルダーとは

![UIビルダーの画面](/images/uibuilder/what_is_uibuilder/uibuilder_setting.png)

UIビルダーは、 [ビュー](/what_is_view/) の作成をノーコードに近い形式で行なえる機能です。

ソフトウェアエンジニアか否かを問わず広いお客さまが、型が決まった範囲で情報やフォームを集約した自然なUIで管理画面を作ることを目的としています。

UIビルダーは、現在α版の機能となっております。また大幅な機能変更が入ることによるお客様への業務影響を考慮し、主に新規のお客様を中心に限定的に公開しています。

## UIビルダーの利用目的 [](#uiビルダーの利用目的)

ベースマキナには **アクション** と **ビュー** の2種類の画面作成方法があります。

アクションではパラメーターの型に応じたフォームと、レスポンス内容に対応した画面が自動で作成されます。

一方でビューでは、プレビューツールや [Git管理](/view/git_management/) などの機能を使いつつ、JavaScriptを使って自由なUIを作成できる機能です。

UIビルダーは、その中間の位置づけの画面作成機能です。

決められた範囲でコンポーネントやイベントトリガーの設定を行なうことで、業務をストレスなく行なえる管理画面を作成できます。

### 利用想定 [](#利用想定)

具体的には以下のような画面を作ることを想定しています。

- 複数のアクションを呼び出して、ユーザーの関連情報を集約する詳細画面
- レコードの新規追加画面へのボタンや、行ごとの操作メニューがついたテーブルを表示できる検索画面
- グリッドやタブなどを用いたレイアウトで、複数の業務の起点に使える画面

## UIビルダーへの導線 [](#uiビルダーへの導線)

UIビルダーへの導線は、ビューの一覧画面の上部にあります。

クリックするとUIビルダーでのビュー作成画面が開きます。

![UIビルダーへの導線](/images/uibuilder/what_is_uibuilder/uibuilder_button.png)

## 画面構成 [](#画面構成)

![UIビルダーの画面構成](/images/uibuilder/what_is_uibuilder/uibuilder_page_elements.png)

UIビルダーの設定画面は大きく4つの領域で構成されています。

- コンポーネント追加、配置換えをする左側のサイドバー
- コンポーネントごとの設定をする右側のサイドバー
- 設定内容をプレビューする中央の表示領域
- 画面名やアクセス制御など、ページ全体にかかる設定をする上部のメニュー

です。それぞれの領域で設定を登録した後、画面上部のメニューの「保存」ボタンを押すと、設定内容が保存されます。

## コンポーネント [](#コンポーネント)

### コンポーネントの配置方法 [](#コンポーネントの配置方法)

左側のサイドバーの「新規追加」タブからコンポーネントを選択すると、中央の表示領域の一番下にコンポーネントが追加されます。

追加されたコンポーネントは同じく左側のサイドバーの「レイアウト」タブで削除や並べ替え、入れ子にする設定が行なえます。

### コンポーネントの種類別の設定 [](#コンポーネントの種類別の設定)

「レイアウト」タブでコンポーネントを選択すると、各コンポーネントごとの詳細設定を行なえます。

#### テキスト [](#テキスト)

テキストを表示するためのコンポーネントです。

見出しやページタイトルにご利用ください。

#### アクションフォーム [](#アクションフォーム)

アクションを実行するためのフォームです。

実行するアクションの設定や、実行時に表示するメッセージなどを設定できます。

実行後の処理の設定で、画面移動や再読み込みなどの処理も設定できます。

#### アクションテーブル [](#アクションテーブル)

アクションの実行結果を表示するためのコンポーネントです。

ページ表示時にアクションを実行するか、別のコンポーネント（アクションフォーム）で実行したアクションの実行結果を表示するかを設定できます。

また、高度なオプションでアクションの結果を調整できます。

**ページネーション設定**

ページネーション方式を選んで、クライアントサイドとサーバーサイドのどちらでページネーションを行なうかを設定できます。

サーバーサイドの場合はオフセット形式かカーソル形式かを選択できます。

それぞれの形式に対応して、ページネーションに設定するアクションのパラメーターなどを設定してください。

**操作設定**

- テーブル全体のメニュー
- 行クリック時のイベント
- 行操作メニュー

という設定項目を通じて、アクションテーブルを起点にした操作を充実させられます。

テーブル全体にかかる操作導線の表示（新規追加など）はテーブル全体のメニューで設定してください。

行をクリックしたときの画面移動などは行クリック時のイベントで設定してください。

行の値を使ったアクションの実行、行クリック時に移動する画面以外へと移動したいときの導線などは行操作メニューで設定できます。

#### ボックス [](#ボックス)

画面のレイアウトを調整するためのコンポーネントです。

- グリッド
- フレックスボックス
- タブ

の3種類から選択できます。

ボックスを追加した後、そのボックスの中に入れるコンポーネントは画面左側の「レイアウト」から選択できます。

ボックス以外のコンポーネントを選択すると、どのボックスに追加するかを選ぶセレクトボックスが表示されるので、お選びください。

## 変数 [](#変数)

変数は、アクションフォームの初期値、アクションテーブルの行クリックや行操作メニューのアクション実行のパラメーター、画面移動の際のクエリパラメーターなどで、使用できる値です。

### 変数の使用方法 [](#変数の使用方法)

値の入力欄で `{{ 変数 }}` という形式で設定すると、設定に対応する操作をした際に変数が展開されます。

### 使用できる変数 [](#使用できる変数)

以下が使用できる変数の一覧です。

#### actions [](#actions)

アクションの実行結果が格納された変数です。

`actions['fetch-user-list'].results[0].success` のように、IDまたは識別子を指定してアクションの実行結果を参照できます。

#### urlQueries [](#urlqueries)

クエリパラメーターが格納された変数です。

`urlQueries.id` のように、パラメーター名を指定してクエリパラメーターの値を参照できます。

#### row [](#row)

アクションテーブルの行の値が格納された変数です。

`row.id` のように、列名を指定して値を取得できます。

### 変数の値の確認方法 [](#変数の値の確認方法)

`actions` や `urlQueries` は画面右下の **ページ内で使用できる変数** から確認できます。

アクションを実行した後や画面移動直後に、変数の値がどう保持されているかを確認しながら設定を行なうことができます。

![ページ内で使用できる変数](/images/uibuilder/what_is_uibuilder/uibuilder_inspector.png)

[型定義ファイルのダウンロード](/view/download_dts_file/) [ナビゲーション](/navigation/)
---
ビュー

データ表示

Chart

# Chart

`Chart` コンポーネントは、チャートを表示するためのコンポーネントです。現状では折れ線グラフのみをサポートしており、複数のデータセットを表示できます。

## 基本的な使い方 [](#基本的な使い方)

```
<Chart
  title="年度別売上と利益"
  xAxis="year"
  dataSetColors={{
    sales: "blue",
    profit: "green",
  }}
  dataSet={[
    { year: "2020", sales: 1000, profit: 200 },
    { year: "2021", sales: 1500, profit: 300 },
    { year: "2022", sales: 1300, profit: 250 },
    { year: "2023", sales: 1700, profit: 350 },
  ]}
/>
```

![使用例](/images/view/chart/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| title | チャートのタイトルを指定します。 | 任意 | なし |
| type | チャートの種類を指定します。現在は'line'のみをサポートしています。 | 任意 | 'line' |
| xAxis | データセット内でX軸に対応するキーを指定します。 | 必須 | なし |
| xAxisTitle | X軸のタイトルを指定します。 | 任意 | なし |
| yAxisTitle | Y軸のタイトルを指定します。 | 任意 | なし |
| dataSetColors | データセットのカラーを指定します。キーはデータセット内のキー、値は'ChartColor'型で指定します。 'red', 'blue', 'green', 'yellow'から選択できます。 | 任意 | なし |
| dataSet | データセットを指定します。 | 必須 | なし |

[Stat](/view/data_display/view_stat/) [Form](/view/form/view_form/)
---
ビュー

データ表示

DescriptionList

# DescriptionList

`DescriptionList` コンポーネントは、キーと値のペアをリスト形式で表示するためのコンポーネントです。表示形式は水平または垂直を選択できます。

## 基本的な使い方 [](#基本的な使い方)

```
<DescriptionList
  columnNames={{ name: "名前", age: "年齢", job: "職業" }}
  item={{
    name: "山田太郎",
    age: 25,
    job: "エンジニア",
  }}
  direction="horizontal"
/>
```

![使用例](/images/view/description_list/usage.png)

![使用例\_垂直](/images/view/description_list/usage_vertical.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| columnNames | 各列の表示名を指定します。オブジェクト形式で指定します。表示名の指定が行なわれていない列は非表示となります。 | なし |
| item | 表示する項目のオブジェクトを指定します。キーと値のペアで構成されます。 | なし |
| direction | リストの表示方向を指定します。'horizontal' または 'vertical' のいずれかを指定できます。 | 'horizontal' |

`direction` プロパティでリストの表示方向を指定します。'horizontal' を指定すると、項目名とその詳細が水平方向に並びます。一方、'vertical' を指定すると、項目名とその詳細が垂直方向に並びます。指定がない場合、デフォルトで 'horizontal' が適用されます。

[Table](/view/data_display/view_table/) [Stat](/view/data_display/view_stat/)
---
ビュー

データ表示

Stat

# Stat

`Stat` コンポーネントは、ある項目とその値を表示するためのコンポーネントです。主にダッシュボードや統計情報の表示に使用できます。

## 基本的な使い方 [](#基本的な使い方)

```
<Stat title="アクティブユーザー" value="1,234" />
```

![使用例](/images/view/stat/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| title | 表示する項目の名前を指定します。 | 必須 | なし |
| value | 表示する項目の値を指定します。 | 必須 | なし |

[DescriptionList](/view/data_display/view_description_list/) [Chart](/view/data_display/view_chart/)
---
ビュー

データ表示

Table

# Table

Tableコンポーネントは、データを表形式で表示するためのコンポーネントです。各行のデータ、各列の設定、そしてメニューバーの設定を行なうことができます。

## 基本的な使い方 [](#基本的な使い方)

```
const rows = [
  { name: "山田太郎", age: 25, job: "エンジニア" },
  { name: "佐藤花子", age: 30, job: "デザイナー" },
  { name: "鈴木一郎", age: 18, job: "エンジニア" },
  { name: "田中二郎", age: 35, job: "プロジェクトマネージャー" },
  { name: "井上三郎", age: 45, job: "エンジニア" },
];
return (
  <Table
    rows={rows}
    onRowClick={(row, event) => console.log(row, event.ctrlKey)}
    rowDisabled={(row) => row.age > 40}
    rowColor={(row) => (row.age < 20 ? "green" : "white")}
    columnNames={{ name: "名前", age: "年齢", job: "職業" }}
    downloadable={true}
    downloadData={rows.map((user) => ({ 名前: user.name, 年齢: user.age }))}
  />
);
```

![使用例](/images/view/table/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| rows | 表示する行データの配列を指定します。 | なし |
| onRowClick | 行をクリックしたときのイベントハンドラを指定します。行のデータと、 [MouseEvent (opens in a new tab)](https://react.dev/reference/react-dom/components/common#mouseevent-handler) が引数として渡されます。 | なし |
| rowDisabled | 行の無効判定を行なう関数を指定します。無効と判定された行はグレーアウトされ、クリック不可となります。関数には、行のデータが引数として渡されます。 | なし |
| rowColor | 行の色を設定する関数を指定します。関数の返り値は `white`, `gray`, `red`, `green`, `blue`, `yellow` のいずれかです。 | なし |
| columnNames | 各列の表示名を指定します。オブジェクト形式で指定します。表示名の指定が行なわれていない列は非表示となります。 | なし |
| downloadable | ダウンロード可能かどうかを指定します。trueを指定すると、メニューバーにダウンロードボタンが表示されます。 | false |
| downloadData | JSONやCSVとしてダウンロード可能にしたいデータを指定します。表示する行データとは異なる形式を使用したい場合に設定します。 | rowsプロパティに設定した値 |
| searchDisabled | 検索可能かどうかを指定します。trueを指定すると、メニューバーの検索フォームが非表示になります。 | false |
| wordBreak | テーブルの幅に対してセルの内容が長すぎた場合の、折り返し方法を指定します。 `normal`, `words`, `all`, `keep` のいずれかを指定可能です。 | keep |

`rows` はオブジェクトの配列で、各オブジェクトが1つの行を表します。また、 `columnNames` は各列の表示名を指定するためのオブジェクトで、キーが列のID（オブジェクトのキー）、値がその列の表示名です。

このコンポーネントには、行がクリックされたときに呼び出されるonRowClick関数も提供されています。この関数は、クリックされた行のデータを引数として受け取ります。

また、 `downloadable` プロパティをtrueに設定すると、表データをダウンロードするためのボタンが表示されます。

[Drawer](/view/layout/view_drawer/) [DescriptionList](/view/data_display/view_description_list/)
---
ビュー

型定義ファイルのダウンロード

# `@basemachina/view` の型定義ファイルのダウンロード

ビューで使用できる `@basemachina/view` の型定義ファイルはダウンロードが可能です。

[コード取得設定](/view/git_management/) 機能などを利用して、手元のエディターでビューのコードを編集する場合などにご活用ください。

※一部型が未定義の関数/コンポーネントに関しましては、今後型定義を追加する予定です。

**※この機能は将来、別の機能による代替または廃止になる可能性があります。**

![「ビューの型定義ファイルのダウンロード」ボタン](/images/download_view_dts_file.png)

## ダウンロード方法 [](#ダウンロード方法)

以下の手順でダウンロードできます。

1. 右上のメニューから「設定」を選択します。
1. サイドバーのメニューから「プロジェクト設定」を選択します。
1. 「ビューの型定義ファイルのダウンロード」ボタンをクリックすると、ダウンロードできます。

[Git管理](/view/git_management/) [UIビルダーとは](/uibuilder/what_is_uibuilder/)
---
ビュー

外部ライブラリ

# 外部ライブラリ

## 利用可能な外部ライブラリ一覧 [](#利用可能な外部ライブラリ一覧)

ビューでは、下記の外部ライブラリをインポートして使用できます。

| 名前 | URL |
| --- | --- |
| react | [https://www.npmjs.com/package/react (opens in a new tab)](https://www.npmjs.com/package/react) |
| dayjs | [https://www.npmjs.com/package/dayjs (opens in a new tab)](https://www.npmjs.com/package/dayjs) |
| @chakra-ui/react | [https://www.npmjs.com/package/@chakra-ui/react (opens in a new tab)](https://www.npmjs.com/package/@chakra-ui/react) |
| react-chartjs-2 | [https://www.npmjs.com/package/react-chartjs-2 (opens in a new tab)](https://www.npmjs.com/package/react-chartjs-2) |

## dayjs [](#dayjs)

dayjsは日付操作の関数を提供するライブラリです。

### dayjs の使用例 [](#dayjs-の使用例)

```
import { useState } from "react";
import dayjs from "dayjs";
import { Button, Box, Card, VStack } from "@basemachina/view";
 
const date = dayjs().format("YYYY-MM-DD HH:mm:ss");
 
const App = () => {
  const [showDate, setShowDate] = useState(false);
  const handleClick = () => {
    setShowDate(true);
  };
 
  return (
    <Card>
      <VStack>
        <Box>{`日付: ${showDate ? date : ""}`}</Box>
        <Button title="日付を表示する" onClick={handleClick} />
      </VStack>
    </Card>
  );
};
 
export default App;
```

![dayjsの利用例](/images/view/external_libs/dayjs.png)

## @chakra-ui/react [](#chakra-uireact)

@chakra-ui/reactは、汎用的なコンポーネントやフックを提供するライブラリです。

@chakra-ui/reactは `'@chakra-ui/react'` と `'@chakra-ui/react@2'` からインポートできます。
`'@chakra-ui/react'` からのインポートでは現在Chakra UIのv2系を利用できますが、v3系へのメジャーバージョンアップにより互換性を失う可能性があります。
`'@chakra-ui/react@2'` からのインポートは@chakra-ui/reactのv2系に固定されます。

Chakra UI v2の使い方については [公式ドキュメント (opens in a new tab)](https://v2.chakra-ui.com/docs/components) をご参照ください。

### @chakra-ui/react の使用例 [](#chakra-uireact-の使用例)

```
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Button,
} from "@chakra-ui/react";
 
function App() {
  const { isOpen, onOpen, onClose } = useDisclosure();
 
  return (
    <>
      <Button onClick={onOpen}>開く</Button>
      <Modal
        isCentered
        onClose={onClose}
        isOpen={isOpen}
        motionPreset="slideInBottom"
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>タイトル</ModalHeader>
          <ModalCloseButton />
          <ModalBody>内容</ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              保存
            </Button>
            <Button variant="ghost">キャンセル</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}
 
export default App;
```

![chakra-uiの利用例](/images/view/external_libs/chakra-ui.png)

## react-chartjs-2 [](#react-chartjs-2)

react-chartjs-2は、グラフ表示のライブラリである [Chart.js (opens in a new tab)](https://www.chartjs.org/) をReactのコンポーネントとして提供するライブラリです。

react-chartjs-2は `'react-chartjs-2'` と `'react-chartjs-2@5'` からインポートできます。
`'react-chartjs-2'` からのインポートはreact-chartjs-2のメジャーバージョンアップにより互換性を失う可能性があります。
`'react-chartjs-2@5'` からのインポートはreact-chartjs-2のv5系に固定されます。

### react-chartjs-2 の使用例 [](#react-chartjs-2-の使用例)

```
import { Bar } from "react-chartjs-2";
 
export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top",
    },
    title: {
      display: true,
      text: "新規登録数",
    },
  },
};
 
const labels = ["January", "February", "March", "April", "May", "June"];
 
export const data = {
  labels,
  datasets: [
    {
      label: "昨年",
      data: [100, 120, 150, 180, 230, 250],
      backgroundColor: "rgba(255, 99, 132, 0.5)",
    },
    {
      label: "今年",
      data: [100, 150, 130, 200, 300, 350],
      backgroundColor: "rgba(53, 162, 235, 0.5)",
    },
  ],
};
 
function App() {
  return <Bar options={options} data={data} />;
}
 
export default App;
```

![react-chartjs-2 の利用例](/images/view/external_libs/react-chartjs-2.png)

[Pagination](/view/other/view_pagination/) [Git管理](/view/git_management/)
---
ビュー

フォーム

Button

# Button

Buttonコンポーネントは、ユーザーがクリックすることで指定された操作するためのコンポーネントです。色、サイズ、形式（ボタン、送信）をカスタマイズが可能です。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Form, Flexbox, Button } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Form
        onSubmit={() => {
          console.log("clicked");
        }}
      >
        <Flexbox direction="col">
          <Button type="submit" title="送信" color="blue" />
        </Flexbox>
      </Form>
    </Card>
  );
};
export default App;
```

![使用例](/images/view/button/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| title | ボタンのテキストを指定します。 | 必須 | なし |
| color | ボタンの色を指定します。 `blue` 、 `red` 、 `white` の中から選択可能です。 | 任意 | `white` |
| size | ボタンのサイズを指定します。 `xs` 、 `sm` 、 `md` 、 `lg` 、 `xl` の中から選択可能です。 | 任意 | `md` |
| disabled | ボタンが無効化されているかどうかを指定します。 `true` の場合、ボタンはクリックできません。 | 任意 | `false` |
| type | ボタンのタイプを指定します。 `button` または `submit` を選択可能です。 | 任意 | `button` |
| onClick | ボタンがクリックされたときに実行する関数を指定します。 | 任意 | なし |

[Form](/view/form/view_form/) [TextInput](/view/form/view_text_input/)
---
ビュー

フォーム

Checkbox

# Checkbox

Checkboxコンポーネントは、チェックボックスの入力を行なうためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Form, Flexbox, Checkbox, Button } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Form onSubmit={() => {}}>
        <Flexbox direction="col">
          <Checkbox name="isActive" label="有効化する" />
          <Button type="submit" title="送信" color="blue" />
        </Flexbox>
      </Form>
    </Card>
  );
};
export default App;
```

![使用例](/images/view/checkbox/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| name | フィールドの名前を指定します。 | 必須 | なし |
| label | チェックボックスのラベルを指定します。 | 任意 | なし |
| value | チェックボックスが選択されたときの値を指定します。 | 任意 | なし |
| disabled | チェックボックスが無効化されているかどうかを指定します。 `true` の場合、チェックボックスはクリックできません。 | 任意 | `false` |

[DateTimePicker](/view/form/view_date_time_picker/) [FileInput](/view/form/view_file_input/)
---
ビュー

フォーム

DatePicker

# DatePicker

DatePickerコンポーネントは、日付を入力するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Form, Flexbox, DatePicker, Button } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Form onSubmit={() => {}}>
        <Flexbox direction="col">
          <DatePicker name="date" label="日付" />
          <Button type="submit" title="送信" color="blue" />
        </Flexbox>
      </Form>
    </Card>
  );
};
export default App;
```

![使用例](/images/view/datepicker/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| name | フィールドの名前を指定します。 | 必須 | なし |
| label | ラベルを指定します。 | 任意 | なし |
| defaultValue | デフォルトの日付値を指定します。 | 任意 | なし |
| format | 日付のフォーマットを指定します。 | 任意 | 'YYYY-MM-DD' |
| required | 入力が必須かどうかを指定します。 `true` の場合、入力が必須になります。 | 任意 | `false` |
| max | 日時の最大値を指定します。形式は `"2006-01-02"` のような文字列です。 | 任意 | なし |
| min | 日時の最小値を指定します。形式は `"2006-01-02"` のような文字列です。 | 任意 | なし |

[Select](/view/form/view_select/) [DateTimePicker](/view/form/view_date_time_picker/)
---
ビュー

フォーム

DateTimePicker

# DateTimePicker

DateTimePickerコンポーネントは、日時を入力するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Form, Flexbox, DateTimePicker, Button } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Form onSubmit={() => {}}>
        <Flexbox direction="col">
          <DateTimePicker name="datetime" label="日時" />
          <Button type="submit" title="送信" color="blue" />
        </Flexbox>
      </Form>
    </Card>
  );
};
export default App;
```

![使用例](/images/view/datetimepicker/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| name | フィールドの名前を指定します。 | 必須 | なし |
| label | ラベルを指定します。 | 任意 | なし |
| defaultValue | デフォルトの日時値を指定します。 | 任意 | なし |
| format | 日時のフォーマットを指定します。 | 任意 | 'YYYY-MM-DDTHH:mm' |
| required | 入力が必須かどうかを指定します。 `true` の場合、入力が必須になります。 | 任意 | `false` |
| max | 日時の最大値を指定します。形式は `"2006-01-02T15:04"` のような文字列です。 | 任意 | なし |
| min | 日時の最小値を指定します。形式は `"2006-01-02T15:04"` のような文字列です。 | 任意 | なし |

[DatePicker](/view/form/view_date_picker/) [Checkbox](/view/form/view_checkbox/)
---
ビュー

フォーム

FileInput

# FileInput

FileInputコンポーネントは、フォームでファイルを入力するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

FileInputコンポーネントは、Formコンポーネント内で使用します。
入力したファイルは、 `useExecuteActionLazy` でアクションを呼び出してサーバーへの送信やストレージへの保存ができます。

初期値はFormコンポーネントの `initialValues` で `File` か `string` が設定できます。

```
import {
  Form,
  Button,
  FileInput,
  useExecuteAction,
  useExecuteActionLazy,
  LoadingIndicator,
} from "@basemachina/view";
 
const App = () => {
  const { data, loading } = useExecuteAction("get-user", { id: 123 });
  const [updateUserIcon] = useExecuteActionLazy("update-user-icon");
  const [uploadUserIcon] = useExecuteActionLazy("upload-user-icon");
 
  if (loading) return <LoadingIndicator />;
 
  const user = data.results[0].success;
 
  const handleSubmit = async ({ values }) => {
    // ファイルをストレージにアップロード
    const { data } = await uploadUserIcon({ id: user.id, icon: values.icon });
    // アップロードしたファイルのURLをDBに保存
    await updateUserIcon({
      id: user.id,
      icon: data.results[0].success,
    });
  };
 
  return (
    <Form initialValues={{ icon: user.icon }} onSubmit={handleSubmit}>
      <FileInput name="icon" label="アイコン" />
      <Button type="submit" title="保存" />
    </Form>
  );
};
 
export default App;
```

![使用例](/images/view/fileinput/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| name | フィールドの名前を指定します。 | 必須 |
| label | ラベルを指定します。 | なし |
| disabled | フィールドを無効にするかどうかを指定します。 | false |
| maxHeight | ファイルのプレビューの高さの最大値を指定します。'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full' のいずれかを指定できます。 | 'md' |

[Checkbox](/view/form/view_checkbox/) [Input](/view/form/view_input/)
---
ビュー

フォーム

Form

# Form

Formコンポーネントは、状態を持つフォームを作成するためのコンポーネントです。

このFormコンポーネントを用いて作成されたフォームは、送信時にその状態のオブジェクトを値として返す機能を持っています。

submitに使う関数のなかでこのオブジェクトを活用が可能です。

また、FormコンポーネントはさまざまなInputコンポーネントと組み合わせて利用できます。

例えば、TextInputやDatePickerなどのコンポーネントを組み合わせることで、多様な形式の入力値を作成が可能となります。

これらの入力コンポーネントには各々一意のnameが設定できます。そしてnameは最終的にsubmit用の関数に渡ってくるオブジェクトのキーとなります。

## 基本的な使い方 [](#基本的な使い方)

以下に示すのは、Formコンポーネントと各種のInputコンポーネントを組み合わせた基本的な使用例です。

Formコンポーネントの初期値を設定し、onSubmitメソッドにて送信時の処理を定義しています。

送信時にはFormコンポーネントの状態がオブジェクトとして取得でき、それを引数として送信処理を実行します。

```
import {
  DateTimePicker,
  Grid,
  Flexbox,
  Box,
  Form,
  TextInput,
  Button,
  useExecuteActionLazy,
} from "@basemachina/view";
 
const App = () => {
  const [executeAction, { loading, errors, data }] =
    useExecuteActionLazy("action-id");
 
  const handleSubmit = ({ values }) => {
    executeAction({
      id: values.id,
      email: values.email,
      registered_at_from: values.registered_at_from,
      registered_at_to: values.registered_at_to,
    });
  };
 
  return (
    <Form
      initialValues={{
        email: "sample@test.com",
        id: "sample",
        registered_at_from: "2020-04-01T10:00",
        registered_at_to: "2028-03-31T18:00",
      }}
      onSubmit={handleSubmit}
    >
      <Flexbox direction="col">
        <Grid repeatCount={3}>
          <Box>
            <TextInput name="id" label="ID" />
          </Box>
          <Box>
            <TextInput name="email" label="メールアドレス" />
          </Box>
          <Box>
            <p className="text-sm font-bold">登録日時</p>
            <Flexbox items="center" justify="between">
              <DateTimePicker name="registered_at_from" />
              <span>-</span>
              <DateTimePicker name="registered_at_to" />
            </Flexbox>
          </Box>
        </Grid>
        <Button type="submit" title="検索" color="blue" />
      </Flexbox>
    </Form>
  );
};
export default App;
```

![使用例](/images/view/form/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| id | フォームのIDを指定します。 | なし |
| initialValues | フォームの初期値をオブジェクトとして指定します。 |  |
| onSubmit | フォームが送信されたときに呼び出される関数を指定します。引数としてフォームの入力値のオブジェクトを受け取ります。 | 必須 |

[Chart](/view/data_display/view_chart/) [Button](/view/form/view_button/)
---
ビュー

フォーム

Input

# Input

Inputコンポーネントは、入力フィールドを作成するためのコンポーネントです。テキスト、URL、Eメール、パスワード、数値に対応しています。

## 基本的な使い方 [](#基本的な使い方)

```
import { Flexbox, Box, Form, Button, Input } from "@basemachina/view";
 
const App = () => {
  const handleSubmit = ({ values }) => {
    console.log(values);
  };
 
  return (
    <Form
      initialValues={{
        id: "user123",
        email: "user123@example.com",
        initialPoint: "50",
      }}
      onSubmit={handleSubmit}
    >
      <Flexbox direction="col">
        <Box>
          <Input
            label="ユーザーID"
            type="text"
            name="id"
            required
            minLength="5"
            maxLength="10"
            pattern="\w+"
          />
        </Box>
        <Box>
          <Input label="メールアドレス" type="email" name="email" required />
        </Box>
        <Box>
          <Input
            label="初期ポイント"
            type="number"
            name="initialPoint"
            min="0"
            max="100"
          />
        </Box>
        <Button type="submit" title="登録" color="blue" />
      </Flexbox>
    </Form>
  );
};
 
export default App;
```

![使用例](/images/view/input/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| name | 入力フィールドの名前を指定します。 | 必須 | なし |
| label | 入力フィールドのラベルを指定します。 | 任意 | なし |
| type | 入力フィールドの種類を指定します。 `text` 、 `url` 、 `email` 、 `password` 、 `number` のいずれかを指定します。 | 任意 | `text` |
| required | 入力が必須かどうかを指定します。 `true` の場合、入力が必須になります。 | 任意 | `false` |
| onChange | 入力内容の変更を検知するイベントハンドラー関数を指定します。引数として [Reactイベントオブジェクト (opens in a new tab)](https://ja.react.dev/reference/react-dom/components/common#react-event-object) が渡されます。 | 任意 | なし |

`type` が `text` 、 `url` 、 `email` 、 `password` の場合、さらに以下のプロパティを指定できます。

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| maxLength | 入力可能な最大文字数を指定します。 | 任意 | なし |
| minLength | 入力が必要な最小文字数を指定します。 | 任意 | なし |
| pattern | 入力値が一致する必要のある正規表現のパターンを指定します。 | 任意 | なし |

プロパティの詳細な仕様については以下のドキュメントを参照してください。

- [<input type="text"> | MDN (opens in a new tab)](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/text#%E8%BF%BD%E5%8A%A0%E3%81%AE%E5%B1%9E%E6%80%A7)
- [<input type="url"> | MDN (opens in a new tab)](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/url#%E8%BF%BD%E5%8A%A0%E3%81%AE%E5%B1%9E%E6%80%A7)
- [<input type="email"> | MDN (opens in a new tab)](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/email#%E8%BF%BD%E5%8A%A0%E3%81%AE%E5%B1%9E%E6%80%A7)
- [<input type="password"> | MDN (opens in a new tab)](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/password#%E8%BF%BD%E5%8A%A0%E3%81%AE%E5%B1%9E%E6%80%A7)

`type` が `number` の場合、さらに以下のプロパティを指定できます。

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| max | 入力の最大値を指定します。 | 任意 | なし |
| min | 入力の最小値を指定します。 | 任意 | なし |

プロパティの詳細な仕様については以下のドキュメントを参照してください。

- [<input type="number"> | MDN (opens in a new tab)](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number#%E8%BF%BD%E5%8A%A0%E3%81%AE%E5%B1%9E%E6%80%A7)

[FileInput](/view/form/view_file_input/) [Link](/view/link/view_link/)
---
ビュー

フォーム

Select

# Select

Selectコンポーネントは、セレクトボックス（ドロップダウンリスト）を作成するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Form, Flexbox, Select, Button } from "@basemachina/view";
 
const App = () => {
  const options = [
    { label: "オプション1", value: "1" },
    { label: "オプション2", value: "2" },
    { label: "オプション3", value: "3" },
  ];
 
  return (
    <Card>
      <Form onSubmit={() => {}}>
        <Flexbox direction="col">
          <Select name="choice" label="選択" options={options} />
          <Button type="submit" title="送信" color="blue" />
        </Flexbox>
      </Form>
    </Card>
  );
};
export default App;
```

![使用例](/images/view/select/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| name | フィールドの名前を指定します。 | 必須 | なし |
| label | ラベルを指定します。 | 任意 | なし |
| options | 選択肢の配列を指定します。配列内の要素は `{label: '', value: ''}` の形式で指定してください。 | 必須 | なし |
| onChange | 入力内容の変更を検知するイベントハンドラー関数を指定します。引数として [Reactイベントオブジェクト (opens in a new tab)](https://ja.react.dev/reference/react-dom/components/common#react-event-object) が渡されます。 | 任意 | なし |

[Textarea](/view/form/view_textarea/) [DatePicker](/view/form/view_date_picker/)
---
ビュー

フォーム

TextInput

# TextInput

TextInputコンポーネントは、テキスト入力フィールドを作成するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Form, Flexbox, TextInput, Button } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Form onSubmit={() => {}}>
        <Flexbox direction="col">
          <TextInput name="id" label="ID" />
          <Button type="submit" title="送信" color="blue" />
        </Flexbox>
      </Form>
    </Card>
  );
};
export default App;
```

![使用例](/images/view/textinput/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| name | フィールドの名前を指定します。 | 必須 | なし |
| label | ラベルを指定します。 | 任意 | なし |
| placeholder | プレースホルダーを指定します。 | 任意 | なし |
| onChange | 入力内容の変更を検知するイベントハンドラー関数を指定します。引数として [Reactイベントオブジェクト (opens in a new tab)](https://ja.react.dev/reference/react-dom/components/common#react-event-object) が渡されます。 | 任意 | なし |

[Button](/view/form/view_button/) [Textarea](/view/form/view_textarea/)
---
ビュー

フォーム

Textarea

# Textarea

Textareaコンポーネントは複数行のテキストを入力するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Form, Button, Textarea } from "@basemachina/view";
import { Stack } from "@chakra-ui/react";
 
const App = () => {
  const handleSubmit = ({ values }) => {
    console.log(values);
  };
 
  return (
    <Form
      initialValues={{
        comment: "よろしくお願いします。",
      }}
      onSubmit={handleSubmit}
    >
      <Stack>
        <Textarea
          label="コメント"
          name="comment"
          placeholder="例) よろしくお願いします。"
          rows={5}
          required
          maxLength={10}
          minLength={5}
        />
        <Button type="submit" title="登録" color="blue" />
      </Stack>
    </Form>
  );
};
 
export default App;
```

![使用例](/images/view/textarea/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| name | 入力フィールドの名前を指定します。 | 必須 |
| label | 入力フィールドのラベルを指定します。 | 任意 |
| placeholder | 入力フィールドのプレースホルダーを指定します。 | 任意 |
| rows | 入力フィールドの行数を指定します。 | 任意 |
| required | 入力フィールドが必須かどうかを指定します。 `true` の場合、入力が必須になります。 | `false` |
| disabled | 入力フィールドを無効にするかどうかを指定します。 `true` の場合、入力フィールドが無効になります。 | `false` |
| maxLength | 入力可能な最大文字数を指定します。 | 任意 |
| minLength | 入力が必要な最小文字数を指定します。 | 任意 |
| onChange | 入力内容の変更を検知するイベントハンドラー関数を指定します。引数として [Reactイベントオブジェクト (opens in a new tab)](https://ja.react.dev/reference/react-dom/components/common#react-event-object) が渡されます。 | 任意 |

[TextInput](/view/form/view_text_input/) [Select](/view/form/view_select/)
---
ビュー

関数

copyToClipboard

# copyToClipboard

`copyToClipboard` は、指定された文字列をクリップボードにコピーするための関数です。また、コピーが成功したことを示すトーストメッセージも表示します。

## 基本的な使い方 [](#基本的な使い方)

```
import { copyToClipboard } from "@basemachina/view";
 
const App = () => {
  const handleClick = () => {
    copyToClipboard("user-id", "ユーザーIDをコピーしました！");
  };
 
  return <button onClick={handleClick}>コピー</button>;
};
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `value` | `string` | クリップボードにコピーする文字列。 | `value` |
| `message` | `string` (任意) | コピー成功時に表示するカスタムメッセージ。指定がない場合、デフォルトのメッセージ `'コピーしました'` が表示されます。 | `'コピーしました！'` |

### 戻り値 [](#戻り値)

この関数は戻り値を返しません。

[useURLQueries](/view/function/view_use_url_queries/) [showSuccessToast / showErrorToast](/view/function/view_show_toast/)
---
ビュー

関数

createActionJob

# createActionJob

`createActionJob` は、アクションをジョブとして実行する関数です。

## 基本的な使い方 [](#基本的な使い方)

```
import {
  createActionJob,
  showSuccessToast,
  showErrorToast,
  Form,
  VStack,
  Box,
  TextInput,
  Checkbox,
  DateTimePicker,
  Button,
} from "@basemachina/view";
 
const App = () => {
  const initialValues = {
    // アクションの引数
    message: "",
    // 以下、createActionJob関数のオプション
    scheduledAt: null,
    redirect: true,
  };
 
  const handleSubmit = async ({ values }) => {
    const { message, redirect, scheduledAt } = values;
    try {
      const { actionJobId } = await createActionJob(
        // actionId
        "job-test",
        // args
        { message },
        // options
        { redirect, scheduledAt },
      );
      showSuccessToast(`ジョブ: ${actionJobId} を作成しました`);
    } catch (err) {
      showErrorToast(err.message);
    }
  };
 
  return (
    <Form initialValues={initialValues} onSubmit={handleSubmit}>
      <VStack>
        <Box>
          <TextInput name="message" label="メッセージ" />
        </Box>
        <Box>
          <DateTimePicker name="scheduledAt" label="予約実行日時" />
        </Box>
        <Checkbox name="redirect" label="自動でジョブ詳細に遷移する" />
        <Button type="submit" title="ジョブを作成する" color="blue" />
      </VStack>
    </Form>
  );
};
 
export default App;
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 必須 ・ 任意 | 説明 | 例 |
| --- | --- | --- | --- | --- |
| `actionId` | `string` | 必須 | 実行するアクションのID、または識別子。 | `'c3hc2ii23akg0sokf9j0'`, `'get-user'` |
| `args` | `object` | 任意 | アクションを実行するための引数で、 キーがパラメータ名、値がパラメータに渡す値のオブジェクト。 | `{ username: 'JohnDoe' }` |
| `options` | `object` | 任意 | ジョブの詳細設定。 | `{ scheduledAt: 1609459200 }` |
| `options.scheduledAt` | `Date | string | number` | 任意 | ジョブの予約実行日時。 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。日時は現在から30日以内の値を指定できます。 | `new Date()`, `'2023-01-01'`, `1609459200` |
| `options.redirect` | `boolean` | 任意 | ジョブの作成後に、自動的にジョブ詳細画面へ移動する設定。 | `true`, `false` |

なおパラメータの入力値の種類ごとに `args` へ渡せる値の型は以下です。

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `actionJobId` | `string` | 作成したジョブのID。 | `cpt8gkab5gv1ibk8r5h0` |

[showSuccessToast / showErrorToast](/view/function/view_show_toast/) [getActionJobResult](/view/function/view_get_action_job_result/)
---
ビュー

関数

createReviewRequest

# createReviewRequest

`createReviewRequest` は、アクションのレビュー依頼を作成する関数です。

※レビュー依頼を作成するには、事前に対象のアクションに [レビュー設定](/action/review/) が必要です。

## 基本的な使い方 [](#基本的な使い方)

```
import {
  createReviewRequest,
  showSuccessToast,
  showErrorToast,
  Form,
  VStack,
  Box,
  TextInput,
  Checkbox,
  DateTimePicker,
  Button,
} from "@basemachina/view";
 
const App = () => {
  const initialValues = {
    // アクションの引数
    message: "",
    // 以下、createReviewRequest関数のオプション
    redirect: true,
    description: "",
    neverExpires: false,
    expiresIn: null,
  };
 
  const handleSubmit = async ({ values }) => {
    const { message, redirect, description, neverExpires, expiresIn } = values;
    try {
      const { reviewRequestId } = await createReviewRequest(
        // actionId
        "review-test",
        // args
        { message },
        // options
        { redirect, description, neverExpires, expiresIn },
      );
      showSuccessToast(`レビュー依頼: ${reviewRequestId} を作成しました`);
    } catch (err) {
      showErrorToast(err.message);
    }
  };
 
  return (
    <Form initialValues={initialValues} onSubmit={handleSubmit}>
      <VStack>
        <Box>
          <TextInput name="message" label="メッセージ" />
        </Box>
        <Box>
          <TextInput name="description" label="レビューの説明" />
        </Box>
        <Checkbox name="redirect" label="自動でレビュー依頼に遷移する" />
        <Checkbox name="neverExpires" label="レビューを無期限にする" />
        <Box>
          <DateTimePicker name="expiresIn" label="レビュー期限" />
        </Box>
        <Button type="submit" title="レビュー依頼を作成する" color="blue" />
      </VStack>
    </Form>
  );
};
 
export default App;
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 必須 ・ 任意 | 説明 | 例 |
| --- | --- | --- | --- | --- |
| `actionId` | `string` | 必須 | 実行するアクションのID、または識別子。 | `'c3hc2ii23akg0sokf9j0'`, `'get-user'` |
| `args` | `object` | 任意 | アクションを実行するための引数で、 キーがパラメータ名、値がパラメータに渡す値のオブジェクト。 | `{ username: 'JohnDoe' }` |
| `options` | `object` | 任意 | レビュー依頼の詳細設定。 | `{ description: 'レビュー依頼の説明' }` |
| `options.description` | `string` | 任意 | レビュー依頼の説明。最大文字数は1000文字です。 | `'レビュー依頼の説明'` |
| `options.neverExpires` | `boolean` | 任意 | レビュー依頼の期限を無期限に指定します。 `expiresIn` と同時に指定することはできません。 | `true`, `false` |
| `options.expiresIn` | `Date | string | number` | 任意 | レビュー依頼の期限。 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。時間は過去に設定できません。また、 `neverExpires` と同時に指定できません。 | `new Date()`, `'2023-01-01'`, `1609459200` |
| `options.redirect` | `boolean` | 任意 | レビュー依頼の作成後に、自動的にレビュー依頼詳細画面へ移動する設定。 | `true`, `false` |

なおパラメータの入力値の種類ごとに `args` へ渡せる値の型は以下です。

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `reviewRequestId` | `string` | 作成したレビュー依頼のID。 | `cpt8gkab5gv1ibk8r5h0` |

[getActionJobResult](/view/function/view_get_action_job_result/) [Accordion](/view/other/view_accordion/)
---
ビュー

関数

executeAction

# executeAction

`executeAction` は、アクションを実行するための関数です。アクションの識別子とパラメータを指定することで、アクションを実行できます。

コールバック関数内で複数のアクションを連続して呼びたいケースなどでご活用いただけます。

アクションの実行状態をReactアプリケーションのstateとして使用したい場合は [useExecuteAction](/view/function/view_use_execute_action/) および [useExecuteActionLazy](/view/function/view_use_execute_action_lazy/) の使用をおすすめします。

## 基本的な使い方 [](#基本的な使い方)

```
const App = () => {
    ...
    const [address, setAddress] = useState(null)
    const handleClick = async () => {
      const { results: getCompanyResults } = await executeAction("get-company", {
        company_id: companyId,
      })
      const companyPostalCode = getCompanyResults[0].success.postal_code
      const { results: getAddressResults } = await executeAction("get-address-from-postal-code", {
        postal_code: companyPostalCode,
      })
      setAddress(getAddressResults[0].success.address)
    }
    ...
}
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `actionId` | `string` | 実行するアクションのID、または識別子。 | `c3hc2ii23akg0sokf9j0`, `get-user` |
| `args` | `object` | アクションを実行するための引数で、 キーがパラメータ名、値がパラメータに渡す値のオブジェクトです。 | `{ username: 'JohnDoe' }` |

なおパラメータの入力値の種類ごとに `args` のプロパティの値に渡せる値の型は以下です。

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `results` | `Array` | アクションの実行結果の配列。各要素には `success` と `failure` のプロパティが含まれます。 | `[{"success":[{"id":1,"name":"山田太郎"}]}]` |

[useExecuteActionLazy](/view/function/view_use_execute_action_lazy/) [openLink](/view/function/view_open_link/)
---
ビュー

関数

getActionJobResult

# getActionJobResult

`getActionJobResult` は、ジョブの結果を取得する関数です。

## 基本的な使い方 [](#基本的な使い方)

```
import { useCallback, useState } from "react";
import {
  getActionJobResult,
  showErrorToast,
  Form,
  VStack,
  Box,
  TextInput,
  Button,
  Heading,
} from "@basemachina/view";
 
const App = () => {
  const [jobResult, setJobResult] = useState();
  const handleSubmit = async ({ values }) => {
    const { actionJobId } = values;
    try {
      const jobResult = await getActionJobResult(actionJobId);
      setJobResult(jobResult);
    } catch (err) {
      showErrorToast(err.message);
    }
  };
 
  return (
    <>
      <Form onSubmit={handleSubmit}>
        <VStack>
          <Box>
            <TextInput name="actionJobId" label="ジョブID" />
          </Box>
          <Button type="submit" title="ジョブの結果を取得する" color="blue" />
        </VStack>
      </Form>
      <VStack>
        <Heading text="ジョブの結果" />
        <pre>{JSON.stringify(jobResult, null, 2)}</pre>
      </VStack>
    </>
  );
};
 
export default App;
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 必須 ・ 任意 | 説明 | 例 |
| --- | --- | --- | --- | --- |
| `actionJobId` | `string` | 必須 | 結果を取得するジョブのID。ジョブのIDは、ジョブの詳細ページのURL末尾か、createActionJob関数の戻り値から取得できます。 | `'c3hc2ii23akg0sokf9j0'` |

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `results` | `Array` | ジョブの結果の配列。形式はアクションの実行結果と同じです。配列の各要素は、 `success` と `failure` のプロパティを持ちます。 | `[{"success":[{"id":1,"name":"山田太郎"}]}]` |
| `byteSize` | `number` | 結果のバイトサイズ。大きすぎるジョブの結果を画面表示に使うかどうかの分岐などに使うことができます。 | `126` |

[createActionJob](/view/function/view_create_action_job/) [createReviewRequest](/view/function/view_create_review_request/)
---
ビュー

関数

openActionLink

# openActionLink

`openActionLink` は、指定したアクションへのリンクを開くための関数です。リンクを開く際に、引数やオプションを指定できます。

## 基本的な使い方 [](#基本的な使い方)

```
import { openActionLink } from "@basemachina/view";
 
const App = () => {
  const handleClick = () => {
    openActionLink(
      "action-id",
      {
        param1: "value1",
        param2: "value2",
      },
      {
        newTab: true,
        openAndRun: true,
      },
    );
  };
 
  return <button onClick={handleClick}>Open link</button>;
};
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `actionId` | `string` | 開きたいアクションのID、または識別子。 | `c3hc2ii23akg0sokf9j0`, `get-user` |
| `params` | `object` | アクションを開く際に指定する引数。引数の名前と値のペアを持つオブジェクトです。 | `{ param1: "value1", param2: "value2" }` |
| `options` | `object` | リンクを開くオプションを指定するオブジェクト。新しいタブで開くかどうかを指定する `newTab` プロパティと、リンクを開いたときにアクションを即時実行する `openAndRun` プロパティを持つことができます。 | `{ newTab: true, openAndRun: true }` |

### 戻り値 [](#戻り値)

`openActionLink` 関数は戻り値を返しません。

ただし、関数の実行によりアクションへのリンクが開かれ、その結果が画面に表示されます。

[openLink](/view/function/view_open_link/) [openViewLink](/view/function/view_open_view_link/)
---
ビュー

関数

openLink

# openLink

`openLink` は、指定されたURLを新しいタブまたは現在のタブで開くための関数です。URLとオプションを指定することで、リンクを開く動作を制御できます。

## 基本的な使い方 [](#基本的な使い方)

```
import { openLink } from "@basemachina/view";
 
const App = () => {
  const handleClick = () => {
    openLink("https://example.com", { newTab: true });
  };
 
  return <button onClick={handleClick}>Open link</button>;
};
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `href` | `string` | 開くリンクのURL。 | `"https://example.com"` |
| `options` | `object` | リンクを開くためのオプションで、 `newTab` プロパティを持つオブジェクトです。 `newTab` が `true` の場合、新しいタブでリンクが開きます。デフォルトは `true` です。 | `{ newTab: true }` |

### 戻り値 [](#戻り値)

この関数は特に戻り値を返しません。

[executeAction](/view/function/view_execute_action/) [openActionLink](/view/function/view_open_action_link/)
---
ビュー

関数

openViewLink

# openViewLink

`openViewLink` は、指定されたビューを開くための関数です。この関数は表示するビューの識別子とそのビューに対するパラメータを引数として取ります。また、オプションとして新しいタブでビューを開くことができます。

## 基本的な使い方 [](#基本的な使い方)

```
import { openViewLink } from "@basemachina/view";
 
const App = () => {
  const handleClick = () => {
    openViewLink(
      "view-id",
      { param1: "value1", param2: "value2" },
      { newTab: true },
    );
  };
 
  return <button onClick={handleClick}>Open link</button>;
};
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `displayId` | `string` | 開くビューの識別子。 | `"user-search"` |
| `params` | `object` | ビューに渡す引数を表すオブジェクト。 | `{param1: "value1", param2: "value2"}` |
| `options` | `object` | ビューを開くためのオプション。新しいタブで開くかどうかを指定する `newTab` プロパティを持つことができます。 | `{newTab: true}` |

### 戻り値 [](#戻り値)

この関数は戻り値を返さないため、戻り値のテーブルはありません。

`openViewLink` 関数は、指定された `displayId` （ビューの識別子）と `params` （ビューに渡すパラメータ）を用いてビューを開きます。 `newTab` オプションが指定されている場合、ビューは新しいタブで開かれます。

[openActionLink](/view/function/view_open_action_link/) [useBaseMachinaContext](/view/function/view_use_basemachina_context/)
---
ビュー

関数

showSuccessToast / showErrorToast

# showSuccessToast / showErrorToast

showSuccessToast / showErrorToastは、成功・失敗時にトーストを表示する関数です。

## 使い方 [](#使い方)

```
import {
  Card,
  HStack,
  Button,
  showSuccessToast,
  showErrorToast,
} from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <HStack>
        <Button
          title="成功"
          type="button"
          color="blue"
          onClick={() =>
            showSuccessToast("処理が完了しました", {
              details: [
                "ユーザー情報を更新しました",
                "メール通知を送信しました",
                "ログに記録しました",
              ],
            })
          }
        />
        <Button
          title="失敗"
          type="button"
          color="red"
          onClick={() =>
            showErrorToast("エラーが発生しました", {
              details: [
                "ユーザー名は10文字以下で設定してください",
                "パスワードに記号を含めてください",
              ],
            })
          }
        />
      </HStack>
    </Card>
  );
};
 
export default App;
```

![showSuccessToastの使用例](/images/view/show_toast/usage_success.png)

![showErrorToastの使用例](/images/view/show_toast/usage_error.png)

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 必須・任意 | 説明 | 例 |
| --- | --- | --- | --- | --- |
| `message` | `string` | 必須 | トーストに表示するメッセージ | `"エラーが発生しました"` |
| `options` | `object` | 任意 | 詳細オプション | `{ details: ["ユーザー名は10文字以下で設定してください", "パスワードに記号を含めてください"] }` |

#### optionsオブジェクトのプロパティ [](#optionsオブジェクトのプロパティ)

| プロパティ名 | 型 | 必須・任意 | 説明 | 例 |
| --- | --- | --- | --- | --- |
| `details` | `string[]` | 任意 | 詳細メッセージの配列 | `["ユーザー名は10文字以下で設定してください", "パスワードに記号を含めてください"]` |

### 戻り値 [](#戻り値)

この関数は戻り値を返しません。

[copyToClipboard](/view/function/view_copy_to_clipboard/) [createActionJob](/view/function/view_create_action_job/)
---
ビュー

関数

useBaseMachinaContext

# useBaseMachinaContext

`useBaseMachinaContext` は、ユーザーコンテキストに関連する情報（ユーザー、プロジェクト、環境）を取得するためのフックです。これらの情報は、一般的にユーザー認証や権限管理などの機能を実装する際に役立ちます。

## 基本的な使い方 [](#基本的な使い方)

```
import {
    useBaseMachinaContext,
} from '@basemachina/view';
 
const App = () => {
    ...
    const basemachinaContext = useBaseMachinaContext();
 
    return (
        <div>
            <p>ユーザー名: {basemachinaContext.user.name}</p>
            <p>環境名: {basemachinaContext.environment.name}</p>
            <p>グループ一覧: {basemachinaContext.groups.map(group => group.name).join(', ')}</p>
        </div>
    )
}
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

このフックは引数を受け付けません。

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `user` | `object` | 現在のユーザーに関する情報を含むオブジェクト。 `id`, `email`, `name`, `groups`, `isTenantAdmin` のプロパティを含みます。 | 詳細は後述します。 |
| `environment` | `object` | 現在の環境に関する情報を含むオブジェクト。 `id`, `name` のプロパティを含みます。 | `{ id: '1', name: 'Environment Name' }` |
| `environmentVariables` | `object` | キーが環境変数の名前、値が環境変数の値のオブジェクト。 | `{ USER_NAME: 'example-user', PROJECT: 'example-project' }` |
| `groups` | `Array` | 現在のプロジェクトに存在するグループに関する情報を含むオブジェクトの配列。各オブジェクトは `id`, `name` のプロパティを含みます。 | `[{ id: '1', name: 'Group1' }, { id: '2', name: 'Group2' }]` |

なお、 `user` プロパティのオブジェクトの各プロパティは以下の通りです。

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `id` | `string` | ユーザーのID | `'1'` |
| `email` | `string` | ユーザーのメールアドレス | `'user@example.com'` |
| `name` | `string` | ユーザー名 | `'User Name'` |
| `groups` | `Array` | ユーザーが所属するグループに関する情報を含むオブジェクトの配列。 | `[{ id: '1', name: 'Group1' }]` |
| `isTenantAdmin` | `boolean` | ユーザーが企業アカウント管理者であれば `true` です。 | `true` |

[openViewLink](/view/function/view_open_view_link/) [useURLQueries](/view/function/view_use_url_queries/)
---
ビュー

関数

useExecuteAction

# useExecuteAction

`useExecuteAction` は、アクションをすぐに実行するためのフックです。アクションの識別子とパラメータを指定することで、アクションを実行できます。

## 基本的な使い方 [](#基本的な使い方)

```
const App = () => {
    ...
    const { data, loading, error } = useExecuteAction("action-id", {
        company_name: '株式会社ベースマキナ',
        user_id: 123,
        checked: true,
        created: '2023-01-01',
    })
 
    return (
        <>
            {loading && <LoadingIndicator />}
            {data && <Table rows={data.results[0].success ?? []}/>}
        </>
    )
}
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `actionId` | `string` | 実行するアクションのID、または識別子。 | `c3hc2ii23akg0sokf9j0`, `get-user` |
| `args` | `object` | アクションを実行するための引数で、 キーがパラメータ名、値がパラメータに渡す値のオブジェクトです。 | `{ username: 'JohnDoe' }` |

なおパラメータの入力値の種類ごとに `args` のプロパティの値に渡せる値の型は以下です。

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `loading` | `boolean` | アクションが現在実行中かどうかを示すブール値。 | `true` |
| `data` | `object` | アクションの実行結果。このオブジェクトは `results` という名前の配列を持っており `success` と `failure` のプロパティが含まれます。 | `{"results":[{"success":[{"id":1,"name":"山田太郎"}]}]}` |
| `error` | `object` | アクションの実行中に発生したエラー。 | - |

[Avatar](/view/media/view_avatar/) [useExecuteActionLazy](/view/function/view_use_execute_action_lazy/)
---
ビュー

関数

useExecuteActionLazy

# useExecuteActionLazy

`useExecuteActionLazy` はアクションの実行を遅延させるためのフックです。このフックはアクションの識別子を引数として受け取り、そのアクションの実行を開始する関数とアクションの実行状態を返します。

## 基本的な使い方 [](#基本的な使い方)

```
const App = () => {
  const [execute, { data, loading, error }] = useExecuteActionLazy("action-id");
 
  const handleClick = () => {
    execute({
      company_name: "株式会社ベースマキナ",
      user_id: 123,
      checked: true,
      created: "2023-01-01",
    });
  };
 
  return (
    <div>
      <button onClick={handleClick}>Execute Action</button>
      {loading && <LoadingIndicator />}
      {data && <Table rows={data.results[0].success ?? []} />}
    </div>
  );
};
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

| 引数名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `actionId` | `string` | 実行するアクションのID、または識別子。 | `c3hc2ii23akg0sokf9j0`, `get-user` |

### 戻り値 [](#戻り値)

| プロパティ名 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| `execute` | `async function` | 引数としてアクションのパラメータを受け取り、アクションを実行する関数。 `data` をプロパティに持つオブジェクトの `Promise` を返します。 | - |
| `state` | `object` | アクションの実行状態を表すオブジェクト。このオブジェクトは `loading` 、 `data` 、 `error` の3つのプロパティを持ちます。 | - |
| `state.loading` | `boolean` | アクションが現在実行中かどうかを示すブール値。 | `true` |
| `state.data` | `object` | アクションの実行結果。このオブジェクトは `results` という名前の配列を持っており `success` と `failure` のプロパティが含まれます。 | `{"results":[{"success":[{"id":1,"name":"山田太郎"}]}]}` |
| `state.error` | `object` | アクションの実行中に発生したエラー。 | - |

なお `execute` 関数の引数のパラメータは、キーがパラメータ名、値がパラメータに渡す値のオブジェクト（例： `{ username: 'JohnDoe' }` ）となり、パラメータの入力値の種類ごとにプロパティの値に渡せる値の型は以下です。

| 入力値の種類 | 型 | 説明 | 例 |
| --- | --- | --- | --- |
| テキスト | `string` | - | `{ company_name: '株式会社ベースマキナ' }` |
| 数値 | `number | null` | - | `{ user_id: 123 }` |
| 日付 | `Date | string | number | null` | `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }` |
| ファイル | `File | null` | - | `{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }` |
| 真偽値 | `boolean` | - | `{ checked: true }` |
| JSON値 | `string | number | Date | null` | JSON値の種類ごとに型が異なります。 テキストなら `string | null` 、数値なら `number | null` 、日付なら `string | number | Date | null` を渡せます。 日付の場合 `string` は `Date` 型に変換できる値、 `number` はUnixTimestamp (秒)を入力してください。 | `{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }` |
| SQL | `string` | - | `{ query: 'SELECT * FROM users;' }` |
| システム値 | `string` | - | `{ offset: '20' }` |
| 配列 | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ user_ids: [10, 11, 12] }` |
| タプル | `Array` | 各要素の種類の型は、各入力値の種類の型と同じです。 | `{ id_and_name: [123, 'taro'] }` |

[useExecuteAction](/view/function/view_use_execute_action/) [executeAction](/view/function/view_execute_action/)
---
ビュー

関数

useURLQueries

# useURLQueries

`useURLQueries` は、現在のURLのクエリパラメータを取得するためのフックです。これにより、アプリケーション内の各コンポーネントがURLパラメータを使用して動作を調整することが可能になります。

## 基本的な使い方 [](#基本的な使い方)

```
import {
    useURLQueries
} from '@basemachina/view'
 
const App = () => {
    const urlQueries = useURLQueries();
    console.log(urlQueries); // クエリパラメータのオブジェクトが出力されます
    ...
}
```

## 詳細なインターフェース [](#詳細なインターフェース)

### 引数 [](#引数)

このフックは引数を取りません。

### 戻り値 [](#戻り値)

| 型 | 説明 | 例 |
| --- | --- | --- |
| `object` | URLのクエリパラメータを表すオブジェクト。キーはクエリパラメータの名前で、値はそのパラメータの値を表します。パラメータが存在しない場合、その値は空オブジェクトとなります。 | `{ query1: 'value1', query2: 'value2' }` |

なお、戻り値のオブジェクトは、各プロパティの値が `string | string[] | undefined` 型になります。

これは、同一のクエリパラメータ名がURL内に複数存在する場合、その値を配列として表現するためです。例えば、URLが `http://example.com?query=value1&query=value2` の場合、戻り値のオブジェクトは `{ query: ['value1', 'value2'] }` となります。

[useBaseMachinaContext](/view/function/view_use_basemachina_context/) [copyToClipboard](/view/function/view_copy_to_clipboard/)
---
ビュー

Git管理

# Git管理

ビューのコードは、基本的にブラウザ上のエディタで編集を行ないますが、「コード取得設定」を有効化することで、アクション経由でビューのコードを取得可能になります。

この機能をGitHubやGitLabなどのワークフローと組み合わせることで、ビューのコードをバージョン管理できます。

活用例は、以下の通りです。

- ファイル分割
- TypeScriptの利用
- 環境ごとに合わせたbranchの切り替え
- 任意のライブラリの使用

また、ビューのコード取得設定を導入しやすくするため、 [ボイラープレートのリポジトリ (opens in a new tab)](https://github.com/basemachina/view-project-boilerplates) と、 [ローカル環境で編集中のビューをプレビューするためのツール (opens in a new tab)](https://github.com/basemachina/bm-view-preview) を提供しています。

## コード取得設定 [](#コード取得設定)

コード取得設定を有効化すると、アクション経由でビューのコードを取得できます。

取得方法の例としては、以下のものが挙げられます。

- HTTP APIアクションで、GitHub API経由でビューのコードを取得する
- GCSアクションで、バケットからビューのコードを取得する

加えて、変数・シークレットの機能と組み合わせることで、環境ごとに別のコードを取得することも可能となります。
通常のビューでは、全環境で共通のコードを使用するので、コード取得設定を有効化する大きな利点となります。

## 利用方法 [](#利用方法)

1. ビューの作成・編集画面で、「コードをアクションで取得する」を選択する

![「コードをアクションで取得する」のトグルスイッチ](/images/view/git_management/enable-code-fetch-setting.png)

1. コードの取得元となるアクションを選択する
  - 例えば、GCSアクションを選択します
1. コードの取得元となるアクションの引数を入力して、実行する
  - 例えば、GCSアクションに `objectName` を指定して実行すると、その結果のコードを実行してビューとして表示します

**コード例 (GCSにアップロードされたview-code.jsx)**

```
import { Alert } from "@basemachina/view";
const App = () => <Alert message="サンプル" />;
export default App;
```

**実行例**

![GCSアクションを実行して、ビューの表示を行なった例](/images/view/git_management/run-code-fetch-setting-action.png)

1. 保存する
  - 次回以降、保存したビューを表示するたびにアクション経由でコードを取得するようになります

## 活用方法 [](#活用方法)

### ファイル分割・TypeScriptの利用 [](#ファイル分割typescriptの利用)

「利用方法」の例のように、JSXファイルを単にアクション経由で取得する形も可能ですし、WebpackとBabelを利用して、分割したTypeScript・TSXファイルをトランスパイルしたうえでバンドルする形でも利用可能です。

実際の設定例は、 [GCSのサンプル (opens in a new tab)](https://github.com/basemachina/view-project-boilerplates/tree/main/gcs-boilerplate) をご覧ください。

### branchの切り替え [](#branchの切り替え)

例えばGCSアクションを使う場合、環境ごとに合わせたbranch名を [変数](/action/vars_secrets/) に登録することで、本番環境ではmain branchの、開発環境ではdevelop branchのコードを使うといったことが可能となります。

以下のように、変数を登録し、GCSアクションの設定を行なうことで実現できます。

#### 変数の登録例 [](#変数の登録例)

![変数にVIEW\_CODE\_BRANCH\_NAMEという値を追加し、developと設定する例](/images/view/git_management/view-code-branch-name-var.png)

#### GCSアクションの設定例 [](#gcsアクションの設定例)

![GCSのオブジェクト名にvars.VIEW\_CODE\_BRANCH\_NAMEをPrefixとして使う例](/images/view/git_management/view-code-branch-name-gcs-config.png)

[GCSのサンプル (opens in a new tab)](https://github.com/basemachina/view-project-boilerplates/tree/main/gcs-boilerplate) では、branch名ごとにPrefixを分けてファイルアップロードを行なうように初めから設定されています。

### 任意のライブラリの使用 [](#任意のライブラリの使用)

「ファイル分割・TypeScriptの利用」の例と同様、Webpackを利用することで任意のサードパーティのライブラリをバンドルして使用できます。

ただし、ライブラリのサイズによってはビューの読み込みに時間がかかってしまう点、およびブラウザ上で動作しないライブラリは使用できない点に注意してください。

[GCSのサンプル (opens in a new tab)](https://github.com/basemachina/view-project-boilerplates/tree/main/gcs-boilerplate) の設定内容は、 `npm install` で追加したpackageがバンドル対象となります。

### マスターデータ取得設定の利用 [](#マスターデータ取得設定の利用)

ファイルの指定に使うパラメーターで [マスターデータ取得設定](/action/parameter/master_data_fetch_setting/) を利用することで、ファイル名入力の手間を省くことができます。

[外部ライブラリ](/view/external_libs/) [型定義ファイルのダウンロード](/view/download_dts_file/)
---
ビュー

レイアウト

Box

# Box

Boxコンポーネントは、レイアウトや配置の制御を行なうためのコンテナです。サイズやオーバーフローの制御が可能です。

## 基本的な使い方 [](#基本的な使い方)

```
<Box flex={1} width="md" height="lg">
  ここにコンテンツが表示されます。
</Box>
```

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| flex | サイズを調整するためのプロパティです。1, 2, 3, 'auto', 'initial' のいずれかを指定できます。 | 'auto' |
| overflow | オーバーフローを制御するためのプロパティです。'auto', 'hidden', 'scroll', 'visible' などが指定できます。 | 'visible' |
| width | 幅を制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。 | 'auto' |
| height | 高さを制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。 | 'auto' |
| children | Boxコンポーネント内に表示するコンテンツを指定します。 | なし |

[Card](/view/layout/view_card/) [Grid](/view/layout/view_grid/)
---
ビュー

レイアウト

Card

# Card

Cardコンポーネントはコンテンツを表示するためのコンテナです。内側のパディング、ボーダー、角丸がデフォルトで適用されています。

## 使用例 [](#使用例)

```
<Card flex={1}>ここにコンテンツが表示されます。</Card>
```

![使用例](/images/view/card/usage.png)

## インターフェース [](#インターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| flex | サイズを調整するためのプロパティです。1, 2, 3, 'auto', 'initial' のいずれかを指定できます。 | 'auto' |
| children | Cardコンポーネント内に表示するコンテンツを指定します。 | なし |

[ビューとは](/view/what_is_view/) [Box](/view/layout/view_box/)
---
ビュー

レイアウト

Drawer

# Drawer

Drawerコンポーネントは、一時的に開くサイドバーの表示に使うコンポーネントです。
サイドバーはページの右側に表示され、×ボタンをクリックするか、サイドバー外の領域をクリックすることで閉じることができます。
タイトルおよび、表示する内容を指定できます。

開閉状態の管理は、 `useState` を使ってDrawerコンポーネント外で行なう必要があります。

## 基本的な使い方 [](#基本的な使い方)

```
import { useState } from "react";
import { Box, Drawer, Button } from "@basemachina/view";
 
const App = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button title="サイドバーを開く" onClick={() => setOpen(true)} />
      <Drawer title="タイトル" open={open} onClose={() => setOpen(false)}>
        <Box>表示内容</Box>
      </Drawer>
    </>
  );
};
 
export default App;
```

![使用例](/images/view/drawer/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| open | Drawerの開閉状態を指定します。 | 必須 |
| onClose | Drawerを閉じる関数を指定します。 | 必須 |
| title | Drawerに表示するタイトル文字列を指定します。 | 必須 |
| children | Drawerコンポーネント内に表示するコンテンツを指定します。 | なし |

[HStack / VStack](/view/layout/view_stack/) [Table](/view/data_display/view_table/)
---
ビュー

レイアウト

Flexbox

# Flexbox

Flexboxコンポーネントは、フレキシブルボックスレイアウトを実現するためのコンテナです。方向、配置、アイテムの並び方、折り返し、オーバーフロー、幅、高さを設定できます。

## 基本的な使い方 [](#基本的な使い方)

```
<Flexbox
  direction="row"
  justify="center"
  align="center"
  items="center"
  wrap="wrap"
>
  <Card>ここにコンテンツが表示されます。</Card>
  <Card>ここにもコンテンツが表示されます。</Card>
</Flexbox>
```

![使用例](/images/view/flexbox/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| direction | フレックスボックスの方向を指定します。'row' または 'col' のいずれかを指定できます。 | 'row' |
| justify | コンテンツの水平方向の配置を指定します。'start', 'end', 'center', 'between' のいずれかを指定できます。 | 'start' |
| align | コンテンツの垂直方向の配置を指定します。'start', 'end', 'center', 'between' のいずれかを指定できます。 | 'start' |
| items | アイテムの配置を指定します。'start', 'end', 'center' のいずれかを指定できます。 | 'start' |
| wrap | 折り返しの設定を指定します。'wrap', 'nowrap', 'wrap-reverse' のいずれかを指定できます。 | 'wrap' |
| overflow | オーバーフローを制御するためのプロパティです。 | 'visible' |
| width | 幅を制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。 | 'auto' |
| height | 高さを制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。 | 'auto' |
| children | Flexboxコンポーネント内に表示するコンテンツを指定します。 | なし |

[Grid](/view/layout/view_grid/) [HStack / VStack](/view/layout/view_stack/)
---
ビュー

レイアウト

Grid

# Grid

Gridコンポーネントは、グリッドレイアウトを実現するためのコンテナです。方向、繰り返し回数、ギャップ、幅、高さを設定できます。

## 基本的な使い方 [](#基本的な使い方)

```
<Grid direction="row" repeatCount={2} gap={4} width="xl" height="lg">
  <Card>ここにコンテンツが表示されます。</Card>
  <Card>ここにもコンテンツが表示されます。</Card>
</Grid>
```

![使用例](/images/view/grid/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| direction | グリッドの方向を指定します。'row' または 'col' のいずれかを指定できます。 | 'col' |
| repeatCount | グリッドの繰り返し回数を指定します。1, 2, 3, 4, 5, 6, 7, 8, 'auto' のいずれかを指定できます。 | 2 |
| gap | グリッドのギャップを指定します。0, 1, 2, 3, 4, 5, 6, 7, 8 のいずれかを指定できます。 | 4 |
| width | 幅を制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。 | 'auto' |
| height | 高さを制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。 | 'auto' |
| children | Gridコンポーネント内に表示するコンテンツを指定します。 | なし |

[Box](/view/layout/view_box/) [Flexbox](/view/layout/view_flexbox/)
---
ビュー

レイアウト

HStack / VStack

# HStack / VStack

HStack / VStackコンポーネントは、横方向（HStack）、または縦方向（VStack）のレイアウトを簡易的に行なうためのコンポーネントです。
このコンポーネントの内側の要素は、スペースを空けた上で配置されます。

## 基本的な使い方 [](#基本的な使い方)

```
<VStack>
  <HStack>
    <Box>A</Box>
    <Box>B</Box>
    <Box>C</Box>
  </HStack>
  <Box>D</Box>
  <Box>E</Box>
  <Box>F</Box>
</VStack>
```

## 詳細なインターフェース [](#詳細なインターフェース)

追加の設定項目は存在しません。

[Flexbox](/view/layout/view_flexbox/) [Drawer](/view/layout/view_drawer/)
---
ビュー

リンク

ActionLink

# ActionLink

ActionLinkコンポーネントは、ユーザーがクリックすることで指定されたアクション実行画面に画面移動するためのコンポーネントです。ボタンまたはテキストの形式で表示できます。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, ActionLink } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <ActionLink
        actionId="sampleActionId"
        params={{
          param1: "value1",
          param2: "value2",
        }}
        color="red"
        type="button"
        newTab={true}
      >
        Run Action
      </ActionLink>
    </Card>
  );
};
export default App;
```

![使用例](/images/view/actionlink/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| actionId | 実行するアクションのID、または識別子を指定します。 | 必須 | なし |
| params | アクションに渡すパラメータを指定します。オブジェクト形式で複数のパラメータを設定可能です。 | 任意 |  |
| openAndRun | 新しいタブでアクションを開き、同時に実行するかどうかを指定します。 `true` の場合、画面移動直後にアクションが自動で実行されます。 | 任意 | `false` |
| type | リンクの表示形式を指定します。 `button` または `text` を選択可能です。 | 任意 | `text` |
| newTab | アクションを新しいタブで開くかどうかを指定します。 `true` の場合、新しいタブで開きます。 | 任意 | `false` |
| children | リンクのテキストを指定します。 | 必須 | なし |
| color | リンクの色を指定します。 `blue` または `red` を選択可能です。 | 任意 | `blue` |

[Link](/view/link/view_link/) [ViewLink](/view/link/view_view_link/)
---
ビュー

リンク

Link

# Link

Linkコンポーネントは、ユーザーがクリックすることで指定されたURLに移動するためのコンポーネントです。ボタンまたはテキストの形式で表示が可能です。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Link } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Link
        href="https://www.example.com"
        color="blue"
        type="text"
        newTab={true}
      >
        Visit example
      </Link>
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/link/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| href | リンク先のURLを指定します。 | 必須 | なし |
| type | リンクの表示スタイルを指定します。 `button` または `text` を選択可能です。 | 任意 | `text` |
| newTab | リンクを新しいタブで開くかどうかを指定します。 `true` の場合、新しいタブで開きます。 | 任意 | `true` |
| children | リンクのテキストを指定します。 | 必須 | なし |
| color | リンクの色を指定します。 `blue` または `red` を選択可能です。 | 任意 | `blue` |

[Input](/view/form/view_input/) [ActionLink](/view/link/view_action_link/)
---
ビュー

リンク

ViewLink

# ViewLink

ViewLinkコンポーネントは、ビューに移動するためのリンクを生成するためのコンポーネントです。ボタンまたはテキストの形式で表示が可能です。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, ViewLink } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <ViewLink
        viewId="displayIdExample"
        type="text"
        newTab={true}
        color="blue"
      >
        遷移先のタイトル
      </ViewLink>
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/viewlink/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| viewId | 移動先のビューの識別子を指定します。 | 必須 |
| params | 移動先のビューに渡すパラメータを指定します。 | 省略可能 |
| type | リンクの表示形式を指定します。 `button` または `text` を選択可能です。 | `text` |
| newTab | リンクを新しいタブで開くかどうかを指定します。 `true` の場合、新しいタブで開きます。 | `false` |
| children | リンクのテキストを指定します。 | 必須 |
| color | リンクの色を指定します。 `blue` または `red` を選択可能です。 | `blue` |

[ActionLink](/view/link/view_action_link/) [Image](/view/media/view_image/)
---
ビュー

画像・動画

Avatar

# Avatar

Avatarコンポーネントは、アバター画像を表示するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Avatar } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Avatar
        url="https://example.com/images/cute_cat.png"
        size="lg"
        shape="circle"
      />
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/avatar/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| url | アバターの画像のURLを指定します。 | 必須 | なし |
| size | アバターのサイズを指定します。 `sm`, `md`, `lg`, `xl` のいずれかを指定できます。 | 任意 | `md` |
| shape | アバターの形状を指定します。 `circle` または `square` を指定できます。 | 任意 | `circle` |

[Video](/view/media/view_video/) [useExecuteAction](/view/function/view_use_execute_action/)
---
ビュー

画像・動画

Image

# Image

Imageコンポーネントは、画像を表示するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Image } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Image url="https://example.com/images/cute_cat.png" objectFit="cover" />
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/image/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| url | 表示する画像のURLを指定します。 | 必須 | なし |
| objectFit | 画像の表示方法を指定します。 `cover`, `contain`, `fill`, `none`, `scale-down` のいずれかを指定できます。 | 任意 | `cover` |

[ViewLink](/view/link/view_view_link/) [Video](/view/media/view_video/)
---
ビュー

画像・動画

Video

# Video

Videoコンポーネントは、動画を表示するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Video } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Video url="https://example.com/videos/cute_cat.mp4" />
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/video/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| url | 表示する動画のURLを指定します。 | 必須 | なし |

[Image](/view/media/view_image/) [Avatar](/view/media/view_avatar/)
---
ビュー

その他

Accordion

# Accordion

Accordionコンポーネントは、開閉可能なコンテンツを表示するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Accordion } from "@basemachina/view";
 
const App = () => {
  return (
    <Accordion title="タイトル">
      <Card>コンテンツ</Card>
    </Accordion>
  );
};
 
export default App;
```

![使用例](/images/view/accordion/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| title | アコーディオンメニューのボタンに表示するテキストを指定します。 | 必須 |
| defaultOpen | アコーディオンメニューを初めから開いた状態にするかどうかをbooleanで設定します。 | `false` |
| children | アコーディオンメニュー内に表示するコンテンツを指定します。 | なし |

[createReviewRequest](/view/function/view_create_review_request/) [Alert](/view/other/view_alert/)
---
ビュー

その他

Alert

# Alert

Alertコンポーネントは、アラートを表示するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Alert } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Alert message="メッセージ" color="blue" />
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/alert/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | 必須・任意 | デフォルト値 |
| --- | --- | --- | --- |
| message | アラートに表示するテキストを指定します。 | 必須 | なし |
| color | アラートの色を指定します。 `blue`, `red`, `green`, `yellow`, `gray` のいずれかを指定できます。 | 任意 | `blue` |

[Accordion](/view/other/view_accordion/) [Badge](/view/other/view_badge/)
---
ビュー

その他

Badge

# Badge

Badgeコンポーネントは、バッジを表示するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Badge } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Badge title="タイトル" color="blue" />
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/badge/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| title | バッジに表示するテキストを指定します。 | 必須 |
| color | バッジの色を指定します。 `blue`, `red`, `green`, `yellow`, `gray` のいずれかを指定できます。 | `blue` |

[Alert](/view/other/view_alert/) [ClipboardButton](/view/other/view_clipboard_button/)
---
ビュー

その他

ClipboardButton

# ClipboardButton

ClipboardButtonコンポーネントは、テキストをクリップボードにコピーするためのボタンコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { ClipboardButton } from "@basemachina/view";
 
const App = () => {
  return <ClipboardButton text="コピーしたいテキスト" />;
};
 
export default App;
```

![使用例](/images/view/clipboard_button/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| text | クリップボードにコピーするテキストを指定します。 | 必須 |

[Badge](/view/other/view_badge/) [Heading](/view/other/view_heading/)
---
ビュー

その他

Heading

# Heading

Headingコンポーネントは、見出しを表示するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, Heading } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <Heading text="タイトル" size="md" />
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/heading/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| text | 見出しに表示するテキストを指定します。 | 必須 |
| size | 見出しの大きさを指定します。 `md`, `lg`, `xl` のいずれかを指定できます。 | `md` |

[ClipboardButton](/view/other/view_clipboard_button/) [LoadingIndicator](/view/other/view_loading_indicator/)
---
ビュー

その他

LoadingIndicator

# LoadingIndicator

LoadingIndicatorコンポーネントは、インジケーターを表示するためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { Card, LoadingIndicator } from "@basemachina/view";
 
const App = () => {
  return (
    <Card>
      <LoadingIndicator type="spin" color="#6366f1" />
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/indicator/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| type | インジケーターの種類を指定します。 `blank`, `balls`, `bars`, `bubbles`, `cubes`, `cylon`, `spin`, `spinningBubbles`, `spokes` のいずれかを指定できます。 | `spin` |
| color | インジケーターの色を指定します。カラーコードで指定できます。 | `#6366f1` |

[Heading](/view/other/view_heading/) [Pagination](/view/other/view_pagination/)
---
ビュー

その他

Pagination

# Pagination

Paginationコンポーネントは、ページネーションをするためのコンポーネントです。

## 基本的な使い方 [](#基本的な使い方)

```
import { useState } from "react";
import { Card, Pagination } from "@basemachina/view";
 
const App = () => {
  const [page, setPage] = useState(1);
  return (
    <Card>
      <Pagination
        currentPage={page}
        itemsPerPage={10}
        totalItems={100}
        onChange={(page) => setPage(page)}
      />
    </Card>
  );
};
 
export default App;
```

![使用例](/images/view/pagination/usage.png)

## 詳細なインターフェース [](#詳細なインターフェース)

| 名前 | 説明 | デフォルト値 |
| --- | --- | --- |
| currentPage | 現在のページ番号を指定します。 | 必須 |
| itemsPerPage | 1ページあたりのアイテム数を指定します。 | 必須 |
| totalItems | 全アイテム数を指定します。 | - |
| onChange | ページ変更時に実行する関数を指定します。 | 必須 |

[LoadingIndicator](/view/other/view_loading_indicator/) [外部ライブラリ](/view/external_libs/)
---
ビュー

ビューとは

# ビューとは

ビューとは、JavaScriptを使うことで自由なUIを作成できる機能です。

ベースマキナが用意したコンポーネントを使って自由度の高いUIを実現しつつ、フルスクラッチの画面開発よりも圧倒的に早く管理画面を構築できます。

ビューではデータの表示だけではなく、画面表示後にアクションを呼び出したり、画面の移動もできます。

単一のアクションと結果加工のスクリプトでは難しい、複雑な業務をする画面や複数のデータを一箇所に集約して業務効率を上げるための画面を作成できます。

## ビューで使える機能 [](#ビューで使える機能)

ビューのなかでは、ベースマキナの他の機能を関数を呼び出して利用できます。

- アクションの呼び出し
- ログイン・権限情報の利用
- 画面移動（アクション、ビュー、外部URL）
- 別の画面から移動してきた際のURLパラメーターの受け取り

## ビューの作成方法 [](#ビューの作成方法)

ビューをベースマキナの画面上で作成する方法を説明します。

まず、ビューの一覧・作成画面には画面右上の下記のアイコンをクリックすることで移動できます。

![アイコン](/images/what_is_view/menubar_icon.png)

ビューは通常のWebフロントエンド開発のように、JavaScriptを利用することで作成できます。

Reactコンポーネントとして宣言して、 `default export` されたものが画面に表示されます。

ビューを作成するには、次の情報を入力する必要があります。

- 名前
- 識別子
- コード（JavaScript）

識別子は画面移動時に移動先のビューを特定する際などに使います。

また、フォームでJavaScriptを入力すると画面右側にプレビューが表示されます。

![アイコン](/images/what_is_view/form.png)

ビューの作成に使われるコードは次のようなイメージです。

`React` のコードを呼び出して利用したり、 `@basemachina/view` というベースマキナ製のパッケージをインポートして利用できます。

また、前述の通りアクションの呼び出しなども関数経由で行なえます。

```
import { useState } from "react";
import {
  Flexbox,
  Card,
  Chart,
  Form,
  Image,
  DatePicker,
  useExecuteAction,
  useURLQueries,
  ...
} from "@basemachina/view";
 
const BMBankView = () => {
  const urlQueries = useURLQueries()
  const userId = urlQueries["userId"]
  const [deactivate, { errors }] = useExecuteAction("deactivate-action-id")
  const handleDeactivateButtonClick = () => {
    deactive([{
        name: "userId",
        value: userId
    }])
  }
 
  return (
    <Flexbox width="full" direction="col">
      <Flexbox direction="row" width="full" items="center" justify="between">
        <Heading text={`財前　五郎 (userID: ${userId})`} size="xl" />
        <Grid gap={2}>
          <Button title="無効化する" color="red" onClick={handleDeactivateButtonClick} />
        </Grid>
      </Flexbox>
      <Flexbox direction="row" width="full">
        <Box flex={1}>
          <Card>
            ...
          </Card>
        </Box>
        ...
      </Flexbox>
    </Flexbox>
  );
};
export default BMBankView;
```

[設定内容のダウンロード](/action/download_action_settings/) [Card](/view/layout/view_card/)
---