util

JSプラグインを作成する際に利用可能な汎用メソッドを格納したオブジェクトです。
esmJSPluginを介して利用することができます。

const util = esmJSPlugin.util;

メソッド

getResource

プラグインファイルに格納しているファイル情報を取得するメソッドです。
ZIP ファイルのルートディレクトリを基準とした相対パスを指定することで取得することが出来ます。

構文

getResource(filePath);

引数

filePath

ファイルパスを示す文字列です。

返値

Responseインスタンスを解決するPromiseです。

例

const imageUrl = await esmJSPlugin.util
  .getResource("img/image.jpeg")
  .then((res) => res.blob())
  .then((blob) => URL.createObjectURL());

const data = await esmJSPlugin.util
  .getResource("data/data.json")
  .then((res) => res.json());

getToken

eセールスマネージャーにログインしているユーザーのAPIトークンを取得するメソッドです。

構文

getToken();

引数

なし

返値

ユーザーの API トークンを示す文字列を解決するPromiseです。

例

const token = await esmJSPlugin.util.getToken();

showModalブラウザー

画面上にモーダルを表示するメソッドです。

構文

showModal({
  title: title,
  htmlFile: htmlContent,
  cssFiles: cssContents,
  jsFiles: jsContents,
  size: 'MEDIUM',
  [key: string]: unknown,
});

引数

title

モーダルのタイトルを示す文字列です。

htmlFile

モーダルに表示するHTMLコンテンツを示すBlobまたはFileです。

cssFiles

モーダルに適用するCSSコンテンツを示すBlobまたはFileの配列です。

jsFiles

モーダルに適用するJavaScriptコンテンツを示すBlobまたはFileの配列です。

size

モーダルのサイズを示す文字列です。以下のいずれかを指定してください。

• LARGE
• MEDIUM
• SMALL
• SMALLER

[key: string]: unknown

モーダルに渡す任意の情報を格納することができるプロパティです。
任意の文字列のキーと任意の型の値を設定することができます。
渡された値は、window.configに格納されます。複数指定することも可能です。

返値

Promise<void>です。

例

const fetchBlob = (path) =>
  esmJSPlugin.util.getResource(path).then((res) => res.blob());

const resourcesPromise = Promise.all([
  fetchBlob("src/test.html"),
  fetchBlob("src/test.css"),
  fetchBlob("src/test.js"),
]);

esmJSPlugin.screen.sheetIndex("customer").onLocalToolMounted(async (screen) => {
  try {
    const localTool = screen.getLocalTool();

    const [html, css, js] = await resourcesPromise;

    localTool.setButtons([
      {
        title: "カスタムボタン",
        onClick: () => {
          esmJSPlugin.util.showModal({
            title: "カスタムモーダル",
            htmlFile: html,
            cssFiles: [css],
            jsFiles: [js],
            size: "MEDIUM",
          });
        },
      },
    ]);
  } catch (error) {
    console.error(
      "リソースの読み込み、またはボタンの初期化に失敗しました:",
      error,
    );
  }
});

Info

jsFiles に指定したJSファイルの中でさらに showModal を呼び出すこともできます。

closeModalブラウザー

画面上の最上位に表示されているモーダルを閉じるメソッドです。

構文

closeModal();

引数

なし

返値

なし

例

esmJSPlugin.util.closeModal();

clearModalブラウザー

画面上に表示されている全てのモーダルを閉じるメソッドです。

構文

clearModal();

引数

なし

返値

なし

例

esmJSPlugin.util.clearModal();

openPage

画面全体にJSプラグインで作成されたページを表示するメソッドです。

構文

openPage({
  htmlFile: htmlContent,
  cssFiles: cssContents,
  jsFiles: jsContents,
  showGlobalMenu: showGlobalMenu,
  displayOpenMode: displayOpenMode,
});

引数

htmlFile

表示するHTMLコンテンツを示すBlobまたはFileです。

cssFiles

適用するCSSコンテンツを示すBlobまたはFileの配列です。

jsFiles

実行するJavaScriptコンテンツを示すBlobまたはFileの配列です。

showGlobalMenuブラウザー

グローバルメニューを表示するかどうかを示す真偽値です。

• true: グローバルメニューが表示されます。
• false: グローバルメニューが表示されません。

未指定の場合はfalseと同様にグローバルメニューが表示されません。

displayOpenModeブラウザー

表示モードを示す文字列です。以下を指定することができます。

• window: 新しいウィンドウを開いてページを表示します。
• tab: 新しいタブを開いてページを表示します。
• self: 現在のタブでページを表示します。
• default: ユーザー設定に準拠する形でページを表示します。

未指定の場合は、defaultと同様にユーザー設定に準拠する形でページが表示されます。

返値

なし

Warning

呼び出しのたびに異なるURLが生成されるため、ブックマーク登録やURLの共有はできません。
また、タブやウィンドウを閉じた後に同じURLを開いても、ページは再表示されません。
再度表示するには、このメソッドを改めて呼び出してください。

例

const fetchBlob = (path) =>
  esmJSPlugin.util.getResource(path).then((res) => res.blob());

const resourcesPromise = Promise.all([
  fetchBlob("src/test.html"),
  fetchBlob("src/test.css"),
  fetchBlob("src/test.js"),
]);

esmJSPlugin.screen.sheetIndex("customer").onLocalToolMounted(async (screen) => {
  try {
    const localTool = screen.getLocalTool();

    const [html, css, js] = await resourcesPromise;

    localTool.setButtons([
      {
        title: "カスタムボタン",
        onClick: () => {
          esmJSPlugin.util.openPage({
            htmlFile: html,
            cssFiles: [css],
            jsFiles: [js],
            showGlobalMenu: true,
            displayOpenMode: "self",
          });
        },
      },
    ]);
  } catch (error) {
    console.error(
      "リソースの読み込み、またはボタンの初期化に失敗しました:",
      error,
    );
  }
});

関連情報

• esmJSPlugin