Charm.jsは、名前変換小説サイト向けの名前変換スクリプト（JavaScript）です。

JavaScriptがわからなくてもHTMLがわかれば少しのコードで導入することができます。

名前変換小説、単語変換小説、夢小説などにどうぞ。

デモページ

• JavaScriptファイルを読み込んで、変換したいテキストを特定のタグで囲むだけで使用可能
• 未登録時の名前をhtml側でページ毎に設定して使用
• スクリプトがhtmlから独立しているので管理が容易
• 他ライブラリやサーバーサイドに依存しないので、Charm.jsのみで使用可能（jQueryやPHPを用意しなくてOK）
• スクリプトファイルは軽め（15KBくらい）
• スマホでアクセスしても動く（例外はあるかも）
• 登録データはLocalStorageまたはSessionStorageに保存
  サーバーにデータが自動送信されるCookieとは違い、登録データを端末の外へ送信しません

• JavaScriptを修正しなくても、HTMLのタグを増やせば登録内容は追加可能
• カタカナ変換　（ひらがなで登録した名前をカタカナで表示可能）
• 省略表現　例：なまえ、という登録で「なーちゃん」など
• 先頭文字スキップ表現　例：なまえ、という登録で「まえ」
• 詰まり表現　例：な、な、なまえ
• 区切り表現　例：な……ま……え
• 区切りの文字はタグの書き方次第でカスタム可能　例：な！ま！え！、なーまーえ
• 響き表現　例：……え……まえ
• 母音のばし　例：みょうじいいい、みょうじぃ
• classカスタム　従来のdata属性によるカスタム指定に加え、class属性を用いた指定が可能
• 一般的な登録ボタンと一時登録ボタン（ブラウザやタブを閉じると登録内容を自動削除することが可能）を選べる
• ブラウザ設定により登録できなくても登録フォームのあるページでは変換可能（v2.3～）

ライセンス（利用条件等を書いたもの）を確認し、同意できる方のみご利用ください。

Charm.js 2.0からライセンス情報が大きく変更になりましたので、以前のバージョンをお使いの方で最新版に差し替える場合は再度ご確認をお願いいたします。

日本語版も英語版も内容は同じです。お好きな方をご確認ください。

Charm.jsライセンス（日本語版）

Charm.jsライセンス（英語版）

上記のライセンスをご確認いただくとダウンロードボタンを押せるようになります。

サンプルファイルごとダウンロード

スクリプト本体のみダウンロード

Charm.jsは3つのステップで導入することができます。

1. ファイルを任意の場所にコピー
2. 名前登録ページでスクリプト本体を読み込み、指定のタグを入れる
   <!-- スクリプト読み込み -->
   <script src="charm.js"></script> content_copy
   <!-- 名前入力フォーム -->
   苗字 <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">
   
   <!-- 登録ボタンと削除ボタン -->
   <button type="button" id="charmset">登録</button>
   <button type="button" id="charmsession">一時登録</button>
   <button type="button" id="charmunset">削除</button>
   
   <!-- 登録内容表示 -->
   <span class="charmname1">苗字</span>
   <span class="charmname2">みょうじ</span>
   <span class="charmname3">名前</span>
   <span class="charmname4">なまえ</span> content_copy
3. 小説ページでスクリプト本体を読み込み、指定のタグを入れる
   <!-- スクリプト読み込み -->
   <script src="charm.js"></script> content_copy
   <!-- 登録内容表示 -->
   <span class="charmname1">苗字</span>
   <span class="charmname2">みょうじ</span>
   <span class="charmname3">名前</span>
   <span class="charmname4">なまえ</span> content_copy

基本的な使い方の詳しい手順は次のTutorialをご覧ください。

1. Downloadからサンプルファイルごとダウンロードします。
2. ファイルを解凍し、フォルダの中身を確認します。
   • charm.js：名前変換スクリプト本体のJavaScriptです。
   • charm.html：名前登録ページのHTMLです。
   • sample.html：小説ページサンプルのHTMLです。
   • charm.css：各ページの外観を整えているCSSです。

   必ず必要になるのはcharm.jsのみですが、使い方例として4ファイルを全て使用します。

3. ご自身のWebサイトの任意の場所にサンプルファイルをコピーします。

   JavaScriptやCSSをフォルダ分けしている方はご自身で決めたフォルダへ、フォルダ分けがよくわからないという方はWebサイトフォルダの中にcharmフォルダの中身をそのままコピーしてください。

   そのままコピーした場合は以下の構成になります。

   • Webサイトフォルダ/charm.js
   • Webサイトフォルダ/charm.html
   • Webサイトフォルダ/sample.html
   • Webサイトフォルダ/charm.css

   この段階でもcharm.htmlにアクセスすると名前の登録が可能になっています。

1. 名前登録ページでcharm.jsファイルを読み込みます。

   ※サンプルのcharm.htmlを流用する場合はこの作業は必要ありません。

   ご自身で用意した名前登録ページを使用する場合は、サンプルのcharm.htmlのようにスクリプトを読み込んでください。

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

   このコードを任意の場所に書きます。サンプルではbody終了タグの直前に書いています。

   スクリプトの保存場所が名前登録ページと違うフォルダの場合はsrcの内容を変更してください。

2. 名前登録フォームを設定します。

   ※サンプルのcharm.htmlを流用する場合はこの作業は必要ありません。

   • 入力欄のinputタグ全てにclass「charm」を設定します。
   • 入力欄のinputタグそれぞれに個別のidを設定します。
   • idは各inputが互いに被らないように好きな文字を設定してください。
   • idの文字は小説ページで何度も書くので、わかりやすく長過ぎない文字がおすすめです。
   苗字 <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"> content_copy

   サンプルはlabelタグなども使っていますが、デザインはさておき上のコードで名前登録は可能です。

   登録項目を新たに追加したい場合、classを「charm」にしてidが被らないようにinputタグを追加してください。

   追加するinputの例：

   友達の名前 <input type="text" id="charmname5" class="charm"> content_copy
3. 登録ボタンと削除ボタンを設定をします。

   ※サンプルのcharm.htmlを流用する場合はこの作業は必要ありません。

   登録ボタンはidが「charmset」のbuttonタグを用意します。

   一時登録ボタンはidが「charmsession」のbuttonタグを用意します。

   削除ボタンはidが「charmunset」のbuttonタグを用意します。

   <button type="button" id="charmset">登録</button>
   <button type="button" id="charmsession">一時登録</button>
   <button type="button" id="charmunset">削除</button> content_copy

   タグ内の「登録」「一時登録」「削除」は「OK」「Del」などの違う言葉に変更しても構いません。

   登録ボタンを使わない、または一時登録ボタンは使わずに導入することも可能です。不要でしたら消してください。

   登録と一時登録って何が違うの？

   登録と一時登録はどちらもブラウザに保存する機能ですが、データの期限が違います。

   技術者向けの言葉でいうと、登録ではlocalStorageに保存し、一時登録ではsessionStorageに保存しています。

   「登録」は容量がある限りブラウザの履歴を削除したりアンインストールするまでデータが残りますが、「一時登録」はタブを閉じたときやページを閉じたときにクリアされます。

   どちらにしても、Cookieのように保存内容がサーバへ送信されることはありません。

4. 登録名の表示を設定します。

   ※サンプルのcharm.htmlを流用する場合はこの作業は必要ありません。

   登録名を表示したいところに、classを設定したspanタグを追加します。

   spanタグのclassは、登録inputタグのidと同じものを設定します。

   inputタグのidが「charmname1」なら、表示するspanタグのclassを「charmname1」にします。（サンプルの苗字の例）

   <span class="charmname1">苗字</span>
   <span class="charmname2">みょうじ</span>
   <span class="charmname3">名前</span>
   <span class="charmname4">なまえ</span> content_copy

   spanタグの中身は、未登録のときに表示される文字です。

   2のサンプルコードで友達の名前を追加している場合は、以下のタグを追加すると友達名が表示されます。

   <span class="charmname5">友達の名前</span> content_copy

   一時登録ボタンを導入している場合、一時登録したときにだけ現れるメッセ―ジを以下のコードで追加できます。

   <div id="charmsessionmsg"></div> content_copy

   一時保存をしたときにこのコードがあると、（一時保存しました）という文字が表示されます。