機械翻訳について

カスタム処理の作成

カスタム・アクションを作成するには、そのメタデータをJSONファイルに指定し、そのコードをJavaScriptファイルに指定します。 メタデータには、アクションに関する基本的な詳細、実装メソッドに必要な入力パラメータ、およびオプションで値を返すためのオブジェクトが含まれます。

カスタム・アクションの作成に必要な概要を次に示します:

  1. 「アクション・ファイルの作成」 (action.jsonおよびaction.js):
    • action.json: カスタム・アクションのメタデータが含まれます。 入力パラメータを定義し、値を返すオブジェクトを定義するために使用します。 このファイルは、アクション・パレットにアクションを追加したり、プロパティ・ペインにアクションのプロパティを表示するためにデザイナによっても使用されます。
    • action.js: カスタム・アクションの実装に使用されるコードが含まれます。
  2. 「メタデータの追加」からaction.json
  3. action.jsへのカスタム・アクションの場合は「コードの追加」

アクション・ファイルの作成

テンプレートaction.jsおよびaction.jsonファイルを作成するには、次から開始します:

  1. Web Appsタブを選択し、アプリケーション・ノード(最初のノード)とその下にあるリソースノードを展開し、actionsノードの横にあるカスタム・アクションの作成アイコン(+)をクリックします:
    create-custom-action-web-apps-tab.jpgの説明は以下のとおりです
    図create-custom-action-web-apps-tab.jpgの説明

  2. IDフィールドに、新しいカスタム・アクションのアクション・グループ・フォルダの名前を入力し、その後にスラッシュと新しいアクションの名前を入力: <action-group>/<action-name>

    たとえば、my_awesome_actions/sayhelloと入力します。ここで、my_awesome_actionsはグループ・フォルダの名前、sayhelloはアクションの名前です。

    次に示すように、新しく作成された2つのaction.jsおよびaction.jsonテンプレートは、パスresources/actions/<action-group>/<action-name>/の下に格納されます:
    custom-action-files-navigator.jpgの説明は以下のとおりです
    図custom-action-files-navigator.jpgの説明

メタデータの追加

カスタム・アクションのメタデータは、次のものを含むaction.jsonファイルに指定します:

  • アクションの基本詳細(ID、表示名、アイコン…)
  • アクションの実装メソッド(オプション)から値を返すために使用されるオブジェクト
  • アクションの実装メソッドに必要な入力パラメータ(オプション)

アクション・チェーン・エディタは、メタデータを使用してカスタム・アクションを「アクション」パレットに追加し、そのパラメータを「プロパティ」ペインに表示します:
jsac-say-hello-action-properties.pngの説明は以下のとおりです
図jsac-say-hello-action-properties.pngの説明

action.jsonファイルを作成すると、デフォルト・パラメータIDおよび説明が自動的に作成されますが、そのメタデータはaction.jsonに追加されません。 カスタム・アクションに追加する入力パラメータおよび戻りオブジェクトのメタデータのみを追加します。

次に、サンプルのsayHelloカスタム・アクションのaction.jsonファイルの例を、そのパートの内訳とともに示します:
custom_action_parts_of_metadata.pngの説明は以下のとおりです
図custom_action_parts_of_metadata.pngの説明

  • 最初のプロパティ・セットでは、カスタム・アクションに関する基本的な詳細が提供されます。
  • resultShapeプロパティは、アクションの実装メソッドによって返されるオブジェクトの定義を提供します。これは、アクション・チェーンの作成時に別のアクションの入力として使用できます。 たとえば、このアクションによって返される文字列は、文字列をログファイルに書き込むアクションの入力にすることができます。
  • propertyInspectorプロパティは、アクションの入力パラメータを定義します。

カスタム処理プロパティの定義

この表は、action.jsonファイルでカスタム・アクションのプロパティを定義するのに役立ちます。

プロパティ 必須 説明
"id": "", はい カスタム・アクションの一意のID。
"category": "My Category", いいえ 処理パレットにカスタム処理を含めるカテゴリ。 指定しない場合、アクションがカスタム・アクション(「カスタム」)のデフォルト・カテゴリの下に配置されます。
"defaultParameters": { }, いいえ 入力パラメータが定義されていて、デフォルト値が必要な場合は、このプロパティを使用して、入力パラメータ名と値(名前と値のペア)を指定してデフォルト値を指定します。 アクションが最初にアクション・チェーンに追加されると、デフォルトが割り当てられます。
"description": "", いいえ カスタム・アクションの簡単な説明。
"displayName": "", はい アクション・パレットに表示する名前。
"helpDescription": "", いいえ ユーザーがプロパティ・ペインでアクション・タイトルをマウス・オーバーして疑問符アイコンをクリックすると、アクションに表示されるヘルプ・テキスト。
"iconClass": "", はい アクション・パレットでアクションに表示するアイコン。
"referenceable": "self | extension" いいえ 拡張でアクションを使用できるかどうかを示します。デフォルトはselfで、拡張で使用できないことを示します。
"idPrefix": "", いいえ アクション・チェーンに追加されるアクションのアクションIDを自動生成するために使用します。 アクションがアクション・チェーンに追加されると、プロパティ・ペインのアクションIDフィールドに自動入力されます。 指定した場合、このプロパティ値を使用してIDフィールドが移入され、それ以外の場合はアクション名が使用されます。
"resultShape": { "someName": "string" }, いいえ 実装メソッドによって1つ以上の値が返される場合は、このプロパティを使用して、返すオブジェクトを定義します。
"showInDiagram": "on" | "off" いいえ onに設定すると、フロー図のアクション・パレットでアクションを使用できます。
"tests": { "requiresMock": "on" | "off" } いいえ

アクション・チェーン・テストのアクション・モック要件の設定:

オン: アクションをモックする必要があることを示します。

オフ: Visual Builderは、action.jsonresultShapeパラメータが指定されている場合に、予想されるアクション結果の提案を示します。 アクションにresultShapeがない場合、propertyInspectorセクションで指定されたアクション入力パラメータに対して提案が有効になります。

デフォルトはoffです。

"propertyInspector": [{}] いいえ 実装メソッドに必要な入力パラメータのMetadata。 入力パラメータは、アクション・エディタのプロパティ・ペインに表示されます。

カスタム・アクションの入力パラメータの定義

この表を使用して、カスタム・アクションの入力パラメータを定義します。 action.jsonファイルで、propertyInspectorプロパティを使用して必要なパラメータを定義します。

プロパティ 必須 説明
"name": "", はい 入力パラメータの名前。
"help": "", いいえ ユーザーがプロパティ・ペインでパラメータ・タイトルの上にカーソルを移動して疑問符アイコンをクリックすると、入力パラメータに表示されるヘルプ・テキスト。
"label": "", はい プロパティ・ペインの入力パラメータに表示するラベル。
"placeholder": "", いいえ プロパティ・ペインの入力パラメータに表示するヒント・テキスト。
"required": true | false、 いいえ 入力パラメータに値が必要かどうかを示します。
"options": [{}], いいえ 入力パラメータのcomponentプロパティがcomboboxOneまたはcomboboxManyに設定されている場合、このプロパティを使用して、コンボ・ボックスで使用可能なすべての値を指定します。
"type": "", はい パラメータ・データ型。数値、文字列、ブールまたはオブジェクトを指定できます。タイプを指定しない場合、値は文字列として格納されます。
"component: "inputText | textArea | comboboxOne | comboboxMany" はい パラメータがテキスト・フィールド、テキスト・ボックスまたは単一または複数の選択を含む組合せであるかどうかを示します。

コードの追加

新しいアクションを最初に作成したときに作成されたaction.jsテンプレート・ファイルを使用して、カスタム・アクションのコードを指定します。

アクションのコードを指定するには、入力パラメータparametersを受け取るperform()メソッドを使用します。 入力パラメータには、プロパティ・ペインで入力したアクションの入力パラメータの値が含まれます。

入力パラメータを渡す方法

alert()メソッドを使用してサンプルのsayHelloカスタム・アクションを実装するaction.jsperform()メソッドの例を次に示します:

define(['vb/action/action'], (Action) => {  
            'use strict'; 
            class CustomAction extends Action {
               perform(parameters) {   
                  const to = parameters.to; 
                  const message = parameters.message;

                  alert(`${message}, ${to}`);       
                  
                  if (to && message ) {       
                     return Action.createSuccessOutcome({result: to + ", " + message});     
                  } 
                  return Action.createFailureOutcome({result: "Something wrong, unable to SayHello"});    
               }  
            }  
            return CustomAction;
          });

プロパティ・ペインのアクションの入力パラメータ宛先およびメッセージに入力した値は、入力パラメータparameters (前述のコードを参照)を使用してperform()メソッドに渡されます。
jsac-say-hello-input-params.pngの説明は以下のとおりです
図jsac-say-hello-input-params.pngの説明

値がどのように返されるか。

カスタム・アクションを実装するメソッドによって返される1つ以上の値が必要な場合は、action.jsonで返すオブジェクトを定義する必要があります。 そのためには、resultShapeプロパティを使用します。

実装メソッドから値を戻すには、ActionクラスのcreateSuccessOutcome()メソッドを使用します。

例として、サンプルのsayHelloカスタム・アクションのreturnオブジェクトの宣言を次に示します:

"resultShape": { "result": "string" },

コードへのパスの指定

最後に、app-flow.jsonファイルにrequirejsプロパティを追加して、カスタム・アクション・コード・ファイルが格納される場所をVisual Builderに指定する必要があります。 ステップは、次のとおりです。

  1. ナビゲータのWeb Appsタブでwebアプリケーションを選択し、JSONタブを選択してapp-flow.jsonファイルを開きます。
  2. 次の形式を使用して、requirejsプロパティをapp-flow.jsonに追加し、パスに名前を付けることで、カスタム・アクションのコード・ファイルへのパスを指定します:
“<custom-action-ID>”: “resources/actions/<action_group>/<action_name>”

この例では、<custom-action-ID>は、action.jsonで指定されたカスタム・アクション(大/小文字を区別)のIDです。

次に、パスを指定する例を示します:

"requirejs": {
   "paths": { 
      "demo/SayHello": "resources/actions/my_awesome_actions/sayhello/action"
    } 
},