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

この記事では、アクション設定でカスタムスクリプトを使用する方法を紹介します。

IM-BloomMakerには、さまざまな処理に対応したアクションが用意されています。標準で用意されているアクションだけでは実現が難しい処理も、カスタムスクリプトを使用することで、独自の処理を追加できます。

カスタムスクリプトではJavaScript（ES6）を記述できますが、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（設定用メソッド）を経由して変数にアクセスできます。なお、カスタムスクリプト内では、オブジェクトなどのデータに対する操作が複数の変数で影響し合う参照渡しは行われません。

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

カスタムスクリプトを使用する場合、アクションエディタから設定します。

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

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

変数を選択すると、アクセサが表示されます。アクセサは、オブジェクトのプロパティ（属性や値）にアクセスするためのメソッドです。これにより、カスタムスクリプトから変数などの情報を確認できます。$imを選択した場合は、カスタムスクリプトで利用できるIM-BloomMaker独自のAPIも表示されます。

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

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

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

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

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

実行条件を追加する

1. カスタムスクリプトの実行結果を条件として利用する場合は、「実行条件」タブから「上記カスタムスクリプトの返却値が true のとき」を追加します。
2. スクリプトを記述します。

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

ここでは、カスタムスクリプトを使用した具体的な例と、スクリプトの一部を紹介します。実際に画面を作成しながら、カスタムスクリプトの記述方法を確認してみましょう。

$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関数は、配列から指定した位置の要素を削除（または挿入）するために使用します。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 にクエリパラメータとして追加することで、動的に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の機能を最大限に発揮させるためにも、ぜひご活用ください。