名前変換スクリプトCharm.js

2024年7月14日 16:43

サイトに名前変換機能をコピペで導入できる、「Charm.js」について少し解説します。

このサンプルページのような機能をサイトに導入できます。

Charm.jsとは

HTMLタグのコピペで名前変換を実装できるJavaScriptです。
変換したいところをspanタグで囲むタイプのスクリプトです。

名前変換小説や夢小説のページで、閲覧者さんが自由に名前を変えることができるようになります。

HTML/CSS/JavaScriptの静的サイトから、PHPやその他サーバーサイト言語を使用していても導入できます。JavaScriptが動く環境であれば基本的にどんなサイトでも動きます。（スクリプトを動かして良いかどうかはレンタルサーバやサービスの規約をご確認ください）

標準的な導入でしたらJavaScriptの編集は不要のため、JavaScriptがわからない方でも導入できます。

互換性はありませんが、配布サイトでは他にBerrycake.jsという名前変換スクリプトも配布しています。こちらは全体のタグにidまたはclassを設定し、個別のテキストにはspanタグは使いません。（カスタム変換では使います）

用意するもの

ご自身のWebサイト
HTMLを編集し、アップロードできる環境

Webサイトについては自分でHTML/CSS/JavaScriptをアップロードして運用する静的サイトを対象に解説します。

ナノやWordPressサイトの場合は導入方法が少し異なりますので、別の記事を参照してください。

HTMLを編集できる環境については、エディタやアップロードに関するものを事前にご用意ください。

とりあえず試す

詳しい導入手順よりも先に、どんな感じか試しに実装してみるという場合はこちらをHTMLに追加してください。

<!-- 名前入力 ※自動保存を使うので登録ボタンレス -->
名前<input type="text" id="charmname1" class="charm charmnow">

<!-- 登録内容表示 -->
<span class="charmname1">名前</span>

<!-- CDNからスクリプトを読み込み -->
<script src="https://cdn.jsdelivr.net/gh/mizuna-shima/charm@main/public/charm.min.js"></script>

こちらを追加したページは名前登録／表示ができるようになっています。
それぞれのタグについて詳しく知りたい方は↓の導入手順をご覧ください。

導入手順

スクリプトをダウンロード、またはCDNを確認

JavaScriptファイルをアップロードできるサーバーをご利用の場合は、配布サイトからスクリプトをダウンロードします。

JavaScriptファイルをアップロードできない場合や、少数ページにだけ導入したい場合はサイトにスクリプトをアップロードせずに、CDNを使うことも可能です。
※CDNは更新することがあるのと、CDNサーバが利用できなくなったときは読み込めなくなります。

CDNを使う場合、あとでこのURLを読み込みます。
https://cdn.jsdelivr.net/gh/mizuna-shima/charm@main/public/charm.min.js

名前登録ページのinput、ボタンを設定

名前登録ページのhtmlファイルを編集し、以下のように入力フィールドを追加します。
classを「charm」に設定し、idは任意のものをつけます。

名前<input type="text" id="charmname1" class="charm charmnow">

classに「charmnow」を使うと「保存」ボタン無しで自動登録できるようになるため、保存ボタンは必須ではありません。

自動保存を使わない場合は保存ボタンを追加します。
idがcharmsetになっているbuttonタグなら登録ボタンになるので、「登録」という文字やclassは自由に変えてください。

<button type="button" id="charmset">登録</button>

削除ボタンを使う場合はこちらです。

<button type="button" id="charmunset">削除</button>

名前登録ページでスクリプトを読み込み

名前登録ページで以下のようにscriptタグを読み込みます。
bodyの閉じタグ周辺がおすすめです。

<script src="charm.js"></script>

srcの内容はスクリプトへのパスを設定してください。フォルダが違う場合などは必ず変えてください。
CDNを利用する場合は↓のように書きます。

<script src="https://cdn.jsdelivr.net/gh/mizuna-shima/charm@main/public/charm.min.js"></script>

登録内容をpタグ等で表示した場合は名前表示タグを追加

登録名：●●●
このような表示をしたい場合は、↓のようなタグを追加します。
spanタグのclassは先ほどのinputタグのidを、spanタグの中にはデフォルト表示を書きます。

登録名：<span class="charmname1">名前</span>

これで名前登録ページの設定は完了です。
登録項目の追加もHTMLだけで出来ます。詳しくは配布サイトのチュートリアルをご覧ください。

小説ページなどで登録名を表示する

名前登録したページとは別のページで登録名を表示したい場合は、先ほどの手順のうち、scriptファイルの読み込みと、表示タグの追加を行います。

アップロードしたスクリプトファイルを使う場合（フォルダが違う場合はsrcを変更してください）

<script src="charm.js"></script>

CDNを利用する場合は↓のように書きます。

<script src="https://cdn.jsdelivr.net/gh/mizuna-shima/charm@main/public/charm.min.js"></script>

名前表示タグを追加

さきほど名前登録ページで追加した表示タグと同様のタグを追加します。
spanタグのclassは名前入力inputタグのidを、spanタグの中にはデフォルト表示を書きます。

<span class="charmname1">名前</span>は夜更かしをしています。

これで小説ページでも名前が表示されます。

カスタム変換について

Charm.jsは、名前表示タグに特定のdataまたはclassを追加するだけで、カタカナ変換、区切り、省略表示などができます。

カスタム変換紹介ページ

対応しているカスタム変換

ひらがな→カタカナ変換
カタカナ→ひらがな変換
カタカナひらがなMix変換
省略表現　（な）
先頭文字スキップ表現　
末尾カット表現　
最後の文字表現　
詰まり表現
区切り表現
響き表現
重複表現
逆順表現
母音のばし表現

カスタム変換の一例

登録名「なまえ」をカタカナ変換で「ナマエ」と表示する場合

data属性でカタカナ変換を指定する

<span class="charmname4" data-charm-kana="on">ナマエ</span>

classでカタカナ変換を指定する

<span class="charmname4 charm_kana">ナマエ</span>

※カスタム変換を使う場合、spanタグの中はデフォルトネームをカスタム変換済みにしたものを書きます。

配布サイトのチュートリアルでは
苗字、みょうじ、名前、なまえ
この4つの登録ができるサンプルをご案内しています。
配布サイトのサンプル通りに導入した場合は、カスタム変換のコピペ用コードで簡単にカスタム変換を使うことが出来ます。

名前idを独自のものにしても、使い方通りであればカスタム変換は可能です。