１文字ずつ表示、最後に点滅

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： ポチ ： 2005/09/19 03:16
はじめまして。

キリ番のお知らせメッセージ的に使いたいのですが、左フレームのメニューボタンの
欄に表示させたいので、１行丸々表示するスペースがありません。

例えば、幅１６０ピクセルくらいのスペース（フォーム）に
「次のカウプレキリ番は１５０００です」
というメッセージを表示させるのに、
「次のカウプレキリ番は」までを１文字ずつ表示させ、
「１５０００です」をその後に５回くらい点滅させたいのです。

「次のカウプレキリ番は１５０００です」というのをまず１文字ずつ表示させ、
最後にその文章を点滅させるというのは見たことがあるのですが、
そのスペース、幅（長さ）がありません。

また、「１５０００」ということを強調したいため、上述の説明のように
点滅させたいのですが、２行にせず、１行（160ピクセル位）の範囲内で
最初に「次の…キリ番は」までを１文字ずつ表示、
次の文章は点滅させるにはどうしたらよいのでしょうか？

それを「繰り返し」で行いたいのですが、よろしくお願い致します。
うまく説明できなくて申し訳ありません。。。

1   名前： 今更王 ： 2005/09/19 03:16
なんとなくやりたいことは理解できました。

「次」、「の」、「カ」・・・
と順番に切り替えて表示して最後は
「１５０００」
を点滅させたいんですよね？

ぱっと思いついたのはGIFアニメを作成して表示する方法です。
GIFアニメはパラパラまんがの容量でアニメーションを作成します。
文字だけのアニメーションでしたらきっと難しくないと思います。
ただし、GIFアニメが作成できるソフトが必要です。
フリーのソフトでもいろいろあるようですので
ご自分にあったものを探してみてはいかがでしょう。

もう１つはやはりJavascriptで作成する方法ですね。
http://www.tagindex.com/javascript/message/index.html
ここの文字の点滅とタイプライターを応用すればできそうですね。
2   名前： ポチ ： 2005/09/19 03:16
今更王さん、ありがとうございます。

>「次」、「の」、「カ」・・・
>と順番に切り替えて表示して最後は
>「１５０００」
>を点滅させたいんですよね？ＨＰビルダーを持っているので、ＧＩＦアニメ

そうです、そうです。
中段くらいに書いた、全文を表示してから点滅するものは
「イヌでもわかるJavaScript講座」というところで見たのですが、私がやりたいのとは
ちょっと違うので、それを応用すれば出来るかと思ったのですが、どこをどうすれば
いいのかさえ、全然わかりません（ーー；


GIFアニメも考えたのですが、絵ならまだいいのですが、文字だとどうも鮮明に
映らない感じなので、メッセージを流す方がいいかなぁと思いました。
一応、ＨＰビルダーを持っているので、そこのウェブアニメーターでＧＩＦアニメは
できると思います。

最悪はそれでもいいかなぁ…とも思いますが、できれば表題のようなJavaScriptが
出来たらなぁと思います。
よろしくお願いします。
3   名前： 今更王 ： 2005/09/19 03:16
では・・
http://www.openspc2.org/reibun/HTMLmail/move/003/
さらにこんなヒントを投下してみます。
http://www.openspc2.org/
ここ、すごくいろいろ細かな説明とサンプルがあるので勉強になりそうです。
（1文字ずつ表示、ということで「Javascript ルパン メッセージ」という検索をしてみて見つけたんですがｗｗ）

上のスクリプトで変えなければいけないところは
●1文字ずつ流すtxtと最後に表示するtxtが変わるので別にもう1つ用意する。
●function LupinTitle2()の中の処理を追加したtxtを点滅させる処理に変える。
でできると思います。
がんばってみてください！

スクリプトを直してみてまたどうしても解らないことがあったら今度はJavascriptの質問版に
「こうしたいけど具体的にどうすれば実現できる？」っていう質問を
自分の書いたスクリプトと共に投稿してみてはどうでしょうか。


独り言：
うゎ。自分で書いててなんですが・・なんておせっかいでまわりくどい！！（＾＾；
ココの掲示板てこういうのがやりたい！
っていう投稿に対していきなり答えを書いてあげてしまう、
初心者にありがたいけれどもちょっと親切すぎる傾向が強い気がするので
あえてヒントという形で投稿してみました。
やっぱりまずはサンプルを自分の意図に沿って直していくのが
上達への第一歩！だと思ってますので。
4   名前： ポチ ： 2005/09/19 03:16
>●・・・別にもう1つ用意する。

すみません、素人にはわかりません（ーー；
あのルパンタイトルは同じ場所に文字が出るので読めないのと、
フォントが大きすぎて、ｆSizeを修正しても大きいままだし、
スピードが速すぎて…。

教えて頂いたURLでいうと
「テキストフィールドに１文字ずつ表示する」
に該当するのですが、どれも１行に全て表示しているものか、
２〜５行に表示する例題ばかりでわかりません。

>●function LupinTitle2()の中の処理を追加したtxtを点滅させる処理に変える。

もう１つ用意したtxtだけを点滅させる処理もわかりません。

他の所で質問してしまうと、マルチポストと言われてしまうし、
キリ番まであまり時間がないので、今回はじっくり考えて勉強している時間も
なかったので、教えて頂きたかったのですが。。。
5   名前： 今更王 ： 2005/09/19 03:16
<html>
<head>
<title>１文字づつ画面上に出力後、点滅させる</title>
<script language="JavaScript"><!--
//設定項目
str = "次のカウプレキリ番は";
str2 = "１５０００です";
mSec = 500; //　キャラクタの点滅速度（1秒＝1000）
brinkstart = 2000; //　点滅する前の文字列を消すまでの時間（1秒＝1000）
brinkcount = 5; //何回点滅したら終了するか

//実行
function run()
{
count=0;
i=0;
// １文字づつ画面上に出力
setTimeout("setText1()",0);
//"出力し終えたら、設定した時間分間を空けて点滅させる処理をする。
setTimeout('brinkChar();',brinkstart);

}


// １文字づつ画面上に出力する関数
function setText1()
{
if (count <= str.length)
{
count++;
txt = str.substring(0,count);
if (document.all) document.all["outText"].innerHTML = txt;
if (document.layers)
{
document.layers["outText"].document.open();
document.layers["outText"].document.write(txt);
document.layers["outText"].document.close();
}
}else{
return;
}
setTimeout("setText1()",100);

}


// 文字列を点滅させる関数
function brinkChar()
{
//点滅させる文字列を指定
document.all["outText"].innerHTML = str2;

flag = document.all["outText"].style.visibility;
if (flag == "visible") {
document.all["outText"].style.visibility = "hidden";
}else{
document.all["outText"].style.visibility = "visible";
i++;
}
//何回点滅したら終了するか。
if (i == brinkcount){
return;
}
setTimeout("brinkChar()",mSec);

}
// --></script>
</head>
<body onLoad="setInterval('run()',8000)">

<div id="outText">次のキリ番</div>

</body>
</html>
6   名前： 今更王 ： 2005/09/19 03:16
上記をコピーして使ってみてください。
あまり時間がなかった＋実を言うと私もJavascriptはまだまだ勉強中のため
不十分な箇所があるかもしれません。

<body onLoad="setInterval('run()',8000)">
の「8000」という部分で8秒おきに処理を実行しています。
ここを変更すると間隔が変えられますが
文字の出力が1度すべて終了する時間より短くしないようにしてください。
最初の8秒間は<div id="outText"></div>内に表示してある文字を出力します。

また、以下の項目は必要に応じて変更してください。
//設定項目
str = "次のカウプレキリ番は";
str2 = "１５０００です";
mSec = 500; //　キャラクタの点滅速度（1秒＝1000）
brinkstart = 2000; //　点滅する前の文字列を消すまでの時間（1秒＝1000）
brinkcount = 5; //何回点滅したら終了するか

＞同じ場所に文字が出るので読めない
完全に勘違いしていました。申し訳ありません。
7   名前： ポチ ： 2005/09/19 03:16
今更王さん、お忙しいのにわざわざどうもありがとうございます。

コピーしてやってみたのですが、「次のキリ番は」という文字が
表示されるだけで、全く動作しませんでした。（テキスト領域も表示されず）
何ででしょう。。。（ーー；

//;の後の説明がとても参考になるので、
ちょっと今日はこれから出かけるので夜にもう一度、
じっくり見直して見たいと思います。
あと、最初に記述した「イヌでも…」のサイトのStep９10と比較して
色々試行錯誤してみたいとも思います。

う〜ん、でも何で動作しないのでしょう。。。


8   名前： 今更王 ： 2005/09/19 03:16
うゎ・・。もしやと思いネットスケープで確認したところ思い切りエラーになっているようです。
IEだと動いてしまいますが・・・。

後半の点滅の方がちゃん書けていなかったようです。
ちょっとこちらでも考えてみます。

うーん・・未熟だ・・自分。
9   名前： ポチ ： 2005/09/19 03:16
出かける前に…(^_^;)

私はIE6.0なのですが、なぜか動きません。。。う〜ん。

全然関係ないのですが、今更王さんの回答を見る前に、
２パターンの文字を表示させる方法が全くわからず、先ほどここに投稿する前に
「イヌでもわかる…」のStep９の「文字を１文字ずつ表示する」の説明を読んでいて（殆どよくわかりませんでしたが）、
文字の一部を抜き出すと言うところに興味が行き、色々実験してみて

限られた短いテキスト領域内（カラム数24）に１文を入れ、スペースを空けてみたらどうなるのだろうと
「　　次のカウプレキリ番は　　　　１５０００です　」として、
myMsg.substring(0 , myCnt );
の部分を
myMsg.substring(15 , myCnt );
としてみたら、面白いモノが出来上がりました。

勝手にスペース前の文字はスクロールして、後半が１文字ずつになりました(^_^;)

*************************************

<SCRIPT language="JavaScript"><!--
myMsg = "　　次のカウプレキリ番は　　　　１５０００です♪　";
myCnt = 0;

function myFunc(){
document.myForm.myFormMes.value = myMsg.substring(14 , myCnt );
myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt+1;
}
// --></SCRIPT>
<INPUT type="text" size="24" name="myFormMes"><BR>
<CENTER><SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>

********************************

でもやはり、最初の文は１文字ずつ表示で、１５０００ですの部分は点滅させたいです。
10   名前： 今更王 ： 2005/09/19 03:16
改訂版作ってみました。
「イヌでもわかる…」の方、最初から参考にしとけばよかった〜。（＾＾；
最初のはテキストフィールドなしで表示させようとしていたのですが
フォームのテキストフィールドに出す方法のほうがかんたんだったみたいです。

↓コレでいけるといいのですが。↓

<html>
<head>
<title>１文字づつ画面上に出力後、点滅させる</title>
<script language="JavaScript"><!--
//設定項目
str = "次のカウプレキリ番は";
str2 = "１５０００です";
mSec = 500; //　キャラクタの点滅速度（1秒＝1000）
brinkstart = 2000; //　点滅する前の文字列を消すまでの時間（1秒＝1000）
brinkcount = 5; //何回点滅したら終了するか

//実行
function run()
{
count=0;
i=0;
flag=0;
// １文字づつ画面上に出力
setTimeout('setText1()',0);
//"出力し終えたら、設定した時間分間を空けて点滅させる処理をする。
setTimeout('brinkChar()',brinkstart);
}


// １文字ずつ画面上に出力する関数
function setText1()
{
//１文字ずつ表示
if (count <= str.length)
{
count++;
txt = str.substring(0,count);
document.myForm.outText.value = txt;
}else{
//文字を出力しおわったら抜ける。
return;
}
setTimeout('setText1()',100);

}


// 文字列を点滅させる関数
function brinkChar()
{
if (flag == 0) {
document.myForm.outText.value = str2;
flag=1;
i++;
}else{
document.myForm.outText.value = "";
flag=0;
}

//何回点滅したら終了するか。
if (i == brinkcount){
return;
}

setTimeout('brinkChar()',mSec);

}
// --></script>
</head>
<body>

<form name="myForm">
<input type="text" size="20" name="outText" value="次のキリ番">
<script language="JavaScript"><!--
setInterval('run()',8000);
// --></script>
</form>

</body>
</html>
11   名前： ポチ ： 2005/09/19 03:16
今更王さん、どうもありがとうございます。

さっき帰って来て、さっそくやってみたら、またまた「次のキリ番」で
止まっているので、あれれ。。。と思っていたら、暫くして動き出しました！

「次のカウプレキリ番は」と１文字ずつ表示され、続いて「１５０００です」が
点滅しました。
ありがとうございました♪

でも、最初の「次のキリ番」がかなり長い間（８秒間？）止まっているので、
動作していないと思われる可能性があるので（実際私がそうだった(^_^;)、
できれば、「イヌでもわかる…」のように即「次のカウプレ…」と始まるように
するにはどうしたらいいのでしょうか？

value="次のキリ番"の部分など削除したり色々いじってみましたが、そうすると全く
作動しなくなってしまって、私にはできませんでした。
よろしくお願いします。




12   名前： 「いまさらきんぐ」 ： 2005/09/19 03:16
＞でも、最初の「次のキリ番」がかなり長い間（８秒間？）止まっているので、
＞動作していないと思われる可能性があるので（実際私がそうだった(^_^;)、

setInterval('run()',8000);
の部分で8秒ごとにrun()を実行する命令を出していたのですが
コレだと最初の8秒はなんの動作もしないようです。
なのでエラーというわけではないと思います。

====================================
フォームの部分にあるsetInterval('run()',8000);の命令を
setTimeout('run()',0);
のように変えると0秒後にrun()を実行するようになります。

でもこれだと1回しか実行されません。

で、繰り返し表示するにはrun()という関数をにすこし付けたしをします。
//実行
function run()
{
count=0;
i=0;
flag=0;
// １文字づつ画面上に出力
setTimeout('setText1()',0);
//"出力し終えたら、設定した時間分間を空けて点滅させる処理をする。
setTimeout('brinkChar()',brinkstart);
//8秒間隔で実行
setTimeout('run()',8000);
}

最後の部分、setTimeout('run()',8000);で
run()が実行されて8秒後にrun()を実行するという命令を出しています。

==================
setTimeoutの使い方というか感覚がなかなかつかめず時間がかかってしまいました〜。（＾＾；；
ほんとに、未熟なのに偉そうな態度をとってしまって反省してます。
Dreameaverのビヘイビアに頼りすぎだな自分。うん。orz精進します。
13   名前： ポチ ： 2005/09/19 03:16
今更王＝いまさらキングさん、色々とどうもありがとうございました。
できました！

ふだん、HPなどタグではなく、ソフトで作っているのですが、
JavaScriptなど、ちょっとしたことで動作しなかったり、また、
同じ動作でも色々なタグがあるんですね。

今回、ド素人の私に貴重な時間を割いて頂いて、本当にどうもありがとうございました。
落ち着いたら、じっくりタグを比較、見直して勉強（復習）したいと思います。

14   名前： 「いまさらきんぐ」 ： 2005/09/19 03:16
＞ポチさん
できましたかー！！よかったです〜。（＾ー＾；
名前、うかつにも普段のH.N.で投稿してしまいました・・。すみません。
一覧へ戻る