カスタムエディタの変数とは

カスタムエディタの変数は、スクリプトで定義され、カスタムエディタ内やビジュアルエディタのテキストのフォームで{$data.変数名}という記法で利用できます。

主に利用されるケースは以下です:

動的なテキストの表示
頻繁に変更するテキストの定義

具体的な利用方法

変数の利用

import {
  showAction,
  setVariables,
  onShow,
} from '@plaidev/karte-action-sdk';

export default () => {
  showAction();

  // 変数の設定
  // 旧Widget APIのwidget.setVal
  setVariables({ count: 0 });
  
  // 変数の取得
  // 旧Widget APIのwidget.getVal
  const current = getVariables();
};

onShow(({ data }) => {
  // 別のアクションステートで変数を利用
  console.log($data.count);
});

ビジュアルエディタで日付を表示

import moment from 'moment';
import { showAction, setVariables } from '@plaidev/karte-action-sdk';

export default () => {
  setVariables({
    TODAY: moment().format('YYYY/MM/DD')
  });
  
  // ビジュアルエディタのテキストフォームで{$data.TODAY}で利用可能
};

ビジュアルエディタでカウントダウンを表示

import {
  getVariables,
  setVariables,
  updateVariables,
} from '@plaidev/karte-action-sdk';

export default () => {
  showAction();

  // カウントの初期化
  setVariables({ countDown: 30 })
  
  // カウントダウン
  setInterval(() => {
    const current = getVariables();
    if (current.countDown !== 0) {
      setVariables({ countDown: current.countDown - 1 })
    }
  }, 1000);
  
  // ビジュアルエディタのテキストフォームで{$data.countDown}で利用可能
};

キャンペーンページのURLを定義

import {
  showAction,
  setVariables,
} from '@plaidev/karte-action-sdk';

export default () => {
  showAction();
  setVariables({ CAMPAIGN_URL: 'https://example.com' })
  
  // ビジュアルエディタのテキストフォームで{$data.CAMPAIGN_URL}で利用可能
};