2022-06-01 / Questetra Developers Blog

 前: 宛先設定編

  • 基本編: 固定の宛先・内容のメールを送る
  • 内容設定編: 業務データを利用してメールの内容を変更する
  • 宛先設定編: 業務データを利用してメールの宛先を変更する
  • HTML メール編：HTML 形式のメールを送る
  • 不達対応編: メールが届かなかった時のトラブルシューティングについて

Questetra BPM Suite Version 13.1 から、メッセージ送信中間イベント（メール）にて HTML メールの送信が可能になりました。

HTML メールとは？

HTML（Hyper Text Markup Language）は、Web ページを作成するために開発されたコンピュータ言語（マークアップ言語）です。

HTML メールは、電子メールに HTML の機能を利用して、メール本文で視覚表現や文書構造などを利用して表示できるようになったものと考えて良いでしょう。
具体的には表示させる文字列などに<>で囲まれた「要素」（タグと呼ばれます）を書き込んで、その要素の持つ機能を反映させます。

例えば、以下のような文字列があります。

見出しです
本文が表示されます
部分的に強調することもできます

この文字列にタグを書き込みます

<h2>見出しです</h2>
<p>本文が表示されます<br>
部分的に<strong>強調</strong>することもできます</p>

タグが書き込まれた文字列が表示されると以下のようになります。

このように、書き込まれたタグ自体は表示されず、それぞれの機能が指定された箇所に施されて表示されます。

なお、タグの種類や機能については非常に多岐に渡るので、本記事では取り上げません。インターネット上で検索するなどして、詳しい解説サイトなどで学習してください。

本文（HTML）の設定

ワークフローの途中でメールを自動送信しよう（基本編）で作成したような、確認工程とメール送信工程だけが設定されているワークフローアプリを使ってHTML メール送信工程を設定します。データ項目には以下のような項目を追加してください。

データ項目名フィールド名データ型必須［確認］工程説明
挿入するタイトルq_Title文字型（単一行）ー編集可タイトルに挿入される文字列です
タイトルの文字色q_Title_Color文字型（単一行）ー編集可16進数で指定します
挿入するテキストq_Sentence文字型（複数行）ー編集可タイトル下の文章です

メッセージ送信中間イベント（メール）「送信」工程のプロパティ画面を開き、［本文（HTML）］の設定欄に先に説明したタグ付きの文字列を貼り付けます。

<h2>見出しです</h2>
<p>本文が表示されます<br>
部分的に<strong>強調</strong>することもできます</p>

貼り付けた文字列のうち、<h2></h2>で挟まれた「見出しです」の部分を、データ埋込を使って「挿入するタイトル」を埋め込む文字列に置き換えます。

同様に<p></p>で挟まれた部分を「挿入するテキスト」で置き換えます。さらに、文字色を指定する文字列を<h2>の中に追加して以下のようにします。

<h2 style="color: XXX;">

「XXX」の部分を上記の要領で「タイトルの文字色」と置き換えます。ここまで進めると、［本文（HTML）］に設定された文字列は以下のようになっているはずです。

<h2 style="color: #{#q_Title_Color};">#{#q_Title}</h2>
<p>#{#q_Sentence}</p>

後は［To（宛先アドレス）］にテスト用のアドレス、［メールの件名］にデータ項目「件名」をセットして設定画面を閉じます。

メールの送信テストをしてみましょう。［デバッグ実行］を行い「確認」工程の処理画面でデータ項目にそれぞれ以下のように入力します。

  • 件名：テスト
  • 挿入するタイトル：見出しです
  • タイトルの文字色：#1ce61c
  • 挿入するテキスト：本文が表示されます<br>部分的に<strong>強調</strong>することもできます

入力して「確認」工程の処理を完了すると、指定されたアドレスにメールが届きます。

Gmail で受信した例
  • 「挿入するテキスト」データ項目に入力された値は HTML コード として認識されます
    • 入力欄での見た目の改行は無視されます
    • 入力例のように、改行させたい箇所に <br> を挿入する必要があります
  • 文中に特殊文字と呼ばれる記号（< > & ” や連続する半角スペースなど）を表記する際は、それらを表示するための書式に置き換える必要があります（HTML エスケープ）
    • 例えば、<HTML> と表示させるには &lt;HTML&gt; と入力します
  • 「タイトルの文字色」に入力する値は、# で始まる6桁の16進数です
    • Google 検索で例えば「#111111」を検索するとカラーピッカーが表示され、選択した色の値を取得することができます

HTMLメールとプレーンテキストメールの併用

メッセージ送信中間イベント（メール）の設定画面には、［本文（プレーンテキスト）］と［本文（HTML）］の二つの設定項目があります。

本文（プレーンテキスト）

テキストメールを送信する際に利用します。入力された文字や記号は、そのままメール本文に表示されます。改行など、入力された見た目がそのまま表示されますが、文字の大きさや色を変えるなどの装飾はできません。

本文（HTML）

HTML メールを送信する際に利用します。入力された文字や記号は、HTML ソースとして認識されます。タグを挿入することで文字色やフォントの指定、段組構成などさまざまな装飾が施せます。

HTML メールが受信側でどのように表示されるかは、メールを表示するメールソフトやスマホアプリ、Web メールサービス（Gmail など）によって異なる可能性があります。これは、表示側ソフト等での HTML 規格への対応状況が異なるためです。また、HTML メールに対応していないメールクライアントでは、HTML メールを表示することはできません。

HTML メールを利用する場合は、受信側の環境を想定した HTML コードを記述することが望まれます。また、HTML メールに対応していないメールクライアントも想定し、［本文（HTML）］だけでなく、［本文（プレーンテキスト）］も設定しておくことを推奨します。両方が設定されていれば、受信したメールクライアントが適切に表示してくれます。

  • ［本文（HTML）］と［本文（プレーンテキスト）］が設定されている場合、Content-Type が multipart/alternative のメールとして送信されます。

HTML ソースの作成

1. ソースを手書きする

まず、HTML を理解するために簡単な文書を作ってみます。

テキストエディタを開いてコードを…といってもいきなりは難しいのでツールを利用しましょう。インターネット上で「HTML エディタ」を検索して適当なオンラインエディタを使いましょう。

文書作成画面で、 Microsoft ワードや他のワープロソフトと同様な操作で文書を作成します。完成したら「HTML ソース（コード）を見る/ダウンロードする/コピーする」といったメニューを使って HTML ソースコードを入手します。

入手したコードをそのまま［メッセージ送信中間イベント（メール）］の［本文（HTML）］に貼り付ければ、HTMLメールとして送信されます。

2. テンプレートを利用する

広告メールなどで送られてくるような洗練された HTMLメールは、かなり高度な HTML コーディングが施されています。そのようなソースコードを一から設計するには専門的な知識やスキルが必要となります。

なのでインターネット上で入手できるテンプレートを利用しましょう。「HTMLメール　テンプレート」などで検索し、適当なテンプレートを入手します。テンプレートを提供しているサイトに編集機能があれば、それを使って HTML メールのソースコードを完成させます。完成したソースコードを入手したら［本文（HTML）］にセットします。

文字型（複数行）の利用

メッセージ送信中間イベント（メール）では設定時に、 宛先や標題、本文すべてを含んだ文字数に100000 文字の制限があります。HTMLメールは文字数が大きくなりますので、文字型複数行のデータ項目に HTMLソースをセットして、本文（HTML）にて参照するのが良いでしょう。

文字型複数行のデータ項目を用意し、［メッセージ送信中間イベント（メール）］の［本文（HTML）］にそのデータ項目を参照する式を挿入します。工程の処理時に完成したソースコードを文字型データ項目に入力します。

データ更新の利用

文字型データ項目への入力は、［データ更新］を利用すれば自動で入力できるようになります。［設定対象のデータ項目］で文字型データ項目を選択し［値または式］に入手したソースコードをセットします。

また、必要となるデータ項目を用意し、［データ更新）］にセットされたソースコードの適切な箇所にそれらのデータ項目を参照する式を挿入しておけば、プロセス毎に送信メールの内容を書き換えるといったことも可能です。

  • データ更新において以下の関数を使用して文字型複数行を自動修正できます
    • HTMLエスケープする
      • 例 ：#{#escaper.escapeHtml(#q_string1)}
    • 改行置換
      • 例：#{#joiner.splitJoin(#q_string2, ‘<br>’)}

3. アドオンを利用する（Professional）

ご利用のワークフロー基盤（Questetra BPM Suite）が Professional であれば、HTML メール本文を作成する次のアドオンが便利です。

Magazine Title、概要文、リンクボタンの表示テキスト、発行者の名称など、データ差し込み用のデータ項目と完成された HTML ソースを格納するデータ項目を用意し、アドオンの設定画面で参照式を設定します。

例えば、次のような HTML メールを作成できます。

Gmail で受信した例

次: 不達対応編 

%d人のブロガーが「いいね」をつけました。