HTML Mail with embedded pictures

 

By Thomas Maul, General Manager, 4D Germany.

TN 05-37

 

Summary

このTech Noteでは、画像の組み込まれたHTMLメールを送信する方法を取り上げます。実際的な応用例としては、日次あるいは月次の売上日報を管理グループに配信する場合などが考えられます。HTMLテキストは、HTMLテンプレートを使用して作成します。また、4Dのクイックレポートを活用すれば、HTMLの知識がなくても、簡単にHTMLテキストを生成することができます。

 

About HTML emails

今回の内容ではHTML形式の電子メールについて詳しく取り上げることはせずに、HTMLメールの自動生成だけに焦点を絞っています。HTMLエディタをユーザに提供し、自由にHTMLメールを作成できるようにすることを思案中であれば、MarketBlastプラグインを利用したメールクラアイントである「4D Email 3.0」(ベータ版)について検討することをお勧めします。

 

HTMLメールの画像は、外部ファイルまたは添付ファイル参照、どちらの形態を取ることもできます。大抵の広告メール(SPAMおよび定期購読を含む)は、通常のWEBサーバの画像を参照しています。この利点は、メールのサイズを大幅に節約できることです。さらに、サーバへのアクセスが発生するので、相手がメールを読んだことを検知することもできます。そのような理由で、最近では、ユーザのプライバシーを保護するために画像をダウンロードしないように設定されているメールクライアントが増えています。

 

そのようなメールクライアントでも確実に画像を表示し、HTMLメールを完全に表示させるための方法として、画像をメールに組み込むことが考えられます。

 

About the example

サンプルデータベースが自動配信するメールには、販売実績の統計、ZIPコード別の売上を示した円グラフ、製品コードで分類した統計とグラフが含まれています。グラフは4D Chartで作成したものを変換したGIF画像です。

 

サンプルでは、HTMLを生成する2種類の方法を網羅しています。ひとつ目は、4Dのクイックレポートを使用する方法で、HTMLの知識がない人でも簡単に利用することができます。ふたつ目は、デベロッパが提供するHTMLテンプレートとバージョン2004の4DコマンドであるPROCESS HTML TAGSを使用する高度な方法です。

 

いずれの場合も、最後の段階でPROCESS HTML TAGSによって画像と表組を合成し、4D Internet Commandsで配信しています。

 

結果として、次のようなレポートメールが送信されます。

 

 

Using the example

サンプルを起動すると、説明文のダイアログに続いて入力画面が表示されます。

 

 

プログラムを実行するには、電子メールクライアントに必要な情報、つまりメールサーバの名前またはIPアドレスと、SMTP認証が必要であれば、アカウントIDとパスワードが必要です。

 

テスト目的では、送信者と宛先の両方を自分のアドレスにすることが勧められています。

 

「Use Quick Report」「Use HTML Template」どちらのボタンをクリックしても画像の組み込まれたHTMLメールが生成されますが、若干、スタイルとカラーが異なっています。

 

Customizing the report

以降の部分では、実際のアプリケーションで応用するためにレポート生成のコードをカスタマイズする方法を解説してゆきます。最初にサンプルデータベースのレポートを変更する方法、次に別のアプリケーションにコードを移植する場合の手順を考慮します。最後にユーザがレポートをカスタマイズできるようにする方法を取り上げます。

 

Customizing the Quick Report statistic

デモウィンドウを閉じてユーザモードに移行します。

 

1 テーブルリストで「Invoices」テーブルを選択します。

2 クイックレポートを起動します。

3 マニュアル操作、あるいはウィザードを使用して、新しいレポートを作成します。

4 プリントプレビューを実行して結果を確認します。

5 どちらの方法でレポートを作成したにしても、ウィザードを開きます。

6 「次のステップ」ボタンを「出力タイプ」になるまでクリックします。

7 「HTMLファイル」を選択します。

8 「次のステップ」ボタンをクリックし、「表示形式」で任意の変更を施します。

9 「次のステップ」ボタンをクリックし、「仕上げ」ステップに進みます。

10 「4Dコードをビルド」をクリックします。バージョン2004の新機能であるこのボタンは、インタプリタ版のユーザモードでのみ利用することができます。

「コードオプション」はすべてのチェックボックスを有効にし、「コードをビルド」ボタンをクリックします。

 

 

このオプションを実行することにより、編集したクイックレポートと同じレポートを作成するための4Dコードが自動生成されます。

11 最後に「クリップボードにペースト」ボタンをクリックしてダイアログおよびクイックレポートを終了します。

12 デザインモードに移行し、「Mail_Report_test1」メソッドを作成してクリップボードの内容をペーストします。

コードはほとんど完成しており、次の箇所だけが変更を必要としています。

 

変更前

QR SET DESTINATION($ID;qr HTML file ;"")

 

変更後

QR SET DESTINATION($ID;qr HTML file ;$2)　 ` 最後の引数を$2に変更

 

13 編集メニューで「置換」を選択し、検索語句を「=€」、置換語句を「=3D€」にして「一括変換」を実行します。

 

4Dクイックレポートは、Webブラウザで閲覧されることを想定したHTMLテンプレートを生成します。HTMLテンプレートを電子メールで使用するためには、上記の置換が必要です。この変更点に関する情報は「マルチパートMIMEメール」の項で補足しています。

 

作成したレポートを実際に使用してみましょう。Mail_CreateReportメソッドを開いて15行目のMail_Report1をMail_Report_test1に変更します。

 

カスタムモードでファイルメニューの「HTML Mail」を選択してデモを起動します。「Use Quick Report」ボタンをクリックすると、カスタマイズしたレポートが送信されます。

 

Sending HTML reports from your application

サンプルのコードは、簡単な手順で他のアプリケーションにコピーすることができます。デザインモードでHTMLMail_sendメソッドを開き、メソッドメニューで「メソッド書き出し」を実行してメソッドをデスクトップなどに書き出します。

 

それまで4D Internet Commandsを使用していなかったのであれば、プラグインをインストールします。

 

アプリケーションを起動してデザインモードで「HTMLMail_send」を作成します。メソッド読み込みを実行して、書き出してあったメソッドを読み込みます。

 

サンプルのデータベースフォルダの中にあるHTML_Mail_TemplateフォルダをExplorerまたはFinderで開きます。1report.txtファイルをストラクチャと同じ階層にコピーし、htmlmail_template.txtに名称を変更します。このテンプレートには、1または2個の表組と0-2個のピクチャを組み込まれたHTMLメールの基本形となります。

 

前項でMail_Report_test1を作成したように、クイックレポートを作成してコードをメソッドにペーストします。

 

ひとまず結果をテストするためにハードコーディングでコードを実行します。実際には、ユーザインタフェースを作成したり、サーバプロセスで自動実行されるようにプログラムを変更したりすることができます。

 

HTMLMail_Title:="This is the title of our mail"

HTMLMail_Text1:="We created this mail to show how the tech note works."

　

$qreport:=QR New offscreen area

QUERY([Invoice];[ Invoice]Day>(Current date-30))　　 ` replace this with your table/field names

$path:="HTMLMail_Report1.html"

Mail_Report_test1 ($qreport;$path)

QR EXECUTE COMMAND($qreport;qr cmd new )

QR DELETE OFFSCREEN AREA($qreport)

$err:=HTMLMail_send ("ThomasMaul@de.4D.com";"ThomasMaul@de.4D.com";HTMLMail_Title; "mail.de.4D.com";"userID";"password")

 

上の例では、件名と本文がハードコードされています。次にクエリを実行して実際的なサイズのセレクションを作成しています。レコード数が少なければ、ALL RECORDSを実行しても構いません。最後に、送信者、宛先、サーバをすべてハードコードしてメールを送信します。結果が成功であれば、変数で置き換えて柔軟なコードに書き換えることができます。

 

Include pictures

グラフは4D Chartを使用することによって、ダイナミックに生成することができます。4D Chartでグラフを作成する方法には色々あり、今回のサンプルのコードにもグラフを自動生成するコードが含まれています。

 

始めにスタティックな画像で練習し、次にダイナミックに生成されたグラフの場合について考えます。すでに4D Chartで作成したグラフがあるのであれば、CT Area to pictureを使用して変換した画像を使用することができます。

 

テストには、ピクチャライブラリの画像を使用することができます。ピクチャライブラリには、大抵、数個のボタンピクチャが含まれています。はじめにピクチャの番号を書き留めておきます。

 

テストコードの最後の行(HTMLMail_Send)の前に次のコードを追加します。

 

C_PICTURE($mypict)

GET PICTURE FROM LIBRARY(851;$mypict)

PICTURE TO GIF($mypict;HTMLMail_Pict1Base64)　 ` convert 4D picture to plain GIF, result is a blob

ENCODE(HTMLMail_Pict1Base64)　 ` convert blob in Base64 encoding

 

2行目でピクチャを読み込んでいますが、後でこの部分はダイナミックに生成したグラフに置き換えることになります。通常、ビジネスで使用するグラフは256色以下で作成されるので、GIF形式に変換します。そして最後にBASE64フォーマットにエンコードします。

 

最後にピクチャの参照を含むHTMLテンプレートを用意します。サンプルのデータベースフォルダの中にあるHTML_Mail_TemplateフォルダをExplorerまたはFinderで開き、1reports_1picture.txtファイルをストラクチャと同じ階層にコピーして名称をhtmlmail_template.txtに変更します。(前のテストで使用したものを上書きします。)

 

テストコードを実行すると、次のような画像を含むメールが送信されます。

 

 

複数の表組または複数のグラフを含むHTMLメールを作成する場合も同様です。ここではサンプルに含まれている2reports_2pictures.txtテンプレートを基にしながら、オリジナルのテンプレートを作成する方法を説明します。ファイルをテキストエディタで開くと、HTMLのソースコードをみることができます。

 

<!--4DInclude HTMLMail_Report1.html-->

<P><BR></P>

<IMG align=3Dbaseline border=3D0 hspace=3D0=20

src=3D"cid:001@<!--4DVar HTMLMail_MailID-->">

 

中程にある上記の箇所では、4Dクイックレポートで作成されたHTMLレポートを組み込んでいます。その次の部分は空行を意味しています。最後の行は画像を組み込んでいる部分です。

 

表組を増やしたければ、1行目をコピーしてドキュメントの名前を変更します。

 

4Dのクイックレポートでレポートを作成し、HTMLファイルに書き出して、生成したコードから表組を生成します。コードの$pathはテンプレートのドキュメント名に修正しておきます。

 

HTMLの知識があれば、HTMLドキュメントを編集してスタイルを変更したり、テキストを追加したりすることもできます。

 

画像を増やしたければ、<IMG>で始まる行をコピーして、任意の場所に配置します。cid:001となっている箇所は、順に002、003で置き換えます。この番号はユニークなIDとして使用されます。

 

ドキュメントを最後までスクロールし、次の箇所をまるごと複製します。

 

------=_NextPart_001_<!--4DVar HTMLMail_MailID-->

Content-Type: image/gif; name="Pict1.gif"

Content-Transfer-Encoding: base64

Content-ID: <001@<!--4DVar HTMLMail_MailID-->>

Content-Description: Pict1.gif

Content-Disposition: inline; filename="Pict1.gif"

Content-Location: Pict1.gif

 

<!--4DHTMLVar HTMLMail_Pict1Base64-->

 

Content-IDは順に002、003で置き換えます。ピクチャの名前(Pict1.gif)は任意のものを使用できますが、必ずユニークな名前でなければなりません。最後に4DのBLOB変数名HTMLMail_Pict1Base64をHTMLMail_Pict2Base64などに変更します。

 

あとは4DメソッドでHTMLMail_Pict2Base64というBLOB変数を作成すれば完了です。

 

Allow the end user to modify the report

エンドユーザにクイックレポートエディタを提供して、自由にレポートを編集させるという方法もあります。クイックレポートエディタは、フォームに組み込んでも構いません。作成されたレポートは外部ファイルまたはBLOBに保存されます。サンプルでは、QR BLOB TO REPORTでオフスクリーンエリアにレポートを作成しました。QR SET DESTINATIONからQR SET HTML TEMPLATEの間にあるコードをコピーし、QR RUNコマンドでコードを実行すれば、自由にレポートが編集できるようになります。DESTINATIONとTEMPLATEが正しくセットされたことをプログラムでチェックするようにすれば、あとはサンプルと同じように動作します。

 

Fully customizable HTML reports

4Dのクイックレポートを利用する代わりに、HTMLテンプレートを自分で作成するという方法もあります。これにはHTMLの基本知識に加えて4D HTMLタグの理解も必要です。4D HTMLタグについてはランゲージリファレンスのWebサーバの章、4D HTMLタグの項を参照して下さい。

 

サンプルにはこの方法の例としてMail_ManualReport1メソッドが含まれているので、自分で作成したHTMLテンプレートを利用する場合の参考にすることができます。メソッドでは、レポートに出力するデータで４つの配列を作成し、PROCESS HTML TAGSで配列をHTMLレポートに展開しています。HTMLタグを理解していれば、このようにして複雑なレポートを作成することができます。

 

Inside multipart MIME Mails

この部分では、画像を組み込まれたメールの仕組みについて解説しています。今回のコードを使用する上で必要ないものですが、背景に興味のある人のために補足しました。

 

サンプルでは、デバッグのために送信したメールを外部ファイルに書き出すようになっています。メールを送信すると、htmltest.txtというテキストファイルが作成されるので、テキストエディタで開いてみて下さい。

 

ファイルは、------=_NextPart_002_05.11.16_8561095というヘッダで区切られた幾つかの部分で構成されています。

 

ファイルには含まれていませんが、冒頭には次のようなSMTPヘッダが挿入されています。

 

Content-Type: multipart/related; boundary=“------=_NextPart....”

 

この部分は、メールが複数の部分で構成されていることをメールクラアイントに知らせ、その区切りとなるセパレータを定義しています。次の部分はHTMLメールをサポートしないメールクライアントで表示されるテキストのみのメッセージです。4D Internet CommandsのMSG_GetBodyコマンドを使用すると、この部分が返されます。

 

This is a multi-part message in MIME format.

 

実際の場面では、この部分にテキストのみで作成されたレポートを含めると良いでしょう。

 

------=_NextPart_001_05.11.16_8561095

Content-Type: multipart/alternative;

　 boundary="----=_NextPart_002_05.11.16_8561095"

 

NextPartの後にはID数値である001、および日付とティック数で表現された時刻から成るユニークな番号が続いています。この部分はメールごとに生成され、残りは同一の内容となります。

 

------=_NextPart_002_05.11.16_8561095

Content-Type: text/html;

　 charset="iso-8859-1"

Content-Transfer-Encoding: quoted-printable

 

次のセクションには、実際のHTML部分が含まれています。ヘッダは、使用キャラクターセットとエンコーディングに関する情報です。

 

------=_NextPart_001_05.11.16_8561095

Content-Type: image/gif;

　 name="Pict1.gif"

Content-Transfer-Encoding: base64

Content-ID: <001@05.11.16_8561095>

Content-Description: Pict1.gif

Content-Disposition: inline;

　 filename="Pict1.gif"

Content-Location: Pict1.gif

 

続くセクションはBASE64で暗号化された画像を含んでいます。この部分のヘッダには、画像がGIF形式であり、BASE64でエンコードされ、Pict1.gifという名前であるということを知らせています。content-IDは、画像がHTMLのどこに挿入されるものであるかを知るために必要です。

 

もう一度HTML部分に戻り、通常のHTMLとは異なる箇所がある点に注目して下さい。

 

<div align=3D"right">

 

これはテキストがquoted-printableフォーマットであるため、すべての"="を"=3D"で置き換える必要があるためです。3Dは"="に相当する16進数コードです。

 

<IMG align=3Dbaseline border=3D0 hspace=3D0=20

src=3D"cid:002@05.11.16_8561095">

 

画像の参照も幾らか異なっています。ここでも"="が"=3D"で代替されていることに加え、参照がURLではなく内部のcontent-IDになっています。

 

このように、HTMLメールの構造は比較的明快です。"="の処理にさえ気をつければ、ほとんどすべてのHTMLをメールにすることができます。画像を組み込む場合はメールの結末にエンコードされたものを参照し、カウンターと日付によるユニークなcontent-IDを使用します。