Charm.js更新 v3.6.0

Charm.js

Charm.js v3.6.0 をリリースしました!
今回のアップデートでは、名前削除後の挙動の仕様を変更し、従来の動作も選べるように改修しました。


削除後の挙動が再読み込みなしに

名前登録画面で名前を削除した際、再読み込みなしでデフォルトネーム表示に戻るようになりました。
従来もこの機能はあり、設定を変えれば使えていましたが、今回の更新では自動保存機能も含めて、初期設定も変更しています。

仕様変更の背景について

なぜ今回、この対応をしたのか背景を説明しますと、特に自動保存機能での一部の挙動が、表現の多いページでは違和感が出てしまう場合があったからです。

削除ボタンを押してから削除する場合は、再読み込みがあっても大きな問題ではなかったかなと思います。
サイトの閲覧を終了するにあたり、情報を削除してリセットしておく、といった意図で押す場合は、再読み込みでサイトのモーダルやエフェクト表示がスタート地点に戻っても、それほど困ることはないかなと考えています。

問題と考えていたのは自動保存の場合で、
自動保存機能を実装する当初の懸念として、↓のようなことを考えていました。
表示するものが1文字もない→ユーザーさんが読むものの名前がなくて小説が意図しないものになる
なので、これまでのCharmでは、入力欄を空にしたときにデフォルト表示に戻すために、再読み込みが走るように挙動を固定していました。

しかし、こちらにも課題はあり、
動きがあまりないページではおそらく問題はなかったかと思いますが、ページの読み込み時にアニメーションを入れたり、モーダルを使っている場合など動きがあると相性が悪く、入力欄を空にして入力し直そうとする度に、アニメーション等が入るデメリットがありました。

この動きを今回改善するにあたり、自動保存の入力欄も含めて、以下の挙動にする必要がありました。

  • 変換前のデフォルト表示を全て内部で保持
  • 削除のボタンを押したときや入力欄クリア時に全部戻す
  • 画面の再読み込みはしない

再読み込みの初期設定が変わるのは仕様変更なので、従来の仕様前提で使っている方々に影響が出てしまう懸念があるのですが、通信環境の面でも、動作速度の面でもメリットの方が大きいと考えて、今回は仕様を変更しました。

従来の仕様で使いたい方は恐れ入りますが次項の設定方法でご対応いただければと思います。

名前削除後に再読み込みさせる方法(従来の挙動に戻す)

方法1:スクリプト本体を編集する

メリット:全画面で同じ動きに出来る
デメリット:自分のサイトに、編集後のスクリプトをアップロードする必要がある(CDN不可)

スクリプト本体の設定部分の49行目

static unsetReload = 0;

↑を0から1に変更すれば過去のデフォルトの動きと同じようになります。

方法2:HTMLタグにdata属性を追加する

メリット:スクリプトを編集しなくても設定を変えられる
デメリット:仕様を変えたいページのすべてのタグを変える必要がある

スクリプト本体を読み込む際のスクリプトタグに、data-charm-unset-reload を追加してください。

<script src="charm.js" data-charm-unset-reload></script>

この指定をしたページのみ、過去のデフォルトの動きと同じようになります。

CDNとGitHub

最新版CDNはv3.6.0へ更新済みです。

https://cdn.jsdelivr.net/gh/mizuna-shima/charm@main/public/charm.min.js

バージョン固定のCDNもv3.6.0を用意しました。

https://cdn.jsdelivr.net/gh/mizuna-shima/charm@main/public/3.6.0/charm.min.js

アーカイブとして、圧縮前コードも含めたダウンロード用zipも追加済みです。

charm/archives at main · mizuna-shima/charm
Charm.js 配布/アーカイブ保存用. Contribute to mizuna-shima/charm development by creating an account on GitHub.

補足・余談

今回の更新にあたり、Charm.jsのコードを一から作り直しています。
(自動保存まわりを「再読み込み前提」で組んでいたため、全体の見直しが必要でした)

処理内容そのものは変えていない部分も含めて整理・最適化を行ったため、ファイルサイズが少し軽くなりました。
古いブラウザ(ES2020未満など)では動作しない可能性がありますので、その点ご留意ください。

不具合の内容によっては対応が難しい場合もございますが、何かお気づきの点がありましたらお気軽にご連絡いただけますと幸いです。

今後ともCharm.jsをよろしくお願いいたします!

タイトルとURLをコピーしました