Custom
コピペ用カスタムコードはこちら（カスタム解説を読んだ人向け）
Charm.jsカスタム
Charm.jsにはカスタム機能があります。基本の名前変換の他、特殊な表現をすることができます。
- ひらがな→カタカナ変換
- 省略表現 （な）
- 先頭文字スキップ表現 （まえ）
- 末尾カット表現 （なま）
- 最後の文字表現
- 詰まり表現 （な、な、なまえ）
- 区切り表現 （な……ま……え）
- 響き表現 （え……まえ……なまえ）
- 重複表現 （ななままええ）
- 母音のばし表現 （みょうじいいい）
それぞれdata指定とclass指定でカスタム方法を紹介していますので、どちらかを選んで導入してください。
data指定とclass指定はどちらの方がいいの？
data指定の方が表現の自由度は高いです。
class指定の場合、詰まりや母音のばし等の数指定は一つのspanタグで9回まで、「…」等の記号変更も決められた記号から選ぶことになります。
「サイト環境の都合でdataは使えない」「data指定がうまくいかない」というサイトではclass指定でカスタムしていただき、どちらも使える場合はわかりやすい方を選んでもらえたらと思います。
スクリプトとしては（基本的には）同じページにdata指定とclass指定のタグが混在しても動作します。
このページでは、Guideページにある↓の基本の名前変換spanタグを元に説明していますが、charmname1～charmname4の部分をご自身で設定したものに変更すれば同じようにカスタムできます。なので、追加した名前でもカスタムできます。
<span class="charmname2">みょうじ</span>
<span class="charmname3">名前</span>
<span class="charmname4">なまえ</span>
ひらがな→カタカナ変換
ひらがなの登録のみで、カタカナ表記を使うことができます。
サンプルコードでいうところの「なまえ」を「ナマエ」として表示するには、以下のコードを設定します。
data指定
data指定の場合は「data-charm-kana="on"」を追加
class指定
class指定の場合はclassに「charm_kana」を追加
このカスタムは他のカスタムと同時に指定できます。
ただし、漢字や記号など「ひらがな」以外の文字からは変換できないのでご注意ください。
classの複数指定方法
classを2つ以上指定したいときは class="" の中に半角スペース区切りで全て書くことができます。
例えば、使用する名前を指定する「charmname4」と、カタカナ変換指定のclass「charm_kana」を一緒に指定したいときは class="charmname4 charm_kana" と書くことでまとめて指定することができます。
省略表現
登録した名前をすべて表示させずに、頭文字一文字や二文字といった省略表示ができます。
（「ゃ」「ょ」のような小さい文字や長音符がある場合は指定の文字数より多く切り出します）
data指定
data指定の場合、一文字なら「data-charm-short="1"」、二文字なら「data-charm-short="2"」を追加します。数字部分は切り出し文字数です。
※切り出す文字数はお好きな数字で自由に設定できますが、登録した名前が短い場合は指定数よりも少なくなります。
data指定で一文字
data指定で二文字
class指定
class指定で省略表示をする場合は何文字の場合でもまず「charm_short」を追加します。
デフォルトでは一文字切り出します。
二文字以上を切り出す場合はclassを追加します。二文字なら「charm_count2」、三文字なら「charm_count3」のように「charm_count〇」を追加します（最大はcharm_count9）。
class指定で一文字表示の場合
class指定で二文字なら「charm_short」に加えて「charm_count2」を追加します。
カタカナ変換と組み合わせたり、複数並べることでニックネームのような表現ができます。
下のコードはどちらも「ナーちゃん」と表示します。
この下のコードはどちらも「なまなまさん」と表示します。
先頭文字スキップ表現
登録した名前をすべて表示させずに、先頭の文字をスキップした名前で表示することができます。
（先頭の文字の後に「ゃ」「ょ」のような小さい文字や長音符がある場合は、指定の文字数より後ろから始まります）
一文字で登録されている場合は何も表示されません。
data指定
data指定の場合は「data-charm-skip="on"」を追加します。
class指定
class指定では「charm_skip」を追加します。
カタカナ変換と組み合わせることもできます。
下のコードはどちらも省略表現を並べて併用し、「ナ……マエ……」と表示します。
末尾カット表現
登録した名前をすべて表示させずに、末尾の文字をカットして表示することができます。
（末尾の文字に「ゃ」「ょ」のような小さい文字や長音符がある場合は、指定の文字数よりも多くカットします）
一文字で登録されている場合は何も表示されません。
data指定
data指定の場合は「data-charm-chop="on"」を追加します。
class指定
class指定では「charm_chop」を追加します。
カタカナ変換と組み合わせることもできます。
下のコードはどちらも省略表現を並べて併用し、「ナマ……エ……」と表示します。
最後の文字表現
登録した名前をすべて表示させずに、末尾の文字だけを表示することができます。
（末尾の文字に「ゃ」「ょ」のような小さい文字や長音符がある場合は、指定の文字数よりも多く表示します）
data指定
data指定の場合は「data-charm-last="on"」を追加します。
class指定
class指定では「charm_last」を追加します。
カタカナ変換と組み合わせることもできます。
使用例は末尾カットの説明をご覧ください。
詰まり表現
詰まり表現では「な、な、なまえ」のように詰まってしゃべるような表現ができます。
省略表現を使用しても同じ表現できますが、詰まり表現は「最初の一文字だけを複数回繰り返す」専用のカスタムです。
（「ゃ」「ょ」のような小さい文字や長音符がある場合は一緒に切り出します）
「な、な、なまえ」を表現するには詰まりの最初の「な、な、」の繰り返し部分と、基本の「なまえ」表示を組み合わせて表示します。
data指定
data指定の場合、「data-charm-call="stutter"」を追加します。
「data-charm-call="stutter"」の指定があると、最初の一文字をデフォルトでは2回、記号「、」を挟んで繰り返します。
↑最後の「、」はタグの外に手入力で入れておきます。
上で作ったコードの後に、基本の「なまえ」を表示するタグを追加すると、「な、な、なまえ」と表示できます。
詰まり回数を変更するには追加の指定をします。
詰まり回数三回なら「data-charm-stt-count="3"」、五回なら「data-charm-stt-count="5"」を追加します。
数字部分は詰まり回数です。詰まり回数は自由に設定できます。20でも30でも動きます。
このコードで「な、な、な、な、な、なまえ」になります。
挟む文字を変更するには追加の指定をします。
「data-charm-break="！"」のように表示したい文字を設定します。
エンティティでの指定も可能です。例：data-charm-break="！"
このコードで「な！な！なまえ」になります。
class指定
class指定の場合、classに「charm_stutter」を追加します。
data属性指定と同じく、最初の一文字をデフォルトでは2回、記号「、」を挟んで繰り返す表示になります。
↑最後の「、」はタグの外に手入力で入れておきます。
上で作ったコードの後に、基本の「なまえ」を表示するタグを追加すると、「な、な、なまえ」と表示できます。
詰まり回数を変更するには追加の指定をします。指定できる回数は1～9です。
詰まり回数一回なら「charm_count1」、九回なら「charm_count9」を追加します。数字部分は詰まり回数です。
このコ一ドで「な、な、な、な、な、なまえ」になります。
挟む文字を変更するには「charm_symbol08」のように追加の設定します。
data属性とは違い、class指定は決まった文字から選んで指定します。
どんな記号が使えるかはclass指定の記号と回数コード一覧でご確認ください。
このコードで「な！な！なまえ」になります。
他の名前と組わせたり、複数の設定で柔軟な表現ができます。カタカナ変換も一緒に使えます。
下のコードはどちらも「な……な……な……名前」と表示します。
区切り表現
区切り表現では「な……ま……え」「なーまーえ」のように一文字ずつ区切った表現ができます。
（「ゃ」「ょ」のような小さい文字や長音符がある場合は前の文字と一緒に区切ります）
data指定
data指定の場合、「data-charm-call="pause"」を追加します。
「data-charm-call="pause"」の指定があると、一文字ずつ区切り、記号「……」を挟んで表示します。
これで「な……ま……え」になります。
挟む文字を変更するには追加の指定をします。
「data-charm-break="ー"」のように表示したい文字を設定します。
エンティティでの指定も可能です。例：data-charm-break="ー"
このコードで「なーまーえ」になります。
class指定
class指定の場合、classに「charm_pause」を追加します。
一文字ずつ区切り、data属性指定と同じくデフォルトでは記号「……」を挟んで表示します。
これで「な……ま……え」になります。
挟む文字を変更するには「charm_symbol03」のように追加の設定します。
data属性とは違い、class指定は決まった文字から選んで指定します。
どんな記号が使えるかはclass指定の記号と回数コード一覧でご確認ください。
このコードで「なーまーえ」になります。
他の表現と同様にカタカナ変換も一緒に使えます。
下のコードはどちらも「ナ☆マ☆エ」と表示します。
響き表現
響き表現は、名前の後ろの方の文字を切り出し、少しずつ増やして表示します。
眠りから覚めるときに呼ばれているような「……え……まえ……なまえ」といった表現ができます。
（「ゃ」「ょ」のような小さい文字や長音符がある場合は前の文字と一緒に区切って表示します）
「……え……まえ……なまえ」を表現するには響き部分の「……え……まえ……」と、基本の「なまえ」表示を組み合わせて表示します。
data指定
data指定の場合、「data-charm-call="echo"」を追加します。
これで「……え……まえ……」になります。
上で作ったコードの後に、基本の「なまえ」を表示するタグを追加すると、「……え……まえ……なまえ」になります。
デフォルトの響き回数は2回です。回数を変更するには追加の指定をします。
一回なら「data-charm-ech-count="1"」、三回なら「data-charm-ech-count="3"」を追加します。
数字部分は響き回数です。
※響き回数は自由に設定できますが、登録した名前が短い場合は指定回数よりも響く回数が少なくなります。
このコードで「……まえ……なまえ」になります。
デフォルトで使用される「……」を変更するには追加の指定をします。
「data-charm-break="――"」のように表示したい文字を設定します。
エンティティでの指定も可能です。例：data-charm-break="――"
このコードで「――え――まえ――」になります。
class指定
class指定の場合、classに「charm_echo」を追加します。
data属性指定と同じく、デフォルトでは2回響き、記号「……」を挟んで表示します。
これで「……え……まえ……」になります。
上で作ったコードの後に、基本の「なまえ」を表示するタグを追加すると、「……え……まえ……なまえ」になります。
響き回数を変更するには追加の指定をします。指定できる回数は1～9です。
響き回数一回なら「charm_count1」、九回なら「charm_count9」を追加します。
数字部分は響き回数です。
※登録した名前が短い場合は指定回数よりも響く回数が少なくなります。
このコードで「……まえ……なまえ」になります。
挟む文字を変更するには「charm_symbol08」のように追加の設定します。
data属性とは違い、class指定は決まった文字から選んで指定します。
どんな記号が使えるかはclass指定の記号と回数コード一覧でご確認ください。
このコードで「――え――まえ――」になります。
他の表現と同様にカタカナ変換も一緒に使えます。
下のコードはどちらも「――エ――マエ――ナマエ」と表示します。
重複表現
重複表現は、文字を一文字ずつ区切って複数文字ずつ表示します。
バグった機械のように「名前」という登録だけで「名名前前」、「なまえ」で「ななままええ」といった表現ができます。
（「ゃ」「ょ」のような小さい文字や長音符がある場合は前の文字と一緒に区切って表示します）
ここでは「なまえ」を例に解説します。
data指定
data指定の場合、「data-charm-overlap="on"」を追加します。
これで「ななままええ」になります。
デフォルトの重複回数は2回です。回数を変更するには追加の指定をします。
例えば、五回なら「data-charm-ovl-count="5"」を追加します。
数字部分は重複回数です。
※回数は自由に設定できますが、1指定だと重複しません。
このコードで「なななななまままままえええええ」になります。
class指定
class指定の場合、classに「charm_overlap」を追加します。
data属性指定と同じく、デフォルトの重複回数は2回です。
これで「ななままええ」になります。
重複回数を変更するには追加の指定をします。指定できる回数は1～9です。
例えば、重複回数が三回ら「charm_count3」、九回なら「charm_count9」を追加します。
※回数は自由に設定できますが、1指定だと重複しません。
このコードで「なななななまままままえええええ」になります。
他の表現と同様にカタカナ変換も一緒に使えます。
下のコードはどちらも「ナナナナママママエエエエ」と表示します。
母音のばし表現
母音のばしは、ひらがな登録された名前の末尾の文字を母音にする機能です。
あ行の名前は勿論、か～わ行、「ゃゅょ」のある拗音、濁音も「あいうえお」「ぁぃぅぇぉ」のどれかにします。
（「ん」と「ー」で終わる名前の場合はそのまま「ん」と「ー」にします）
例として、「みょうじ」なら「い」か「ぃ」にします。
基本の名前表示と組み合わせることで「みょうじいいいいいい！」のように叫ぶ表現や「みょうじぃ……」といった表現ができるようになります。
今回は「みょうじ」で解説します。
data指定
data指定の場合、「data-charm-vowel="1"」を追加します。
これで「い」になります。
※data-charm-vowelの「1」は表示文字数ではありません。
小さい文字（ぁぃぅぇぉ）で表示する場合は「data-charm-vowel-min="1"」を使います。
※data-charm-vowel-minを設定する場合、data-charm-vowelは使用しません。
※data-charm-vowel-minの「1」は表示文字数ではありません。
デフォルト表示文字数は一文字です。数を追加するには追加の指定をします。
二文字なら「data-charm-vowel-count="2"」、八文字なら「data-charm-vowel-count="8"」を追加します。
数字部分は追加文字数です。追加文字数は自由に設定できます。20でも30でも動きます。
このコードで「いいいいいいいいい」になります。
基本の「みょうじ」表示と組み合わせることで、叫ぶ感じにできます。
このコードで「みょうじいいいいいいいいい」になります。
class指定
class指定の場合、classに「charm_vowel」を追加します。
data属性指定と同じく、デフォルトでは一文字表示します。
これで「い」になります。
小さい文字（ぁぃぅぇぉ）で表示する場合は「charm_vowel_min」を使います。
※charm_vowel_minを設定する場合、charm_vowelは使用しません。
デフォルト表示文字数は一文字です。数を追加するには追加の指定をします。指定できる回数は1～9です。
二文字なら「charm_count2」、八文字なら「charm_count8」を追加します。数字部分は追加文字数です。
このコードで「いいいいいいいいい」になります。
基本の「みょうじ」表示と組み合わせることで、叫ぶ感じにできます。
このコードで「みょうじいいいいいいいいい」になります。
他の表現と同様にカタカナ変換も一緒に使えます。
下のコードはどちらも「苗字ィィィィィィィィィィ！」と表示します。
class指定の記号と回数コード一覧
class指定での文字変更時に使用できる記号一覧です。
| 表示する文字 | class追加コード | |
|---|---|---|
| …… | charm_symbol01 | |
| … | charm_symbol02 | |
| ー | charm_symbol03 | |
| ―― | charm_symbol04 | |
| 〰〰 | charm_symbol05 | |
| 〰 | charm_symbol06 | |
| 〜 | charm_symbol07 | |
| ！ | charm_symbol08 | |
| ！ （！＋スペース） | charm_symbol09 | |
| ？ | charm_symbol10 | |
| ？ （？＋スペース） | charm_symbol11 | |
| 半角の「?」 | charm_symbol12 | |
| 半角の「!」 | charm_symbol13 | |
| 、 | charm_symbol14 | |
| 。 | charm_symbol15 | |
| ・ | charm_symbol16 | |
| , | charm_symbol17 | |
| ， | charm_symbol18 | |
| ∥ | charm_symbol19 | |
| / | charm_symbol20 | |
| ／ | charm_symbol21 | |
| ○○ | charm_symbol22 | |
| ○ | charm_symbol23 | |
| ×× | charm_symbol24 | |
| × | charm_symbol25 | |
| ☆☆ | charm_symbol26 | |
| ☆ | charm_symbol27 | |
| ★★ | charm_symbol28 | |
| ★ | charm_symbol29 | |
| ♡♡ | charm_symbol30 | |
| ♡ | charm_symbol31 | |
| ☆ （☆＋スペース） | charm_symbol32 | |
| ★ （★＋スペース） | charm_symbol33 | |
| ♡ （♡＋スペース） | charm_symbol34 | |
| ♪ | charm_symbol35 | |
| ♪ （♪＋スペース） | charm_symbol36 | |
| ！？ | charm_symbol37 | |
| ！？ （！？＋スペース） | charm_symbol38 | |
| っ | charm_symbol39 | |
| っ！ | charm_symbol40 | |
| っ！ （末尾スペースあり） | charm_symbol41 | |
| っ、 | charm_symbol42 | |
| っ…… | charm_symbol43 | |
| ッ | charm_symbol44 | |
| ッ！ | charm_symbol45 | |
| ッ！ （末尾スペースあり） | charm_symbol46 | |
| ッ、 | charm_symbol47 | |
| ッ…… | charm_symbol48 |
※19番の「∥」はv2.3以降から使用できます。
サンプルコード内で「charm_symbol●●」として書かれているところを差し替えて使うことができます。
例えば区切り表現で「な、ま、え」と表示するときには以下のようにします。
「な★★ま★★え」と表示するときには以下のようにします。
こちらはclass指定で設定できる回数コードです。表示回数や追加回数などの指定は以下のコードを使います。
| 数 | class追加コード | |
|---|---|---|
| 1 | charm_count1 | |
| 2 | charm_count2 | |
| 3 | charm_count3 | |
| 4 | charm_count4 | |
| 5 | charm_count5 | |
| 6 | charm_count6 | |
| 7 | charm_count7 | |
| 8 | charm_count8 | |
| 9 | charm_count9 |
サンプルコード内で「charm_count●」として書かれているところを差し替えて使うことができます。
例えば詰まり表現で「な、な、な」と表示するときには以下のようにします。
Customcode
コピペ用カスタムコードとは
配布しているサンプルの登録フォームをそのまま使っている方向けの、様々なカスタム例のコードです。
2種類のページをご用意していますが、これはv2以降で基本のサンプルファイルを変えたことで呼び出す名前classが変わっているだけの違いです。カスタム方法やclassは同じです。
また、ここまで紹介した方法とはdataやclassの指定順番が変わっている部分がありますが、必要な指定さえできていればclassの中の順番もdataを書く順番も自由です。
ですので、下のコードはどちらも表示内容は同じです。
<span class="charmname4" data-charm-kana="on" data-charm-call="pause">ナ……マ……エ</span>
<span class="charmname4" data-charm-call="pause" data-charm-kana="on">ナ……マ……エ</span>
v2.0以降から使い始めた方は最新フォーム用を、v1.2以前から使っている方はv1.2フォーム用をお使いください。
登録フォームのidを独自のものにした場合は基本の名前変換で呼び出すclass名を置き換えて使ってください。
コピペ用カスタムコード（最新フォーム用）
お使いの名前登録フォームのinputタグを見ていただき、以下になっていたらこちらです。
苗字 <input type="text" id="charmname1" class="charm">
みょうじ <input type="text" id="charmname2" class="charm">
名前 <input type="text" id="charmname3" class="charm">
なまえ <input type="text" id="charmname4" class="charm">
コピペ用カスタムコード（v1.2フォーム用）
お使いの名前登録フォームのinputタグを見ていただき、idが以下になっていたらv1.2です。
苗字：<input type="text" id="charm-last1" class="charm">
名前：<input type="text" id="charm-first1" class="charm">
みょうじ：<input type="text" id="charm-k-last1" class="charm">
なまえ：<input type="text" id="charm-k-first1" class="charm">
新しい機能やカスタムを使う場合はスクリプト本体（charm.js）を最新のファイルに差し替える必要があります。
v1.2から最新のスクリプトファイルに差し替えても、古いスクリプトファイルで動いていた名前変換もそのまま動作することを確認済みですが、万が一トラブルがありましたらご一報ください。
※Cookieを使用しなくなるので名前の再登録は必要です。