読み込み中...

chevron_left Lanama

More

Charm.js の使い方についてのQ&A

  1. Q1どのブラウザでも動きますか?

    Chrome, Safari, Edge, Firefoxは動作確認済みです。
    ただし、これらのブラウザでも設定次第では動作しないことがあります。
  2. Q2タブレットやスマホでもスクリプトは動きますか?

    全てのOSや設定で試したわけではありませんが、以下の端末では動作することを確認しています。
    Android: Chrome, Edge, Firefox
    iOS: Chrome, Safari, Edge, Firefox
    Windows: Chrome, Edge, Firefox
    macOS: Chrome, Safari
  3. Q3カスタム変換の動きはどこから確認できますか?

    コピペ用カスタムコードのページから試せます。
    コピペ用カスタムコードから任意のバージョンを選んで確認してください。
  4. Q4解説に誤字脱字があるようですが、どこに連絡すればよいですか?

    解説の誤字脱字、Charm.jsのバグはContactへご一報ください。
  5. Q5Charm.js v1.2 から Charm.js v3系 へ差し替えても問題ありませんか?

    サイトで紹介している使い方をしている限りは問題なく動くことを確認済みです。
    もし気になる場合は、登録フォームのidとspanタグのclassが揃っているかご確認ください。
    (例:inputタグのidがcharmname1なら、変換表示のspanタグのclassをcharmname1にする)
    使い方によっては不具合が生じる可能性もありますので、差し替える前にバックアップをとることをおすすめします。
  6. Q6一時登録機能って何ですか? 普通の登録と何が違うのですか?

    登録と一時登録はどちらもブラウザに保存する機能ですが、データの期限が違います。
    技術者向けの言葉でいうと、登録ではLocalStorageに保存し、一時登録ではSessionStorageに保存しています。
    「登録」は容量がある限りブラウザの履歴を削除したりアンインストールするまでデータが残りますが、「一時登録」はタブを閉じたときやページを閉じたときにクリアされます。
    どちらにしても、Cookieのように保存内容がサーバへ自動送信されることはありません。
  7. Q7一時保存時のメッセージ「(一時保存しました)」を変えるにはどうしたらいいですか?

    charm.js の「static sessionString = '(一時保存しました)';」の値を書きかえてください。
    ※v2.1以前の場合は「const sessionString = '(一時保存しました)';」の値を書き換えてください。
    ※charm.jsのJavaScript変更は基本的にサポートしていません。慎重に変更してください。
  8. Q8自作のJavaScriptの処理の後、自分の好きなタイミングでCharm.jsを動作させることはできますか?

    Charm.jsは読み込まれた時点で自動的に一通りの処理をします。
    この動きとは別に、任意のタイミングで一連の処理を再度呼び出すことが可能です。
    charm.jsを読み込んだ後にお手元のJavaScriptの中で Charm.run(); と書くことで呼び出せます。
    他の処理の内容によっては動かない等ありますので、プログラミングの知識がある方のみお使いください。
  9. Q91つの項目につき50文字しか登録できないのですが、増やせますか?

    読み手さんの操作ミスで端末に負担をかけないよう、Charm.jsの初期設定は50文字までしか登録できないようになっています。
    登録できる文字数を増減させるには、charm.jsの「static maxSize = 50;」の数値を書き換える必要があります。
    例として、100文字まで登録できるようにするなら「static maxSize = 100;」と書きます。
    ※v2.1以前の場合は「const maxSize = 50;」の数値を書き換えてください。
    ※charm.jsのJavaScript変更は基本的にサポートしていません。慎重に変更してください。
  10. Q10ブラウザの設定でLocalStorage、SessionStorageのどちらも無効になっていても使えますか?

    Charm.js v2.3以降は、ブラウザの設定でこれらが無効化されていても、登録フォームのあるページで「登録」操作をするとページ内で変換することができます。
    これは一時的に表示を変えているだけなので他のページでは変換されず、登録フォームの「登録」をしたページも再読み込みで変換前の状態に戻ります。
  11. Q11ブラウザの設定でLocalStorage、SessionStorageのどちらも無効になっていることを通知できますか?

    Charm.js v2.3以降は、charm.jsの特定の値を変更すると、ブラウザのアラートで「セキュリティ設定によりローカルストレージが使用できません」等を表示することが可能です。
    「static showStorageError = 0;」を「static showStorageError = 1;」に変更すると、無効時にアラートが表示されます。
    ※charm.jsのJavaScript変更は基本的にサポートしていません。慎重に変更してください。
  12. Q12名前削除時にページを再読み込みしないようにするにはどうしたらいいですか?

    Charm.js v2.3以降は、charm.jsの特定の値を変更すると再読み込みしないように変更できます。
    「static unsetReload = 1;」を「static unsetReload = 0;」に変更すると再読み込みしなくなります。
    この設定になっている場合、再読み込みせずに元々の表示の名前を再表示するようになっていますが、サイトの設定や使用方法によっては再表示がうまくいかないことがありますのでご了承ください。
    また、元々の表示内容を内部で保持する都合により動作が重くなる可能性があります。
    ※charm.jsのJavaScript変更は基本的にサポートしていません。慎重に変更してください。
  13. Q13同じサイト(ドメインが同じサイト)の中で複数のCharm.jsを使うことはできますか?

    同じサイトの中で複数のCharm.jsを使うことは可能です。
    Charm.js v3.4 以降は、Charm.jsスクリプト本体を読み込む際のscriptタグにdata-charm-storageを付与すると、そのページでは保存キーを変更できるので、違うグループの名前登録として使うことができます。
    書き方例:<script src="charm.js" data-charm-storage="変更後の保存キー名"></script>
    このように変更したscriptタグを、名前登録ページと小説ページで使用します。

    v3.4 未満の場合や、保存キー以外の設定も変更して複数使用したい場合は「static storageKeyName = 'charm';」のcharmという文字を別の文字に変更し、フォルダやファイル名を変えて別のファイルとして保存します。
    必要に応じて読み込むスクリプトを変更することで、別のデータとして登録することができます。
    ただし、同一のページの中で複数のスクリプト本体を同時に使うことはできないので、それぞれ違うページで使ってください。
    ※charm.jsのJavaScript変更は基本的にサポートしていません。慎重に変更してください。
  14. Q14jQueryやPHPのサイトでも動きますか?

    はい、動きます。
    JavaScriptを実行できる環境であれば他のライブラリ、フレームワーク、サーバーサイドの環境に関わらず動きます。
    jQuery等のライブラリやVue等のフレームワークを使用していたり、WordPress等のPHP環境でも基本的には動きます。
  15. Q15保存キーを変更する方法は?

    同じドメイン配下で他の人と共同でサーバーを借りている方、同一サイトの中で違うグループの名前登録を使用したい方向けのご案内です。
    Charm.js v3.4 以降は、Charm.jsスクリプト本体を呼び出す際のscriptタグにdata-charm-storageを付与すると、そのページでは保存キーを変更できるので、違うグループの名前登録として使うことができます。
    書き方例:<script src="charm.js" data-charm-storage="変更後の保存キー名"></script>
    このように変更したscriptタグを、名前登録ページと小説ページで使用します。

    v3.4 未満の場合はスクリプト本体のコードの中から、「static storageKeyName = 'charm';」となっている部分を探します。値の「charm」となっているところをご自身のサイト名に変えたり、お好きな数字をつけるなど、他の人と被らなそうな文字に変えてください。
    例:
    static storageKeyName = 'lanama';
    static storageKeyName = 'charm2024050505';
    ※余分な全角スペースを入れたり「'」や「;」を削除してしまうと動かなくなるのでご注意ください。
  16. Q16Storage保存データの簡易暗号化はどこから設定できますか?(β版)

    スクリプト本体のコードの中から、「static useEncryption = 0;」となっている部分を探します。
    簡易暗号化を使用する場合は↓のように半角数字で1にします。
    static useEncryption = 1;
    ※余分な全角スペースを入れたり「;」を削除してしまうと動かなくなるのでご注意ください。
    ※登録した文字によっては暗号化がうまくいかなかったり、復号化に失敗して文字化けする可能性があります。
    ※この暗号化は元の文字が多少推測されにくい程度のものです。完全な暗号化ではありません。
    ※これまで暗号化していなかった場合、データを再登録しないと文字化けします。閲覧者さんが驚かないようにアナウンスをお願いします。
  17. Q17スクリプト本体で設定した再読み込み系の指定は、自動保存も対象ですか?

    リアルタイムで入力内容を保存する自動保存機能は、対象に含まれていません。
    リアルタイムの自動保存は、「登録時の画面再読み込みなし、文字削除による削除処理後の再読み込みはあり」の動きで固定です。
    「static setReload」「static unsetReload」がどのような設定でも自動保存の動きは上記の通りです。
  18. Q18バージョンアップでスクリプトを入れ替えましたが反映されません。どうしたらいいですか?

    ブラウザが古いコードをキャッシュしているので、スクリプト読み込みコードにパラメータを追加します。
    例:<script src="charm.js?v=20240606"></script>
    「?○○○=●●●」部分がパラメータといい、同じファイル名でもパラメータが違えばブラウザには異なるファイルとして認識させることができます。
    更新前とは違う文字になっていれば何でも良いです。バージョン番号や日付にすると後で管理しやすいかと思います。
    全てのページで変えるのが難しくても、名前変換ページなどの誰もが見るページで上記のようにしておけば、そのページを見たときに新しい本体スクリプトがキャッシュされます。
    サーバの設定やサーバーサイドコーディングでもキャッシュをクリアできます。
    PHPで動的にページを出力できるサイトでしたら以下のようにしておくと毎日新しくキャッシュされます。
    <?php $dateParam = date('Ymd'); ?>
    <script src="charm.js?v=<?= $dateParam; ?>"></script>

利用条件・その他のQ&A

  1. Q1どんなサイトでも使用していいですか?

    ライセンスの条件を守った使い方であれば誰でもご自由にお使いいただけます。(ライセンス改訂:2024年1月14日)
  2. Q2無料で使えますか?

    はい、商用・非商用どちらの場合も使用料はいただいていません。
  3. Q3同人サイトで使っていいですか?

    はい、同人サイトでもCharm.jsはお使いいただけます。
    同人コンテンツの創作や活動内容が許可されているかどうかは、ご利用中のサーバやサービスの利用規約をご確認ください。
  4. Q4成人向けコンテンツのあるサイトで使っていいですか?

    はい、ライセンスの条件を守っていただければCharm.jsはご自由にお使いいただけます。
    成人向けコンテンツの創作や活動内容が許可されているかどうかは、ご利用中のサーバやサービスの利用規約をご確認ください。
  5. Q5ゲームのパッケージやWebサイトテンプレートに同梱して配布していいですか?

    はい、同梱で配布することは可能です。商用・非商用問わず、ご自身の独自のコンテンツがしっかりとあるものに同梱して配布することは問題ありません。
  6. Q6ライセンスの「商用利用または再配布時は、重要な部分に著作者表示と公式の配布元を記載すること」の具体的な記載例を教えてください。

    Webサイトでしたら配布ページやabout等の紹介ページに、何らかの配布パッケージでしたらライセンス情報等をまとめた資料に、以下のように記載してください。
    Charm.js Copyright (c) Mizuna Shima https://lanama.net/scripts/charm/
    これは一例なので、日本語で書いてもOKです。
  7. Q7ライセンスの「ファイル内のクレジットおよびライセンス文章を削除しないこと」とはどういう意味ですか?

    スクリプト本体ファイル「charm.js」の先頭にあるコメント(ライセンス文章)を削除しないでください、という意味です。
    Charm.jsをご自身で改修して使う場合でも、この部分は削除や変更をしないでください。
  8. Q8ライセンスの「本スクリプト、および本スクリプトが主体の製品を販売しないこと」とはどういう意味ですか?

    Charm.jsをゲームやテンプレートに含めて販売をすることは可能ですが、Charm.jsだけを販売することはできません。
    (ご自身のコンテンツと同梱の場合はOKです)
    以下についても同様に許可されません。
    ・Charm.jsをそのまま、またはわずかな変更を加えて販売すること
    ・このサイトにある解説とCharm.js関連ファイルをセットにして販売すること
    ・金銭が発生していなくても、何らかの対価としてCharm.jsを提供すること
  9. Q9ライセンスの「本スクリプトの保存データを用いて金銭の請求または物品の要求をしないこと」とはどういうことですか?

    Charm.jsで生成したテキストや、Charm.jsで登録したデータを請求や決済に使用することを禁止しています。
    Charm.jsは請求書や領収書の宛先などに使用することはできません。
    ご自身のサイト内で請求や要求を行う場合はCharm.jsを使わずに行ってください。
  10. Q10リンクは必要ですか?

    商用利用と再配布でない場合は、リンクは任意です。
  11. Q11利用報告は必要ですか?

    こっそり使ってもらってOKです。もちろん、利用報告を頂ければこっそり遊びに行って励みにします。
  12. Q12登録内容を増やした登録フォームと、カスタムコードを提供してくれませんか?

    今のところは個別のご依頼は受けていませんが、需要が多ければ対応するかもしれません。
  13. Q13Charm.jsを紹介してもいいですか?

    どうぞ!
  14. Q14Charm.jsって、日本語で何と読むのですか?

    日本語では「チャームジェイエス」または「チャームドットジェイエス」です。お好きな方で呼んでください。
  15. Q15サンプルのHTMLファイルやCSSファイルを自分のサイトで使ってもいいですか?

    どうぞ! ただし、多くの方に使っていただきたいと考えているため、自作発言はしないでください。
    ご利用報告やリンクは任意です。HTML/CSSの内容はお好きに変更してください。
  16. Q16過去のHTML・CSSサンプルや過去バージョンのCharm.jsはどこかにありますか?

    HTMLとCSSはこちらからZipでダウンロードできます。
    過去のサンプル ※こちらにCharm.js本体は入っていません

    一部の過去バージョンはGitHubという外部サイトに置いています。
    GitHubのCharm.jsページ

Extension

本体スクリプトに追記または別ファイル併用で、Charm.jsに機能を追加することができます。

使い方

拡張機能一式をダウンロードしていただき、使いたい機能のコードだけを本体スクリプトのコードの下に追記するか、本体スクリプトの直後に別ファイルとして読み込んでください。

サンプルの名前登録idから変更している場合や、デフォルトネームを書く機能はコード編集が必要です。

拡張機能共通の具体的な導入方法は、別館のLaboブログをご覧ください。

拡張コードをダウンロード

機能単位でコードをコピーしたい方は↓のブログ記事を参照してください。

配布している拡張機能

各リンクはLaboブログの記事です。

Tool

デフォルトネームで書いたテキストに、名前変換タグを挿入するツールを公開しています。

名前変換タグ挿入ツール Charm Tagger

Banner

Charm.jsにリンクを貼ってくださる方向けの

リンク用のバナーとアイコンです。

こちらは大きめ画像です。
必要に応じて縮小加工または縮小表示してください。

バナー画像は必ずリンクを設定してご利用ください。

URL:https://lanama.net/scripts/charm/

Lanamaへのリンク情報はこちら

GitHub

Charm.jsはGitHubでも公開しています。
https://github.com/mizuna-shima/charm
※URL変更になりました(2024年5月18日)
keyboard_control_key