この記事は、名前変換スクリプトCharm.jsの拡張機能の解説です。
カスタム変換（カタカナ変換、区切り等）とは別の説明となっておりますので、ご注意ください。
※カスタム変換の説明はこちら（本館サイト）
デバッグモードについて
機能概要
変換した名前を色付けする機能です。
注意・補足
- デフォルトネームが表示されているときは色がつきません。
編集が必要なところ
textColor、backGroundColorを変更すると、表示色を変更できます。
useParamを0にすると、URLのパラメータに関わらず、常にデバッグモードになります。
常に目立たせる表示になりますので、自分のパソコン環境で変換箇所を確認するときなどに使ってください。
拡張機能コード全体
/**
* 変換した名前を色付けして動作確認しやすくする、デバッグモードを搭載する拡張機能
*
* 指定された条件下で要素のスタイルを変更するデバッグ機能を追加
* URLパラメータを使用してデバッグモードを制御することも可能
* 対象のタグがない場合は機能しません
*/
class Debug {
// 変換対象spanタグの文字色
static textColor = '#dd1111';
// 変換対象spanタグの背景色
static backGroundColor = 'rgba(250, 250, 20, 0.8)';
// URLパラメータで?debug=1のときだけ動かす:1 常にデバッグ表示:0
static useParam = 1;
/**
* デバッグモードを実行する
* localStorageまたはsessionStorageからデータを取得し、
* 指定されたクラスを持つ要素のスタイルを変更し、デバッグクラスを追加する
*/
static run = () => {
// デバッグモードが無効なら実行しない
if (this.useParam === 1 && !this.isDebugMode()) return;
let getItem;
// localStorageからデータを取得
getItem = JSON.parse(localStorage.getItem(Charm.storageKeyName));
if (!getItem) {
// localStorageにデータがない場合はsessionStorageから取得
getItem = JSON.parse(sessionStorage.getItem(Charm.storageKeyName));
}
if (getItem) {
// 取得したデータのキーに基づいてクラスを持つ要素を操作
Object.keys(getItem).forEach(key => {
const elements = document.getElementsByClassName(key);
Array.from(elements).forEach(element => {
// 要素のスタイルを変更
element.style.color = this.textColor;
element.style.backgroundColor = this.backGroundColor;
// デバッグクラスを追加
element.classList.add('charm_debug');
});
});
}
}
/**
* URLパラメータに?debug=1が含まれているかをチェックする
* @returns {boolean} デバッグモードが有効かどうか
*/
static isDebugMode = () => {
const params = new URLSearchParams(window.location.search);
return params.get('debug') === '1';
}
}
// 拡張を追加するコード
Charm.addEExtension("Debug", Debug);
圧縮版はこちらです。
ファイル容量を削減する場合はこちらをご利用ください。
/**
* 変換した名前を色付けして動作確認しやすくする、デバッグモードを搭載する拡張機能
*
* 指定された条件下で要素のスタイルを変更するデバッグ機能を追加
* URLパラメータを使用してデバッグモードを制御することも可能
* 対象のタグがない場合は機能しません
*/
class Debug{static textColor="#dd1111";static backGroundColor="rgba(250, 250, 20, 0.8)";static useParam=1;static run=()=>{if(1===this.useParam&&!this.isDebugMode())return;let e;(e=JSON.parse(localStorage.getItem(Charm.storageKeyName)))||(e=JSON.parse(sessionStorage.getItem(Charm.storageKeyName))),e&&Object.keys(e).forEach(e=>{let t=document.getElementsByClassName(e);Array.from(t).forEach(e=>{e.style.color=this.textColor,e.style.backgroundColor=this.backGroundColor,e.classList.add("charm_debug")})})};static isDebugMode=()=>{let e=new URLSearchParams(window.location.search);return"1"===e.get("debug")}}Charm.addEExtension("Debug",Debug);
