スクリプトでデザインを修正する
デザインの修正方法
スクリプトでAction SDKのユーティリティを利用すると、スクリプトで配信ページやアクションのデザインをカスタマイズすることができます。
配信ページをカスタマイズするには、SDKの applyGlobalCss
とloadGlobalStyle
を利用します。また、アクションをカスタマイズするには、applyCss
とloadStyle
を利用します。
詳細な情報は以下のドキュメントを参照してください:
アクションのデザイン修正の情報
アクションのデザイン修正では、以下のDOM要素の属性が利用します:
名前 | 説明 | ユースケース |
---|---|---|
.karte-action-root | アクションのルートのDOM 要素が持つクラス名 | ページ内のアクションを特定するために利用 |
.modal | アクションのDOM要素が持つクラス名 | アクションのレイアウトのデザイン調整 |
.background | アクションの背景のDOM要素が持つクラス名 | アクションの背景のデザイン調整 |
.state-item | アクションのステートのDOM要素が持つクラス名 | ステート単位のデザイン調整 |
.grid | グリッドレイアウトのDOM要素が持つクラス名 | グリッドレイアウトのデザイン調整 |
.grid-item | グリッドエレメントのDOM要素が持つクラス名 | グリッドエレメントのデザイン調整 |
.text-element | アクションのテキストエレメントのDOM要素が持つクラス名 | テキストエレメントのデザイン調整。 特定のエレメントのデザイン調整をしたい場合に、 data-grid-item-id と合わせて利用。 |
.text-button-element | アクションのテキストボタンエレメントのDOM要素が持つクラス名 | テキストボタンエレメントのデザイン調整。 特定のエレメントのデザイン調整をしたい場合に、 data-grid-item-id と合わせて利用。 |
.image-element | アクションの画像エレメントのDOM要素が持つクラス名 | 画像エレメントのデザイン調整。 特定のエレメントのデザイン調整をしたい場合に、 data-grid-item-id と合わせて利用。 |
.close | アクションの閉じるボタンのDOM要素が持つクラス名 | 閉じるボタンのデザイン調整 |
data-karte-action-id | アクションのルートのDOM要素が持つアクションIDのデータ属性 | .karte-action-root と合わせて、ページ内で複数のアクションが配信されているとき、アクションを特定するために利用 |
data-state-path | アクションのステートIDのデータ属性 | 特定のステートのデザイン調整 |
data-grid-item-id | アクションのグリッドエレメントのIDのデータ属性。 グリッドエレメントのIDが格納される。 | 特定のグリッドエレメントのデザイン調整 |
ページのデザイン修正の情報
KARTE Action Viewerを利用すると、ページのDOM要素のCSSセレクタを簡単に取得できます。
具体的な利用方法
配信ページのデザインを調整する
import { showAction, loadGlobalStyle, applyGlobalCss, applyCss } from '@plaidev/karte-action-sdk';
export default () => {
showAction();
// Styleファイルを配信ページへロード
loadGlobalStyle('https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css');
// CSSを配信ページへ適用
applyGlobalCss(`\
body {
color: blue;
}
`);
};
アクションの位置の調整
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.modal {
top: 12px;
left: 12px;
transform: none;
}
`);
});
export default () => {
showAction();
};
アクションの背景の色の変更
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.background {
background-color: red !important; /* スタイルによってimportant指定が必要 */
}
`);
});
export default () => {
showAction();
};
アクションのサイズの変更
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.grid {
width: 400px;
height: 400px;
}
`);
});
export default () => {
showAction();
};
テキストエレメントのパディングの調整
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.text-element {
padding: 8px;
}
`);
});
export default () => {
showAction();
};
テキストボタンエレメントのボーダースタイルの変更
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.text-button-element {
border-style: dashed;
}
`);
});
export default () => {
showAction();
};
画像サイズの調整
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.image-element img {
width: 100px;
height: 100px;
}
`);
});
export default () => {
showAction();
};
閉じるボタンのSVG画像の調整
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.close path {
fill: red;
}
`);
});
export default () => {
showAction();
};
特定ステートのアクションの背景色の変更
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.state-item[data-state-path="/"] ~ .modal {
background-color: pink;
}
`);
});
export default () => {
showAction();
};
特定の画像エレメントの表示領域の調整
import { showAction, onShow, applyCss } from '@plaidev/karte-action-sdk';
onShow(() => {
applyCss(`\
.grid-item[data-grid-item-id="eJYQw25Q"] .image-element img {
object-position: 12px 12px;
}
`);
});
export default () => {
showAction();
};
Updated 10 months ago
What’s Next