アクション設定でカスタムスクリプトを使用したい

この記事では、アクション設定におけるカスタムスクリプトの使用方法について紹介します。
IM-BloomMakerには、さまざまな用途に対応できる多数のアクションが用意されていますが、より複雑な処理が必要な場合は、アクション設定にスクリプトを直接記述して実行することが可能です。スクリプトはIM-BloomMaker独自の記法を用いるため、制限などを確認しつつ、実際の例を参考にしながら理解を深めていきましょう。

カスタムスクリプトとは？

IM-BloomMakerのカスタムスクリプトは、ユーザの操作（アクション）に応じて独自の処理を実行するために用いるスクリプトです。カスタムスクリプトは、アクション設定における「標準部品」の一つとして提供されており、標準で用意されたアイテムでは対応できない場合に使用します。ユーザの操作に連動して細かい処理を実装できるため、業務要件に合わせた柔軟な対応が可能となります。

IM-BloomMakerのカスタムスクリプトは、JavaScript（ES6）に対応しています。ES6は、Webアプリケーションで動的な処理を行う際に使用されるプログラミング言語で、無名関数を簡潔に記述できるラムダ式や、文字列を簡単に操作できるテンプレートリテラルなどといった構文を利用してスクリプトを実装することができます。

IM-BloomMaker独自の記法

IM-BloomMakerのカスタムスクリプトは、intra-martという開発環境に合わせて、開発者が迅速かつ効率的に作業ができるように独自の記法が用意されています。

• $variable ：変数を扱う場合
• $constant：定数を扱う場合
• $input：サーバーロジックから取得する値を扱う場合
• $i18n：多言語を使い分ける場合
• $env：実装環境に依存する情報を扱う場合
• $index：配列の添え字を使う場合
• $im：IM-BloomMaker独自の動作を行う場合
• Fraction：IM-BloomMaker独自のクラス

カスタムスクリプト内で$variable.キー名と記述することで、getter（取得用メソッド）およびsetter（設定用メソッド）経由で変数にアクセスできます。なお、カスタムスクリプト内では、オブジェクトなどのデータに対する操作が複数の変数で影響し合う参照渡しは行われません。

カスタムスクリプトの使用方法

カスタムスクリプトを使用する場合、「アクション」タブから「カスタムスクリプトを実行する」というアクションアイテムをドラッグ＆ドロップで右ペインに配置します。入力エディタに$を入力すると、IM-BloomMakerで使用できる関数の候補が表示されます。キーボードの上下矢印キーを押すと、選択範囲が一つずつ移動します。キーボードのEnterキーまたは関数名をクリックすると、関数がエディタに入力されます。

選択した変数等への情報を表示する

変数を選択すると、アクセサが表示されます。アクセサとは、オブジェクト指向プログラミングにおける概念で、特定のオブジェクトのプロパティ（属性や値）にアクセスするためのメソッドのことを指します。これにより、直接プロパティにアクセスせずに、制御された方法でオブジェクトのデータを操作できるようになります。$imを選択した場合のみ、カスタムスクリプト内で利用可能な独自APIが表示されます。

カスタムスクリプトの入力エディタでは、以下の二つの方法で変数等の情報を表示できます。

変数を入力する前に情報を表示する

変数が一覧で表示された状態で、右端にある「 」マークをクリックすると、選択した変数の情報が表示されます（キーボードのCtrl+Spaceキーをクリックしても同様の操作ができます）。キーボードの上下矢印キーを押すと、選択範囲が一つずつ移動し、情報の表示も切り替わります。表示を消したい場合は、右上の「×」をクリックしてください。

変数を入力した後に情報を表示する

変数が入力された状態でマウスカーソルを合わせると、下に変数のアクセサが表示されます。カーソルを情報の上に移動すると右側にスクロールが表示されます。

実行条件を追加する

カスタムスクリプトの内容によっては、「実行条件」タブから「上記カスタムスクリプトの返却値が true のとき」を追加し、スクリプトを記述します。

カスタムスクリプトの使用例

カスタムスクリプトの使用例とスクリプトの一部を紹介します。理解を深めるためにも、実際に画面を作成しながらスクリプトを実装してみましょう。

$variable から値を取得・代入する

このスクリプトは、$variable.checkStatus配列に格納されたチェックボックスの状態を確認し、少なくとも一つのチェックボックスが選択されているかどうかを判定しています。結果は $variable.checkResult に保存され、後続の処理で使用されます。

// 配列 checkStatus の要素数を取得 
var length = $variable.checkStatus.length; 

for (var i = 0;i < length;i++) { 
  // チェックボックスが選択状態の場合 
  if ($variable.checkStatus[i]) { 
    // ログ出力 
    console.log('true');   

    // 変数 checkResult にtrueを代入 
    $variable.checkResult = true; 
    return; 
  } 
}  

// ログ出力 
console.log('false'); 

// 変数 checkResult にfalseを代入 
$variable.checkResult = false;

$index の値を $im.resolve で取得する

このスクリプトは、$indexという値を$im.resolveで取得して、indexという変数に代入しています。$im.resolve は、マップ型の変数をオブジェクトとして取得できる関数です。$variable.listという配列から、index の位置にある要素を1つ削除します。splice関数は、配列から指定した位置の要素を削除（または挿入）するために使われるAPIです。IM-BloomMakerの変数に対しても利用できます。

const index = $im.resolve('$index');
$variable.list.splice(index, 1);

データベースから取得した値を $constant の値に置き換える

このスクリプトは、データベースから取得したデータrecordsの各フィールドに対応する定数値を設定しています。forループを使って、records配列内の各要素に対して、繰り返し処理を行っています。各レコードのcategory /status /importanceフィールドが存在する場合、その値を $constant オブジェクトから取得し、定数値に置き換えています。

let records = $variable.endPoint.list.responseData.data.records
for(let i = 0; i < records.length; i++){
  if(records[i].category)records[i].category = $constant.category[records[i].category]
  if(records[i].status)records[i].status = $constant.status[records[i].status]
  if(records[i].importance)records[i].importance = $constant.importance[records[i].importance]
}

Fraction クラスを使って高精度小数を扱う

このスクリプトは、FractionというIM-BloomMaker独自のクラスを使用して、高精度小数の計算を行っています。カスタムスクリプトで通常のJavaScriptの記述により小数の計算を行うと、浮動小数点の誤差により、正確な値が得られません。new Fraction()で定義した値を加算または減算すると、浮動小数点ではなく分数として扱うため、誤差が発生しません。計算結果は、toNumber()で数値に変換して出力しています。

const result1 = new Fraction(0.1).add(new Fraction(0.2));
console.log(result1.toNumber());
// => 0.3
 
const result2 = new Fraction(1).sub(new Fraction(0.9));
console.log(result2.toNumber());￥
// => 0.1

テンプレートリテラル ${ } を使ってURLを生成する

このスクリプトは、特定のユーザコード userCd を取得し、それを元に詳細ページのURLを生成しています。$index という値を$im.resolveで取得して、index という変数に代入しています。$variable.listDataから、指定されたindex のリストアイテムを取得し、その中のuserCdを取り出しています。$constant.DETAIL_URL に、クエリパラメータとして userCd を追加して、動的にURLを生成しています。userCdが文字列であるため、テンプレートリテラル${ }を使って、文字列の中に変数を埋め込んでいます。

const index = $im.resolve('$index')
 
const userCd = $variable.listData[index].userCd
$variable.detailUrl = `${$constant.DETAIL_URL}?userCd=${userCd}`

まとめ

IM-BloomMakerのアクション設定にカスタムスクリプトを活用することで、より複雑な処理を実行できるようになります。この記事で紹介した以外にも、チュートリアルガイドやCookBookにはカスタムスクリプトの実例が掲載されています。カスタムスクリプトがどのような場面で使用されているのか、また標準部品のアイテムとの使い分けについても確認しておくことをおすすめします。

intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。