Step.11 - メッセージが右から左へ流れる表示


マーキー<MARQUEE>タグはメッセージが右から左へ流れるような表示効果があります。
しかし、<MARQUEE>タグは IE では使えても、NN では 動きません。似たものを作ってみます。


Step テーマ
● substring (文字列の切り取り)
● length (文字列の長さの取得)

実行例




リスト


<script type="text/javascript"><!--
 myMsg = "いらっしゃいませ　こんにちは！　ごいっしょにポテトはいかがですか？　　　";
myMsg = myMsg + myMsg;
myCnt = 0;
function myFunc(){
     document.myForm.myFormMes.value = myMsg.substring(myCnt,myMsg.length);
     myCnt = ( myCnt == (myMsg.length/2)-1 ) ? 0 : myCnt+1;
}
// --></SCRIPT>
<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
 <script type="text/javascript"><!--
 setInterval("myFunc()",200);
// --></SCRIPT>

サンプルだけの HTMLは こちらへ

説明


もう、フォームの文字表示について説明することはなくなりました。あとはアイデア次第です。
このマーキー表示もプログラミングする人でやり方、考え方がいくらでもあります。

<MARQUEE> と、このサンプルはちょっと違いがあります。
<MARQUEE> は、右から左へメッセージを流して最後の文字が左へ消えてしまってから、再びメッセージを流し始めます。
私は、その最後の文字が消えてなくなるまでの隣の空白がじれったくてキライです。
ですから、このサンプルは切れ目なくエンドレスに文字を流すようにします。
勝手なような、かっこいいようなことを言いましたが、実はそっちの方が簡単だったのです。　うーん、やはりか (-o-メ ）

では、説明します。

myMsg = "あいうえおカキクケコ";　←説明上こんなメッセージにします。
 myMsg = myMsg + myMsg;
ん？ myMsg を「あいうえおカキクケコあいうえおカキクケコ」にしたの？

・・・はい。
マーキーはまるでメッセージが左へ移動しているように見えますが、こんな仕掛けでしょう。

フォームが５文字分の広さだとすると、そこに見える字は・・・

あいうえお
いうえおカ
うえおカキ
えおカキク
おカキクケ
カキクケコ
キクケコあ
クケコあい
ケコあいう
コあいうえ
 最初へ

の繰り返しです。　目がヘンになった人、ごめんなさい。(^^;



では、さっきの myMsg を覗いてみると・・・

あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ
あいうえおカキクケコあいうえおカキクケコ

おー！ myCnt と substring で、いけそーだ！ なんて、ひらめいた人エライ！

それで、myMsg = myMsg + myMsg; にしたわけです。
ちょっと「おカキクケコ」があまっちゃいましたけど・・ (^^;

document.myForm.myFormMes.value = myMsg.substring( myCnt , myMsg.length );
取り出す先頭位置を myCnt にして、取り出す最終位置を myMsg.length にして文字列を抜き出して表示・・・

「えっ！　取り出す先頭位置は良しとして、そこから全部取り出す!?」　なんて思った方、もう立派なプログラマーです。

確かに例でいうと、まず最初は「あいうえお」まで抽出すればよいものを、「あいうえおカキクケコあいうえおカキクケコ」を抜き出してフォームにたたき込んだのです。
「カキクケコあいうえおカキクケコ」分、無駄に抽出して、無駄にセットしたのです。
プログラマーとして許せん！なんて言わないでください。
しかし、こっちだとフォームを長くしようが短くしようがプログラムをさわる必要がなくなるのです。
いろんな長さのフォームを使うときも myFunc() を変更せずにそのまま使えるのです。

myCnt = ( myCnt == (myMsg.length/2)-1 ) ? 0 : myCnt+1;
 ここも、前のステップと同じはず・・！
myMsg.length/2 ・・ ２で割る？

はい。
myMsg+myMsg で２倍にしちゃったので、２で割って本来の長さにしたのです。(^^;

このマーキー処理サンプルは、ちょっと適当が目立ちすぎました。
でも、リストの長さはコンパクトにまとまってるでしょ (^^;

▲TOP

<MARQUEE>タグ

　 IE 　 FX 　 SF 　 OP 　 GC

<MARQUEE>こんにちは、ごいっしょにポテトはいかがですか？</MARQUEE>
            ↓
こんにちは、ごいっしょにポテトはいかがですか？
▲TOP

大昔の不具合事例


●フォームにテキストをセットされるときのブラウザ仕様

フォームのサイズより長いテキストがフォームにセットされる場合、フォーム内に表示されるテキストにOS/ブラウザ仕様の違いがあるようです。


Mac(OS 9.2.2)のIE5.1.6

Mac版IE5.1.6では、substring(A, B)によって、
フォームのサイズより長いテキストがフォームにセットされる場合、
テキストの開始位置(A)からセット可能な文字数分がセットされるのではなく、
テキストの終了位置(B)からセット可能な文字数分がセットされるようです。

ソースをちょっと変更して、substring(myCnt, 17+myCnt)として、
フォームに入る長さギリギリの文字数+myCntを指定すると、
当初の目的どおり、テキストが頭から表示され、右から左へ流れていきます。
ちなみに、Mac版NN7.0では、サイトに掲載のScriptで問題ありませんでした。
情報サンクス Y.N.さん
●テスト
あなたのOS・ブラウザでは次のように表示されます。
<FORM name="fm"><INPUT type="text" size="10" name="inp"></FORM>
<script type="text/javascript"><!--
myStr="あいうえおカキクケコさしすせそ";
document.fm.inp.value = myStr;
// --></script>

さて、「あいうえお…」と表示されたでしょうか？、「…さしすせそ」と表示されたでしょうか？

○Y.Nさんより、その後のテスト実験結果
Mac(OS 9.2.2)のIE5.1.6

<INPUT>タグのsize属性の大きさによって、またスクリプトでのテキストのセットタイミングによって、
[クケコさしすせそ] の時もあれば
[さしすせそ□□□] の時もあれば（□は空白)
[ケコさしす]のようにもなるようです。

実際にテスト時のソースと実行結果画像を見せてもらいましたが、MacIE5.16のバグにも（ちょっと適当な）仕様にも現段階では幅広くその理由が考えられるため、Mac環境の無い私には確信に迫れない状況です。

ちなみにMacIE5 による未解決不具合サンプルは、他のステップにも存在しています。陳謝。。
▲TOP