version 0.4version 0.4リドルゲームを作る時に、答えを入力するだけでURLチェンジしてくれる便利なフォームを設置するためのJavascriptです。
その他にもあれやこれや機能があります。
使い方は、簡単な説明及び詳しい説明をお読み下さい。
どんな感じ働くのか見たい場合はテストページへどうぞ。
その他の疑問はFAQで (って、まだほとんどないですが…)。
RccScriptに関する不具合や質問や要望などは、こちらのBBSにお願いします。
rccscript.js version 0.4
(Shift JISで保存してあります)
無断使用推奨、改変自由です。
が、一応バナーも用意してありますのでよかったらご利用下さい。
古いバージョン
rccscript.js version 0.3.2
IE6以上 Firefox3.6 Safari4以上 Opera10 の予定…
バナーの設置とこのページへのリンクは任意です。
135x40
設置用html
88x31
設置用html
rccscript.jsをダウンロードしてhtmlファイルのあるフォルダに置きます。
htmlファイルの<head></head>部分に
<script type="text/javascript" src="rccscript.js"></script>
を挿入して、本文内に
<div id="rcc_form"></div>
と書くだけで↓このようなフォームが表示されるようになります。
ここでは次のページに行く代わりにファイル名を表示します。
このフォームには以下のような機能があります。
とりあえず答えがどんなファイル名になるかは上にあるフォームで確認して下さい。
ファイル名の頭に番号が付けてあると (01_xxx.htmlのように)、
タイトルバー及び<span id="rcc_pageNo"></span>で囲まれた部分にページ番号を付加します。
表示桁変更 (3桁まで) や漢数字 (九十九まで) 、全角数字での表示も出来ます。
<div id="rcc_clue">ここにヒントを書く</div>
と書くと下のようなヒントボタンが表示されて内容がポップアップするようになります。
設置できるヒントボタンは (現在のところ) １つです。
入り口ページに
<div id="rcc_entrance"></div>
と書くと下のようなボタンが表示されます。
このページでは表示されるだけで働きません。
進んだページをcookieに記憶しておいて次回続きから出来るようになります (なるはずです(^^;)。
imgなどの要素にclass="movable"を付けるとドラッグで動かせるようになります。
なんか文字ばっかになってしまいました(^^;
rccscript.jsをダウンロードしてhtmlファイルのあるフォルダに置きます。
htmlファイルの<head></head>部分に
<script type="text/javascript" src="rccscript.js"></script>
を書けばRccScriptが使えるようになります。
<div id="rcc_form"></div>と書いた場所には、テキスト入力欄とボタンが挿入されます。
テキスト入力欄の横幅やボタンのラベル (Enterの部分) は
それぞれrccscript.js内のinputSize goButtonLabelで設定します
<div id="rcc_form">を使わずに
<input id="rcc_input" type="text" size="横幅" />と
<button id="rcc_button" type="button">ボタンのラベル</button>を使うと
テキスト入力欄とボタンを好きな場所に (離れた場所でも) 配置できます。
ファイル名に01_name.htmlのように番号を付けておくと
<span id="rcc_pageNo"></span>と書いた場所には、ページ番号が挿入されます。
表示桁数の変更はtitleNumDigitsで指定します (3桁まで)。
全角数字を使うためにはuseFullwidthNumをtrueに設定します。
漢字表記を使うためにはuseKanjiNumをtrueに設定します。
タイトルバーには タイトル＋ページ番号＋接尾語 が表示されます。
表示されるタイトルはtitleStringで設定します。
接尾語はtitleSuffixで設定します。
表示桁数の変更や漢字表記はrcc_pageNoと共通です (別々に設定できたほうが良い？)。
タイトル<title></title>にあらかじめ文字を入れておくとタイトルとページ番号が挿入されません 。
読み込み時に一瞬だけファイルのパスが表示されるのを避けるには、
<title> </title>として下さい。
<div id="rcc_clue"></div>と書いた場所には、ヒントボタンが挿入されます。
要素の内容がポップアップのウインドウに表示されます。
ヒントボタンのラベルはclueButtonLabelで変更出来ます。
ヒントウインドウの背景色はclueWindowColorで
文字色はclueFontColorで16進数RGB値やカラーネームを使って指定できます。
ヒントウインドウを半透明で表示するかどうかはuseTransparentWindowで設定します。
RccScriptを使用しているページを読み込むと、自動的にそのページのファイル名をCookieに書き込むので、
ページを閉じても入り口の「つづきから」ボタンで戻ってこられます。
ファイル名に01_start.htmlのようにページ番号が付いている場合は、番号の一番大きいものが記録されます。
同じ番号同士だと後から訪れたページが記録されます。
<div id="rcc_entrance"></div>と書いた場所には、「はじめから」ボタンと「つづきから」ボタンが挿入されます。
「はじめから」を押した時に表示されるページはstartFileNameで設定します。
「はじめから」「つづきから」という文字列はstartButtonLabel continueButtonLabelで変更出来ます。
<div id="rcc_entrance">を使わずに
<button id="rcc_start" type="button"/>はじめから</button>と
<button id="rcc_continue" type="button">つづきから</button>を使うと
ボタンを好きな場所に (離れた場所でも) 配置できます。
ゴールページではCookieを削除する必要があります。
削除しておかないと「つづきから」ボタンでゴールページが開いてしまいます。
Cookieを削除するためにはページ内のどれかの要素 (タグ) にid="rcc_deleteCookie"を付けます。
例えばbody要素につける場合はこんな感じです。
<body id="rcc_deleteCookie">
Cookieに記録されたくないページではid="rcc_noCookie"でCookieに書き込まれないように出来ます。
属性class="movable"を付けた要素はドラッグで動かせるようになります。
例えば画像の場合はこんな感じ。
<img src="logo.jpg" class="movable" />
ポジション指定も出来ますが、現在のところtopとleftでしか指定できません (bottomとright指定はNG)
<img src="logo.jpg" class="movable" style="position:relative:top:10px;" />
<img src="logo.jpg" class="movable" style="position:absolute;top:10px;left:10px;" />
position:relative;は省略出来ます。
<img src="logo.jpg" class="movable" style="top:-10px;left:2px;" />
デフォルトでは動かせるのは画像のみです。
他の要素を動かしたい場合はscanTagNameで指定して下さい。
ほとんどの要素が動かせるはずですが、上手くいかないかもしれません(^^;
この機能を使わない場合はuseMovableをfalseに設定して下さい。
多少読み込み時の動作が軽くなると思います。