夢小説サイト／名前変換小説サイトさん向け　名前変換タグ追加ツール公開

2024年5月29日 23:27

コピペで使える名前変換スクリプト「Charm.js」をもっと楽に使うためのツール「Charm Tagger」を公開しました。

まず前提として、Charm.jsを使った夢小説の名前変換の最小構成はこちら

<!-- 名前登録input -->
名前<input type="text" id="charmname1" class="charm charmnow">

<!-- 小説表示 -->
<span class="charmname1">夢主</span>は今日も小説を読みます。

<!-- スクリプト読み込み -->
<script src="charm.js"></script>

このように、名前変換のところはデフォルトネームを指定のspanタグで囲むだけで使えますが、登場人物が増えたり、何回も名前を呼ぶような小説だと、タグ付けが大変になってしまうこともあるかと思います。

例えば、登録項目が1つの小説でも、小説内にいくつも変換するところがある場合…

夢主は今日も小説を読みます。
すぐに物語の世界に引き込まれ、時間を忘れて読みふけっていましたが、遠くから夢主を呼ぶ声が聞こえました。
「夢主ー！」

夢主を主人公として書いたプレーンテキスト

名前変換に対応すると、このようになります▼

<span class="charmname1">夢主</span>は今日も小説を読みます。
すぐに物語の世界に引き込まれ、時間を忘れて読みふけっていましたが、遠くから<span class="charmname1">夢主</span>を呼ぶ声が聞こえました。
「<span class="charmname1">夢主</span>ー！」

小説が長かったり、何度も名前変換があるとちょっと大変……！

そこでこの度、プレーンテキストに名前変換タグを入れるツールを作成しました。これがCharm Taggerです。

Charm Taggerの主な機能

Charm Taggerはこんなことができます。

名前変換タグの一括挿入
改行と段落タグ追加
スクリプト読み込みタグ追加

名前変換タグの挿入だけする場合

使っている名前登録フォームのinputの各idを「入力フォームid」にセットし、書いた小説の変換対象の名前（今回の例でいうと夢主）を「デフォルトネーム」にセットします。

今後もこの設定を使う場合は「ここまでの設定を保存」ボタンを押しておくと、ブラウザに保存できます。
必要なidとデフォルトネームの設定が終わったら、デフォルトネームで書いたテキストを上側のテキストエリアに貼り付けます。

貼り付けたら「タグを追加する」を押します。
すると下側のテキストエリアに、名前変換タグが挿入されたテキストが出力されます。

出力された後、「出力テキストをコピー」を押すと、クリップボードにコピーされるので、夢小説のテキストを表示したいWebページファイルに張り付けてください。

改行と段落タグを追加する

上記の出力テキストには改行タグ<br>や段落タグ<p>が入っていないので、そのまま表示すると全て1行に繋がってしまいます。
「改行タグ<br>と段落タグ<p>を追加」にチェックを入れると、出力されるテキストに改行と段落タグが自動で入ります。
<br>：プレーンテキストの中で1回改行してある場合
<p></p>：プレーンテキストの中で2回改行してある場合

チェックを入れてから「タグを追加する」を押すと、出力テキストには<br>と<p>が入ります。

スクリプト読み込みタグを追加

名前変換のあるページにはCharm.jsの読み込みが必要になりますが、Charm Taggerでは、出力テキストの末尾にscriptタグを入れることができます。

まず、スクリプトタグを入れたいので「スクリプトタグ<script>を追加」にチェックを入れます。
すると、「スクリプトのsrc」という入力欄が出てきます。

夢小説Webページと同じフォルダにスクリプト本体がある場合はこのままの設定でOK、違うフォルダにある場合は変更してください。
例：ひとつ上のフォルダにある場合は「../charm.js」にする

CDNを使う

自分のサイトにスクリプト本体をアップロードせずにCDNを使う場合は「CDNを使う」を押すと、CDNのパスが入ります。

※CDNを使う場合の注意点
既存の小説表現に影響がないよう細心の注意を払いますが、アップデートでスクリプトの動きが変わることがあります。また、CDNサービスが終了した場合は読み込むことができません。

ちなみにsrcが空のままだと、<script src=""></script>となります。

srcの設定が終わったら準備完了です。
プレーンテキストがある状態で「タグを追加する」を押すと、小説本文の最後にscriptタグを追加して出力します。

出力テキストをコピーして、お手持ちのWebページの中に貼り付ければタグ付け完了です。
これから夢小説サイトを作る場合は、名前登録フォームの設置を忘れないようにしてくださいね。

他の機能

サンプルの名前idを使う
このボタンを押すと、Charm.jsのページで配布しているサンプルの名前登録フォームと同じidを4つセットすることができます。

旧版の名前idを使う
このボタンを押すと、古いCharm.jsで配布していた名前登録フォームのidを4つセットすることができます。

サンプルフォームと同じものを使っている方はぜひご利用ください。
独自のidを使っている方は直接入力してください。

入力欄を追加＋
このボタンを押すと、名前変換の入力欄を増やすことが出来ます。
登録項目が4つより多い場合に使用してください。

リセットして再読み込み
このボタンを押すと、ブラウザに保存した設定内容を削除し、画面をリロードします。

今後の課題

Charm.js のCDNが今は最新版1つのみなので、バージョン固定のCDNを用意するか検討しています。
バージョン固定のCDNを用意した場合はCharm Taggerでもバージョンに応じたCDNのパスを読み込めるようにしようか考えてはいます。
まだ色々と検討段階なので未定ですが、対応するときはどこかでお知らせする予定です。

これからもCharm.jsを快適に使っていただけるように対応していきたいと思います。Charm.jsをよろしくお願いいたします。
また、配布しているサイトでは他に「Berrycake.js」という名前変換スクリプトを配布しています。「名前ひとつひとつに変換タグを入れないで運用したい！」という方は一度チェックしてみてください。
今後ともよろしくお願いいたします。

夢小説サイト／名前変換小説サイトさん向け 名前変換タグ追加ツール公開