Developer Portal

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

公開日: 2024-09-30 / カテゴリ: IM-BloomMaker

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

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

カスタムスクリプトではJavaScript（ES6）を記述できますが、IM-BloomMaker独自の記法や利用できる機能に制限があります。この記事では、カスタムスクリプトの基本的な使い方や注意点、具体的な使用例を紹介します。

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

IM-BloomMakerのカスタムスクリプトは、ユーザの操作（アクション）をきっかけに、独自の処理を実行するための機能です。アクション設定の「標準部品」の一つとして提供されており、標準で用意されているアクションアイテムでは対応できない処理を実装するときに使用します。標準のアクションアイテムでは対応できない処理をカスタムスクリプトで補うことで、画面の用途に合わせた柔軟な処理を実現できます。

アクションアイテム一覧

標準部品には、よく利用される処理に対応したアクションアイテムが用意されています。カスタムスクリプトを使用する前に、標準のアクションアイテムで実現できる処理がないか確認しておきましょう。

ローコード操作マニュアル - IM-BloomMakerのアクション

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

ブラウザへの対応とトランスパイラ

IM-BloomMakerのカスタムスクリプトでは、ES6ベースのスクリプトを自動でトランスパイル（変換）する機能が実装されています。これにより、ES6に対応していないレガシーブラウザを意識せず、ラムダ式やテンプレートリテラルなどを利用できます。

CookBook - IM-BloomMaker でリモートワークの報告メールを送信するアプリを作ってみた

IM-BloomMaker独自の記法

IM-BloomMakerのカスタムスクリプトは、intra-martという開発環境に合わせて、画面の変数や定数などを扱うための独自の記法が用意されています。

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

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

IM-BloomMakerにおける変数の仕組みと注意点

IM-BloomMakerでは、画面のエレメントと変数を自動的に同期する「双方向バインディング」を採用しています。この仕組みにより、変数とエレメントは常に同じ値を共有するため、どちらかを操作するともう一方も即時に更新されます。

ローコード操作マニュアル - 画面変数の編集 > IM-BloomMakerにおける変数の仕組みと注意点

カスタムスクリプトに関する制限事項

カスタムスクリプトでは、利用できるグローバルオブジェクトなどに一部制限があります。そのため、JavaScriptからHTMLを動的に操作するDOM（Document Object Model）を使用できないなど、通常のJavaScriptとは異なる制限があります。また、Macを使用している場合は、マウスボタンの操作に関する関数にも制限があります。

IM-BloomMaker for Accel Platform 2026 Spring リリースノート - 9.2. デザイナ および 実行画面

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

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

  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;

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

カスタムスクリプトにおける$variableの使用方法については、チェックボックスと実行ボタンが配置されている画面を例に、CookBookで詳しく解説しています。このレシピでは上記で紹介したスクリプト以外にも、確認ダイアログの動作に関するカスタムスクリプトの設定や、メッセージ表示に関する実行条件の設定についても確認できます。

CookBook - IM-BloomMaker カスタムスクリプトの使い方と$variableからの取得・代入の方法

$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);

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

カスタムスクリプトにおける$indexや$im.resolveの使用方法については、5行3列のテーブルが配置されている画面を例に、CookBookで詳しく解説しています。このレシピでは、マップ型の配列変数の作成や行削除・行追加のスクリプトの設定について確認できます。

CookBook - IM-BloomMakerでテーブルに行追加・行削除を行う方法

データベースから取得した値を $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]
}

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

カスタムスクリプトにおける$constantの使用方法については、テーブル形式でToDoを一覧表示する画面を例に、チュートリアルガイドで詳しく解説しています。このガイドでは、マップ型の定数の作成や上記で紹介したスクリプトの設定について確認できます。また、テーブルデータの入力エリアでは、環境変数$envを利用してユーザコードを取得する設定についても触れています。

ローコード開発チュートリアルガイド - 4.2.6. 一覧画面の修正

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

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

カスタムスクリプトにおけるFractionの使用方法については、CookBookで詳しく解説しています。また、高精度小数を扱う型や、Fractionクラスで使用できる関数についても確認できます

CookBook - IM-BloomMaker カスタムスクリプトの小数の計算で誤差を出さない方法

テンプレートリテラル ${ } を使って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}`

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

カスタムスクリプトにおけるテンプレートリテラル${ }の使用方法については、CookBookで詳しく解説しています。このレシピでは、ユーザ一覧の同じ行にあるユーザコードを取得するための$indexや$im.resolveといった関数の考え方についても確認できます。

CookBook - IM-BloomMaker のカスタムスクリプト内で $im.resolve を使った一覧画面の作成

まとめ

IM-BloomMakerのアクション設定でカスタムスクリプトを使用すると、標準のアクションだけでは実現しにくい処理を追加できます。一方で、カスタムスクリプトには独自の記法や利用できる機能の制限があるため、まずは標準のアクションで実現できないかを確認したうえで利用することが大切です。

この記事で紹介した以外にも、チュートリアルガイドやCookBookにはカスタムスクリプトのさまざまな使用例が掲載されています。実際の例を参考にしながら、用途に応じたカスタムスクリプトの使い方を確認してみましょう。

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