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
};
Updated about 1 year ago
What’s Next