配布と征服：ニュースレターを作成およびテストするためのツール

メールの入力は苦痛です。 インタラクティブな（フォームやスライダーなどを使用した）アダプティブレターのレイアウトとテストは、正方形の問題です。 ただし、適切なツールを選択すれば、すべてがそれほど悪くないわけではありません。 この記事では、電子メールフレームワーク-MJMLとFoundation for Email-およびメーリングリストをテストするためのお気に入りのリソース-LitmusとEmail On Acidについて説明します。

前回の記事では、ニュースレターの歴史がどのように始まり、Outlookがその中でどのような役割を果たしたかを学びました。また、現在のニュースレターに追加できる対話性と、将来のニュースレターを確認しました。 この記事では、今日のメーリングリストを扱う人のためのツールについて説明します。

ニュースレターを作りたいとしましょう

最初のオプション：新しいHTMLドキュメントを作成し、既製の定型文（たとえば、人気のあるCerberusやResponsive Email Framework ）を取得して、インラインスタイルのテーブルを作成します。 このオプションは、文字のレイアウトにある程度の経験があり、十分な空き時間があり、タスクが単一の単純な文字をレイアウトすることである場合に適しています。

ケルベロスで利用可能な「すぐに使える」レターテンプレートの例

2番目のオプション：オンラインエディターを使用してテンプレートを作成します（たとえば、 MosaicoまたはStripo ）。 これが最も簡単な方法です。 あなたが開発者でない場合、または初めてレイアウトに直面し、レターのレイアウトが非常に簡単な場合に最適です。 ほとんどすべてのオンラインエディターは既製のテンプレートを提供し、テンプレートのソースコードにハッキングを含めて、一般的な電子メールクライアントで電子メールを正しく操作できるようにします。 しかし、これらのツールでは実際には、特定のレイアウトに合わせてレターのレイアウトをカスタマイズすることはできず、通常、コードとレターの外観の両方をほとんど制御できません。

Stripoのメッセージデザイナーのレターテンプレートの変更

3番目のオプション：メールフレームワークを使用します。 定期的にニュースレターを作成する必要がある場合、レターのレイアウトが複雑で要件が厳しい場合、ワークフローとレターの開発プロセスの一部を自動化する場合は、このオプションが最適です。 最も強力な2つのツールについて説明します。MJMLとFoundation for Emails （青年期ではInkとして知られています）。

既製のメールフレームワークを使用します。 Mjml

• Github： mjmlio / mjml
• 開発者： Mailjet
• リリース日： 2016
• ライセンス： MIT
• 人気： 7662+つ星
• テンプレート： MJML

フレームワークに埋め込まれた主なアイデア：

1. すぐに使えるレスポンシブテンプレート、
2. 独自のテンプレートエンジンによるコードの作業の簡素化、
3. レター内ですぐに使用できるコンポーネントのセット、
4. メーリングリスト開発プロセスへの便利な統合。

フレームワークは、同じ名前のテンプレートエンジンを使用します。 シンプルでありながら非常に強力です。 タグテーブル、thead、tbody、th、tr、tdは忘れてください。 スタイルをインラインで記述する必要があることを忘れてください。 文字コードの読みにくい複雑な構造は忘れてください。 MJMLを使用したメールは次のようになります。

<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さまざまなレベルのネストのHTMLテーブルから複雑な構成を作成する代わりに、数行だけを書くだけで十分です。プロジェクトをビルドすると、必要なすべてのハックで「シーズン済み」の文字の有効なHTMLコードに変換されます。

MJMLは、Visual Studio Code、Atom、Sublime Textなどの一般的なテキストエディター用のプラグインを提供します。 言語構文の強調表示、リンター、タイプセットのプレビュー付きのタブをエディター自体に直接追加します。



CLIやテキストエディターに煩わされたくない場合は、独立した公式のマルチプラットフォームデスクトップアプリケーションがあり、組み込みの本格的なコードエディター、既製のレター用テンプレートのビューアー、およびレターのライブプレビューがあります。

一連の標準コンポーネント（ボタンやカルーセルなど）に加えて、既製のカスタムコンポーネント（たとえば、グラフを描画するためのコンポーネント）があります。 WebPack用のMJMLローダーやLaravel MJMLアプリケーション用の統合ツールなど、便利なユーティリティをコミュニティアドオンページで見つけることができます。 そして、少し前まで、ベータ版の状態で、MJML APIを使用して、たとえばモバイルアプリケーション内で直接電子メールを生成することが可能になりました。 事は非常に具体的ですが、確かにそのユーザーを見つけるでしょう。

フレームワークの主な欠点は、同時にその利点の1つである「応答性」です。 フレームワークは、開発者の介入なしに自動的にレターサイズの小さな画面サイズのデバイスでの動作を処理します。 これは、グリッド内の4列の制約と、ニーズに合わせてレスポンシブレイアウトの動作を調整する機能の欠如につながります。

小さいながらも心地よい詳細：ドキュメントのあるセクションのサイトには、さまざまな電子メールクライアントでのMJMLコンポーネントのサポートについてのCanIUseのような説明があるセクションがあります。 サイトをすぐに確認でき、たとえばOutlook 2007でレターがどのように動作するかを気にする必要はありません。

結論： MJMLは、レスポンシブメールを作成するための非常に強力で学習しやすいツールです。 非常に細かい、ピクセル単位のテンプレートのカスタマイズが必要な場合にのみ、問題が発生する可能性があります。

既製のメールフレームワークを使用します。 メールの基礎

• GitHub： ZURB / Foundation-Emails
• 開発者： ZURB
• リリース日： 2015
• ライセンス： MIT
• 人気： 6885+スター
• テンプレート： Inky

あなたがフロントエンドの世界で最初の年でないなら、おそらくあなたはおそらく聞いたでしょう（しかし-私はきっと-あなたはそれをほとんど使いませんでした;）） サイトのための財団 。 ZURB社の開発者によって作成されたこのフレームワークは、フロントエンドWebフレームワークの中で（Bootstrapに続く）人気で2位の地位を長い間確保しています。

Foundation for Emailsは同じ人々によって作成され、基本的にFoundation for Sitesの一部です。 これにより、多くの利点（大規模な開発会社、かなり大きなコミュニティ、Foundation for Sitesで気に入ったすべて）と多くの制限（Foundation for Sitesで気に入らなかったすべてがFoundation for Siteで気に入ることはありません）メール）。

フレームワークを試してみることにした場合に最初にすることは、Foundation CLIをインストールすることです。

npm install --global foundation-cli

その後、次のコマンドを使用して新しいプロジェクトを作成できます。

foundation new --framework emails

手紙の作成を開始します。

確かに、必要なモジュールとコンポーネントがすべてロードされるまで数分待たなければなりません。 多数のファイルがダウンロードされるため、フォルダーのサイズに驚かないでください。空のプロジェクトの重さは400MB以上になります。 cliに加えて、Live Reloadは「箱から出してすぐに」利用できます。これは、必要なすべてのハック、既製のテンプレートとパーシャル、SASSサポートを備えた基本的な定型文です。

電子メールプロジェクトのファイル構造の基礎

FfEには独自のテンプレートエンジンInkyがあります。 コアは、MJMLテンプレートエンジンと同じです-短縮タグを使用して、複雑なネストされたテーブルでの作業を簡素化します。

 <container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

合計で約10個のタグがあり、そのうち3個はグリッドの作成に使用され（上記の例を参照）、block-gridタグはブロックグリッドの作成に使用され、さらに2個のタグはメニュー（メニューとアイテム）であり、さらに2個の名前はそれ自体を表しています：ボタンそしてコールアウト。

FfEは12列のグリッドを使用します。これは、2列、3列、4列、または6列に簡略化でき、モバイル状態とデスクトップ状態に対して列数を個別に設定することもできます。

パーシャルとヘルパーのシステムは、シンプルで便利なHandlebarsテンプレートエンジンを内部的に使用するPaniniファイルコンパイラを使用して実装されます。

MJMLとは異なり、FfEを使用すると、デスクトップクライアント用とモバイル用の2つのバージョンのレターが作成されます。 次に、デスクトップ/モバイルの状態を切り替えるブレークポイントを決定します。また、特別なクラス.hide-for-largeと.show-for-largeを使用して、レイアウトのブロックを有効または無効にすることもできます。

結論： Foundation for Emailsは、デスクトップとモバイルの両方の状態のレターのレイアウトを完全に制御します。 フレームワークに非常に大きく複雑なので、フレームワークに没頭するプロセスやその微妙な問題に対処しようとすると、困難が生じる可能性があります。 ただし、テンプレートのあらゆる側面を制御する場合は、電子メールの基盤を選択します。

ニュースレターテストツール

これで、ニュースレターの準備が整いました。 ブラウザーでは見栄えがします。 Outlookおよびモバイルメールクライアントはどうですか？ 今度は、ニュースレターをテストするための特別なサービス、 Litmus and Email on Acidを使用します。

Litmusでニュースレターをテストする

Litmusは、メーリングリストをテストするときに必要になる可能性のある完全なツールセットを提供します。 これは、HTMLコード（Builder）、メール分析システム、および一連の「チェックリスト」を編集するためのWeb ideです-パフォーマンステストツール、スパムの電子メールのチェックなど。

最も重要な「チェックリスト」-電子メールプレビュー-90以上のデスクトップ/モバイル/ Web電子メールクライアントで電子メールをチェックできます。 これは、数回のクリックで行われます。 Builderに文字コードを挿入し、テストボタンをクリックして、必要なメールクライアントを選択する必要があります。

最近、開発者はクールな機能を追加しました：電子メールクライアントによって処理されたhtmlコードのインスペクター（処理されたhtml）。 お気に入りのブラウザの開発ツールのインスペクターを少し思い出させます。手紙の特定の領域を選択して、そのコードを見ることができます。 これにより、ブラインド編集に頼らずに結果をメールプレビューで表示することなく、クライアント固有の問題を分析できます。

Litmusで処理されたHTMLを表示する

Litmusには2つの欠点がありました。 1つ目は、UI全体が応答しないことです。メールプレビューは時々発生し、プレビューの作成を待ってテストを再開するのに多くの時間を費やします。

2番目のマイナス：価格。 最小サブスクリプションオプションには月額80ドルがかかります。 さらに、選択した計画は、利用可能なレターのプレビューの数に直接影響します。 ですから、Litmusが本当に必要なのか、それとも安価な代替品で対応できるのかを慎重に検討することをお勧めします。

Acidニュースレターでの電子メールのテスト

話したい2番目のサービスは、 Email On Acidです。 ほとんどすべての面で、リトマスの「弟」と安全に呼ぶことができます。

あなた自身の判断：ニュースレターを編集するためのウェブサイドがあり、手紙を分析するためのツールがあり、「スパム」のテストがあります-もちろん-電子メールテストは70以上のアプリケーションでも利用できます。

レターのプレビューは、Litmusとほぼ同じように作成されます。 違いは主に外観にあり、オプション/設定はわずかに小さく、処理された文字コードおよびその他のあまり有用でないツールのインスペクターはありません。 しかし、UI EoAはLitmusのUIよりも便利で簡単であり、実質的に遅延なく動作します。 電子メールのテストは、約1.5倍高速に行われます。

最後の重要な要素：価格。 Acidのメールは、Litmusの価格の半分で、機能は非常に似ています。 また、レターのプレビューの数に制限はありません。 これらは間違いなくEoAのワインです。

何を選択しますか？

上記のツールには多くの費用がかかります。 私の意見では、一貫して、少なくとも月に数回、かなり複雑な手紙を作成し、さまざまな電子メールクライアント、特にモバイルクライアントでのサポートの厳しい要件がある場合にのみ、継続的にそれらを使用するのが理にかなっています。

時々メールを送信する場合、2つの代替オプションがあります。

1. 試用版のLitmus / Email on Acidを7/14日間使用します（サービスによって異なります）-最初の1か月のお金がカードに返還されます。
2. 無料のプランがあるあまり人気のないサービスを組み合わせて使用​​し、メールクライアントを手動でテストします。

以下は、限られた範囲で無料で使用できるサービスです。

1. PreviewMyEmail （Gmail for Chrome / FF / IE、Thunderbird、Apple Mail for iOS7）;
2. InboxInspector （Thunderbird 2/3、Outlook 2003/2007/2010 / Outlook Express）;
3. DirectMail （Outlook 2003、IEのGmail）;
4. Putsmail + PilotMailer （ニュースレターの手動テストに便利な、任意のアドレスに文字コードを送信するためのオンラインサービス）;

長期的に選択するものは何でも、主なことはツールがあなたのニーズを満たすことです。

おわりに

メーリングリストタイプセッターのツールの範囲は、レターやテスト用の便利なフレームワークを使用できるだけでなく、タスクや機能に適したものを選択できるようになったため、そのレベルの開発に達しました。

文字をめったにタイプセットせず、一般にシンプルな場合は、基本的な定型文を自由に入力し、「マニュアルで」タイプセットしてテストしてください。 または、無料のサービスを使用してテストします。

組版文字を定期的に処理する必要があり、レイアウトが複雑で適応性がある場合、MJMLとFoundation for Emailはいくつかの注意を引きます。 また、AcidのLimusとEmailは、Android上の迷惑なOutlookまたはGmailを打ち負かすために、多くの時間と神経細胞を節約します。

そして、どの方法を選択しますか？ コメントで共有します。