# 前置き
注意：この特殊タグは閲覧環境によって表示が大きく崩れる場合があります。ご注意ください。
1年半前、拙作『フロンティアへの幾星霜（短編集）』のエピソード『【WR】ベルセルク・オンライン・パッションストーリーモードAny%RTA(No ACE)1:02:12.28 Part1/6』を書いた際に使用した特殊タグです。
簡単に言うと、下のスクリーンショットのような画面を構築できます。
アドベンチャーゲームのように、最後に更新されたパネルをクリックすることで、次のパネルを更新する機能を有しています。
RTA小説などに使えると思います。
# 解説
以降特殊タグのコードを記す場合は、そのまま解釈されないようにタグ名の前にエクスクラメーションマーク（！）をつけることとします。
## 枠組み
手始めに、下のような特殊タグを入力してみましょう。
《!box:bg#000000》
《!box:w2%,h25,inline》《/!box》《!box:w80%,h25,inline,bo#FFFFFF》《/!box》《!box:w16%,h25,inline,bo#FFFFFF,overhidden》《!box:w100%,h5,inline,bo#FFFFFF,overhidden,lh1.25》《!center》《/!center》《/!box》《/!box》
《!box:w2%,h4,inline》《/!box》《!box:w4,h4,inline,overhidden》《/!box》《!box:w87%,h4,inline,bo#FFFFFF,overhidden》《!text:s1.5》
《/!text》《/!box》
《/!box》
これはBiimシステムの枠組みとなる特殊タグで、表示するとこうなります。
わかりやすいよう、特殊タグと表示結果で対応する場所に色をつけてみます。
《!box:bg#000000》
《!box:w2%,h25,inline》《/!box》《!box:w80%,h25,inline,bo#FFFFFF》《/!box》《!box:w16%,h25,inline,bo#FFFFFF,overhidden》《!box:w100%,h5,inline,bo#FFFFFF,overhidden,lh1.25》《!center》《/!center》《/!box》《/!box》
《!box:w2%,h4,inline》《/!box》《!box:w4,h4,inline,overhidden》《/!box》《!box:w87%,h4,inline,bo#FFFFFF,overhidden》《!text:s1.5》
《/!text》《/!box》
《/!box》
色はそのまま特殊タグの対応を表します。
## 灰色の部分
### とりあえず文字列を表示してみる
とりあえず、灰色のメッセージを表示する部分に適当な文字列……ここでは、「この先の橋は、メガトンコインを持っていると、落っこちてしまいます。」を入力してみましょう。デフォルトの黒色だと背景に溶け込んでしまうので、文字色をwhiteタグで白くすることに注意してください。
《!box:w87%,h4,inline,bo#FFFFFF,overhidden》《!text:s1.5》
《!white》この先の橋は、メガトンコインを持っていると、落っこちてしまいます。《/!white》
《/!text》《/!box》
これを表示するとこうなります。
イイ感じですね。
### 文字列をクリックすると切り替わるようにしてみる
ハーメルンのページ内リンク機能を使えば、複数の文字列を切り替えることも可能です。というか、切り替えずに話を進めるのは不可能です。
ここでは、先ほどの「この先の橋は、メガトンコインを持っていると、落っこちてしまいます。をクリックすると、「だから、売りに戻る必要があったんですね。」に切り替わるようにしてみましょう。
まずは、「だから、売りに戻る必要があったんですね。」を追加します。
《!box:w87%,h4,inline,bo#FFFFFF,overhidden》《!text:s1.5》
《!white》この先の橋は、メガトンコインを持っていると、落っこちてしまいます。《/!white》
《!id:1》《!white》だから、売りに戻る必要があったんですね。《/!white》
《/!text》《/!box》
ここで重要なのが、《!id》タグを使ってIDを振ることです。この先文字列を増やす時も、逐一IDを振ってください。ハーメルンのID制限に使える文字とかは深く知りませんが、とりあえず数字で振っておけば間違いはないと思います。
次に、この先の橋は、メガトンコインを持っていると、落っこちてしまいます。を編集します。
《!box:w87%,h4,inline,bo#FFFFFF,overhidden》《!text:s1.5》
《!link:#1》《!white》この先の橋は、メガトンコインを持っていると、落っこちてしまいます。《/!white》《/!link》
《!id:1》《!white》だから、売りに戻る必要があったんですね。《/!white》
《/!text》《/!box》
このlinkタグを使えば、ページ内に振ったIDのある場所にスクロールできます。この灰色の部分の親boxは、overhidden属性が指定されている読者の手でスクロールできない要素です。これは逆に言うと、linkタグでしかスクロールできないということでもあり、結果として「テキストを押すと、次のテキストが表示される」という状態が実現できるわけです。
なお、linkタグは必ずwhiteタグの外に置くようにしてください。中に置くとテキストが青くなってしまいます。
これを表示するとこうなります。
「この先の橋は、メガトンコインを持っていると、落っこちてしまいます。」をクリックして、テキストが切り替われば成功です。
### 文字列を増やす
もちろん、この手順を踏めば3つ目、4つ目、5つ目……と文字列は無限に増やせます。
《!box:w87%,h4,inline,bo#FFFFFF,overhidden》《!text:s1.5》
《!link:#1》《!white》この先の橋は、メガトンコインを持っていると、落っこちてしまいます。《/!white》《/!link》
《!link:#2》《!id:1》《!white》だから、売りに戻る必要があったんですね。《/!white》《/!link》
《!link:#3》《!id:2》《!white》なんで？《/!white》《/!link》
《!link:#4》《!id:3》《!white》なんで？なんで？《/!white》《/!link》
《!link:#5》《!id:4》《!white》なんで？なんで？なんで？《/!white》《/!link》
短めの文字列の後ろに空行を挟まないと、次の文字列が侵食してくることがあるので注意してください。
これを表示するとこうなります（内部的にidを少し弄っていますが、見え方は同じです）。
## その他の部分
基本的には灰色の部分と同じことをすればいいです。
# あとがき
書くことが思ったよりなかったのでこの辺で終わります。
ありがとうございました。