髭仙人の漫ろ歩き
JavaScript
............................ unworldly man go for a ramble in the internet world ...
「JavaScrpt」を使用したメール  
 「JavaScrpt」の記載を利用するには


 メールはHTML形式そして「JavaScrpt」へと成長しつつあります。このページでは「JavaScrpt」を使用したメールのサンプルを掲載しておりますが、それぞれ「メニューバー」を表示してありますから下記の方法で参照や利用をして下さい。

・「JavaScrpt」の記載内容を閲覧、参照
 まず「メニューバー」の「表示」、「ソース」でHTML文章の中の「JavaScrpt」を参照することができます。
 また、HTML文章の中の「JavaScrpt」部分だけをコピーして、メール「メッセージ作成」の「ソース」表示にペーストすることも出来ます。

 尚、「JavaScrpt」を組み込んだ「ひな形」を作成しておくのも便利かも知れません。

・「JavaScrpt」を保存して「ひな形」で利用
 まず「ファイル」、「名前を付けて保存」で保存して、メールの「ひな形を選択」で保存したファイルを選択する。この場合は内容を編集して、メールを送信できます。

 この場合、サーバーにはファイルはeml形式で書き込んでありますが、ダウンロードすると、HTML形式で表示されます。その間で一部画像や音声でダウンロード出来ないデータがあるかも知れません。

 「JavaScrpt」を使用したメールは受信する側の環境に左右されます。プラウザ(Netscape Navigator2.0以降、Internet Explorer3.0以降)は当然のことながら、複雑なJavaScrptではCPUやメモリーによっては、動作が止まったり、遅くなることがあるようです。

 

 
「JavaScrpt」の動く画像の基本
 「マウスポイント」を追いかける画像


 ここでは「JavaScrpt」メールの御三家とも言えるテクニックの中の、「マウスポイントを追いかける画像」を紹介します。

 追いかける画像の数、間隔、スピードなどの要素は自由に変えられますが、結局どのような画像を選ぶかがポイントでしょう。

 ここでは同属5種の画像(GIFアニメ)を少しづつ大きさを小さくして配置しました。画像と背景を工夫したら、マウスの動きにあわせた結構楽しいページを作成できると思います。

 参考資料としては「蛙印動画工房のJavaScript」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 「ウインドウ」内を駆け巡る画像


 ここでは「JavaScrpt」メールの御三家とも言えるテクニックの中の、「ウインドウ内を駆け巡る画像」を紹介します。

 それぞれの画像はウインドウの壁にぶつかるとはね返り、ウインドウ内を駆け巡ります。それぞれ画像、数、大きさ、スピードなどを自由に設定できます。

  ここでは同属4種の画像(GIFアニメ)を配置しました。GIFアニメの動きが増幅してコミカルなページとなりましたが主題が文章か画像かによって異なりますが、背景と動画をマッチさせた楽しいページも面白いでしょう。

 参考資料としては「蛙印動画工房のJavaScript」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 「ウインドウ」の上から下へ降る画像


 ここでは「JavaScrpt」メールの御三家とも言えるテクニックの中の、「ウインドウ内を上から下へ降る画像」を紹介します。

 同一の画像がウインドウの上から下に降りますが、画像の数、大きさ、スピードなどを自由に設定できます。一般に雨や雪を降らせたり、花びらや落ち葉を降らせるなどに利用されます。

  ここでは同一の15個の画像(GIFアニメ)を単純な直線的な動きで配置しました。GIFアニメの動きが増幅してコミカルなページとなりましたが、「JavaScrpt」を変えることにより複雑な動きをすることも可能です。
また、GIFアニメ側に左右前後の動きを付けて変化を与えることも可能です。

 参考資料としては「蛙印動画工房のJavaScript」をお勧めします。ここでは類似例も含めた解説をしています。

 

 
「JavaScrpt」の動く画像の応用  
 「ウインドウ」の上から下へ降る画像


 「ウインドウ内を上から下へ降る画像」を応用をした場合のサンプルを紹介します。

 ここでは4種類の花弁の画像が14個、桜の花びらが風に揺られながら散るように「JavaScrpt」は記述されています。

 白地(800Picx600Pic)に中島潔さんの絵を重ねた画像を背景の上に桜の枝の画像を右上に設置し、さらにその上を桜の花弁が散っています。

 中島潔さんの絵と散る花弁で充分かもしれませんが、中間に右上の桜の枝を置いて距離感を出そうとしましたが、いかがですか。画像が主役で文章は添え物の感があります。春と桜のうきうきした、楽しい気分をメールに託したのです。これにサウンドをそれるのも一興かもしれません。

……………………………………………………………………………………………………………………

 「文章や画像」を下から上にスクロール


 「文字や画像をスクロール」を応用をした場合のサンプルを紹介しますが、これは「JavaScript」でなくHTMLで可能です。

 IE2.0 で追加された独自タグで、左右や上下にスクロールする文字を表示します。最近の IE のバージョンでは、文字だけでなく、画像などをスクロールさせることもできるようになりました。

・<marquee>〜</marquee>
<MARQUEE scrollAmount=1 scrollDelay=40 direction=up loop=0 width="40%" height=200>
<DIV align=center><FONT size=1>$B!~!~!~!~!~!~!~!~!~(B</FONT>
<P>$B$*$O$h$&!*(B<BR>$B$3$s$K$A$O!*(B<BR>$B$3$s$P$s$O!*(B</P><FONT size=1>$B!~!~!~!~!~!~!~!~!~(B</FONT></DIV>
</MARQUEE>

 「Netscape」で同じ事を行うには、レイヤと「JavaScript」の組み合わせが必要です。

……………………………………………………………………………………………………………………

 複数の「JavaScript」を多様した場合


 「ウインドウ内を上から下へ降る画像」、「ウインドウ内を駆け巡る画像」や「文字や画像をスクロール」などを同時に応用をした場合のするテクニックを紹介します。

 ここでは籠に入った5匹の猫がウインドウ内を上から下へ移動し、20匹の猫がウインドウ内を駆け巡る画面の中央にメッセージが下から上にスクロールさせると2つの「JavaScript」と1つの独自タグ(marquee)を複合して配置しました。

 このように複数の機能を多用したり、多数の画像を表示させることにより、かなり重くなります。その結果、途中で画像が停止したり、動きが緩慢になったりの不都合が生じることがあります。それでも挑戦したい魅力があります。

……………………………………………………………………………………………………………………

 遊びを重視した「JavaScript」


 遊び心を楽しませてくれる「JavaScript」の側面を代表する、画像が爆発する「ドカーン」です

 小さな子供にに送るメール、そんな楽しみを満足させてくれる「JavaScript」の世界です。当然背景や画像を変えて、簡単な文章を添えて送る。例えば、子供の写真を背景にしたり、画像に組み込んだりすれば、面白い作品になるでしょう。

 画像には人気のキャラクターを使いたいのですが、著作権の問題が発生します。ただ個人的な使用、家族間での使用に留めればある程度許容されますので、その範囲で楽しんでください。

 

 

 
「JavaScrpt」の背景選択の応用  
 「背景選択」と「動く画像」の応用 bP


 「左から右へと右から左へと飛び交う渡り鳥」と「背景の交換」とを組み合わせたものです。

 左右に飛び交う鳥はそれぞれ5羽を配置し、4枚の背景は四季の水彩画を揃えました。

 なかなか面白い構想ですが、「JavaScript」の重さのためか、鳥の動きが止まったりするようです。今後の改善課題よ考えています。

 
「Flash画像」の組み込み  
 メールとFlashとの相性は


 メールにはFlash画像は相性が悪いようです。GIFやJPGのようには取り扱えません。そこで苦肉の策えを披露いたします。

ここで次のような手順でメールに取り込みました。
 1、あらかじめFlashの「swf形式」ファイルをサーバーに転送する。
 2、メールのひな形を「Dreamweaver」でHTML形式で作成する。
 3、「Flashの挿入」でサーバーの「swf形式」ファイルを指定する。
 4、ひな形をHTML形式を保存する。
 5、メールでそのHTMLをひな形で指定する。

上記の「Flashの挿入」では、下記のような記載がされます。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="550" height="400">
<param name=quality value=high>
<param name="SRC"
value="http://tekipaki.jp/~amma/MailFlash/Flash01.swf">
<param name="PLAY" value="false">
<embed src="http://tekipaki.jp/~amma/MailFlash/Flash01.swf" quality=high pluginspage="http://www.macromedia.com/jp/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400" play="false">
</embed>
</object>

 このような手順でメールを作成して送信すると、受信側は100%受信し切るのではなく、Flash部分は改めてサーバーからデータをダウンロードすることになります。

 

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/