Berrycake.js

このページで紹介しているBerrycake.jsは、設定ファイルとJavaScriptで動かす名前変換スクリプトです。

デフォルト名を書いた設定ファイルとJavaScriptをアップロードし、各ページで読み込んで使用します。

指定した範囲から文字を読み取り、設定ファイルに沿って変換していく仕組みです。

JavaScriptがわからなくても、設定ファイルとHTMLの編集だけで名前変換機能を使えます。

↓小説本文の使用例です。実小麦蜜花（みこむぎみつか）の部分を登録名で変換します。

名前変換小説、単語変換小説、夢小説などにどうぞ。

デモページ

• 小説本文で名前単位のタグは使わない
• スクリプトがhtmlから独立しているので管理が容易
• 設定ファイルはスクリプトが自動で読み込むので、htmlで読み込むのはスクリプトファイルだけでOK
• 他ライブラリやサーバーサイドに依存しないので、Berrycake.jsのみで使用可能（jQueryやPHPを用意しなくてOK）
• スクリプトファイルは軽め（15KBくらい）
• スマホでアクセスしても動く（例外はあるかも）
• 登録データはLocalStorageまたはSessionStorageに保存
  サーバーにデータが自動送信されるCookieとは違い、登録データを端末の外へ送信しません

• 変換項目の追加は設定ファイルに追記するだけでOK
• シンプルな構造の名前登録フォームを自動出力（自分で作ってもOK）
• 一般的な登録ボタンと一時登録ボタン（ブラウザやタブを閉じると登録内容を自動削除することが可能）を選べる
• 「な、な、なまえ」や「なーまーえ」といったカスタム変換も可能（ただし小説内にタグが必要）

当サイトの別スクリプトUtakata.jsを併用すると、名前表示のあるスライドショーを作れます。

Charm.jsは小説内にタグを埋め込んで、タグ部分だけを変換するスクリプトです。

変換を使用するにはタグを埋め込む必要がありますが、タグを埋め込んだ部分だけを確実に変換できます。カスタム変換の種類も多いです。自由にカスタムしたい場合はCharm.jsがおすすめです。

Berrycake.jsは指定範囲の全体を検索して、デフォルト名の部分を直接置き換えるスクリプトです。

デフォルト名をタグで囲む必要がないため小説を書いてすぐに名前変換小説にできます。思わぬ変換に注意が必要ですが、変換タグを出来るだけ書かずに運用したい方はBerrycake.jsが良いかと思います。

※Berrycake.jsもカスタム変換を使うにはタグの埋め込みが必要です。

ライセンス（利用条件等を書いたもの）を確認し、同意できる方のみご利用ください。

日本語版も英語版も内容は同じです。お好きな方をご確認ください。

Berrycake.jsライセンス（日本語版）

Berrycake.jsライセンス（英語版）

上記のライセンスをご確認いただくとダウンロードボタンを押せるようになります。

サンプルファイルごとダウンロード

スクリプト本体のみダウンロード

WordPressサイト様向けに、プラグイン化したBerrycake.jsです。

設定方法はNote（外部サイト）で解説しています。

WP Berrycakeをダウンロード

Berrycake.jsは4つのステップで導入することができます。

1. 設定ファイル「berrycake_recipe.conf」にデフォルト名と、入力欄のラベルを設定します。
   デフォルト名
   cake1=実小麦
   cake2=蜜花
   cake3=みこむぎ
   cake4=みつか
   
   自動出力ラベル（10文字まで）
   label1=苗字
   label2=名前
   label3=みょうじ
   label4=なまえ
   content_copy
2. 設定ファイルとスクリプト本体をアップロードします。
3. 名前登録ページでスクリプト本体を読み込み、名前登録フォームを設定し、変換範囲を設定します。
   <!-- スクリプト読み込み bodyの閉じタグ前がおすすめ -->
   <script src="berrycake.js"></script> content_copy
   <!-- このタグで名前登録フォームを自動出力できます -->
   <div id="cakeMix"></div>
   
   <!-- 変換範囲 -->
   <div id="berrycake">
     <p>登録名は実小麦蜜花（みこむぎみつか）です。 </p>
     <p>小説の主人公はこの名前で変換されます。 </p>
   </div> content_copy
4. 小説ページでスクリプト本体を読み込み、変換範囲を設定し、アップロードします。
   <!-- スクリプト読み込み bodyの閉じタグ前がおすすめ -->
   <script src="berrycake.js"></script> content_copy
   <!-- 変換範囲（小説本文） -->
   <div id="berrycake">
     <p>実小麦蜜花（みこむぎみつか）は今日も元気です。</p>
     <p>彼女は歌いながらベリーケーキを焼き、ベリーケーキタワーを作っています。</p>
   </div> content_copy

基本的な使い方の詳しい手順は次のTutorialをご覧ください。

サーバーにアップロードせずに動かしたい方はMore > 使い方のQ&A > Q17をご覧ください。

1. Downloadからサンプルファイルごとダウンロードします。
2. ファイルを解凍し、フォルダの中身を確認します。
   • berrycake.js：名前変換スクリプト本体のJavaScriptです。
   • berrycake_recipe.conf：デフォルト名の設定ファイルです。
   • berrycake.html：名前登録ページのHTMLです。
   • sample.html：小説ページサンプルのHTMLです。
   • berrycake.css：各ページの外観を整えているCSSです。

   必ず使用するのは「berrycake.js」と「berrycake_recipe.conf」ですが、使い方例として5ファイルを全て使用します。

3. 設定ファイル「berrycake_recipe.conf」にデフォルト名を設定します。

   名前登録フォーム自動出力を使用する場合は、入力フォームのラベルを追加で設定します。こちらで説明を進めます。

   デフォルト名
   cake1=実小麦
   cake2=蜜花
   cake3=みこむぎ
   cake4=みつか
   
   自動出力ラベル（10文字まで）
   label1=苗字
   label2=名前
   label3=みょうじ
   label4=なまえ
   content_copy
   • デフォルト名は cake●= （●は半角数字）、ラベルはデフォルト名の数字と合うように label●= を設定します。
   • 自動出力フォームの名前入力欄はこの数字ごとのペアで出力します。
   • ●部分は数字であればいいので10も999も設定可能です。
   • berrycake_recipe.confを上書き保存するときは文字コードを「UTF-8」にしてください。参考リンク：UTF-8って？

   自動出力を使わずに登録フォームを自作する場合はlabelは削除してもOKです（残しておいてもOK）

   デフォルト名
   cake1=実小麦
   cake2=蜜花
   cake3=みこむぎ
   cake4=みつか
   content_copy

   登録フォーム自動出力を使用しつつ、入力項目を増やす例はこちら

   デフォルト名
   cake1=実小麦
   cake2=蜜花
   cake3=みこむぎ
   cake4=みつか
   cake5=メープル
   
   自動出力ラベル（10文字まで）
   label1=苗字
   label2=名前
   label3=みょうじ
   label4=なまえ
   label5=ペットの名前
   content_copy

1. ご自身のWebサイトの任意の場所にサンプルファイルをコピーします。

   JavaScriptやCSSをフォルダ分けしている方はご自身で決めたフォルダへ、フォルダ分けがよくわからないという方はWebサイトフォルダの中にberrycakeフォルダの中身をそのままコピーしてください。

   そのままコピーした場合は以下の構成になります。

   • Webサイトフォルダ/berrycake.js　※
   • Webサイトフォルダ/berrycake_recipe.conf　※
   • Webサイトフォルダ/berrycake.html
   • Webサイトフォルダ/sample.html
   • Webサイトフォルダ/berrycake.css

   ※berrycake.js と berrycake_recipe.conf は同じフォルダにアップロードしてください。

1. 名前登録ページ「berrycake.html」でberrycake.jsファイルを読み込みます。

   スクリプトを読み込みます。おすすめはbody終了タグの直前での読み込みです。

   <script src="berrycake.js"></script> content_copy

   スクリプトの保存場所が名前登録ページと違うフォルダの場合はsrcの内容を変更してください。

   設定ファイルはスクリプトが自動で読み込むので、htmlで特に読み込む必要はありません。

2. berrycake.htmlに自動出力の名前登録フォームを用意します。

   ※手作業で登録フォームとボタン類を作成する場合はこの作業は不要です。

   サンプルファイルでは使用していませんが、登録フォームを手作りしなくても1行コードを入れるだけで名前登録フォームを用意することができます。

   登録フォームは2種類あり、追加するタグの書き方で出るフォームの構造が少し違います。

   ※サーバにアップロードしないと自動出力は動かないのでご注意ください。

   登録フォームを作りたい場所に以下のコードを入れます。

   <div id="cakeMix"></div> content_copy

   ブラウザでアクセスしているときは以下の構造の名前登録フォームに変わります。

   <div id="cakeMix">
     <div class="row">
       <label for="cake1">苗字</label><input type="text" id="cake1" value="">
     </div>
     <div class="row">
       <label for="cake2">名前</label><input type="text" id="cake2" value="">
     </div>
     <div class="row">
       <label for="cake3">みょうじ</label><input type="text" id="cake3" value="">
     </div>
     <div class="row">
       <label for="cake4">なまえ</label><input type="text" id="cake4" value="">
     </div>
     <div class="row">
       <button id="cakeSet">登録</button><button id="cakeUnset">削除</button>
     </div>
   </div> content_copy

   以下のようにclass="plain"を追加すると、構造の浅い名前登録フォームが出ます。

   <div id="cakeMix" class="plain"></div> content_copy

   こちらのような構造の名前登録フォームが出力されます。

   <div id="cakeMix" class="plain">
     <label for="cake1">苗字</label><input type="text" id="cake1" value="">
     <label for="cake2">名前</label><input type="text" id="cake2" value="">
     <label for="cake3">みょうじ</label><input type="text" id="cake3" value="">
     <label for="cake4">なまえ</label><input type="text" id="cake4" value="">
     <div class="row">
       <button id="cakeSet">登録</button><button id="cakeUnset">削除</button>
     </div>
   </div> content_copy

   どちらのフォームも名前登録機能の違いは無いので、使いやすい方を選んでください。

   使えるフォームの数は1ページにつき1つです。2つ以上登録フォームがあるとうまく動かなくなります。

   自動出力フォームには一時登録ボタンはありません。一時登録ボタンを使いたい場合は次項の説明を読んでいただき、自動出力を使わずに名前登録フォームを作成してください。

3. 自動出力を使わずに名前登録フォームを作ります。

   ※名前登録フォームの自動出力を使う場合はこの作業は不要です。

   • 入力欄のinputタグのidはそれぞれ設定ファイルのcake●にしてください。
   • あらかじめ入力しておきたいものがあればvalue="初期値"という形で設定してください。
   苗字 <input type="text" id="cake1" value="">
   名前 <input type="text" id="cake2" value="">
   みょうじ <input type="text" id="cake3" value="">
   なまえ <input type="text" id="cake4" value=""> content_copy

   自動出力ではlabelタグなども使っていますが、デザインはさておき上のコードで入力は可能です。

   登録項目を新たに追加したい場合、設定ファイルにcake●を追加してからinputタグを追加してください。

4. 登録ボタンと削除ボタンを設定をします。

   ※名前登録フォームの自動出力を使う場合はこの作業は不要です。

   • 登録ボタンはidが「cakeSet」のbuttonタグを用意します。
   • 一時登録ボタンはidが「cakeSession」のbuttonタグを用意します。
   • 削除ボタンはidが「cakeUnset」のbuttonタグを用意します。
   <button type="button" id="cakeSet">登録</button>
   <button type="button" id="cakeSession">一時登録</button>
   <button type="button" id="cakeUnset">削除</button> content_copy

   ※idの文字は大文字が含まれています。スペルミス等にご注意ください。

   タグ内の「登録」「一時登録」「削除」は「OK」「Del」などの違う言葉に変更しても構いません。

   登録ボタンを使わない、または一時登録ボタンは使わずに導入することも可能です。不要でしたら消してください。

   登録と一時登録って何が違うの？

   登録と一時登録はどちらもブラウザに保存する機能ですが、データの期限が違います。

   技術者向けの言葉でいうと、登録ではlocalStorageに保存し、一時登録ではsessionStorageに保存しています。

   「登録」は容量がある限りブラウザの履歴を削除したりアンインストールするまでデータが残りますが、「一時登録」はタブを閉じたときやページを閉じたときにクリアされます。

   どちらにしても、Cookieのように保存内容がサーバへ送信されることはありません。

5. 登録名の変換範囲を設定します。

   id="berrycake" のdiv を追加し変換範囲を設定します。

   この中で登録名を表示したいところにデフォルト名を追加してください。

   小説本文はおそらくpタグと多用するかと思いますので、そのまま小説を書いてもらえれば問題なく変換できます。

   <!-- 変換範囲 -->
   <div id="berrycake">
     <p>登録名は実小麦蜜花（みこむぎみつか）です。 </p>
     <p>小説の主人公はこの名前で変換されます。 </p>
   </div> content_copy
   • 変換範囲は複数追加しないでください。
   • idではなくclassで指定することも可能です。その場合は1つ目のclass="berrycake"が変換範囲になります。
   • 変換範囲の中にあっても、変換対応タグ以外で囲んだデフォルト名は変換しません。
   <!-- classでの変換範囲指定は1つ目の class="berrycake" が範囲になります -->
   <div class="berrycake">
     <p>登録名は実小麦蜜花（みこむぎみつか）です。 </p>
     <p>小説の主人公はこの名前で変換されます。 </p>
   </div> content_copy

   変換対応タグはp, li, ruby, rt, h1, h2, h3, h4, h5, a, th, td, span, divです。

   サポート対象外ですが変換対応タグを追加することは可能です。詳細はMoreをご覧ください。

   一時登録ボタンを導入している場合、一時登録したときにだけ現れるメッセ―ジを以下のコードで追加できます。

   <div id="cakeSessionmsg"></div> content_copy

   一時登録をしたときにこのコードがあると、「一時登録しました」という文字が表示されます。