| 我楽多 cgi @nifty | DreamMaker2 Cookie型ドリー夢小説変換 |
Presented by Season
|
|
|
|
||
|
1.はじめに
2.ドリーム小説メニューについて |
3.ドリーム小説メニューの作成方法
上記のサンプルでは、登録できる項目が2つでしたが、入力項目が1個から4個までのサンプルを用意しました。
いずれのサンプルもJavaScriptによるクッキー(Cookie)機能で名前の登録を行う様に作成されています。
自分で好みのメニューを以下のリンクから選択して圧縮ファイルをダウンロードして下さい。
※ 2001/05/06 :クッキーの削除機能があった方が良いとのご希望がありましたので付け加えました。
※ 2002/02/17 :文字化け防止の為にヘッダーにMETAタグを追加してデザインも若干改良しました。
※ 2002/05/12 :入力項目数を4つ以上欲しいという要望がありましたので6つまで増やしました。
| サンプル1 | サンプル2 | サンプル3 | サンプル4 | サンプル5 | サンプル6 |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
ダウンロードしたファイルを解凍すると、メニュー用のHTMLファイルが入ってますので、テキストエディタ等で
自分好みにデザインを変更して下さい。
以下の「サンプル2」のソースを例に説明すると、緑の<!--ユーザーが自由にデザインする場所
ここから-->
から<!--ユーザーが自由にデザインする場所
ここまで-->の範囲にある青字の部分を自由に変更できます。
赤字の部分は、名前登録用のJavaScriptの動作に関係がありますので絶対に変更しないで下さい。
初心者の方の場合は、FrontPage等のホームページ作成ソフト(HTMLエディタ)を使ってデザインを変更する方が
簡単かつ安全に作業ができると思います。
|
<HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"> <META NAME="AUTHOR" CONTENT="http://homepage1.nifty.com/mystaff/dream/"> <TITLE>ドリーム小説メニュー画面</TITLE> <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> </HEAD> <!--ユーザーが自由にデザインする場所 ここから--> <body bgcolor="#EFEFEF"> <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="#FF0000" size="6" face="MS Pゴシック">ドリーム小説メニュー</font> </p> <form name="dream"> <table align="center" width='240' border=0> <tr> <td> 登録内容1:『 <script language="JavaScript"> <!--- document.write(names[0]); //END ---> </script> 』 </td> </tr> <tr> <td> 登録内容2:『 <script language="JavaScript"> <!--- document.write(names[1]); //END ---> </script> 』 </td> </tr> <tr> <td> <br> 入力項目1: <input type="text" size="16" name="name1"><br> 入力項目2: <input type="text" size="16" name="name2"><br> </td> </tr> <tr> <td colspan=2 align=center> <input type="button" value="登録する" onclick="JSset()"> <input type="button" value="削除する" onclick="DeleteCookie(CookieID)"> </td> </tr> </table> </form> <P align="Center"> <font color="#FF8800">※お名前を登録してから閲覧したい小説を選んで下さい。</font> </p> <hr width="80%"> <div align="center"> <table border="0" width="40%"> <tr> <td><a href="page1.html">小説その1</a></td> <td>小説内容の説明文その1</td> </tr> <tr> <td><a href="page2.html">小説その2</a></td> <td>小説内容の説明文その2</td> </tr> <tr> <td><a href="page3.html">小説その3</a></td> <td>小説内容の説明文その3</td> </tr> </table> </div> <hr width="80%"> <!--ユーザーが自由にデザインする場所 ここまで--> <script language="JavaScript"> <!---フォームへ書き込み document.dream.name1.value = names[0]; document.dream.name2.value = names[1]; //END ---> </script> </body> </html> |
4.Cookie対応型のドリーム小説コンテンツの作成方法
メニューが完成したら、次に小説を用意します。
「ドリーム小説メニュー」のクッキー(Cookie)を読みこんでキーワード(登場人物の名前等)を変換する
HTMLソースを自動的に作成するCGI「DreamMaker2」を準備しましたので、こちらをご利用下さい。
使い方はDreamMakerとほぼ同じなのでDreamMakerを使ったことの有る方なら大丈夫だと思います。
「DreamMaker2」は、Cookie対応型のドリーム小説を作るCGIです。
スクリプトソースは一般公開してませんが、「自分でドリーム小説を作りたい」という方は、
上記のCGIをご自由に無料で利用して頂けます。←最近、料金の質問が多いので付け加えました(笑)
※注1:ドリーム小説メニューには、DreamMakerで作成したドリーム小説は使えません。
必ず「DreamMaker2」を使って作成して下さい。
※注2:「DreamMaker2」で作成したドリーム小説はメニューと同じ場所にアップロードして下さい。
同じ場所にアップロードしないとクッキーがうまく効かない場合があります。
5.クッキー(Cookie)について
クッキー(Cookie)機能とは、掲示板で良く利用されている訪問者の情報(氏名、Eメール等)を一時保存
する機能のことです。クッキーは訪問者のパソコンに保存されます。
ドリーム小説メニューでは、このクッキー機能を利用して変更したい登場人物の名前を登録しています。
訪問者が登録したクッキーを参照することにより他のページでも登録内容を自動的に表示出来る訳です。
クッキーには名前があります。
ドリーム小説メニューで登録されたクッキーを、ドリーム小説コンテンツで利用するには同じ名前のクッキー
を正しく読みこむ必要があります。クッキーの名前は、4つのメニューサンプルでDream1〜Dream4で定義し
ており「DreamMaker2」では、変換文字列の数に合わせて自動的にクッキーの名前を付加しています。
ドリーム小説メニューが1つだけなら正しいクッキーの名前が自動的に設定されます。
しかし、貴方が自分のホームページに入力項目数が同じドリーム小説メニューを2つ以上設置すると、2種類
のドリーム小説メニューは同じクッキーを共有する事になります。
もしメニュー1の小説が男の子の名前を変えるドリームで、メニュー2の小説は女の子の名前を変えるドリーム
だったとすれば、これはちょっと困った事になるかもしれません。
クッキーの名前を任意に変更したい場合は、ドリーム小説メニューのHTMLソースの上部にある「CookieID」の値
を変更して、そのメニューから呼び出されるドリーム小説の「CookieID」の値も同様に変更する必要があります。
<SCRIPT
LANGUAGE="JavaScript">
<!----Cookie使用
var CookieID = "Dream2"; ←
ここでクッキー名を定義しています。
また、クッキーには有効期限があります。
ドリーム小説メニューで登録されたクッキーの有効期限は6ヶ月で設定されています。
訪問者がクッキーを登録した日から6ヶ月間アクセスが無いとクッキーは自動的に消滅します。
訪問者が6ヶ月ぶりに訪れたら、自分の登録した名前が消えてしまった事に気が付くでしょう。
クッキーの有効期限を変更したい場合は、ドリーム小説メニューの以下の行をエディタで検索して
任意の保存期間を設定してください。
以下のコマンド行の赤字の部分を保存期間を3ヶ月にするなら「3」、1年にするなら「12」に変えて下さい。
expires.setTime(expires.getTime()
+ (6 * 30 * 24 * 60 * 60 * 1000));
6.リンクについて
当サイトは、全てのページについてリンクフリーです。(子供に見せられないサイトを除く)
このページをお友達に紹介したい方がいらっしゃれば、直接リンクを貼って頂いてもかまいません。
リンクのご報告は事前でも事後でも特に必要ありません。
リンクバナーをご希望の方は、リンクページにありますのでご自由にお持ち帰り下さい。
7.お勧めのページ
DreamMakerの関連では以下のページがお薦めです。
|
◇DreamMaker(管理人:雷花さん) DreamMaker専門サイト。上記のページでDreamMakerの詳しい使い方を解説されてます。 ホームページが無くても作品を投稿出来るDreamPostというコーナーもあります。 ◇*Dream-Shop*【三月屋本舗】(作者:三月 葵さん) DreamMaker2で使用できるメニューサンプルと素材を色々と提供されてます。 Cookie型ドリーム小説を作ろう(作者:日野原ハヤさん) DreamMaker2を使ったクッキー型のドリー夢小説の作り方の解説ページです。 ◇DreamMakerシリーズ障害対策のFAQ DreamMakerシリーズの障害対策の情報をFAQ形式で公開しています。 |
8.お約束の利用規定
1.このスクリプトを使用したいかなる損害に対しても作者は一切の責任を負いません。
2.DreamMaker2を使用して作成されたコンテンツに対してSeasonは一切関与しません。
3.Eメールでのご質問はご遠慮下さい。CGIの動作不具合については、サポート掲示板
にご報告頂けるとありがたいです。
※このページの最終更新日:2003/03/03
■このページのご感想を一言お願いします。
◆入力項目は全て必須&メッセージは全角48文字以内です。(下段のフォームで投稿記事を削除出来ます)