アヤチノオト

覚書のこと

ウェブ小説でも里々の(ユーザ)みたいなのが使えるテンプレート

前説

このテンプレートにはMVCフレームワークAngularJSを使用しています。

できること
  • 小説のなかで登場人物の名前などをフォームに入力された文字に置き換える
  • 背景と文字色を変える
  • 文字サイズを変える

動作例

対象読者
  • 小説の中に読む人を登場させたい!でもどうやんの?という人
必要なスキル
  • 簡単なHTMLが書ける程度の能力
あると良いスキル

やってみよう

1,テンプレートをダウンロードする

SSテンプレートをダウンロードして適当なフォルダに解凍してください。

2,テンプレートを改変する

template.htmlを好きなエディタで開いてください。

2ー1タイトル

ページのタイトルを自分の小説のタイトルなどに書き換えます。

template.html

<!-- ページのタイトル -->
<title>SS Template -- 自分の小説のタイトルなどに書き換えてください</title>
2-2 小説

改変するところは下の方にある、<!-- 小説を書くところ ここから -->と<!-- 小説を書くところ ここまで -->の間の部分です。

template.html

<div id="novel">
  <!-- 小説を書くところ ここから -->
    <h2>Title</h2>
    <p>
      偶然にも温泉旅行の招待券を手に入れた{{user}}は……
      <br />
      温泉で何かが起こる!
    </p>
    <!-- 小説を書くところ ここまで -->
</div>
2-3 小説の中で名前を置き換える

小説の中で{{user}}と書いたところが、ページ上部のフォームに入力された文字に置き換わります。
里々の(ユーザ)みたいな感じです。

たとえば、「ねぇ、{{user}}。ちょっと聞きたいことがあるんだけどさ」という文は、名前の入力フォームに「あやち」と入力したとすると「ねぇ、あやち。ちょっと聞きたいことがあるんだけどさ」と表示されます。こそばゆいね!!

もう少し細かくい説明

input要素のng-model属性の値を{{value}}の形でhtml中で参照できます。
ユーザ名を{{name}}というふうに書きたかったら

名前:
<input type="text" ng-model="name" />

とすればいい、ということです。
フォームを増やしてももちろんいけます。
それについては下のおまけで説明しています。

もうすこし手のこんだことがしてみたい人のためのおまけ

できること
  • 名前の他に敬称も入力してもらい、話が進むにつれ仲良くなって呼び捨てに……みたいな演出が任意の敬称でできます。

動作例
この内容はomake.htmlにも書いてあります。
以下説明。

敬称を入力してもらうためのinput要素を一つ追加します。

template.html

名前:
<input type="text" ng-model="user" /><br />
敬称:<input type="text" ng-model="san" />

すると小説の中で

{{user}}{{san}}。いえ……{{user}}と呼んでも、いいですか?

と書くと入力された名前と敬称に置き換わります。
でもこのままだと敬称は初期値が空になってしまうので。
スクリプトをいじって初期値を設定します。

  <script>
    function Main($scope) {
      $scope.user = 'ユーザ'; // ユーザ名の初期値
      $scope.san = 'さん'; // 敬称の初期値
    }
  </script> 

以上です。