名前変換スクリプトBerrycake.js
（2024.06.13更新）
Lanama.netにて名前変換スクリプト「Berrycake.js」を公開しています。
最新バージョンはv1.4.0です。
Berrycake.jsは、設定ファイル1つとスクリプト本体ファイル1つから出来ている、夢小説や名前変換小説向けのスクリプトです。
デモページはこちら
この記事ではBerrycake.jsについて簡単に紹介します。
小説本文の中でタグを使わずに変換できる
Berrycake.jsは、小説ページに書かれているデフォルト名を探し、直接文字を置き換えて変換を実現しています。
小説本文は変換範囲をidで指定するだけ。
<!-- 変換範囲（小説本文） -->
<div id="berrycake">
<p>実小麦蜜花（みこむぎみつか）は今日も元気です。</p>
<p>彼女は歌いながらベリーケーキを焼き、ベリーケーキタワーを作っています。</p>
</div>名前ひとつひとつをタグで囲まなくても、スクリプトが自動で文字を探して登録名と入れ替えてくれます。
※p, li, ruby, rt, h1, h2, h3, h4, a, span, divタグ、タグ無し文章が変換対象です
通常の小説を書くような感覚でシンプルに書くことが出来ます。
ユニークな名前なら基本そのままでOK！
もし名前以外の意味合いで同じ単語を使いたくなった場合は、変換回避タグを使えば変換させないこともできます。
▼変換させたくない文字をclass="no_cake"で囲っておく
<span class="no_cake">変換させたくないテキスト</span>
タグ1つで名前登録フォームを出せる
設定ファイルの通りに名前登録フォームを自動で出力することができます。
※サーバー上で動く機能なので、アップロードして動作確認してください
▼設定ファイル例 設定ファイルの書き方はTutorial参照
デフォルト名
cake1=実小麦
cake2=蜜花
cake3=みこむぎ
cake4=みつか
自動出力ラベル（10文字まで）
label1=苗字
label2=名前
label3=みょうじ
label4=なまえ▼名前登録フォームを出すタグ
<div id="cakeMix"></div>これで、設定ファイル通りに以下の登録フォームが出るようになります。
ラベル
名前入力欄
登録ボタン
削除ボタン
設定ファイルに内容を追加すれば登録項目は増やせます。減らすこともできます。もちろん、入力フォームを自分で用意して使うこともできます。
出力フォーム例
どんなhtml構造のフォームが出るのかは Tutorial をご確認ください。
JavaScriptを編集しなくても使える
スクリプト内にデフォルト名を定義する必要がないので、スクリプトは変更しなくてOKです。
名前登録ページと小説ページのbody閉じタグの直前で、1行読み込むだけで使えます。
<!-- 外部ファイルとして読み込む -->
<script src="berrycake.js"></script>
</body>設定ファイルはスクリプトが自動で読み込むので、htmlで呼び出す必要はありません。
※設定ファイルはスクリプトと同じフォルダにアップロードしてください
※v1.4.0からは、設定ファイルを使わずにスクリプト内にデフォルト名を定義して使うことも選択できるようになりました
カスタム変換ができる（個別タグは必要）
タグを埋め込む必要がありますが、特殊な変換をいくつか用意しています。
ひらがな→カタカナ変換
classが「cake_custom_kana」のspanタグで囲むと、タグ内のひらがなを表示時にカタカナへ変換します。ひらがな以外の文字はそのままになります。
例：なまえ → ナマエ
<span class="cake_custom_kana">なまえ</span>例：今日はいい天気ですね → 今日ハイイ天気デスネ
<span class="cake_custom_kana">今日はいい天気ですね</span>
ひらがな→カタカナ変換（v1.3.0～）
classが「cake_custom_hira」のspanタグで囲むと、タグ内のカタカナを表示時にひらがなへ変換します。ひらがな以外の文字はそのままになります。
カタカナで呼ぶことが多い場合は閲覧者さんにはカタカナで登録してもらい、特殊な場面でのみこのカスタムでひらがな表記をする、等にどうぞ。
例：ナマエ → なまえ
<span class="cake_custom_hira">ナマエ</span>
省略表現
classが「cake_custom_first」のspanタグで囲むと、範囲内の文字から一文字目のみを切り出して表示します。
例：なまえ → な
<span class="cake_custom_first">なまえ</span>
詰まり表現
classが「cake_custom_fold」のspanタグで囲むと、範囲内の一文字目と「、」を表示します。
例：なまえ → な、
<span class="cake_custom_fold">なまえ</span>細かい指定で、ナ、ナ、ナ、ナマエ（詰まり & 3回指定 & カタカナ）を表現することもできます。細かい指定方法はサイトを参照してください。
<span class="cake_custom_fold cake_custom_num_03 cake_custom_kana">なまえ</span><span class="cake_custom_kana">なまえ</span>
区切り表現
classが「cake_custom_split」のspanタグで囲むと、範囲内の文字を区切って表示します。
例：なまえ → な……ま……え
<span class="cake_custom_split">なまえ</span>「……」部分は、いくつかの記号から選んで変更することもできます。
例：なまえ → なーまーえ（区切り & ー）
<span class="cake_custom_split cake_custom_symbol_02">なまえ</span>例：なまえ → な☆ま☆え（区切り & ☆）
<span class="cake_custom_split cake_custom_symbol_13">なまえ</span>
母音のばし表現
classが「cake_custom_vowel」のspanタグで囲むと、範囲内の最後のひらがなorカタカナの母音に変換します。
例：みょうじ → い
<span class="cake_custom_vowel">みょうじ</span>classが「cake_custom_vowel_min」のspanタグで囲むと、範囲内の最後のひらがなorカタカナの小さい文字の母音へ変換します。
例：みょうじ → ぃ
<span class="cake_custom_vowel_min">みょうじ</span>細かい指定をすれば↓みたいなこともできます
例：みょうじィィィ（基本の名前 & 小さい母音 & 3回指定 & 母音カタカナ）
みょうじ<span class="cake_custom_vowel_min cake_custom_num_03 cake_custom_kana">みょうじ</span>細かい指定方法はサイトを参照してください。
その他、Berrycake.jsの機能
LocalStorage または SessionStorage 保存
Berrycake.jsはCookieを使用しません。
登録した名前は閲覧者さんのブラウザのLocalStorageに保存されます。
名前登録フォームの自動出力には入っていませんが、一時登録ボタンで登録するとSessionStorageを保存先にすることもできます。
<!-- 一時登録ボタン -->
<button type="button" id="cakeSession">一時登録</button>LocalStorageに保存された情報は、閲覧者さんがその情報を消去するか、ブラウザを消去するまで保存されます。
SessionStorageはLocalStorageによく似ていますが、保存期間が違います。ブラウザのタブを閉じると消去されます。
どちらもCookieとは違い、情報はサーバーに送られません。
他ライブラリやサーバーサイドに依存なし
Berrycake.jsは、設定ファイルとスクリプトファイルのみで処理が完結しています。
jQueryのようなライブラリ、Vue.jsのようなフレームワーク、PHP等を別途用意する必要はありません。
もちろんこれらを使ってもOK！
名前表示機能つきスライドショースクリプトUtakata.jsと連動
Utakata.jsを使うと、Berrycake.jsの名前登録フォームそのままで、名前表示機能のあるスライドショーや画像表示が楽しめます。
スライドショーの作り方はUtakata.js配布ページをご確認ください。
※Utakata.jsは他の名前変換スクリプトCharm.jsと連動もできます。
他にも細かい設定やちょっとしたポイントはあるのですが、詳しくは配布ページをご覧いただければと思います。
タグ打ちとファイルアップロードでサイトを作れる方向けに公開していますが、ご不明点やご感想などあればサイトに掲載している連絡手段からご一報いただけますと幸いです。
https://lanama.net/scripts/berrycake/
何かありましたらこちらのContactへお願いします
Lanama.net