数値を画面に見せたいとき · ステータス

ステータスは、AIの返答の下につく小さな窓です。好感度のバー、今いる場所と時刻、キャラクターがしている行動などを、ゲーム画面のように見せます。

こんなときに

• 好感度がどれだけ上がったか、ユーザーが自分の目で見たがっている。
• キャラクタープロンプトに「返答の最後に[好感度: 00]と書いて」と書いておいたのに、たまに抜けたり形式が崩れたりする。
• 作品の雰囲気に合ったステータス画面を飾りたい。

ステータスは変数の値を見せる窓です。値がいつ上下するかは変数で決め、ステータスはそれをどう見せるかだけを決めます。だから、ステータスを飾るには変数が一つ以上必要です。

二つの方法

• 標準: 何もしなくて大丈夫です。非表示でない変数の名前と値が、一行ずつきれいに並びます。初めてならこれで十分です。
• カスタム: 欲しい雰囲気を言葉で書けばAIで作成が飾ってくれますし、HTMLが分かるなら自分で直しても構いません。

ユーザーがチャットルームごとにステータスをオフにすることもあります。

良い例と惜しい例

AIで作るときは、ジャンル、色、見せ方を一緒に書きます。

良い例

「異世界ゲームのステータス画面風、濃い紺色の背景に金色の文字、好感度はバーで」

惜しい例

「きれいに。」どんな形が欲しいのか、AIには分かりません。

やり方

1. 三つ目のステップロアブックのステータスでカスタムを選びます。
2. AIにデザインの指示を伝えてくださいの欄に欲しい形を書いて、AIで作成を押します。
3. プレビューで確認します。プレビューを一度見ないと保存できません。
4. 気に入らなければ、書いた言葉を変えてもう一度作るか、下のHTMLを自分で直します。

自分で飾る

HTMLの中に下のように波かっこ二つで名前を書くと、会話中に実際の値へ置き換わります。

.maxと.deltaはゲージ変数にだけあります。テキスト変数（例: {{今の行動}}）は名前だけ書けばよく、.maxや.deltaをつけると空欄になります。

コピーして書き換えて使える例です。変数の恋愛ものセット（好感度、今の行動）と対になっています。

<div class="sw">
  <div class="sw-row">
    <span class="sw-label">📍 {{scene.location}}</span>
    <span class="sw-value">{{scene.time}}</span>
  </div>
  <div class="sw-row">
    <span class="sw-label">💗 好感度</span>
    <span class="sw-value">{{好感度}} / {{好感度.max}} <small>{{好感度.delta}}</small></span>
  </div>
  <progress value="{{好感度}}" max="{{好感度.max}}"></progress>
  <div class="sw-row sw-muted">{{char}}: {{今の行動}}</div>
</div>

sw、sw-row、sw-label、sw-valueのようにswで始まる名前を使うと、基本の見た目が整います。

下で直接直してみてください。トークン名を間違えたりurl(を入れたりするとどうなるかも、すぐ分かります。

知っておくと便利

• プロンプトに残ったステータスの指示は消してください。 以前のようにキャラクタープロンプトに「返答の最後に状態を書いて」と残しておくと、ステータスが二重に出ます。保存時に警告が出たら、その部分を消せば大丈夫です。
• 変数名にスペースがあると{{ }}で呼び出せません。好感 度ではなく好感度とつけてください。
• 場所・時刻はAIが場面を見て埋める値なので、最初の返答の前は空のことがあります。
• 外部の画像やフォントは読み込めません。url(、@import、@font-faceが入っていると保存されません。

こんなときは

{{好感度}}が文字のまま見えます

• 変数名と波かっこの中の名前がまったく同じか、名前にスペースがないか見てください。

保存できません

• プレビューを一度押したか見てください。
• 外部の画像・フォントを読み込む部分がないか見てください。