Charm.js更新 v3.7.0

Charm.js v3.7.0 をリリースしました！
いつもCharm.jsをご利用いただきありがとうございます。

今回のアップデート（v3.6.1 → v3.7.0）では、ストレージエラー時のページ内お知らせ表示と、選択式登録フォームでのデフォルト値の扱い改善を行いました。

WebStorage（localStorage / sessionStorage）が利用できない環境での表示まわりについて、ご要望をいただいていたため、今回あわせて見直しています。

ストレージのエラー表示
選択式登録でのデフォルト値の扱い改善
CDNとGitHub

ストレージのエラー表示

機能追加背景

Charm.jsは名前変換のためにWebStorageを使用していますが、ブラウザ設定や環境によっては以下のようなケースがあります。

ストレージ容量がいっぱい
セキュリティ設定でWebStorageが無効
その他、ブラウザの設定やサイトの構造によってストレージに保存できない

こうしたケースで名前登録ができないことを閲覧者さんにお知らせする手段は、これまでのバージョンでは、charm本体ファイルの showStorageError を変更し、警告ウィンドウ（alert）で通知する方法が中心でした。

ただ、

人によってはポップアップが煩わしい
入力する前に閲覧者さんにお知らせしたい
必要なページだけ静かに案内したい

という点もあり、今回の更新でページ内にお知らせを出せる仕組みを追加しました。

改善内容の詳細：アラートではなく「ページ内お知らせ表示」が使えるようになりました

今回の更新では、WebStorageが利用できない場合に、強制的なalert表示だけでなく、ページ内に案内文を表示できるようになりました。

使用方法

HTML側に以下のような要素を置いておくと、入力フォームのあるページで、必要に応じてメッセージが表示されます。

<div class="charm_storage_error"></div>

この要素が存在しない場合は、お知らせは表示されません。
使わない場合はこのタグをサイトに書かなければOKです。従来どおりの動きになります。

また、表示される文字列はスクリプト側で入る仕組みなので、見た目はCSSで自由に調整できます。

エラーメッセージはスクリプト本体の以下から変更できます。必要に応じて “” の中のテキストを書き換えてください。※スクリプト編集が苦手な方はデフォルトのまま変更しないことをおすすめします。

static storageErrorString = "この環境ではWebStorageが利用できないため、名前は保存されません。";

チェックについて

今回の更新では、ページ構成に応じて必要なストレージの利用可否を追加チェックする処理を入れています。

localStorage：登録ボタン（id="charmset"）がある場合、または自動保存（class="charmnow"）がある場合
sessionStorage：一時登録ボタン（id="charmsession"）がある場合、または自動保存（class="charmnowsession"）がある場合

入力フォームで併用している場合は両方を確認することがあります。

既存仕様の影響

今回の実装では、エラー検知まわりもあわせて見直しています。
そのため、alert表示をするように設定して使用している場合、これまで表面化しなかったケースでもalertが出ることがあります。

エラー検知限界につきまして

できるだけの動作確認はしていますが、ストレージのエラーは閲覧者さんの環境によって再現状況も変わるため、環境によってはエラーメッセージが表示されない等、挙動が異なる場合があります。この機能は補助的な案内として考えて頂けたらと思います。

選択式登録でのデフォルト値の扱い改善

従来は、プルダウン式の名前登録フォームで初期選択の扱いが分かりにくい場面がありましたが、今回から selected を使ったデフォルト値を扱いやすくしました。

具体的には、optionタグに「selected」をつけたものを初期選択や削除後の戻り先として使いやすくなっています。（複数不可）

例えば、プルダウンありの配布サンプルHTMLで、デフォルトを黒としておきたい場合は

<select id="charmselect1" class="charm charmnow">
  <option value="白">白</option>
  <option value="黒" selected>黒</option>
  <option value="灰色">灰色</option>
</select>

のように optionタグへ追加してください。
閲覧者さんの環境にもよりますが、削除ボタンを押したときは、この selected を付けた値、または先頭optionに戻る形で扱いやすくなっています。

※ charmnow クラスまたは charmnowsession クラスをつけた自動保存機能とも併用可能です。

なお、この更新は選択式フォーム側の初期値・戻り先の扱いを改善するものです。表示タグ側の初期表示については、必要に応じてHTML側の初期文字もあわせて設定してください。