15:57現在SCP記事の改稿中なのですが、SCP-CN-963-Jのような、onclickによって時間経過で書き換わる構文を使用したいと考えております。HTMLの知識に乏しい私では該当の構文を抜き出すことが出来ず、また関数によるループ処理の有無などの設定も行えません。ご存知の方がおりましたらご教授の程宜しくお願い致します。17:13基本的にはSetTimeoutという関数を使います。setTimeoutは指定した関数を指定時間後に発動させるというものです。長くなりますが少し分解してお話しましょう。閉じるまずは指定した文章を表示させるプログラムです。id="test">@[改行]@</div>と記された所がありますね。これはtestというid名を持つ要素の中身をtextという変数に納められた文に変更しなさいという命令です。上のソースをそのまま書き込んでも何も起きません。testの中身を書き変える関数(プログラム命令の塊みたいなもの)であるshowSentenceを呼び出す命令が一言も記されていないからです。道具だけ作ってもそれを使わなきゃ意味がないのと同じです。この関数を呼び出す方法の1つがonclickです。onclick="showSentence();">Testボタン</button>というボタンが追加されました。これは「このボタンがクリックされたならばshowSentenceという関数を動かしなさい」という命令が組み込まれたボタンです。これによってshowSentenceを使う事ができる様になるのです。記述する方法があります。上記の折り畳みの内容で重要なのはプログラムは自分の動かしたい動作をする関数を組んだ後にその関数を呼び出す命令も書かなければならないという事です。上記の折り畳みでは簡単な関数の呼び出し方として2つの方法を紹介しましたが、関数の呼び出し方には様々な方法があるという事です。setTimeoutはそんな数ある関数の呼び出し方の1つなのです。閉じるsetTimeoutは指定した時間後に指定した関数を呼び出す命令です。setTimeout(<呼び出したい関数名>,<指定ミリ秒>);時間の指定はミリ秒で、1000という数字で1秒を表す書き方で指定します。下記のコードはボタンが押されてから約5秒後にid名がtestの要素に文章を表示します。text;}</script>[[/html]]最初の折り畳みで見せたonclickの説明をしたコードと似ていますが、違う所が2点があります。1つはonclickで呼び出される関数名がtimeoutTestになっている事、もう1つが<script>と書かれた下にtimeoutTestという関数が追加されている事です。このコードでは直接showSentenceを呼び出さず、timeoutTestという関数を呼び出しています。timeoutTestでは約5秒後にshowSentenceという関数を動かしなさいという命令が書かれています。その為このコードではボタンを押してから約5秒後に文章が表示されるという時間差の動作が可能になっているのです。上記のコードからある事がわかります。それは関数から別の関数を呼び出す事ができるという事です。text+"T";}</script>[[/html]]これはボタンを押すと、1秒ごとにT,E,S,Tの文字が1文字ずつ出て来るプログラムです。内部を見ればわかる通り、showSentenceT等の関数でsetTimeoutを使い1秒ごとに別の一文字を表示する関数を呼び出しています。最後に呼び出されるshowSentenceT2にはsetTimeoutの命令がないのでここで動作が終了するのです。このようにsetTImeoutという関数と次々と異なる文章を呼び出す命令を組み合わせる事でSCP-CN-963-Jのようなギミックを仕込む事ができます。慣れた方から見れば文字を表示する度に異なる関数を作るのは余り効率的ではないように見えますし、また上記の1秒ごとにT,E,S,Tを呼び出すプログラムにはバグがあります(ボタンを連打すると愉快な事になります。行いたい動作によってこのバグの回避方法は変わってしまいますので今回は割愛します)。そこらへんまでカバーした説明をするともっと文章量が多くなりますので今回はこんな感じの説明とさせて頂きました。今回、該当記事がコードを抜き出して「これが連続表示するコードです」と説明するには適さないソースであった事もあり、教本の様な説明になってしまいました。わからない事がありましたがお気軽にまたご相談ください。12:33お手数をお掛けすることになり大変申し訳ないのですが、追加の質問を幾つかさせて頂きます。1.書いて頂いたコードではボタンによってtimeoutTestを呼び出していますが、これをcollapsible、つまり折り畳みを開いてn秒後に呼び出すという形にすることは可能でしょうか。2.SCP-CN-963-Jでは時間経過によって文章を表示するだけでなく前に表示されていた文章を消しています。ソースを見てみると"topage"という関数を呼び出しているのですが、これはページそのものを呼び出して文章を書き換えているという認識で宜しいでしょうか。お答え頂ければ幸いです。13:44回答します。1.について質問の意味合いによって変わります。htmlタグの外にある[[collapsible]]に対してスクリプトを追加する事は現状では難しいです。htmlブロック内であれば折りたたみ昨日とsetTimeout関数を組み合わせたギミックは可能です。難解Wikidot構文の「HTMLブロックを拡張しよう!」をご参照ください。ここで紹介しているjsファイル及び必要なhtml要素を書き込んだhtmlブロックであれば下記のコードによって折りたたみ開閉をトリガーとした時間経過による文章変化ギミックを作る事ができます。id="scpHTMLblockResizeSwitch"></div>[[/html]]上記のソースで注目して欲しいのは下記の記述です。開く</span>ここではonclickによって2つの関数を呼び出しています。1つはscpRunCollasibleという折りたたみ文章を開く関数です。1つは前のポストで紹介したT,E,S,Tを1文字ずつ表示する関数です。このようにonclick等では同時に複数の関数を呼び出す事ができるので、折りたたみ機能を持った関数と時間経過によって文章などが変わる関数を作り、それを同時に呼び出すようにすれば、折りたたみ開閉をトリガーにした時間経過によって文章が変わるギミックを作る事ができるのです。誤解しないで欲しいのはだからといって前回のポストで紹介したwindow.onloadやsetTimeoutがここまで単純な形で複数の関数をよびだせるのかというとそうではない事です。SCP-CN-963-Jでも2つの関数をsetTimeoutで呼び出す時はsetTimeoutを2回書いてますよね。onclickが特別簡単なのです。他の呼び出し方を使う場合は少し工夫が必要です。2.について"topage"という関数を呼び出しているのですが、これはページそのものを呼び出して文章を書き換えているという認識で宜しいでしょうかいいえ。SCP-CN-963-Jの作者がhtml要素の文章を書き換える関数にtopageと名付けただけです。該当記事の所々にdocument.getElementById("pageo").innerHTML=""という記述がありますよね?ここで文章を消しています。前回のポストでも何回かdocument.getElementById("hoge").innerHTML="test";という形式のコードが登場しました。ここに書いてある.innerHTMLとは(今回のコードの場合では)idで指定したhtml要素の中身を示しています。id="box"></div>というhtmlコードがあった時、ここにはboxという名前の文章などを入れる箱が記されていると思いましょう。document.getElementById("box").innerHTML="test";というコードがあった時はboxという名前の箱にtestという文章を入れている事(実は上記のコードは文章を入れているというよりも上書きなのでこの例えは相応しくないかもしれません)。document.getElementById("box").innerHTML;というコードがあった時はsentenceという変数にboxの中身をコピーして上書きしているのです。したhtml要素の書き換えや変数へのコピー等を組み合わせる事によって時間経過によって文章やページのデザインそのものが変化する(果てにはゲームを行う)プログラムを作る事が可能になります。lightning_rodさんがやろうとしている事は、最終的な構想がわからないので何とも言えませんが、少なくとも決して簡単な構文にはならないと思います。lightning_rodさんにとって大きな経験になると思います。私自身巧い説明ができているのかというと疑問符がつきますので、またわからない事があればお気軽にご相談ください。15:36CSSのみで行うのであれば、transitionプロパティを使うと良いと思います。setTimeoutを使うのもありですが、Javascriptはiframe内部でのみ実行されるという制約があります。href="#u-testcontent"]]クリックすると1.5秒で"test"という文字が赤くなります。id=name]][[/div]]で囲む。nameは英字でそれぞれ適当に。CSS]]で該当箇所にtransitionプロパティを書く。:target付きのものを書き、CSSを変化させる。出現されるならdisplayプロパティを使う。href="#u-name"]]というリンクを作り、そこをクリックさせるようにする。クリックするとイベントが発火する。nakagawaさんがおっしゃるように影響範囲の制約がない事で例えば一定時間後にこのサイトのヘッダーが崩壊するなんてものを作れます。デメリットは例えば一定時間後に更にイベントを発火させる要素を作る等のギミックを作るとしたら非常に難しい事等が挙げられます。アンカー付のリンクからアンカーなしのurlに移動する(例えば文章の開閉)動作をし、なおかつユーザの戻るボタンに影響を与えない仕様にする場合はjavascriptが必要になります。lightning_rodさんのやりたい事に合わせて適切な方法も変わります。11:20[[collapsible]]はページ遷移は発生しないようです。一定時間後に動作させたければtransition-durationを設定すればokです。確かにページを戻りたい人には迷惑かもしれませんが。14:54返事が遅れて申し訳ございません。試してみた結果、javascriptで私のやりたかったような挙動をほぼ行わせることが出来ました。nakagawa様には申し訳ないのですが今回はjavascriptを使用させて頂きます。上手く動かすことが出来たのですが、1つだけ上手く行かなかった箇所があった為、厚かましくもまた質問させて頂きます。関数で文章を呼び出す際に、文字色を設定した文章を呼び出そうとすると関数が動かなくなり困っております。文字色を設定した文章の呼び出し方を教えて頂ければ幸いです。?因みにfontタグでもstyleタグでも駄目でした。15:29lightning_rodさんのサンドボックスを拝見したのですが現在エラーが出ているコードは削除されているのでしょうか?実際にエラーが出ているコードを見た方が説明しやすいので、できればエラーが出ているコードも読めるようにして頂きたくよろしくお願いします。style="で文字が切れてしまい不正なコードになります。style="color:#F00;">あいうえお</span>';の様にダブルクオーテーション(")とシングルクオーテーション(')を併用してください。感覚的に言えば文章全体を囲む大枠がダブルクオーテーションならその中のクオーテションはシングルクオーテーション、大枠がシングルクオーテーションなら中はダブルクオーテーションという感じに書いてください。style="color:#00F;">青いよ</span>';の様に複数の色を指定する事ができます。推測で話しているのでエラーの原因が全く違ったら申し訳ありません。申し上げた様に今回の構文は簡単な部類には入らないと思います。その為エラーが出たりわからない事がありましたらお気軽にご相談頂ければと思います。15:58ご教授頂いた方法で正常に作動しました。不手際があったことをお詫び致します。これで恐らく自分のやりたい動作が出来るようになったと思いますが、また行き詰った場合にはご相談させて頂きたく思いますのでご教授頂ければ幸いです。御付き合い頂きありがとうございました。