Home > Javascript > [php + js]読み終えたページによって登場人物紹介ページの内容を変える

[php + js]読み終えたページによって登場人物紹介ページの内容を変える

Next: 1 2

質問サイト見てたら面白いネタを発見！

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

物語が進むにつれて、他キャラが増えたり、説明文に追記が加わるようにするにはどうしたら良いでしょう。
cookie使用があまりなく、調べましたがよくわかりませんでしたので詳しく教えていただけましたら幸いです。

独自CGI作ってもよさげな発想だと思ったんだけど、PHPとJavaScript使えば比較的簡単に出来るので、
デモとサンプルソース晒しときます。

ページ構成と概要

  • index.html
    小説のトップページ（つまり1ページ目 or 第一章）
  • 2.html
    2ページ目　or 第二章（以降、ページまたは章と同じファイル名で連番にする）
  • cast.php(cast.html)
    キャラクター紹介ページ
  • mychar.js
    クッキー発行スクリプトファイル

トップは1.htmlでもindex.htmでも何でもいいですが、
2ページ目より後のページを　番号＋拡張子　にします。

サンプルはこちら

PHP版

PHPだとソースを見てもネタバレしないものの、PHPが使えるサーバー環境が必要です。
FC2ホームページとかプロパイダのサーバースペースでは使用出来ない事の方が多いので、
PHPが使用できない環境である場合はJavaScript版を御覧下さい。

PHP版:外部スクリプトファイルの作成と設定

新しいテキストファイルに下記ソースをコピペして、mychar.jsという名前で保存する。
文字コードは小説ページと同じものがいいと思います。

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

ファイルを作ったら、各小説ページのヘッダにscriptタグを入れて、mychar.jsを読み込ませる。

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="js/mychar.js"></script>

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

PLAIN TEXT
HTML:
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. myCharacters("作品を判別する半角英数キーワード");
  4. //]]>
  5. </script>

デモは「吾輩は猫である」の抜粋なので、 myCharacters("wagahai") としました。
これが全部同じだと、別の作品を表示した場合に読んでもないのに紹介ページが全部表示されてる…みたいな事になるので、作品ごとに被らないキーにしといてください。

PHP版:登場人物紹介ページの作成

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

PLAIN TEXT
PHP:
  1. <h2>吾輩は猫である - 夏目漱石</h2>
  2.         <h3>登場人物紹介</h3>
  3.         <p>一を表示した後は「おさん」まで、二を表示した後は「迷亭」まで、三を表示した後は「八木独仙」まで表示される。</p>
  4.         <h4>吾輩（主人公の猫）</h4>
  5.         <p>珍野家で飼われている猫。本編の語り手で、名前は未だない。人間の生態を鋭く観察したり、猫ながら古今東西の文芸に通じており哲学的な思索にふけったりする。人間の内心を読むこともできる。自分のことを吾輩といっている。三毛子に恋心を抱いている。</p>
  6.         <h4>珍野苦沙弥（ちんの くしゃみ）</h4>
  7.         <p>猫の飼い主で中学の英語教師。妻と3人の娘がいる。偏屈な性格で胃が弱くノイローゼ気味である（漱石自身がモデルとされる）。</p>
  8.         <h4>おさん</h4>
  9.         <p>珍野家の下女。名は清という。主人公の猫を好いていない。</p>
  10.         <?php if(isset($_COOKIE["wagahai"]) && $_COOKIE["wagahai"]>= 2):?>
  11.         <h4>三毛子</h4>
  12.         <p>隣宅に住む二絃琴の御師匠さんの家の雌猫。主人公の事を「先生」と呼ぶ。主人公に好かれていることに気付いていない。</p>
  13.         <h4>車屋の黒</h4>
  14.         <p>大柄な雄の黒猫。べらんめい調で教養がなく、大変な乱暴者なので主人公は恐れている。</p>
  15.         <h4>迷亭（めいてい）</h4>
  16.         <p>苦沙弥の友人の美学者。ホラ話で人をかついで楽しむのが趣味の粋人（美学者大塚保治がモデルともいわれるが漱石は否定したという。また、漱石の妻鏡子の著書『漱石の思ひ出』には、漱石自身が自らの洒落好きな性格を一人歩きさせたのではないかとする内容の記述がある）。</p>
  17.         <?php endif; ?>
  18.         <?php if(isset($_COOKIE["wagahai"]) && $_COOKIE["wagahai"]>= 3):?>
  19.         <h4>水島寒月（みずしま かんげつ）</h4>
  20.         <p>理学者で、苦沙弥の元教え子。なかなかの好男子（寺田寅彦がモデルといわれる）。富子に演奏会で一目惚れする。バイオリンをたしなむ。</p>
  21.         <h4>越智東風（おち とうふう）</h4>
  22.         <p>詩人で、寒月の友人。「おちこち」と自称している。</p>
  23.         <h4>八木独仙（やぎ どくせん）</h4>
  24.         <p>哲学者。ヤギのような髭を生やし意味不明な警句を吐くが、誰も分からない。</p>
  25.         <?php endif; ?>

上記ソースで使用している条件分岐を日本語に翻訳すると

PLAIN TEXT
PHP:
  1. if(isset($_COOKIE["wagahai"]) && $_COOKIE["wagahai"]>= 3)

もし（"wagahai"というクッキーが存在し　かつ　"wagahai"というクッキーの値が3と同じか3以上だったら）

という意味になります。

サンプルはこちら

JavaScript版　（初心者向け）

初心者向けの非常に簡易なスクリプトです。基本的なロジックはPHP版と同じです。

CSSのdisplayプロパティによりキャラクターデータの表示・非表示を切り替えるため、
紹介ページのソースを見るとネタバレしてしまいます。
キャラクターデータを完全に隠匿したい場合はMooToolsを使用する上級者向けを参考にしてください。

JavaScript版(easy):外部スクリプトファイルの作成と設定

新しいテキストファイルに下記ソースをコピペして、mychar.jsという名前で保存する。
文字コードは小説ページと同じものがいいと思います。

PLAIN TEXT
JavaScript:
  1. function myCharacters(n){
  2. var DD=new Date();
  3. var newday = new Date(DD.getFullYear(),DD.getMonth()+1,DD.getDate());
  4. var URI = location.href.match(/\/([\d]*)(.\w{3,4}?)$/i);
  5. var val = (URI&&URI[1])? URI[1]:1;
  6. var tmp = n+"="+val+"; "+"expires="+newday.toString()+"; ";
  7. document.cookie = tmp;
  8. }
  9.  
  10. function getCookie(key) {
  11.     a = document.cookie;
  12.     b = a.split(";");
  13.     c = [];
  14.    
  15.     for (i = 0; i <b.length ; i++) {
  16.         c = b[i].match(/(\w+)=(\w+)/i);
  17.         if( c[1] == key ) return c[2];
  18.     }
  19. }
  20.  
  21. function showChar(key, id, val){
  22.     var cookie = getCookie(key);
  23.     if(cookie>= val && document.getElementById(id))
  24.         document.getElementById(id).style.display = "block";
  25. }

ファイルを作ったら、各小説ページのヘッダにscriptタグを入れて、mychar.jsを読み込ませる。

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="js/mychar.js"></script>

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

PLAIN TEXT
HTML:
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. myCharacters("作品を判別する半角英数キーワード");
  4. //]]>
  5. </script>

作品を判別する半角英数キーワードは作品ごとに被らないキーにしといてください。

PHP版:登場人物紹介ページの作成

Javascript版は章やキャラクターごとにIDを割り当て、最初に非表示にしておく要素をCSSでdisplay:noneにしておきます。

PLAIN TEXT
CSS:
  1. .hide {display:none;}
PLAIN TEXT
HTML:
  1. <h2>吾輩は猫である - 夏目漱石</h2>
  2.         <h3>登場人物紹介</h3>
  3.         <p>一を表示した後は「おさん」まで、二を表示した後は「迷亭」まで、三を表示した後は「八木独仙」まで表示される。</p>
  4.         <h4>吾輩（主人公の猫）</h4>
  5.         <p>珍野家で飼われている猫。本編の語り手で、名前は未だない。人間の生態を鋭く観察したり、猫ながら古今東西の文芸に通じており哲学的な思索にふけったりする。人間の内心を読むこともできる。自分のことを吾輩といっている。三毛子に恋心を抱いている。</p>
  6.         <h4>珍野苦沙弥（ちんの くしゃみ）</h4>
  7.         <p>猫の飼い主で中学の英語教師。妻と3人の娘がいる。偏屈な性格で胃が弱くノイローゼ気味である（漱石自身がモデルとされる）。</p>
  8.         <h4>おさん</h4>
  9.         <p>珍野家の下女。名は清という。主人公の猫を好いていない。</p>
  10.         <div id="section2" class="hide">
  11.         <h4>三毛子</h4>
  12.         <p>隣宅に住む二絃琴の御師匠さんの家の雌猫。主人公の事を「先生」と呼ぶ。主人公に好かれていることに気付いていない。</p>
  13.         <h4>車屋の黒</h4>
  14.         <p>大柄な雄の黒猫。べらんめい調で教養がなく、大変な乱暴者なので主人公は恐れている。</p>
  15.         <h4>迷亭（めいてい）</h4>
  16.         <p>苦沙弥の友人の美学者。ホラ話で人をかついで楽しむのが趣味の粋人（美学者大塚保治がモデルともいわれるが漱石は否定したという。また、漱石の妻鏡子の著書『漱石の思ひ出』には、漱石自身が自らの洒落好きな性格を一人歩きさせたのではないかとする内容の記述がある）。</p>
  17.         </div>
  18.         <div id="section3" class="hide">
  19.         <h4>水島寒月（みずしま かんげつ）</h4>
  20.         <p>理学者で、苦沙弥の元教え子。なかなかの好男子（寺田寅彦がモデルといわれる）。富子に演奏会で一目惚れする。バイオリンをたしなむ。</p>
  21.         <h4>越智東風（おち とうふう）</h4>
  22.         <p>詩人で、寒月の友人。「おちこち」と自称している。</p>
  23.         <h4>八木独仙（やぎ どくせん）</h4>
  24.         <p>哲学者。ヤギのような髭を生やし意味不明な警句を吐くが、誰も分からない。</p>
  25.         </div>

HTMLヘッダもしくはbodyでshowChar()を実行すると
該当するページ番号を表示した場合にだけ指定したIDの要素が表示されます。

PLAIN TEXT
HTML:
  1. <script type="text/javascript">
  2. window.onload=function(){
  3. showChar("wagahai","section2",2);//2ページ目表示した場合のみ#section2を表示
  4. showChar("wagahai","section3",3);//3ページ目を表示した場合のみ#section3を表示
  5. };
  6. </script>

window.onloadが衝突する場合：

PLAIN TEXT
HTML:
  1. <script type="text/javascript">
  2. function myChars(){
  3. showChar("wagahai","section2",2);//myCharacters("wagahai")の2.htmlを表示した場合のみ#section2を表示
  4. showChar("wagahai","section3",3);//myCharacters("wagahai")の3.htmlを表示した場合のみ#section3を表示
  5. };
  6. </script>
  7. <body onload="myChars()">

showChar関数の構文：

PLAIN TEXT
JavaScript:
  1. showChar("cookieの名前","表示する要素のID",ページ番号);

この記事は複数のページに分かれています ： 1 2

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://tenderfeel.xsrv.jp/javascript/707/trackback/
Listed below are links to weblogs that reference
[php + js]読み終えたページによって登場人物紹介ページの内容を変える from WebTecNote

Home > Javascript > [php + js]読み終えたページによって登場人物紹介ページの内容を変える

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
  • いわれて気づいたホワイトデー 1 day ago
  • ラフ2枚渡されてWordPressサイト作れ言われるのうちくらいじゃね？ 1 day ago
  • 「適当に」と「とりあえず」は後で確実に修正が入るから信用できない 1 day ago
  • 本日のD発言まとめ：「サイト構成が分からない」「全体像が見えない」「ならテキストで」「適当にお願いします」 1 day ago
  • これでメルマガつけろいわれても安心。 1 day ago
  • More updates...

Powered by Twitter Tools

Tag Cloud
Tool＆AD

Mozilla Firefox ブラウザ無料ダウンロード

メタ情報

Return to page top