OEひな形講座メールマガジン第11回「Stardust」
  (Scriptひな形No.005)
 Outlook Express Ver6の方はセキュリティーの設定をしていないとScriptによる雛形が正常に作動いたしません。第1回メールマガジンを参考にして設定変更をしてください。

 今日のメールはscriptをメールに添付して送付する方法を説明致します。これがわかったからと言ってすぐにひな形メールが作れる訳ではありませんが、こちらを勉強していけばひな形のしくみが見えてくるかとは思います。
下記手順でひな形メールを作ってみてください。

1.Outlook Expressを立ち上げる。

2.新規メールを立ち上げる。
  ※立ち上げたメールがリッチテキスト(html)になっていない方は修正してください。
    新規メールの【書式】でテキストに印がついている方はリッチテキスト(html)にしてください。

3.新規メールの下にあるソースをクリックしてください。
 
  ※図のように「編集」「ソース」「プレビュー」が無い方は新規メールの【表示】−【ソースの編集】に印をつけてください。
  ※以下、各タブを押した状態をそれぞれ、「編集画面」、「ソース画面」、「プレビュー画面」と呼びます。

4.下記ソースが見えるかと思います。
ソース画面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-2022-jp">
<META content="MSHTML 6.00.2800.1141" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV>&nbsp;</DIV></BODY></HTML>

ここまでは大丈夫でしょうか?
この <BODY bgColor=#ffffff></BODY>の間にJAVAscriptをコピーすればあなたもひな形を作成する事ができます。
<DIV>&nbsp;</DIV>は無視してください。削除してもかまいません。

5.では、実際にここにScriptをいれてみましょう。
下記枠内にある文字を全てコピーしてください。(下記枠内の文字を全て選択し、その選択文字の上で【右ボタンクリック】−【コピー】)
<DIV id=ayaobj1 style="left:0; top:0; COLOR: #000080; POSITION: absolute">☆</DIV>
<DIV id=ayaobj2 style="left:20; top:0; COLOR: #0000ff; POSITION: absolute">☆</DIV>
<DIV id=ayaobj3 style="left:40; top:0; COLOR: #00ccff; POSITION: absolute">☆</DIV>
<DIV id=ayaobj4 style="left:60; top:0; COLOR: #ff0099; POSITION: absolute">☆</DIV>
<DIV id=ayaobj5 style="left:80; top:0; COLOR: #ffaaaa; POSITION: absolute">☆</DIV>
<DIV id=ayaobj6 style="left:100; top:0; COLOR: #00ff00; POSITION: absolute">☆</DIV>
<DIV id=ayaobj7 style="left:120; top:0; COLOR: #ff9900; POSITION: absolute">☆</DIV>
<DIV id=ayaobj8 style="left:140; top:0; COLOR: #ffcc00; POSITION: absolute">☆</DIV>
★<br>
☆<br>
<SCRIPT language=Javascript>
<!--
var xx = 0,yy = 0,eex=0,eey=0,dx=6,dy=6
document.onmousemove = getmouse;
function getmouse() {
xx = document.body.scrollLeft+event.clientX;
yy = document.body.scrollTop+event.clientY;
}
function starstok() {
if(xx<document.body.scrollLeft+50||yy<document.body.scrollTop+50||xx>document.body.scrollLeft+document.body.clientWidth-50||yy>document.body.scrollTop+document.body.clientHeight-50){
eex=eex+dx
eey=eey+dy
if(eex<document.body.scrollLeft&&dx<0)dx=2+6*Math.random();
if(eey<document.body.scrollTop&&dy<0)dy=2+6*Math.random();
if(eex>document.body.scrollLeft+document.body.clientWidth-10&&dx>0)dx=-2-6*Math.random();
if(eey>document.body.scrollTop+document.body.clientHeight-10&&dy>0)dy=-2-6*Math.random();
}else{
eex=xx
eey=yy
}
for (k=1;k<9;k++) {
eval('ayaobj'+k+'.style.left =parseInt(ayaobj'+k+'.style.left)+(eex - parseInt(ayaobj'+k+'.style.left))/6/k')
eval('ayaobj'+k+'.style.top = parseInt(ayaobj'+k+'.style.top)+(eey - parseInt(ayaobj'+k+'.style.top))/6/k')
}
setTimeout('starstok()',10)
}
starstok();
//-->
</SCRIPT>

6.先ほど4.のソース <BODY bgColor=#ffffff></BODY>に上記ソースを貼り付ける。
</BODY>の前にカーソルを置いて、【右ボタンクリック】−【貼りつけ】)
下記のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-2022-jp">
<META content="MSHTML 6.00.2800.1141" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV>&nbsp;</DIV>
<DIV id=ayaobj1 style="left:0; top:0; COLOR: #000080; POSITION: absolute">☆</DIV>
<DIV id=ayaobj2 style="left:20; top:0; COLOR: #0000ff; POSITION: absolute">☆</DIV>
<DIV id=ayaobj3 style="left:40; top:0; COLOR: #00ccff; POSITION: absolute">☆</DIV>
<DIV id=ayaobj4 style="left:60; top:0; COLOR: #ff0099; POSITION: absolute">☆</DIV>
<DIV id=ayaobj5 style="left:80; top:0; COLOR: #ffaaaa; POSITION: absolute">☆</DIV>
<DIV id=ayaobj6 style="left:100; top:0; COLOR: #00ff00; POSITION: absolute">☆</DIV>
<DIV id=ayaobj7 style="left:120; top:0; COLOR: #ff9900; POSITION: absolute">☆</DIV>
<DIV id=ayaobj8 style="left:140; top:0; COLOR: #ffcc00; POSITION: absolute">☆</DIV>
★<br>
☆<br>
<SCRIPT language=Javascript>
<!--
var xx = 0,yy = 0,eex=0,eey=0,dx=6,dy=6
document.onmousemove = getmouse;
function getmouse() {
xx = document.body.scrollLeft+event.clientX;
yy = document.body.scrollTop+event.clientY;
}
function starstok() {
if(xx<document.body.scrollLeft+50||yy<document.body.scrollTop+50||xx>document.body.scrollLeft+document.body.clientWidth-50||yy>document.body.scrollTop+document.body.clientHeight-50){
eex=eex+dx
eey=eey+dy
if(eex<document.body.scrollLeft&&dx<0)dx=2+6*Math.random();
if(eey<document.body.scrollTop&&dy<0)dy=2+6*Math.random();
if(eex>document.body.scrollLeft+document.body.clientWidth-10&&dx>0)dx=-2-6*Math.random();
if(eey>document.body.scrollTop+document.body.clientHeight-10&&dy>0)dy=-2-6*Math.random();
}else{
eex=xx
eey=yy
}
for (k=1;k<9;k++) {
eval('ayaobj'+k+'.style.left =parseInt(ayaobj'+k+'.style.left)+(eex - parseInt(ayaobj'+k+'.style.left))/6/k')
eval('ayaobj'+k+'.style.top = parseInt(ayaobj'+k+'.style.top)+(eey - parseInt(ayaobj'+k+'.style.top))/6/k')
}
setTimeout('starstok()',10)
}
starstok();
//-->
</SCRIPT>
</BODY></HTML>
 ※ピンクの部分が貼り付けた部分。

7.再度「編集画面」に戻り、★☆間に内容を記入し、宛先・タイトルを入れた後送信してください。
 ※編集画面でないとメールの送信や保存はできません。
 ※ソース画面では日本語は全てshift-jis変換され、文字化けしたようになります。編集画面ではちゃんとした日本語になりますので、気にしないでください。 これを 修正するのは難しいのでここでは説明を省かせていただきます。
 ※貼り付けた直後ならば文字化けしておりませんので、☆を★,♪,♀等いろいろ変えて遊んでみてください。

 いかがですか?貼り付けてできたメールはマウスストーカーにもなっておりますので、是非試してみてください。

担当:あやなおたかしゅん
BGM:きらきら星
Copyright (C) by Hitoshi Uchida.
All rights reserved.
http://www.pluto.dti.ne.jp/~uttchy/

配信:雛形倶楽部