スクリプトメール(1)
Dynamic HTMLなどを用いた派手なメールの作り方についての講座です。(全3講座)
以前からリクエストがあったにも関わらず、掲載が遅くなってすいませんでした。
|
|
はじめに
まずこの講座を習得するには、HTMLやDynamic HTMLやスクリプト言語の知識が必要です。
Dynamic HTMLやスクリプト言語に関する解説は可能な限り省略してありますので、不足な部分に関しては参考文献などをご覧下さい。
スクリプト言語に関する質問は、掲示板・メールを問わずお断りいたします。
なおDynamic HTMLを記述するスクリプト言語は、Java ScriptやVisual Basic Scriptなどが利用されていますが、当講座では前者(以下JavaScript)を使います。
スクリプトメールの対応状況ですが、Windows版のOE5とOE6を対象としています。
よってそれ以外のMac版・UNIX版のOEや、その他のメールソフト(Outlook 9x/200xを含む)の動作確認はしていません。
スクリプトメールを送信する際は、相手のメールソフトを確認してから送信するようにしましょう。
また受信者がスクリプトメールに対応したOEを使っていても、OEの設定によってはスクリプトが実行されない可能性があります。
OEのオプション設定の[セキュリティ]タブの[セキュリティゾーン]で[制限付きサイトゾーン]にチェックが付いていると、メール内に記述されたスクリプトは実行されません。
スクリプトメールを実行させるには[インターネットゾーン]にチェックを入れます。
これはウィルス対策のために用意された設定なのですが、スクリプトメールの実行とウィルス対策のどちらを優先するかはユーザーの判断に任されます。
ちなみに送信側も送信前のプレビューで確認するためには[インターネットゾーン]にしておく必要があります。
(ウィルスが心配な方はウィルス対策ソフトとOEを併用することをお勧めします)
HTML編集
HTMLやスクリプトを記述するには二通りあります。
予めテキストエディタなどで作成しておいたHTMLファイルをOEからひな形として呼び出す方法と、
新規メール上で直接ソースを編集する方法です。
前者を行ってから後者のソース編集をすることも可能なので、ここではソース編集の方法について触れておきます。
スクリプトメールは(当たり前かもしれませんが)HTML形式メールです。
編集中のメールのメニューの[書式]-[リッチテキスト(HTML)]にチェックを付けておくことを忘れずに…。
そして新規メールの編集中に、ソースを編集できるようにしましょう。
新規メールのウィンドウのメニューの[表示]-[ソース編集]にチェックをつけるようにします。
このチェックを付けると、ウィンドウ下部に[編集][ソース][プレビュー]というタブが現れます。
普段は[編集]が表示された状態で、ここではワープロのような感覚でHTML形式のメールを編集できるのはご存知のとおりです。
[ソース]タブをクリックすると、そのHTML形式メールのHTMLが表示され、主にここでHTMLをいじって行くことになります。
一番右の[プレビュー]タブをクリックすると、実際に送信後の状態を確認することができます。
スクリプトエラーなどがあればここで見付けることができるので、ぜひ送信前に確認しておきましょう。
(OE4時代には実際に送るまでエラーがないかは分からなかった)
下書きフォルダへの保存と[送信]の操作をする際は、必ず[編集]タブを表示しておくようにして下さい。
[ソース]と[プレビュー]を表示した状態で行うとエラーメッセージでそのように警告されます。
それからこれはOEのバグなのですが、日本語を含んだパス(場所、フォルダ)にある画像やMIDIのファイルをHTML形式メールに挿入すると、
まれにそのファイルがメール内部に添付されないことがあります。
(そのときのエラーメッセージが[このメッセージの画像のいくつかが見つかりませんでした。このままメッセージを送信すると、見つからない画像は添付されません。今メッセージを送信しますか?])
これを回避するために、挿入直後にいったん下書きフォルダに保存し、すぐに新規メールのウィンドウを閉じ、下書きフォルダのメールを開いて編集を再開するようにして下さい。
このことを注意事項の一つに加えておき、次に進みます。
最初は「Hello World」
どんなプログラム言語の入門書を見ても、最初のサンプルは画面上に「Hello World」と表示するのがお約束ですね。
ここでも手始めにこれをやるサンプルを例に、スクリプトメールの作成手順を説明していきます。
- 新規メールを用意し、HTML形式に設定(メニューの[書式]-[リッチテキスト(HTML)]にチェック)する
- ウィンドウ下部の[ソース]タブをクリック
- <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 5.50.4915.500"
name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY>
<SCRIPT
language=JavaScript><!--
alert("Hello
World")
//--></SCRIPT>
<DIV><FONT
size=2></FONT> </DIV></BODY></HTML>
- 確認のため、ウィンドウ下部の[プレビュー]タブをクリック
- 画面中央に「Hello World」のメッセージが現れる
- [編集]タブに戻る
- [宛先][件名]を指定してメールを送信する
これで5と同じメッセージが現れるスクリプトメールを送ることができます。
このスクリプトでは、メッセージを表示するイベントが本文表示の最中に発生します。
このサンプルでは問題ないのですが、後々紹介するサンプルのように画像ファイルを扱うようになると例外エラーになる可能性があります。
その対策として本文表示が完了してからメッセージ表示のイベントを発生させるようにしたのが次のサンプルです。
- 新規メールを用意し、HTML形式に設定(メニューの[書式]-[リッチテキスト(HTML)]にチェック)する
- ウィンドウ下部の[ソース]タブをクリック
- 赤い部分のスクリプトを追加し、緑色の部分を修正する
<!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 onload="init()"><SCRIPT
language=JavaScript><!--
function init() {
alert("Hello World")
}
//--></SCRIPT>
<DIV><FONT
size=2></FONT> </DIV></BODY></HTML>
- 確認のため、ウィンドウ下部の[プレビュー]タブをクリック
- 画面中央に「Hello World」のメッセージが現れる
- [編集]タブに戻る
- [宛先][件名]を指定してメールを送信する
最初のサンプルと同じ結果ですね。
<BODY>タグのonloadイベントに記述したfunctionは、メールを開いて本文の読み込みが完了した際に実行されるようになっています。
メールを開いてから自動的にスクリプトを実行するのであれば、このonloadイベントを使うようにします。
特定イベント発生時に実行
本文中の画像にマウスポインタを合わせたときや、画像をクリックした際にスクリプトを実行させることも可能です。
以下のサンプルでは、本文中のボタンをクリックすると「Hello World」と表示されます。
- 新規メールを用意し、HTML形式に設定(メニューの[書式]-[リッチテキスト(HTML)]にチェック)する
- ウィンドウ下部の[ソース]タブをクリック
- 赤い部分のスクリプトを追加する
<!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 hello()
{
alert("Hello World")
}
//--></SCRIPT>
<INPUT
onclick="hello()" type=button value="クリック">
<DIV><FONT
size=2></FONT> </DIV></BODY></HTML>