夢小説向け名前変換スクリプト
こちらは新規ライブラリというよりはVue.js 3系を使った夢小説向けサンプル実装という感じのものです。
改変などが必要な場合はVue.js 3系のドキュメントを参照ください。
https://ja.vuejs.org/
1.Vue.jsの設定
Vue.js 3系をCDN等から取得する
HTMLのheaderに例えば以下を記載する
<!-- Vue.js -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>2.dream-novel.jsの設定
dream-novel.jsをサーバーに配置し、HTMLのbodyの最下部に以下を記載する
<script src="dream-novel.js"></script>1.デフォルト値の変更
dream-novel.jsの以下を修正する。
const defaultMyojiKanji = '名字';
const defaultNamaeKanji = '名前';
const defaultMyojiHiragana = 'みょうじ';
const defaultNamaeHiragana = 'なまえ';文字列置換のためには必ず <div id="app"> の配下である必要がある。
その配下であれば以下の文字列テンプレートが置換される。
- 名字(漢字)
{{myojiKanji}} - 名前(漢字)
{{namaeKanji}} - 名字(ひらがな)
{{myojiHiragana}} - 名前(ひらがな)
{{namaeHiragana}} - 名字(カタカナ)
{{myojiKatakana}} - 名前(カタカナ)
{{namaeKatakana}}
また、上記テンプレートにはJavaScriptの式が利用できる(substringなど)
https://ja.vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions
設定例は以下のようになる。
<body>
<div id="app">
■名前呼びテスト
「こんにちは、{{myojiKanji}}{{namaeKanji}}」
「こんにちは、{{myojiHiragana}}{{namaeHiragana}}」
「こんにちは、{{myojiKatakana}}{{namaeKatakana}}」
■どもりテスト
「{{myojiHiragana.substring(0,1)}}、{{myojiKanji}}」
「{{namaeHiragana.substring(0,1)}}、{{namaeKanji}}」
「{{myojiHiragana.substring(0,1)}}、{{myojiHiragana}}」
「{{namaeHiragana.substring(0,1)}}、{{namaeHiragana}}」
「{{myojiKatakana.substring(0,1)}}、{{myojiKatakana}}」
「{{namaeKatakana.substring(0,1)}}、{{namaeKatakana}}」
</div>
<script src="dream-novel.js"></script>
</body>設定用のフォームは必ず <div id="app"> の配下である必要がある。
設定用のフォームのinputには以下をつけること
- 名字(漢字)
v-model="myojiKanji" - 名前(漢字)
v-model="namaeKanji" - 名字(ひらがな)
v-model="myojiHiragana" - 名前(ひらがな)
v-model="namaeHiragana"
設定保存用のボタンには以下をつけること
- 保存
@click="saveConfig" - リセット
@click="resetConfig"
設定例