【Charm.js拡張機能】「プルダウン登録内容をカテゴリ別に出し分け」の使い方

Charm.js

この記事は、名前変換スクリプトCharm.jsの拡張機能の解説です。
導入の際にコードをスクリプトに追加して使う機能となっています。

本体スクリプトのみで動かせるカスタム変換(カタカナ変換、区切り等)とは別の説明となっておりますので、ご注意ください。
カスタム変換の説明はこちら(本館サイト)

拡張機能の導入方法についてはこちらの記事をご確認ください。

本館サイトでの拡張機能説明はこちら

機能概要

何をどうする機能か

この拡張機能は、プルダウン形式の登録項目を使用します。
プルダウンの各選択肢に合わせて、小説側で固有のテキストに置き換えることができるようになります。
ただし、コードの編集が必須であることと、プログラミング的な編集が必要なため、上級者向けです。

どんなことができるか

プルダウンの中の選択肢(optionタグ)が以下の3通りあるとします。

  • 灰色

これを、小説の表示の中ではカテゴリごとに固有の文字に置き換えることができます。

place(場所)として定義したカテゴリでは

  • 雪国(白で登録した読み手さんに表示)
  • 異国(黒で登録した読み手さんに表示)
  • 都会(灰色で登録した読み手さんに表示)

cat(猫)として定義したカテゴリでは

  • 白い猫の妖精
  • 異界の黒猫
  • 銀色に輝く猫神

magic(魔法)として定義したカテゴリでは

  • 白い花を咲かせる
  • ビターチョコを無限に生む
  • 銀の雨を降らせる

まとめると、1つのプルダウンでどれかを選んでもらうと↓のようにテキストを出し分け出来ます。

白を選んだ読み手さん:

雪国で出会った白い猫の妖精は、白い花を咲かせる魔法が使えるらしい

黒を選んだ読み手さん:

異国で出会った異界の黒猫は、ビターチョコを無限に生む魔法が使えるらしい

灰色を選んだ読み手さん:

都会で出会った銀色に輝く猫神は、銀の雨を降らせる魔法が使えるらしい

追記編集が必要なところ

まずはプルダウン選択肢と基本の名前変換を表示

拡張コードからの変換を埋め込む前に、プルダウンの選択肢をそのまま表示できるように、名前登録フォームと名前表示のタグを入れていきます。

↓プルダウンの選択肢と、選択したものを表示するspanタグ

<div>
  <label for="charmselect1">猫の毛色</label>
  <select id="charmselect1" class="charm charmnow">
    <option value="白" selected>白</option>
    <option value="黒">黒</option>
    <option value="灰色">灰色</option>
  </select>
</div>
猫の毛色:<span class="charmselect1">白</span>

labelタグはプルダウンの項目名です。
selectタグの「charmnow」はリアルタイム変換用のタグなので、登録ボタンを使うなら必須ではありません。
selectタグのidは、通常の登録フォームと同じように任意で被りのないidを使います。(labelのforはこれに合わせます)
spanタグのclassは、通常の名前を表示するのと同じように、フォームのidをclassとして設定します。
selectedが1つ目のoptionにあるので、デフォルト選択肢は白となります。

詳細はこちら↓

拡張コードのどこを編集するか

使用するには3カ所の編集と記載が必要です。

  • 拡張機能コードの選択肢
  • 拡張機能コードのカテゴリ別テキスト
  • カスタム変換としての追加のdata指定(classによる指定はできません)

選択肢の編集

static values = ['白', '黒', '灰色'];

このコードの右側の’白’, ‘黒’, ‘灰色’の部分を編集します。
登録フォームのselectタグのoptionのvalueを確認していただき、かっこ[]の中で、valueと同じものを ‘このように’ シングルクォーテーション記号で囲って、カンマ区切りで書いていきます。

選択肢は3つでなくても問題ありません。optionが5つあるなら拡張コード内の選択肢も5つにしてください。

カテゴリ別テキストの編集

static replaceList = {
  'place': ['雪国', '異国', '都会'],
  'cat': ['白い猫の妖精', '異界の黒猫', '銀色に輝く猫神'],
  'magic': ['白い花を咲かせる', 'ビターチョコを無限に生む', '銀の雨を降らせる'],
};

各カテゴリ行を編集したり、カテゴリを自由に追加することができます。
書き方のルールは以下の通りです。

'カテゴリ名': ['選択肢1の表示テキスト', '選択肢2の表示テキスト', '選択肢3の表示テキスト'],

書き方のコツとしてはシングルクォーテーション、括弧、カンマは厳密に役割があるので消したり全角にしないことが大切です。もし「I’m」等、シングルクォーテーションの含まれる文字を表示したいときは半角のダブルクォーテーション「”」で囲んでください。例:“I’m”

選択肢の個数に合わせて表示テキストの数も増減してください。

catやmagicといったカテゴリ名は私がサンプルとして用意したものなので、表示したいカテゴリ名に自由に編集してください。カテゴリ数も決まりはないので自由に増減してください。カテゴリ名は、あとでカスタム変換として使うので、わかりやすい半角英字がおすすめです。

ここまで出来たら拡張機能のコードとして、サイトにアップロード

Charm.js本体の末尾に追記、または別ファイルの形で読み込む等して、表示したいページに導入します。
拡張機能のコードをファイルとして設定する手順については↓の記事を参考にしてください。

カスタム変換のdata属性を追記

まず、プルダウンで登録した内容をそのまま表示する場合、通常変換と同じようにclassに名前IDをセットして表示します。

<span class="charmselect1">白</span>

次に、表示させたいカテゴリ名をdata-charm-switch=”カテゴリ名”としてタグに追加し、タグの中身をデフォルトのプルダウン選択肢と合わせた表示テキストにします。

<span class="charmselect1" data-charm-switch="place">雪国</span>

書き方のルールは以下の通りです。

<span class="名前id" data-charm-switch="カテゴリ名">カテゴリのデフォルト表示テキスト</span>

最初に紹介した出し分けは↓のようにspanタグを書いています。

<span class="charmselect1" data-charm-switch="place">雪国</span>で出会った<span class="charmselect1" data-charm-switch="cat">白い猫の妖精</span>は、<span class="charmselect1" data-charm-switch="magic">白い花を咲かせる</span>魔法が使えるらしい

拡張機能コード全体

/**
 * 特定のテキストを多次元的に別のテキストに置換
 * 登録ページ以外で置換処理を行う
 */
class afterSwitchText {

  // 選択肢
  static values = ['白', '黒', '灰色'];

  // カテゴリ別テキスト
  static replaceList = {
    'place': ['雪国', '異国', '都会'],
    'cat': ['白い猫の妖精', '異界の黒猫', '銀色に輝く猫神'],
    'magic': ['白い花を咲かせる', 'ビターチョコを無限に生む', '銀の雨を降らせる'],
  };

  static run = () => {
    afterSwitchText.start();
  };

  /**
   * 入力タグが存在するかどうかをチェック
   */ 
  static hasSyncTags = () => {
    return document.getElementsByClassName(Charm.nameClass).length > 0;
  };

  static start = () => {
    // 再変換では動かせないので、入力タグが存在する場合は処理をしない
    if (afterSwitchText.hasSyncTags()) return;
    const elms = document.querySelectorAll('[data-charm-switch]');
    elms.forEach(elm => {
      const dataKey = elm.getAttribute('data-charm-switch');
      const text = elm.textContent.trim();
      let index = afterSwitchText.values.indexOf(text);
      // 該当する値がない場合は最初の値を使用
      if (index === -1) {
        index = 0;
      }
      if (afterSwitchText.replaceList[dataKey]) {
        elm.textContent = afterSwitchText.replaceList[dataKey][index];
      }
    });
  };
}
// 拡張を追加するコード
Charm.addEExtension("afterSwitchText", afterSwitchText);

圧縮版はこちらです。
編集が必要になるので、できるだけ↑のわかりやすい方のコードを使うことをおすすめしますが、プログラミングがわかる方でファイル容量を削減する場合はこちらをご利用ください。

class afterSwitchText{static values=["白","黒","灰色"];static replaceList={place:["雪国","異国","都会"],cat:["白い猫の妖精","異界の黒猫","銀色に輝く猫神"],magic:["白い花を咲かせる","ビターチョコを無限に生む","銀の雨を降らせる"]};static run=()=>{afterSwitchText.start()};static hasSyncTags=()=>document.getElementsByClassName(Charm.nameClass).length>0;static start=()=>{if(afterSwitchText.hasSyncTags())return;let t=document.querySelectorAll("[data-charm-switch]");t.forEach(t=>{let e=t.getAttribute("data-charm-switch"),a=t.textContent.trim(),c=afterSwitchText.values.indexOf(a);-1===c&&(c=0),afterSwitchText.replaceList[e]&&(t.textContent=afterSwitchText.replaceList[e][c])})}}Charm.addEExtension("afterSwitchText",afterSwitchText);

複数のプルダウンに対応できる?

結論から言うと、この記事で紹介している方法は1つのプルダウンに対する表現のみ可能で、複数のプルダウンでこの拡張機能を同時に使うことは出来ません。
(コードを改変して複製すれば同時に使えなくもないですが、運用の難易度がかなり上がります)

同時に使うのではなく、拡張コードを各ページで読み込む方針にして、各ページで分散して使うことは可能です。(管理が難しそうなのはさておき)
例えば…

  • Aページでは1つ目のプルダウンに大して拡張機能の選択肢、カテゴリ別テキストを拡張コードに記載
  • Bページでは2つ目のプルダウンに大して拡張コードに記載

このような、ページごとの拡張読み込みなら一応はできます。

おわりに

この拡張機能は以前、メッセージをいただいて実装した機能です。
具体的に実現したい詳細を添えてメッセージをいただいて大変ありがたく思っています……!
私にはないアイディアかつ需要がありそうな機能でした。
この記事をご覧になっているかわかりませんが、ご意見をお送りいただきありがとうございました!

タイトルとURLをコピーしました