好きなセッションを好みの感じでリプレイにしたい。
HTMLもたまにいじると楽しいぞ！という話です。
用意するもの
- ココフォリアからDLしてきたログ
- HTMLファイル諸々をアップロード出来るサーバー
- 以下は、あると情報が厚くなって楽しいやつ
- 立ち絵
- キャラクターシート
- シナリオ本体 ※補足用にあると便利、なくても良い範囲
最終的に出来上がるもの
こんな感じのものに仕上げます。中身が完全に身内卓用なのでぼかしぼかし。
リプレイを作るぞ～！
※大体こんな手順で作ってます というやつです。
１．とりあえずプレーンなテキストにする
ココフォリアからDL出来るログはすでにHTML形式になってます。
文字色の設定とかがすでに入ってるので、全部剥がしてプレーンなテキストの状態にします。
具体的には
・ブラウザで開く
・全部コピーする
・任意のテキストエディタに貼り付ける
です。
私はサクラエディタを使ってます。この段階なら普通にメモ帳でも大丈夫。とにかく文字だけになれば良い。
貼り付けると余計な改行が入ってる状態だと思うんですが調整はもう少し後にします。
２．段落を入れる
せっかくなのでPCごとに色を入れたり色々調整をしたいので、出来れば一行ずつ段落か何かの設定をしたい。
エクセルに一度入れて、＜p＞＜/p＞をまとめてコピーしたりとかもしてました。割とこれも楽。
あとWEBツールならめちゃ便利なのがこちら。
P（段落）タグ・BR（改行）タグを自動的に挿入してくれる！！！！！！
サクラエディタに入ってる空行混じりのテキストをコピペして、n個以上の改行を～は2に設定すると、2行以上繋がってるものは自動的に改行位置に＜br＞を、1行空いてる場合は＜/p＞を自動的に入れてくれます。
多分もうこれで大体作成準備は整うんですが、やっぱり空行要らないという時には以下手順を挟みます。
サクラエディタの場合は
［検索］→正規表現にチェックをいれて【^[\r\n]+】で置換すると空白行だけ消してくれます。
これでまずは空白行のないテキストだけのログが出来ましたわ！
３．HTMLファイルにしていく
このあたりも特にこだわりが無いんだったら、そのままココフォリアのログのHTMLファイルをコピペして作って良いんじゃないでしょうか。気になる時に検索避けを入れるくらいです。
・見栄えについて
背景に全画面動画や画像を置きたいな～！とか、スクロールした時に何かふわっと表示したいな～！とか、そういう見栄えはこのサイトをよく参考にしています。
へへへ…jsとか難しいことはよくわからないんだ…私は雰囲気で何とかしています。動けば正義。
大抵のものはコピペすれば動く！！！！
あともう少しリッチな動かし方だとluxyが有名です。
動き方の感じも優雅で好きなんだけど、jsなのか重ね方なのか、競合してしまってうまく動かないことが多くてちょっと諦めています。
見栄えについては、えーと例えば……ちょっとかっこいい囲みにしたいだとか、かっこいい見出しにしたいだとかも大体「かっこいい 見出し CSS」みたいなアレで見つけています。たくさんの叡智に助けられている。
・フォントについて
ありがとうGoogleフォント！！！！！
日本語フォントも豊富になってきてるし、シナリオによってフォントを選ぶの楽しいよね。
・飾り付け
写真素材は大体このあたりからお借りしています。動画素材にもたくさん助けられている。叡智がたくさんある。
あと海外の写真素材サイトは何が好きって、「インテリアがめちゃくちゃ可愛い」。
セッション中の背景用にも探索者の部屋画像だとか、キッチン画像とかもお借りするんですが、いつも「こいつ良い部屋住んでるな……」てなっています。
４．ひたすら成形する
あとは素材を埋めつつ…CSSを調整しつつでひたすらコツコツと成形を繰り返します。
何も考えたくない時とか、単純作業に没頭したい時などにおすすめです。不要な箇所を探して削除、不要な箇所を探して削除。
これくらいの成形なら楽しいのでね…時間のある時とかに無心に作業しています。
レンタルサーバーを借りてると、Wordpressも こういうHTMLベースのファイルも全部入れておけるのが良いですわね！！！！！
リプレイもWordpressでまとめて入れておけないかな～とぼんやり考えたけど、何しろテキスト量が膨大になってしまうのと、細々とした成形を考えると検索置換である程度まとめてどうにか出来るテキストエディタベースの方がやりやすい感じでした。