この記事は、名前変換スクリプトCharm.jsの拡張機能の解説です。
導入の際にコードをスクリプトに追加して使う機能となっています。
本体スクリプトのみで動かせるカスタム変換（カタカナ変換、区切り等）とは別の説明となっておりますので、ご注意ください。
※カスタム変換の説明はこちら（本館サイト）
機能概要
何をどうする機能か
この拡張機能は、変換後の名前に「な」または「ナ」が含まれていた場合に「にゃ」または「ニャ」に置換する機能です。
どんなことができるか
例えば、読み手さんが「はなこ」という名前で登録した場合、この機能をタグにつけておくと「はにゃこ」のように表示します。「な」が含まれていなければ特に何もしません。
「ゆめこ」等の「な」が入らない名前ならそのまま表示されます。
読み手さんの登録した平仮名orカタカナに合わせて「にゃ」または「ニャ」にする方法と、平仮名カタカナ関係なく「ニャ」にする方法の2通りの使い方があります。
使えそうなシーンとしては、登場人物が猫っぽく話している場面かなと思いますが、良さそうな使い方があれば色んなシーンでお使いください。
注意・補足
- 名前登録フォームがある画面では動かないようになっています。
- カスタム変換と併用可能です。
カスタム変換後にこの猫語置換が処理されるため、文字数などの変化にご注意ください。 - カスタム変換に動きが似ていますが、未登録時でも動く機能です。
追記編集が必要なところ
猫語にしたい表示タグ（span）にclassを追加
例：導入Tutorialと同じく、以下のように表示タグを設定した場合
<span class="charmname4">なまえ</span>
読み手さんが登録した平仮名またはカタカナに合わせた置換にするならclass「charm_meow」を追加します。
<span class="charmname4 charm_meow">にゃまえ</span>
読み手さんの登録が「な」でも「ナ」でも「ニャ」にしたい場合はclass「charm_meow_kana」を追加します。
<span class="charmname4 charm_meow_kana">ニャまえ</span>
拡張機能コード全体
/**
* 猫語置換
* 登録ページ以外で猫語っぽく置換処理を行う
*/
class MeowConverter {
static hiraganaClass = 'charm_meow';
static katakanaClass = 'charm_meow_kana';
static run = () => {
MeowConverter.start();
};
/**
* 入力タグが存在するかどうかをチェック
*/
static hasSyncTags = () => {
return document.getElementsByClassName(Charm.nameClass).length > 0;
};
static start = () => {
// 再変換では動かせないので、入力タグが存在する場合は処理をしない
if (MeowConverter.hasSyncTags()) return;
// ひらがな指定クラス
Array.from(document.getElementsByClassName(MeowConverter.hiraganaClass)).forEach(el => {
el.textContent = el.textContent.replace(/な/g, 'にゃ').replace(/ナ/g, 'ニャ');
});
// カタカナ指定クラス
Array.from(document.getElementsByClassName(MeowConverter.katakanaClass)).forEach(el => {
el.textContent = el.textContent.replace(/な|ナ/g, 'ニャ');
});
};
}
// 拡張を追加
Charm.addEExtension('MeowConverter', MeowConverter);
圧縮版はこちらです。
ファイル容量を削減する場合はこちらをご利用ください。
class MeowConverter{static hiraganaClass="charm_meow";static katakanaClass="charm_meow_kana";static run=()=>{MeowConverter.start()};static hasSyncTags=()=>document.getElementsByClassName(Charm.nameClass).length>0;static start=()=>{MeowConverter.hasSyncTags()||(Array.from(document.getElementsByClassName(MeowConverter.hiraganaClass)).forEach(e=>{e.textContent=e.textContent.replace(/な/g,"にゃ").replace(/ナ/g,"ニャ")}),Array.from(document.getElementsByClassName(MeowConverter.katakanaClass)).forEach(e=>{e.textContent=e.textContent.replace(/な|ナ/g,"ニャ")}))}}Charm.addEExtension("MeowConverter",MeowConverter);
