きっかけ
仕事でタイトルのようなことがやりたいと言われ、krewData等のプラグイン導入を考えましたが、プラグインをやたらめったら使うのが好みではないので、自分でやってみました。ら、ほぼほぼやりたいことはできたのですが、困ったこともあるので、最後に書きます。
kMailerに渡すデータ
もともと別アプリに持っているデータを関連データで引っ張ってきてメインのアプリに表示しており、そのデータをHTMLメール文面に記載したかったのですが、kMailerは関連データに対応していないので、データをこねくり回してメインアプリのサブテーブルに突っ込みました。
kMailerでテーブルを本文に挿入すると
テーブルのフィールドコードは「テーブル」です。
表示したい項目は、「対象日付」「申請種別」「経路」 です。
kMailerのメールテンプレート編集画面で「テーブル」を本文に挿入すると、こんな感じに表示されました。
{{#テーブル}}
{{対象日付}}, {{申請種別}}, {{経路}}
{{/テーブル}}
このままHTMLとして保存し、プレビューするとこんな感じ
複数行データを出すことができました！
テーブルのような見た目で表示したかったので、以下のようなHTMLを書きました。
CSSはすべてインラインで書くことになります。
# ここは項目名（ラベル）
<ul style="display:table; margin-block-start: 0 !important; margin-block-end: 0 !important; color: #fff;">
<li style="display:table-cell; width: 75px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #3498db;">対象日付</li>
<li style="display:table-cell; width: 75px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #3498db;">申請種別</li>
<li style="display:table-cell; width: 75px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #3498db;">経路</li>
</ul>
{{#テーブル}}
<ul style="display:table; margin-block-start: 0 !important; margin-block-end: 0 !important;">
<li style="display:table-cell; width: 75px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #eee; padding: 10px 0;">{{#&digsep}}{{対象日付}}{{/&digsep}}</li>
<li style="display:table-cell; width: 75px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #eee; padding: 10px 0;">{{#&digsep}}{{申請種別}}{{/&digsep}}</li>
<li style="display:table-cell; width: 75px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #eee; padding: 10px 0;">{{経路}}</li>
</ul>
{{/テーブル}}
{{#テーブル}}{{/テーブル}}の中身が繰り返し表示されます。
項目名は挿入されないので、自分で付ける必要があります。
Tableタグでくくる方法も考えましたが、くくってもkMailerによってHTMLが編集されるので、くくれませんでした。なのでulとliでテーブル風にしています。
このHTMLを保存して、実際にメールを送信すると以下のようになります。
やりたいことはほぼできた、けどちょっと困ったこと
枠線に色を付けず、background-colorで見やすくしました。テーブルの行数が可変なのでインラインのCSSで1pxずつの枠線を引く方法がわかりませんでした。が、これはこれで良いので良しとします。
ulについている、margin-top-startとmargin-top-end、margin-bottom-startとmargin-bottom-endを!importantで消したのですが、受信メールでは復活していました。（Kintoneでプレビュー時には消えてたのに…）Gmailが復活させているのでしょうか？謎です。
ulのmarginだけ解決できればワタシ的には完全に満足です。
ていうかそもそもul/li以外で表を表現する方法があるのかもしれない…？
どなたかアドバイスあればぜひコメントお願いします。
↧