Web APIのTips

スクリプトでアクションをカスタマイズする時に、よく利用するWEB標準のWeb APIのTipを記載します。

ページのDOM要素をあつかう

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

export default () => {
  showAction();

  // 旧Action EditorのjQueryライブラリの代替
  const elm = document.querySelector('.target');
  console.log('Target Contents', elm.innerHTML);
  elm.setAttribute('style': 'font-color: red;')
  elm.innerText == 'New Text';

  // 詳しくは以下を参照
  // - https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
  // - https://developer.mozilla.org/ja/docs/Web/API/Element
};

localStorageの利用

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

export default () => {
  showAction();

  // ページを跨いでデータを保存する
  // 別のアクションでもデータを利用できる
  // 旧Widget APIのwidget.local機能の代替
  localStorage.setItem('key', 'value');
  localStorage.getItem('key')
  localStorage.removeItem('key');
  localStorage.clear();

  // 詳しくは以下を参照
  // - https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
};

イベントハンドリング

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

export default () => {
  showAction();

  // WEBのカスタムイベントを送信・受信しスクリプトを実行する
  // 旧Widget APIのwidget.methodの代替
  const eventHandler = () => { console.log('Run!'); };
  document.addEventListener('eventName', eventHandler);
  document.dispatchEvent('eventName');
  document.removeEventListener('eventName', eventHandler);

  // 詳しくは以下を参照
  // - https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
  // - https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent
  // - https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener
};