スクリプトメール(2)

パート2では本格的にDynamic HTMLを使ったメールの作り方について触れていきます。

文字列を変化させる

基本中の基本かもしれませんが、Dynamic HTMLの手始めにまず文字列を変えてみましょう。
  1. 新規でHTML形式のメールを作成
  2. 本文に以下の文字列を入力
    I like sushi.
  3. [ソース]タブを表示
  4. 緑の部分のように修正し(「like」の部分)、赤の部分を追加する
    <!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 5.50.4915.500" name=GENERATOR>
    <STYLE></STYLE>
    </HEAD>
    <BODY>
    <script language=JavaScript><!--
    function changeText() {
     document.all.moji.innerText = "love"
    }
    //--></script>
    <input type=button value="文字列を変える" onclick="changeText()">
    <DIV><FONT size=2></FONT><FONT size=2>I <span id=moji>like</span> sushi.</FONT></DIV></BODY></HTML>
  5. [プレビュー]タブを開く
  6. [文字列を変える]ボタンをクリック
  7. 「like」の部分が「love」に変わる
(今回から送信の手順は省略しています)
ソース中の日本語の部分が文字化けしていしまうのは前回述べたとおりです。 プレビューを表示してから再びソースを見るとボタンの文字の部分が文字化けしていますよね。

ところで、当講座の「動く顔文字メール」もスクリプトメールの一種です。 その作成ツールで出力されたソースがこちらです：

<html>
<head>
<title>動く顔文字メール</title>
<script language="JavaScript"><!--
  var index = 0
  var str = new Array()
str[0] = "(_ _) zzz.."
str[1] = "(- -) zz..."
function routine() {
 document.all.kao.innerText = str[index]
 if (index<str.length-1) index++
 else index=0
 setTimeout("routine()",1000)
}
//--></script>
</head>
<body onload="routine()">
<br>
<br>
<span id=kao><font face="ＭＳ ゴシック" style="background:cccccc"><marquee width=100px>
このエリアに動く顔文字が表示されます。このメールはスクリプトで記述されています。
OEのセキュリティ設定でスクリプトを有効にして下さい。</marquee></font></span>
<br>
<br>
</body>
</html>
この講座のアップと同時に動く顔文字メールをマイナーチェンジしました。
OEのセキュリティ設定でスクリプトを無効化している場合の対策も施してあります。 スクリプトが無効の場合は「このエリアに動く顔文字が〜」の注意書きが残ったまま<MARQUEE>タグで流れて表示されるようになっています。
その他、パート1の最後でメールの読み込み完了時に関数を実行させるために、<BODY>タグのonloadイベントから顔文字を書き換える作業を呼び出しています。

文字の色を変える

今度は文字と一緒に文字の色も変更します。
  1. 新規でHTML形式のメールを作成
  2. 本文に以下の文字列を入力
    This is black
  3. [ソース]タブを表示
  4. 緑の部分のように修正し(「black」の部分)、赤の部分を追加する
    <HTML><HEAD>
    <META http-equiv=Content-Type content="text/html; charset=iso-2022-jp">
    <META content="MSHTML 5.50.4915.500" name=GENERATOR>
    <STYLE></STYLE>
    </HEAD>
    <BODY>
    <script language=JavaScript><!--
    function changeColor(color) {
     document.all.iro.style.color = color
     document.all.iro.innerText = color
    }
    //--></script>
    <input type=button value="RED" onclick="changeColor('red')">
    <input type=button value="GREEN" onclick="changeColor('green')">
    <input type=button value="BLUE" onclick="changeColor('blue')">
    <DIV><FONT size=2>This is <span id=iro>black</span></FONT></DIV></BODY></HTML>
  5. [プレビュー]タブを開く
  6. 色の名前のボタンをクリックすると、文字がその色の名前に変わり、文字の色もその色になる
この辺までは序の口ですね。

背景画像を変える

ここからがだんだん難しくなってくるところです。
このサンプルでは、3枚の画像をクリックするとメールの背景画像がその画像に切り替わるようにしています。
  1. 新規でHTML形式のメールを作成
  2. 画像ファイルを3つ挿入する(メニューの[挿入]-[画像])
  3. デスクトップ上などのファイルを挿入した場合は文字化けの可能性があるので、下書きフォルダに保存しウィンドウを閉じ、下書きフォルダのものを開く
  4. [ソース]タブを表示
  5. <IMG>の中に緑の部分を追加し、赤の部分のスクリプトを追加する
    <!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 5.50.4915.500" name=GENERATOR>
    <STYLE></STYLE>
    </HEAD>
    <BODY bgColor=#ffffff>
    <script language=JavaScript><!--
    function changeBG(img) {
     document.body.background = img
    }
    //--></script>
    <DIV><FONT size=2></FONT><FONT size=2>
    <IMG alt="" hspace=0 src="cid:003901c1e641$e2b72280$0101a8c0@user" onclick="changeBG(this.src)" align=baseline border=0>
    <IMG alt="" hspace=0 src="cid:003a01c1e641$e2b72280$0101a8c0@user" onclick="changeBG(this.src)" align=baseline border=0>
    <IMG alt="" hspace=0 src="cid:003b01c1e641$e2b72280$0101a8c0@user" onclick="changeBG(this.src)" align=baseline border=0>
    </FONT></DIV></BODY></HTML>
  6. [プレビュー]タブを開く
  7. 3つの画像のどれかクリックすると、メールの背景がその画像に切り替わる
ソースを表示すると<IMG>タグのsrc属性のところが見慣れない表記になっています。 このcid:で始まる参照方法で、HTML形式メールに埋め込んだ(添付した)ファイルにアクセスするのです。 src属性の値の「@」の後ろはWindowsのユーザー名で、その前はランダムな文字列で構成されています。 この値が何になるかは、ファイルを挿入するまで分かりません。
今回も<IMG>タグには、onclick属性を追加しました。 画像をクリックした際に発生するイベントを記述しています。
赤で記述したスクリプトの部分では、画像をクリックした際に発生する関数(changeBG)を定義しています。 画像をクリックするとchangeBGという関数が呼び出されますが、この関数の引数には、呼び出したオブジェクト(<IMG>タグ自身)のsrc属性の値を指定しています。 つまりこのスクリプトの仕掛けは「クリックした画像のsrcを<BODY>タグの背景画像に指定」するようになっているのです。

今度のサンプルは同じように、リストボックスで選択した画像を背景にするようにします。

  1. 新規でHTML形式のメールを作成
  2. 画像ファイルを3つ挿入する(メニューの[挿入]-[画像])
  3. デスクトップ上などのファイルを挿入した場合は文字化けの可能性があるので、下書きフォルダに保存しウィンドウを閉じ、下書きフォルダのものを開く
  4. [ソース]タブを表示
  5. <IMG>の中に緑の部分を追加し、赤の部分のスクリプトを追加する
    <!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 5.50.4915.500" name=GENERATOR>
    <STYLE></STYLE>
    </HEAD>
    <BODY bgColor=#ffffff>
    <SCRIPT language=JavaScript><!--
    function selectBG() {
     var img = document.all.dore.value
     document.body.background = document.all(img).src
    }
    //--></SCRIPT>
    <select id=dore>
    <option value="img1">1
    <option value="img2">2
    <option value="img3">3
    </select>
    <input type=button value="変更" onclick="selectBG()">
    <DIV><FONT size=2>
    <IMG id=img1 alt="" hspace=0 src="cid:008101c1e646$eb51f280$0101a8c0@user" align=baseline border=0>
    <IMG id=img2 alt="" hspace=0 src="cid:008201c1e646$eb51f280$0101a8c0@user" align=baseline border=0>
    <IMG id=img3 alt="" hspace=0 src="cid:008301c1e646$eb51f280$0101a8c0@user" align=baseline border=0>
    </FONT></DIV></BODY></HTML>
  6. [プレビュー]タブを開く
  7. リストボックスから番号を選択して右のボタンをクリックすると、メールの背景が切り替わる
<IMG>タグに付与したid属性は、HTML内でそのオブジェクトを識別するための名前を設定しています。 スクリプトからはdocument.all.名前、またはdocument.all("名前")でアクセスできるようになっています。

次は

何となく画像を扱うところまで分かったいただけたでしょうか。
次回は本格的に画像を扱ったスクリプトメールについて解説する予定です。
スクリプトメール(1)
スクリプトメール(3)(準備中)

余談ですが、初回に画像やMIDIのファイルを挿入した際に一度下書きフォルダへ保存して閉じ、再び下書きフォルダから開くようにと書きました。 下書きフォルダに保存しても開いたままのメールのソースでは、参照先は元々ファイルがあった場所を指したままなのです。 (このとき日本語を含んだままだとご認識される)
ですが下書きフォルダに書き込まれたメールのソースは、ちゃんとメール自身に添付されたファイルを参照するようになっています。 なので、添付されたファイルを参照するに反映させるために、あえて下書きフォルダから再度開くように勧めています。

 

Powered by NAGANO INTERNET A

OE活用講座ホーム | OE活用講座掲示板
Factory | Laboratory | NAGANO INTERNET A

 

COPYRIGHT 2002
COPYWRONG 1987, 2002