本館サイトのカスタムページを更新しました。
Charm.jsのバージョンアップではなく、Charm.jsでプルダウンの選択肢から登録してもらうためのフォームの作り方の説明を追加しています。
どんなときにプルダウンがいいのか
お名前は自由に入力してもらいたい一方で、お話の文脈的に誕生月や季節、色などの固定の選択肢から選んでもらいたい場合があるかと思います。
基本の入力（input）でも対応はできますが、「○月生まれ」や「○○スクール」など決まったフォーマットで選択式にしておくと、読み手さんも入力がスムーズになるメリットがあります。
例えば、本館サイトで紹介しているサンプルですと、読み手さんに「猫の毛色」を登録してもらいますが、選択肢として↓を用意しています。
- 白
- 黒
- 灰色
この登録欄がもしinputの場合、良くも悪くも自由に入力できるので「ピュアスノーホワイト」「ウルトラマットブラック」「モードアッシュグレー」のようなワードも入れられるわけです。
小説本文ではこの色名を白猫、黒猫、灰色猫のように変換して表示する場合、さきほど例にあげたようなコスメっぽい色名だとちょっと文脈がおかしくなることもあります。
（ウルトラマットブラック猫もかっこいいですが）
ですので、小説の世界観を損なわない範囲で、読み手さんの好みをスムーズに登録するにはプルダウンからの選択肢があるといいわけです。
フォームの作り方
inputと同じように、selectタグのclassにcharm、idには任意の個別のidを設定します。
<select id="charmselect1" class="charm">
<option value="白" selected>白</option>
<option value="黒">黒</option>
<option value="灰色">灰色</option>
</select>
表示するところは、通常の変換と同じようにclassに上記idを入れたspanで囲むだけです。
<span class="charmselect1">白</span>
詳しい書き方はlanama本館をご覧ください。
Berrycake.jsでもできる
Charm.jsをご利用の方には関係ない話ではあるのですが、本館で配布している名前変換スクリプトのBerrycake.jsでもプルダウン登録は可能です。
いったんこちらで先にご紹介を……！
例えば、5個目の登録項目としてプルダウンを設定する場合は↓のようにberrycake_recipe.confに追記します。
cake5=春生まれ
HTMLは↓のように書きます。
<select id="cake5">
<option value="春生まれ" selected>春生まれ</option>
<option value="夏生まれ">夏生まれ</option>
<option value="秋生まれ">秋生まれ</option>
<option value="冬生まれ">冬生まれ</option>
</select>
これで、あとは本文が「春生まれ」になっているところが読み手さんの登録したものに入れ替わります。
そのほかの更新
プルダウンのサンプルもあったほうが良いかと思い、Charm.jsのスクリプトのページにある動作サンプルを新しいものに差し替えました。
「自動保存とプルダウンデモ」と書いてある方のボタンから、プルダウンの動作サンプルを確認できます。
もし良ければご利用くださいませ。
更新履歴の案内にある通り、今までのCharm.jsサンプルはMoreのQ&A内からダウンロードできますので欲しい方はそこからお持ち帰りください。
