なんかのHowTo
名前変換サイトを作るのが難しい、というお話を聞いたので、名前変換部分の反映の仕方をざくっと書いてみました。
難しいことは私もよく分かっていないのですが、ルーチンワーク化できてしまえば難しくないと思うんですよ。
と思って書いてみたんですが、思ったより面倒でした。（…。）
名前変換部分組み込み方の説明であって、サイトの作り方をお教えするページではありません。分からないことは、全部自分で調べるんだよ、のび太くん！
以下の内容はご理解いただけているものとして話を進めます。
・名前変換以外のサイトデザインは自分でなんとかできる。
・ドリーム小説、夢小説、名前変換小説について知っている。（これ大事！）
すべての利用素材に関しては、配布元の利用規約を必ず熟読した上でご利用ください。
また、このページを参考にして生じる不利益があったとしても、当方は一切関わりませんので自己責任でご覧ください。
赤色文字のところだけ読めば大体分かると思います。
■用意するもの
・作りたいサイトのデザイン
・夢小説
・テキストエディタ（おすすめはサクラエディタ）
・メモ帳
・ブラウザ
まず拡張子表示にチェック入れておきましょう。
Windows7はまたやり方が違うかもしれません。ググってください。すみません。
■テキストエディタについて
サクラエディタをダウンロードします。
これがないと私はサイト更新できません！っていうくらい便利なツールです。
サイト更新時はメモ帳とサクラエディタで編集し、ブラウザで動作確認してからアップロードしています。
テキストエディタってなんぞや？とわたしも思っていましたが、メモ帳の優秀な奴だと思ってもらえるといいです。検索や置換の機能が凝っていたり、HTMLタグが色分け表示されたりします。
サクラエディタでなくても構いませんが、私はこれしか使えないので、これで説明しますね。
「sakura.exe」をダブルクリックで起動します。
■作りたいサイトのデザインを決める
やる気に直結します。
ネットで「WEBサイト 無料 テンプレート」とかでググると沢山出てきますので、好きなデザインを決めてください。
Sozai-Rとかのランキングサイトにも良いところが沢山載ってます。
今回は、一から作るためにCoolWebWindowさんからデザインをお借りしました。
これを使ってやってみます。
ダウンロードして展開（解凍）しました。
真ん中の「pri002」フォルダを使用します。
展開するとこんなファイル配置になっていました。
「readme.txt」がある場合は最初に目を通しておくのが良いと思います。
上から順に、
cssフォルダ：cssファイルが入っている
imageフォルダ：画像ファイルが入っている
jsフォルダ：JavaScriptファイルが入っている
psdフォルダ：なんぞこれ？と思ったら、画像ファイルの元になるフォトショップ拡張子のファイルが入っていました。
そしてindex.html。
今回触るのは、このindex.htmlファイルです。
本当は最初にデザインの細かいところ（サイト名とかサイト説明文とか）を作りあげるのですが、今回説明したいのは名前変換スクリプトの組み込みの話なので割愛します。
■基本的なタグを覚える■
では早速、index.htmlを見ていきます。
拡張子が「.html」のファイルはサクラエディタで開きます。
私は既に関連付けされているのでダブルクリックで開いてくれるんですが、されてない方は先にサクラエディタを開いておいて、そこにドラッグアンドドロップでindex.htmlを置いてやるか、ファイル右クリック→プログラムから開くでサクラエディタを選んでください。
開きました。
メモ帳で開くと黒文字一色のところ、サクラエディタで開くとこんなにカラフルです。各文字色について、私は以下のような理解をしていますが、間違っているかもしれません。サクラエディタの使い方ページは沢山あるので、そっちでお勉強なさってください。
・青色文字
HTMLタグ。これを使うと、ある一定の動作を発生させるもの。
・緑色文字
基本的にはコメント文字。HTMLタグなどの間で、メモ的に使用できる。ブラウザ表示したとき、この文字は表示されない。また、タグの影響も受けない。テキストエディタ上でのみ確認できる文字。…のはずなんですが、なぜかJavaScriptも緑色になってしまうため、どれがコメントか判断がつかない方は、緑色文字は削除しないでください。
・赤色文字
ファイル名、URL、CSSのclass名やid名など、意味のある文字列。
・黒色文字
ブラウザ表示したときに表示される内容。
さてここで、これだけは絶対に覚えて欲しいHTMLタグがあります。
HTMLタグには開始・終了タグがあるものと、一つだけで独立して使えるものがあります。開始・終了の構成になっているタグでは、開始タグに色々な属性や設定がつけられることがあります。どれがどれかは慣れで覚えるしかありません。ぼちぼち勉強してください。
<head></head>
ヘッダータグ。この中に名前変換のベースになるスクリプト（結構量が多い）を埋め込みます。
検索除けのメタタグなどもここに押し込むので、開始終了タグがきちんと揃っていることを確認してください。
<body></body>
ボディタグ。通常、このタグの間にページの構成を書き込みます。
<div></div>
これ自体には意味がないけれど、デザインを編集する際の一塊になります。これも開始と終了がきちんと揃っていることが必要。テンプレートデザインによっては入れ子になっていて揃っているかどうか、分かりにくい場合もあります。
<br>
改行タグです。読みやすいページには必要。
他の開始終了タグとは異なり、これ一つで機能します。
<br />となっているものも同じ。
ざっとデザインを確認できたので、一番の難関・名前登録ページを作ります。
使用するのは、DreamMaker2の2項目タイプです。
ここでページ構成を考えねばなりません。
DreamMaker2の特性として、名前変換小説のページは、名前登録ページと同じ階層か、それ以下の階層にファイル配置をする必要があります。どういうことかというと、↓の画像を見てください。
新しく「text」と「dream」というフォルダを作りました。
「text」の中にname.htmlという名前変換専用のページを作ったとします。
すると、実際の名前変換小説のページは、この「text」フォルダの中にしか置けなくなります。「dream」フォルダに名前変換小説のページを置くと上手く変換ができなくなるそうです。（textフォルダの中に「dream」というフォルダを作り、その中に置くのはOK）
これは名前変換に使われるJavaScriptの特性のようです。
今回はindex.htmlに名前登録欄を作り、dreamフォルダに小説ページを置くこととします。
DreamMaker2の2項目タイプをダウンロードします。（DreamMaker2でググるんですよ！）
サクラエディタでD-menu2.htmlを開きます。
開いたら、11行目の先頭から、
66行目の</script>までを範囲指定してコピーします。
コピーした内容をindex.htmlの</head>の直前に貼りつけます。
↓貼り付けました。
再びD-menu2.htmlを開き、今度は72行目から129行目を範囲選択してコピーします。
コピーしたのは名前登録のフォーム部分になります。index.htmlのこの辺に入れてみましょうか。
ここですね。
テンプレートデザインにもよるのですが、注意していただきたいことがあります。
それは<p></p>タグの間にはフォームを入れ込まないということ！
<p></p>タグは段落タグです。開始タグから終了タグまでの間は、一つの段落になっているため、間にデザインの異なる塊を放り込むとデザイン崩れが発生します。（必ずしも段落タグだけではなく、他のタグに影響を受けてデザインが崩れる場合もあるので一概には言えないのですが…。）
よって、ここでは80行目と81行目の間（段落タグが終わり、次の段落タグが始まる間）に放り込みます。
入りました。一旦index.htmlを保存します。
保存したら、ブラウザで表示してみます。
ファイルがサクラエディタに関連付けられている場合は、ダブルクリックするとまたサクラエディタが開いてしまうので、ファイルを右クリック→プログラムから開く→ブラウザを選択します。
フォームが追加されました。
お名前を入力して、登録するボタンを押してみます。
反映されました！
最難関を突破しました。おめでとうございます。
■名前変換小説を作る。
名前変換小説のベースになるページを作ります。
index.htmlの赤枠部分をタイトル、緑枠部分を本分で使ってみます。
index.thmlをコピーして、dreamフォルダ内にdream.htmlを作ります。
ファイルの配置階層が変わったので、このままだとデザイン崩れを起こします。
dream.htmlをサクラエディタで開き、スタイルシートのファイルパスを変更します。
↓ 「../」を追加します。
先ほどの赤枠と緑枠以外のところを一旦すべて削除します。
デザインの都合上、消すとまずいところもあるので、注意が必要になりますが、大体の場合、<div>タグに注意すればなんとかなります。
残したい部分が含まれている一番内側の<div>タグの開始と終了を探します。
この<div>タグの間から、必要なものと不要なものを選別して消していきます。
慣れない間は、失敗してもやり直せるよう、大元のファイルを保存するなどして少しずつ消してみるのがいいかもしれません。
下の画像で範囲指定しているところが、本分部分にあたります。
ここから不要なものを削除します。
必要なところだけ残すとこうなりました。↓
保存してブラウザで確認します。反映されてますね。
これだけではまだベースページは完成していないのですが、先に進んでお話を書きます。作中ではデフォルト名を使用します。
わたしはいつもメモ帳で書いています。書いたお話は適当なファイル名をつけて保存します。
デフォルト名を「ミョウジ」「ナマエ」として書いてみます。
適当なファイル名をつけて保存します。
DreamMaker2の変換ページを開きます。
項目１、２にデフォルト名を入力します。
文書タイプは「テキスト形式」を選択します。
シナリオの「参照」ボタンをクリックして、先ほど保存した名前変換小説のテキストファイルを選択します。
送信ボタンをクリックします。
HTML形式で変換された内容が表示されます。
分かりやすくするためにメモ帳にコピーしてみると、全体は↓こんな感じ。
範囲指定部分が本文になります。
本文をコピーする前に、ベースページ（dream.html）を完成させます。
DreamMaker2で変換した内容のうち、下の図で範囲指定した部分（</title>タグから</head>タグの間）をコピーします。
dream.htmlの下の図で網掛けした部分を、上の画像でコピーした内容と差し替えます。
（</title>タグから</head>タグの間をDreamMaker2で変換を掛けたページの </title>タグから</head>タグの間の内容に変更する。）
↓
次にDreamMaker2で変換を掛けたページから、<body>タグのすぐ下にある<scripts>タグ部分をコピーします。
下の図で範囲指定しているところです。
コピーした内容を、dream.htmlの<body>タグのすぐ下に貼りつけます。
保存します。
これでベースページの完成です。
dream.htmlをコピーして、新しいお話のページを作ります。ここではdream001.htmlというファイル名にします。
dream001.htmlに本文をコピーします。
変換後テキストの本分をコピーして、dream001.htmlの本分部分へコピーします。
デザインの都合上、今回のレイアウトでは段落タグ<p></p>タグの間に本分を挿入します。
↓
保存してブラウザで確認します。
先ほど名前登録画面で入力した名前に変換されました。成功！
この後は、DreamMaker2で変換した後の本文をdream.htmlの本文部分にコピペしてタイトル変更するくらいでページが作れるので、更新は非常に楽にできます。
おまけにサクラエディタの便利な使い方
他にもたくさん便利な使い方があって、私も使いこなせてないです。仕事でもサクラ様にはよくお世話になっております…。
↓「すべて置換」をクリック。
