Charm.js

Charm.jsは、名前変換小説サイト向けに配布している名前変換スクリプトです。

スクリプトの読み込みとHTMLタグだけで名前変換ができます。

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

簡単に試すデモページ 登録項目4つのデモページ

• JavaScriptファイルを読み込んで、特定のタグを入れるだけで使用可能
• 未登録時の名前をhtml側でページ毎に設定して使用
• 未登録時やJavaScript無効時は普通の小説として読める
• スクリプトがhtmlから独立しているので管理が容易
• Charm.js単独でプログラムが完結するので、様々な環境で導入可能
• jQueryなどのライブラリ、WordPressで人気のPHP、他のサーバーサイド言語を併用しても動く
• スクリプトファイルは軽め（20KBくらいのJavaScriptファイル1つだけ）
• モダンブラウザならスマホでも動く
• 登録データはLocalStorageまたはSessionStorage保存

• JavaScriptを修正しなくても、入力タグを増やせば登録項目を追加可能
• ボタンを使わずに入力タグだけで自動保存ができるオプションあり※β版です
• 登録ボタンを使う場合は、通常登録と一時登録（ブラウザやタブを閉じると自動削除）を選べる
• カスタム変換はタグにdata属性またはclass属性を設定するだけで使用可能
• ブラウザ設定によりLocalStorageが使えなくても、登録フォームページでは変換可能
• JavaScriptを変更すれば、登録データの簡易暗号化も可能※β版です
• 【カスタム変換】カタカナ（ひらがなで登録した名前をカタカナで表示）
• 【カスタム変換】ひらがな（カタカナで登録した名前をひらがなで表示）
• 【カスタム変換】カタカナひらがなmix（カタカナとひらがなを混合表示）
• 【カスタム変換】省略　例：なまえ、という登録で「なーちゃん」など
• 【カスタム変換】先頭文字スキップ　例：なまえ、という登録で「まえ」
• 【カスタム変換】末尾カット　例：なまえ、という登録で「なま」
• 【カスタム変換】最後の文字　例：みょうじ、という登録で「じ」
• 【カスタム変換】詰まり　例：な、な、なまえ
• 【カスタム変換】区切り　例：な……ま……え　（区切り文字は変更可能　例：なーまーえ）
• 【カスタム変換】響き　例：……え……まえ
• 【カスタム変換】重複　例：ななままええ
• 【カスタム変換】逆順　例：えまな
• 【カスタム変換】母音のばし　例：みょうじいいい、みょうじぃ

当サイトの別スクリプトUtakata.jsを併用すると、名前表示のあるスライドショーを作れます。

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

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

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

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

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

サンプルファイルの内容は登録項目4つのデモページと同じです。

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

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

WordPressサイト様向けに、プラグイン化したCharm.jsです。

設定方法はNote（外部サイト）で解説しています。

WP Charmをダウンロード

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

1. スクリプトを任意の場所にコピー
2. 名前登録ページに登録タグと表示タグを追加、スクリプト本体を読み込む
   <!-- 名前入力 ※自動保存を使うので登録ボタンレス -->
   名前<input type="text" id="charmname1" class="charm charmnow">
   
   <!-- 登録内容表示 -->
   <span class="charmname1">名前</span>
   content_copy
   <!-- スクリプト読み込み body閉じタグ直前がおすすめ-->
   <script src="charm.js"></script> content_copy
3. 小説ページに表示タグを追加、スクリプト本体を読み込む
   <!-- 登録内容表示 -->
   <span class="charmname1">名前</span>
   content_copy
   <!-- スクリプト読み込み body閉じタグ直前がおすすめ-->
   <script src="charm.js"></script> content_copy

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

小説への名前変換タグ付けには、タグ挿入ツールCharm Taggerもご活用ください。

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. 名前登録フォームを設定します。
   • 入力欄の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

   ▼この項目は、リアルタイムの登録・削除機能を付けたい人のみ対応してください。

   リアルタイム保存・削除に対応するには、全てのinputタグのclassに「charmnow」または「charmnowsession」を追加します。charmnowは通常登録、charmnowsessionは一時登録です。

   通常登録と一時登録の違いは次の項目「登録ボタンと削除ボタンを設定をします。」をチェックしてください。

   ※リアルタイム保存機能と登録・一時登録・削除ボタンは併用可能です。

   ※項目数が多くなると動作が重くなることがあります。十分に動作確認をして、実装するかご検討ください。

   苗字 <input type="text" id="charmname1" class="charm charmnow">
   みょうじ <input type="text" id="charmname2" class="charm charmnow">
   名前 <input type="text" id="charmname3" class="charm charmnow">
   なまえ <input type="text" id="charmname4" class="charm charmnow"> content_copy
2. 登録ボタンと削除ボタンを設定をします。

   登録ボタンは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のように保存内容がサーバへ送信されることはありません。

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

   登録内容を確認できるよう、登録名を表示用の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

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

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

   登録フォームや名前表示よりも下、特にこだわりがなければbodyの閉じタグ直前あたりで読み込んでください。

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

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

   CDNを使う場合はこのように読み込みます。

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

   CDNってなに？

   CDN（コンテンツデリバリーネットワーク）は、インターネット上でデータを早く届けるための仕組みです。
   自分のサーバにファイルをアップロードしなくても、別の場所にあるファイルを利用することができます。
   Charm.jsのCDNは予告なく更新することがありますので、自動更新したくない方はダウンロードしたスクリプト本体をお使いのサーバにアップロードしてご利用ください。
   また、CDNサーバがサービスを停止した場合は読み込めなくなるのでご注意ください。