【プラグイン開発入門③】Actionの注意点～基本編～

こんにちは！今回は、プラグイン開発入門シリーズの第三弾！テーマはプラグインActionの実装です。Action実装の基本事項として把握しておくと便利なことをご紹介していきます。

BubbleプラグインのActionにはServer-side ActionとClient-side Actionの2種類がありますが、実はそれぞれできることとできないことがあったりします。今回の記事では、Action Typeごとの違いを踏まえながらAction実装の基本事項をご紹介していきます。Actionの実装に入る前に頭に入れておいていただけるとスムーズなプラグイン開発に役に立つこと間違いなしです。

※プラグイン開発入門シリーズの前回の記事

blog.nocodelab.jp

1. Server-side ActionとClient-side Actionの違い
2. Plugin Action実装時のAction Typeの選択
3. 本記事でご紹介するポイント
4. ポイント1. モジュールの読み込み方法～Server-side Action～
- 4.1. モジュールの基本
- 4.2. モジュール読み込みコードの書き方
5. ポイント2. 戻り値の利用方法～Server-side ActionとElement～
- 5.1. サーバー上で利用したい（Server-side Action）
- 5.2. クライアント側で利用したい（Elements > Exposed states）
6. まとめ
7. 参考：ノーコードラボの関連記事

1. Server-side ActionとClient-side Actionの違い

本編に入る前に、まずはServer-side ActionとClient-side Actionの特徴を確認しておきましょう！

Server-side Action…Bubbleサーバー上で実行されるActionです。外部サービスAPIの呼び出しや、高度な計算や検索などの実装に使います。Secret key（秘密鍵）を送信するときは必ずServer-side Actionで実装します。基本的にClient-sideで実行するより処理に時間がかかります。
Client-side Action…アプリを実行するブラウザ上で実行されるActionです。ページの操作など、クライアント上で実行される基本的なActionはClient-side Actionで実装します。Option setはClient-side Actionでしか使用できないので、使用する場合はClient-side Actionで実装します。

【Actionの使い分けの例】

Actionをスケジューリングしたい（毎週レポートを作成したい、など）場合→Server-side Action
Secret keyを使用しておらず、ブラウザで関数を実行できる場合→Client-side Action（Client-sideで実行することで処理時間が短くなります。）

※参考：Action types

manual.bubble.io

2. Plugin Action実装時のAction Typeの選択

Action Typeの選択は、PluginエディタのActionsタブで行います。Actionsタブの「Add a new action」から新規Actionを作成後、一番上のGeneral properties > Action TypeでServer-sideかClient-sideを選択できます。

3. 本記事でご紹介するポイント

本記事でご紹介するAction実装のポイントは下記の2点です。

ポイント1. モジュールの読み込み方法～Server-side Action～
ポイント2. 戻り値の利用方法～Server-side ActionとElement～

4. ポイント1. モジュールの読み込み方法～Server-side Action～

Server-side Actionでモジュールを読み込みたいのに読み込めずに困った方がいるかもしれません。本章では、モジュールの読み込み方法についてご紹介します。

4.1. モジュールの基本

JavaScriptのモジュールとは外部ファイルなどを読み込める仕様です。外部APIを利用するActionを実装する場合などでは、Action code内でモジュールを読み込むコードを記述する必要があります。BubbleではNodeモジュールを読み込みたいという場合が多いですよね。

そもそもJavascriptのモジュールはサーバー側で外部ファイルを利用できるようにするために生まれたものなので、Client-side Actionでモジュールを読み込むことはできません。外部ファイルの利用が必要な場合はServer-side Actionで実装しましょう。

4.2. モジュール読み込みコードの書き方

モジュールの読み込み方法にはimportとrequireの2種類がありますが、Bubbleではimportがサポートされていないのでrequireを使って記述します。

Action codeの最初で下記のコードを追加します。

const { module } = require('module');

ノーコードラボのプラグイン「Twitter Tweet」のAction codeをご紹介すると、実際に下記のようにTwitter-API-v2ライブラリを読み込んでいます。

上記のコードを記述して、Action code欄下部の「This action uses node modules」をチェックするとカスタムパッケージ欄が表示され、使用されているモジュールが自動で定義されます。

5. ポイント2. 戻り値の利用方法～Server-side ActionとElement～

Server-side Actionでは、Action実行の結果として得られる戻り値Returned valueを利用できます。戻り値は、ファイルをアップロードするActionのアップロードURLを取得するなどの場合に便利です。

戻り値やreturnはClient-side Actionでは利用できないのですが、同じようなことをクライアント側で行いたい場合にはElementsのExposed statesを利用するという方法があります。本章では、サーバー上とクライアント側で戻り値を利用したい場合の方法をそれぞれご紹介します。

5.1. サーバー上で利用したい（Server-side Action）

Action TypeをServer-side Actionにすると「Returned values」設定項が表示されるのでここで受け取りたい値を作成し、Action codeで値ごとの出力内容を記述します。

プラグイン「Twitter Tweet」のReturned valuesとAction codeの該当箇所を例としてご紹介します。まずReturned valuesではtweet_resultという値が作成されています。

Action codeを確認すると、最下部でtweet_resultの値がresultと定義されており（①）、上部を見ていくとresultはエラーのメッセージや内容が設定されています（②）。

次に、アプリエディタでのresultの利用方法を確認します。下記は、Step1でTwitter TweetプラグインのTweet Actionを実行し、Step2でTweetの結果resultをAlertで表示するというWorkflowです。resultが出力されるようなWorkflowを作成することが出来ました。