特定のページを表示するとクッキーで文章が変わる・追加されるようにするには

私は今、長編小説をHPに公開しようと思っています。
キャラクター紹介のページを作ろうと思っているのですが、
読んだ読者さんによって表示される内容を変えたいのです。
例えば第一章で登場するAとBというキャラがいたとします。
読者さんが第一章を読んだらキャラ紹介のページにAとBのキャラクターの紹介が加わる。
という形にしたくて、cookieを使用しようと思うのですが、
なにぶんこのような操作ははじめてでしてどうしたらよいのかわかりません。
各章の最後のページにクッキーを食べさせるjavascriptを書いて、
キャラ紹介のページでクッキーを読み込み、キャラの説明文を表示したいです。
物語が進むにつれて、他キャラが増えたり、説明文に追記が加わるようにするにはどうしたら良いでしょう。
cookie使用があまりなく、調べましたがよくわかりませんでしたので詳しく教えていただけましたら幸いです。

No.2 ベストアンサー 回答者： tenderfeel 回答日時： 2010/01/25 20:01

面白い発想ですねー！

手作業になるので若干面倒ですが、とりあえずは以下の方法でやれると思います。

1. 小説ページのファイル名を　index.html、2.html、3.html…みたいに連番にする

2. 小説ページに読み込ませる外部JavaScriptファイルを用意し、下記をコピペする

function myCharacters(n){
var DD=new Date();
var newday = new Date(DD.getFullYear(),DD.getMonth()+1,DD.getDate());
var URI = location.href.match(/\/([\d]*)(.\w{3,4}?)$/i);
var val = (URI&&URI[1])? URI[1]:1;
var tmp = n+"="+val+"; "+"expires="+newday.toString()+"; ";
document.cookie = tmp;
}

3. 小説ページのヘッダで2で作成したjsファイルを読み込む

<script type="text/javascript" src="js/mychar.js"></script>

その下に関数を実行するソースを書きます。

<script type="text/javascript">
//<![CDATA[
myCharacters("作品を判別する半角英数キーワード");
//]]>
</script>

学園モノならmyCharacters("gakuen")とか、被らなければ何でもＯＫ

4. キャラクター紹介ページをPHPファイルで作成する（拡張子をphpにするだけ）

4. 3で作成したファイルに紹介文を書く。

発行されるCookieには作品ごとのキーワードと、ファイル名と同じ番号が保存されるので
それにあわせて条件を分岐させ、紹介文を書きます。

例：2.html　→　2

<h1>キャラクター紹介</h1>

<h2>主人公</h2>
<p>この作品の主人公。正義感は強いが気が弱い</p>
<h2>ヒロイン</h2>
<p>主人公に思いを寄せる学園のマドンナ。シャワーをよく覗かれる</p>

<?php if(isset($_COOKIE["gakuen"]) && $_COOKIE["gakuen"] >= 2): //二章以降読んでいたら表示 ?>
<h2>番長</h2>
<p>主人公をライバル視している学園の番長。痩せてた時はイケメンだったらしい。
myCharacters("gakuen")をヘッダに書いた2.htmlを表示していない場合は表示されない</p>
<?php endif; ?>

<?php if(isset($_COOKIE["gakuen"]) && $_COOKIE["gakuen"] >= 3): //三章以降読んでいたら表示 ?>
<h2>謎の覆面</h2>
<p>ミステリアスな雰囲気漂う覆面男。怪しく光る紫のブーメランパンツがトレードマーク。
myCharacters("gakuen")をヘッダに書いた3.htmを表示していない場合は表示されない</p>
<?php endif; ?>

PHPが使えないサーバーだったら表示部分をJavaScriptで行えば一応出来ます。

参考URL：http://tenderfeel.xsrv.jp/javascript/707/

この回答へのお礼

お返事ありがとうございます。
とってもわかりやすく説明していただけて、
この方法でページを作ろうと思っております。
ですが私の使っているサーバーはPHPが使えないのです。
図々しいのですが、JavaScriptでの表示方法を詳しく教えていただけないでしょうか？
なにぶんJavaScriptなどに疎いものでして…。；

お礼日時：2010/01/26 02:42

No.4 回答者： tenderfeel 回答日時： 2010/01/27 16:52

回答1のPHPとほぼ同じロジックのJavascript版です。

1. 小説ページのファイル名を　index.html、2.html、3.html…みたいに連番にする

2. 小説ページに読み込ませる外部JavaScriptファイルを用意し、下記をコピペする

function myCharacters(n){
var DD=new Date();
var newday = new Date(DD.getFullYear(),DD.getMonth()+1,DD.getDate());
var URI = location.href.match(/\/([\d]*)(.\w{3,4}?)$/i);
var val = (URI&&URI[1])? URI[1]:1;
var tmp = n+"="+val+"; "+"expires="+newday.toString()+"; ";
document.cookie = tmp;
}
//Javascript版のみ
function getCookie(key) {
a = document.cookie;
b = a.split(";");
c = [];
for (i = 0; i < b.length ; i++) {
c = b[i].match(/(\w+)=(\w+)/i);
if( c[1] == key ) return c[2];
}
}

function showChar(key, id, val){
var cookie = getCookie(key);
if(cookie >= val && document.getElementById(id))
document.getElementById(id).style.display = "block";
}


3. 回答１と同じ


4. 紹介ページをhtmlで作成する


発行されるCookieには作品ごとのキーワードと、ファイル名と同じ番号が保存されるので
それにあわせて条件を分岐させ、紹介文を書きます。

例：2.html　→　2

これはPHPと同じ挙動です。

Javascript版は最初に非表示にしておく要素をCSSでdisplay:noneにしておきます。

<style type="text/css">
.hide {display:none;}
</style>

HTMLソースの方は章やキャラクターごとにIDを割り当てます。

<h1>キャラクター紹介</h1>

<h2>主人公</h2>
<p>この作品の主人公。正義感は強いが気が弱い</p>
<h2>ヒロイン</h2>
<p>主人公に思いを寄せる学園のマドンナ。シャワーをよく覗かれる</p>

<div id="section2" class="hide">
<h2>番長</h2>
<p>主人公をライバル視している学園の番長。痩せてた時はイケメンだったらしい。
myCharacters("gakuen")をヘッダに書いた2.htmlを表示していない場合は表示されない</p>
</div>

<div id="section3" class="hide">
<h2>謎の覆面</h2>
<p>ミステリアスな雰囲気漂う覆面男。怪しく光る紫のブーメランパンツがトレードマーク。
myCharacters("gakuen")をヘッダに書いた3.htmを表示していない場合は表示されない</p>
</div>

HTMLヘッダもしくはbodyで下記JavaScriptを入れておくと、
該当するページ番号を表示した場合にだけ指定したIDの要素が表示されます。

</style>
<script type="text/javascript">
window.onload=function(){
showChar("gakuen","section2",2);//2ページ目表示した場合のみ#section2を表示
showChar("gakuen","section3",3);//3ページ目を表示した場合のみ#section3を表示
};
</script>

もしくは

<script type="text/javascript">
function myChars(){
showChar("gakuen","section2",2);//2ページ目表示した場合のみ#section2を表示
showChar("gakuen","section3",3);//3ページ目を表示した場合のみ#section3を表示
};
</script>
<body onload="myChars()">

関数は次のように指定して使います。
showChar("cookieの名前","表示する要素のID",ページ番号);

参考URL：http://tenderfeel.xsrv.jp/javascript/707/&#8203;

この回答へのお礼

回答ありがとうございます。
とても丁寧に教えていただき、これでしたら私もなんとかなりそうです。
回答を参考にがんばってみたいと思います。
ありがとうございました。

お礼日時：2010/01/30 20:57

No.3 回答者： my-- 回答日時： 2010/01/26 17:02

言葉での説明は難しいので、javascriptで

//.js
function getCookie(key) {
var tmp = document.cookie + ';';
var tmp1 = tmp.indexOf(key + '=');
var start = 0, end = 0;
if (tmp1 != -1) {
tmp = tmp.substring(tmp1, tmp.length);
start = key.length + 1;
end = tmp.indexOf(';', start);
return decodeURIComponent(tmp.substring(start, end));
}
return '';
}

function setCookie(key, val) {
var dTime = new Date(), tmp = '';
dTime.setDate(dTime.getDate() + 30); //有効期限30日
tmp = key + '=' + encodeURIComponent(val) + ';';
tmp += 'expires=' + dTime.toUTCString();
document.cookie = tmp;
}
///////// cookieここまで

function getName(str) {
var s = str.split('/');
return s[s.length - 1].substring(0, s[s.length - 1].lastIndexOf('.'));
}

function save(page, cast) {
for (var p in cast) {
if (getName(page) == p) setCookie(p, cast[p]);
}
}

function load(page, cast, name) {
if (getName(page) != name) return; //name.htmlでなければ何もしない
for (var p in cast) {
var id = getCookie(p).split(',');
var cp = cast[p].split(',');
for (var i = 0; i < cp.length; i++) {
var obj = document.getElementById(cp[i]);
if (obj != null && id[i] == cp[i]) obj.style.display = 'block';
}
}
}

var Cast = {
//'hoge'登場最後のページをpage1.htmlとした場合
page1: 'hoge',
page2: 'piyo,piyopiyo', //複数登場は , カンマで区切る
page3: 'fuga'
//以降 , (カンマ) ファイル名(.html) : (コロン) '登録文字列'を繰り返す
}

save(location.href, Cast);
load(location.href, Cast, 'profile'); //紹介ページをprofile.htmlとした場合

////// .jsここまで

キャラクター紹介（cookie参照）ページ

.css
#hoge, #piyo, #piyopiyo, #fuga { display : none ; }

.html
<div id="hoge">hoge紹介</div>
<div id="piyo">piyo紹介</div>
<div id="piyopiyo">piyopiyo紹介</div>
<div id="fuga">fuga紹介</div>
<script type="text/javascript" src=".js"></script>

各章最後（cookie登録）のページは適当な位置に.jsファイルを読み込む。

cookieには有効範囲があり、登録したページの位置がトップレベルです。
上位階層を介する参照はできないことになっていますので注意。

工夫すれば要件は満たすと思うけど、どうだろ。

この回答へのお礼

回答ありがとうございます。
なるほど、このような方法もあるのですね。
回答を参考にして色々と考えてみます。
ありがとうございました。

お礼日時：2010/01/30 20:54

No.1 回答者： U-ta_m 回答日時： 2010/01/25 08:26

javascriptだと、ソースを見たら全ての

説明文を読めちゃったりしますので、
cookieを食べさせるのは、javascriptでも構いませんが、

その値に応じて表示内容を変えるのは、
CGIで処理する方が良いと思います。

使用経験があまりないから、調べても良く分からんとのことですが、
調べるだけじゃなくて、実際に試してみると良いですよ。

少なくとも、過去に使えたことはあるようですから、
試すことは問題なく出来るはずです。

この回答へのお礼

お返事ありがとうございました。
CGIもいいかな、と思ったのですが私の借りているサーバーではCGIが使えないのです。
せっかくお答えしていただいたのに申し訳ありません。
ご回答ありがとうございました！

お礼日時：2010/01/26 02:36