「FC2ホームページでオリジナル小説サイトを作ろう！」シリーズの第３回目です。インデックスページ、個別小説ページと作ってきましたが、今回はサイトに追加したオリジナル小説に名前変換機能をつける方法です。前々回、前回の記事は以下からどうぞ。
▼関連記事
オリジナル小説に名前変換機能をつけよう！
Cookieを使用したスクリプトを使えば、自筆したオリジナル小説の登場人物をユーザーの好きな名前に変換することが可能になります。こうした手法は二次創作でよく見かけますが、一次小説にも応用できる便利な機能なので、導入方法を知っておいて損はありません。では、サイトの小説ページに名前変換機能をつける方法を解説していきます。
1.「DreamMaker２」をダウンロードする
ウェブで無料配布されている名前変換スクリプトはいくつかありますが、最も使いやすいのは「DreamMaker」です。DreamMakerには、javaScriptを使用する「DreamMaker１」と、Cookieを使用する「DreamMaker２」の２種類があります。今回はこの「DreamMaker２」の導入方法をご紹介します。
まずは、下記サイトに行き、左サイドバー内にある「DreamMaker２」の項目をクリック。
▼DreamMaker配布サイト
普通の小説なら名字と名前の２つが変換できれば十分なので、２つの単語を変換できる「サンプル２」をダウンロードしてください。
すると、PCに「D-menu2.lzh」がダウンロードされます。このファイルを解凍すると「D-menu2.html」ファイルが出てきますので、デスクトップにコピーしておきましょう。
2.「DreamMaker２」をサイトにアップロードする
DreamMakerスクリプトは、小説ファイルと同じディレクトリに置かなくてはいけません。というわけで、前回作ったnovelディレクトリページを開き、下部にあるファイルアップロードから、先ほど解凍した「D-menu.html」をアップロード。
私は「D-menu.html」だと分かりにくいので、アップロード時にファイル名を「namechange.html」に変更しています。もちろん、そのままでもかまいません。
3.名前変換ページのデザインを変更
「D-menu２.html」をプレビューすると、デフォルトデザインの名前変換ページが表示されると思います。今回はこのデザインを、よりシンプルにカスタマイズしたいと思います。カスタマイズ後の画面がこちら。
■カスタマイズ後の名前変換ページデザイン
このデザインにするには、ソースエディタで「D-menu２.html」ファイルを開き、ソースコードをすべて削除してから以下のコードを追加します。
【HTML】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- DreamMaker2 by Season(URL:http://homepage1.nifty.com/mystaff/) --->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" type="text/css" href="https://gborchestra.web.fc2.com/content.css" />
<title>ドリーム小説メニュー画面</title>
</head>
<body bgcolor="#FFFFFF">
<script language="JavaScript">
<!----Cookie使用
var CookieID = "Dream2";
function getCookie(key) {
if (document.cookie){
index = document.cookie.indexOf(key, 0);
if (index != -1) {
val_start = (document.cookie.indexOf("=", index) + 1);
val_end = document.cookie.indexOf(";", index);
if (val_end == -1){
val_end = document.cookie.length;
}
return(unescape(document.cookie.substring(val_start, val_end)));
}
}
return(null);
}
function setCookie(key,value,expires){
var cook_data = "";
cook_data = key + "=" + escape(value);
if (expires){cook_data = cook_data + "; expires=" + expires.toGMTString();}
document.cookie = cook_data;
}
function set_name(set_name_value){
var expires = new Date();
value = set_name_value;
if ( value == "" ) value = "null";
expires.setTime(expires.getTime() + (6 * 30 * 24 * 60 * 60 * 1000));
setCookie(CookieID,value,expires);
}
function JSset(){
item1 = document.dream.name1.value;
item2 = document.dream.name2.value;
set_name(item1+","+item2);
document.dream.submit();
}
function DeleteCookie(key){
var value = "";
var expires = new Date();
expires.setTime(expires.getTime() - 3600);
setCookie(key,value,expires);
location.reload();
}
//END --->
</script><script
language="JavaScript">
<!---Cookie Read
var getvalue = getCookie(CookieID);
if (getvalue == null || getvalue == "null") getvalue = ",";
names = getvalue.split(",");
//END --->
</script><!--ユーザーが自由にデザインする場所 ここから-->
<p align="center"><font color="#333" size="5"
face="ＭＳ Ｐゴシック">名前変換</font>
</p>
<form name="dream">
<div align="center"><center><table border="0" cellspacing="1">
<tr>
<td align="center">
</td>
<td align="center"><p align="left">【 <script
language="JavaScript">
<!---
document.write(names[0]);
//END --->
</script> 】</p>
</td>
</tr>
<tr>
<td align="center">
</td>
<td align="center"><p align="left">【 <script
language="JavaScript">
<!---
document.write(names[1]);
//END --->
</script> 】 </p>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td><p align="right">姓</p>
</td>
<td colspan="2"><p align="left"><input type="text"
size="16" name="name1"></p>
</td>
</tr>
<tr>
<td><p align="right">名</p>
</td>
<td colspan="2"><p align="left"><input type="text"
size="16" name="name2"></p>
</td>
</tr>
<tr>
<td align="center" colspan="3"><p align="center"><input
type="button" value="登録する" onclick="JSset()">
<input type="button" value="削除する"
onclick="DeleteCookie(CookieID)"> </p>
</td>
</tr>
</table>
</center></div>
</form>
<script language="JavaScript">
<!---フォームへ書き込み
document.dream.name1.value = names[0];
document.dream.name2.value = names[1];
//END --->
</script>
<!--ユーザーが自由にデザインする場所 ここまで-->
<p><br>
<br>
</p>
</body>
</html>
ソースコードを変更したら、文字コードを「Shift-JIF」にして上書き保存しましょう。画面を閉じ、ファイルマネージャー画面で「D-menu2.html」をプレビュー。デザイン変更が反映されているか確認してください。
4.オリジナル小説を名前変換に対応させる
まず、PCで執筆した小説ファイルを、拡張子「.txt」で保存しておきます。このとき、文字コードはデフォルトの「ANSI」のままでOK。
先ほどの配布サイトから、またDreamMaker２のページへ行き、今度は「DreamMaker２を使用する」をクリック。するとDreamMaker２の設定画面が開きます。入力項目数が２個になっていることを確認したら、各項目を埋めていきましょう。今回はデモサイト内に作った久生十蘭の「黄泉から」という小説を例にとってご説明します。
「黄泉から」は、「魚返光太郎」という名の男性が主人公。サイトに掲載するさいは「魚返」「光太郎」をそれぞれ名前変換させます。この場合、DreamMaker２の設定は以下のようにします。
- 項目ー１……名前変換させたい小説人物の名字にあたる部分
- 項目ー２……名前変換させたい小説人物の名前にあたる部分
- シナリオ……パソコンに保存していた小説の「.txt」ファイルをアップロード
- 文書タイプ……「テキスト形式」を選択
変換ボタンを押すと、アップした小説ファイル（.txtのやつ）が名前変換対応になって出力されます。このこのソースコードを、一旦コピー。FC2ホームページのファイルマネージャー画面に戻り、HTMLファイルを作ってその中に貼り付けます。このとき、文字コードが「Shift-JIF」になっていないと文字化けするので注意。
この作業が終わったら、ソースコードの<head></head>の間に「main.css」のリンクを貼ります（CSSファイルの作成・リンク方法は前々回の記事参照）。タイトルの「黄泉から」は<h1></h1>タグで囲み、テキスト部分は分かりやすいよう、<div class=”main_text”></div>で囲んでおきましょう。これで名前変換対応の小説ページが完成しました！
5.インデックスページに名前変換ページを作る
最後に、インデックスページに名前変換ページへのリンクを作りましょう。名前変換ページができたら、動作確認するのも忘れずに。
以下のデモサイトで、今回作った名前変換ページと、名前変換小説ページをご覧いただけます。名前変換ページで適当な名前を設定し、短編小説タイトル「黄泉から」をクリックしてみてください。小説内の「魚返」「光太郎」部分に名前変換が反映されていると思います。実際の動作は以下のデモサイトをご確認ください。
▼デモサイト（まだ名前変換と新西遊記と黄泉からのページしかリンク繋がってませんが）