AppleWatchだけが見ることができる隠しバージョンのメールを送信する方法

公開: 2015-05-11

LitmusユーザーのDanFoodyは、AppleWatchについて非常にエキサイティングな何かを発見しました。 AppleWatchのみが表示するメールキャンペーンの非表示バージョンを送信する方法があります。これにより、設計の柔軟性が大幅に向上します。

通常、Watchは電子メールのプレーンテキスト部分のみを表示します。これは癖が原因で発生します。 Watchがメール内のリモート画像に気付くと、HTMLが複雑すぎると見なされるため、代わりにプレーンテキストバージョンが表示されます。参考までに、リモート画像はメールに埋め込まれていない画像ですが、代わりに標準の<img>タグを使用してサーバーから読み込まれます。メール内の画像の99％はこの方法で読み込まれます。皆さん、ここでは時計にメールを表示していることを忘れないでください。シンプルである必要があります！

それで、秘密は何ですか？

まず、少し背景があります。 HTMLメールには通常、HTML（技術的にはtext / htmlのコンテンツタイプ）とプレーンテキスト（ text / plain ）の2つの部分が含まれています。 Appleは、最近の顧客への電子メールで、3番目の部分であるtext / watch-htmlを使用しました。

メッセージに追加のHTML部分を含め、Content-Typeが「 text / watch-html 」の場合、HTML部分が不適切な場合、Watchはプレーンテキスト部分の代わりに追加のWatch部分を使用します。 3番目のウォッチパーツを設定するには、ESPまたはメールプロバイダーからの支援が必要になる場合があります。 3番目のwatch-html部分をサポートするPutsMailを使用して、Watch対応の電子メールを自分に送信することもできます。これで、Watch専用のコンテンツを作成できます。

Watch-htmlの動作

最後のニュースレターを受け取り、 watch-htmlの部分を追加しました。他のすべての電子メールクライアントでは、何も起こらなかったかのように見えました。

しかし、Apple Watchでは、Watchのリッチテキストのようなサポートを利用した特定の調整されたバージョンを表示することができました。

メールは時計で実際にどれだけ見栄えがするのでしょうか。

この手法を使用するとメールの見栄えが良くなりますが、それでもかなり制限されています。 WatchのHTMLサポートを考える最も簡単な方法は、テキスト装飾のみです。より良いフォーマットを作成することはできますが、完全な複数列のレイアウトを再作成することはありません。

上記のサンプルメールの作成に使用されたHTMLを確認してください。ブロックレベルの要素がほとんどないことに気付くでしょう。実際、HTMLのようには見えません。これはすべて、WatchがHTMLをリッチテキストビューに解析する方法によるものです。

WatchはHTMLを表示できないため、実際にはiPhoneがHTMLをリッチテキストに変換してからWatchに配信します。これは、LotusNotesやAOLの初期の頃から覚えているかもしれないリッチテキストビューアと非常によく似ています。これは基本的にプレーンテキストであり、いくつかのリッチコンテンツがサポートされています。

フォーマットのヒント

段落タグの代わりに、メールの送信元に段落を作成するだけです。フォントの太さを増やすためにスタイルや強力なタグを使用せず、代わりに<b>を使用してください。 Divは必要ありません。また、ほとんどのスタイル（黒ではないテキストの色を除く）は尊重されません。 HTMLでインデントやその他の構成を避けるようにしてください。ウォッチでは、メッセージにこの余分なスペースが含まれています。

これまでにサポートされているものの概要は次のとおりです。

リッチテキストの概念	HTMLを見る
大胆な	<b>テキスト</ b>
イタリック	<i>テキスト</ i>
下線を引く	<u>テキスト</ u>
フォントの色	<span style =” color：＃00800;”>テキスト</ span> 黒（＃000000）に設定されているか、指定されていないテキストは、白（#FFFFFF）に変換されます。他の色もサポートされています。
配置	<div style =” text-align：right;”>テキスト</ div> 左、中央、右のみがサポートされています。
引用	<blockquote type =” cite”>テキスト</ blockquote> ネストは最大7レベルの深さで引用し、インデントは発生しませんが、陰影は引用レベルを示します。
番号付きリスト	<ol> <li>アイテム1 </ li> </ ol>
箇条書き	<ul> <li>アイテム1 </ li> </ ul>
画像	<img src =” cid：…”>テキスト</ blockquote> 埋め込まれた画像のみがサポートされており、実際のサポートは非常にバグがあります。これについては以下で詳しく説明します。

画像サポート

この最初のバージョンのWatch電子メールクライアントには、画像に関してかなり大きな問題があります。それらが埋め込まれなければならないという事実とは別に、注意すべきいくつかの大きな落とし穴があります。

画像の配置方法にバグがあり、画像の比率が崩れます。時計が埋め込み画像のサイズを変更すると、2px（網膜画面では4px）の透明な境界線が挿入されます。残念ながら、これは画像内で行われるため、画像が歪む原因になります。たとえば、100x50pxの画像がある場合、時計は画像のサイズを96x46pxに変更し、画像の比率を維持できません。

この問題を回避するには、画像のサイズを4px x 4px大きくします（画像の比率を維持しないでください）。この例では、WatchHTMLパーツの画像は104x54pxになります。時計はサイズを100x50pxに戻します。ただし、これにより多少の歪みが発生します。

さらに、インライン画像は、ウォッチビュー内の任意の場所に意図せずに再配置される可能性があります。レンダリング中に時計で問題が発生した場合は、件名、日付、または名前から画像が上に表示されることがあります。

近い将来、Appleがソフトウェアアップデートでこれらの問題を修正することを完全に期待していますが、これらの制限を覚えておく価値があります。画像の埋め込みを試す場合は、他の電子メールクライアントに表示されるHTML部分での表示のサポートが不十分であるため、HTMLの監視部分でのみ使用することに注意してください。

プレヘッダーテキスト

知っておくべき最後の考慮事項が1つあります。 WatchはWatchHTMLをレンダリングしますが、受信ボックスビューのプリヘッダーテキストには標準のHTML部分を使用します。

野生でwatch-htmlを使用する

この隠されたWatchHTMLパーツを実際にどのように使用できますか？ ESPまたはメールプロバイダーからの支援が必要になります。悪いニュースは、ESPがまだこれをサポートしていないことです。この投稿へのリンクを送信してください。以下に技術的な詳細を記載しました。技術的な詳細が明らかになったので、近い将来に採用されることを願っています。

watch-htmlパートでメールを送信する方法

HTMLメールを自分で配信する場合、またはこれをESPに実装する場合は、WatchHTML部分を含むメールを送信する方法の技術的な詳細について説明します。

Watch HTMLパーツを追加するには、3番目のMIMEパーツを追加します。 Content-Type「text / watch-html」を使用する必要があり、インラインである必要があります。

 コンテンツタイプ：text / watch-html; charset = "utf-8"

また、これは非常に重要です。WatchHTML部分が、電子メールソースの標準HTML部分の前、およびプレーンテキスト部分の後に表示されるようにする必要があります。 Watch HTMLを他の場所に含めると、デスクトップ上のAppleMailがWatchHTMLをプレーンテキストとしてレンダリングします。動作させるのに問題がある場合は、メールソフトウェアまたはMTAがMIMEパーツを並べ替えていないことを確認してください。

3つの部分すべてを正しく実装するメールの例を次に示します。

 差出人：[email protected]
宛先：[email protected]
件名：AppleWatchの例
コンテンツタイプ：マルチパート/代替; border = "your-boundary"

-あなたの境界
コンテンツタイプ：テキスト/プレーン; charset = "utf-8"
Content-Transfer-Encoding：quoted-printable
コンテンツ-配置：インライン

これはプレーンテキストの部分です。

-あなたの境界
コンテンツタイプ：text / watch-html; charset = "utf-8"
Content-Transfer-Encoding：quoted-printable
コンテンツ-配置：インライン

<b>これはHTMLの監視部分です</ b>

-あなたの境界
コンテンツタイプ：text / html; charset = "utf-8"
Content-Transfer-Encoding：quoted-printable
コンテンツ-配置：インライン

<p>これは標準のHTML部分です</ p>
<img src =” something-remote” />

-あなたの境界-

最後に、Watchは、標準のHTML部分に不適切なものがある場合にのみ、watch-html部分にフォールバックします。追跡バグや非表示の画像などの単純なリモート画像でうまくいきます。

この手法が機能するのは、AppleWatchがtext / html部分を試し、次にMIME部分を徐々に戻って、適切なコンテンツを探すためです。 Content-Typeに「text / watch-html」という名前を付けましたが、実際には、「text /」で始まるものと呼ぶことができます。

時計に最適化されたメールを自分に送信する

PutsMailを使用すると、ESPなしで任意のアドレスにテストメールを送信できます。また、 watch-htmlもサポートしています。