W ostatnim przeglądzie tygodnia pisałem o projekcie klienta email, który według mnie byłby idealny. Charakteryzował się bardzo ładnym wyglądem i przede wszystkim kapitalną typografią czytanych i komponowanych wiadomości. Postanowiłem sprawdzić co da się osiągnąć w domyślnym kliencie poczty od Apple.

Maile w tej chwili wyglądają fatalnie. Każdy dostępny klient nadaje wiadomościom jakieś formatowanie. Po przesłaniu maila to formatowanie jest dodatkowo interpretowane poprzez drugiego klienta poczty. Nakłada on swoje specyficzne zasady dotyczące chociażby wielkości czcionki. Należy pamiętać również o ograniczeniach związanych z bezpieczeństwem – Gmail na przykład wycina wszystkie niestandardowe czcionki. To wszystko powoduje, że nasze maile wyglądają tak jak wyglądają.

Chciałem sprawdzić, czy jestem w stanie doprowadzić do tego, żeby wiadomości jakie wysyłam wyglądały porządnie. Wygląd wiadomości jest Twoją wizytówką zatem chciałbym, żeby moje wyglądały estetycznie. W Apple Mail można tworzyć swoje papeterie – tym kierunkiem postanowiłem podążyć.

Tworzymy papeterię

Papeterie w Apple Mail tworzone są w postaci plików HTML. Zrobienie takiego szablonu to pierwszy krok, jaki trzeba wykonać. Musimy przy tym pamiętać o dwóch rzeczach:

  1. Nie możemy używać niestandardowych czcionek – będą one zablokowane albo uznane za niebezpieczną zawartość. Na początku próbowałem osadzić w szablonie czcionki z Google Web Fonts, ale zgodnie z moim przypuszczeniem nic z tego nie wyszło.
  2. Wszystkie obrazki musimy osadzić w internecie. Nie ma możliwości odczytania ich z załącznika. Jeśli macie własny serwer lub konto hostingowe, to to jest dobre miejsce, żeby je umieścić.

Nie ma sensu tworzyć nic bardziej złożonego. Wystarczy nadać style nagłówkom, wybrać czcionki, style wypunktowań oraz zdefiniować jakąś główną szpaltę. Dlaczego dowiecie się później. :)

Stworzyłem sobie na szybko fajny szablon. Możecie go podejrzeć tutaj. Najprościej będzie zrobić jakąś papeterię i zmodyfikować ją, żeby dodać swój szablon. W tym celu otwórz Apple Mail i zacznij komponować nową wiadomość. Kiedy wpiszesz kilka znaków wybierz opcję Plik z menu, a następnie “Zapisz jako papeterię…”. Zostaniesz poproszony o nadanie jej nazwy i tyle.

save_stationery.png

Teraz musimy tę papeterię wyedytować. Znajdziemy ją pod masakrycznie długą ścieżką: ~/Library/Containers/com.apple.mail/Data/Library/Application Support/Mail/Stationary/Apple/Contents/Resources/Custom/Contents/Resources. Jest tam pakiet o nazwie jaką nadaliście w poprzednim kroku. Kliknijcie na niego prawym przyciskiem i wybierzcie “Pokaż zawartość pakietu”. Teraz wejdźcie do katalogu Contents a potem Resources. Zobaczycie w tym katalogu trzy pliki. Content.html to ten, który nas interesuje. Otwórzcie go w jakimś edytorze HTML. To jest nasz szablon.

W tym pliku musimy umieścić ten kawałek HTMLa, który tworzyliśmy jako nasz szablon. W głównej szpalcie należny umieścić jeden znacznik, po którym Apple Mail będzie się orientował, że tutaj ma wstawiać treść maila. Ten znacznik to:

1
     <span contenteditable="true" apple-content-name="body" style="display: block;"></span>

Całość naszego kodu warto przed wklejeniem w plik przepuścić przez jakiś minifier, czyli narzędzie, które usunie wszelkie zbędne spacje i tabulacje. Dzięki temu szablon zajmie mniej miejsca, a co za tym idzie maile będą również mniejszej wielkości. Kod mojego gotowego szablonu wygląda tak:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css" media="screen">
        .wrapper{
            width: 700px;
            margin: 0px auto;
        }

        body {
            font-size: 120%;
            color: #555;
            background-color: #fefefe;
            font-family: Georgia, serif;
            line-height: 1.6em;
            margin-top: 50px;
        }
        h1,h2,h3,h4,h5{
            font-family: 'Helvetica Neue',Helvetica,Arial, sans-serif;
            font-weight: 700;
        }
        a {
            color: #E5001D;
            text-decoration: none;
        }
        a:hover{
            text-decoration: underline;
        }
        blockquote {
            border-left: 7px solid #E5001D;
            margin-left: 0px;
            padding-left: 20px;
        }
        ol li{
            margin-bottom: 10px;
        }
        ul li {
            margin-bottom: 10px;
            list-style-type: square;
        }
        pre {
            padding: 0px 20px 20px 20px;
            border: 1px solid #777;
            background-color: #fbfbfb;
        }
        code {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="wrapper">
   
   
</div>
</body>

</html>

Dla papeterii możemy również przygotować miniaturkę. W tym celu potrzebujemy plik png o wymiarach 69×90 pikseli. Przygotujecie go w dowolnym programie graficznym. W celu dodania miniaturki musicie otworzyć plik Description.plist w dowolnym edytorze tekstowym. Umieśćcie również przygotowaną miniaturkę w folderze gdzie ten plik się znajduje. Tuż przed tagiem wklejcie takie dwie linie:

1
2
<key>Thumbnail Image</key>
<string>stationery.png</string>

Oczywiście podmieńcie nazwę pliku na taką, jaką nadaliście swojej miniaturce. Zapiszcie plik i teraz papeteria jest już gotowa. Czas ją wypróbować. Pamiętajcie, aby zrestartować najpierw Apple Mail.

Żeby wybrać papeterię przy tworzeniu wiadomości musicie kliknąć ikonę, która jest pokazana na zrzucie ekranu poniżej.

papeteria_mini.jpg

Stworzona przez nas papeteria będzie w katalogu “Własne”.

Tworzenie maila

Jak po krótkiej chwili się przekonacie – wprowadzenie wiadomości w takim formacie, żeby możliwe było użycie zdefiniowanych w szablonie formatowań nie jest proste. Nie mamy jak wybrać poziomu nagłówka czy zdefiniować listy. Wiadomości w Apple Mail tworzone są w formacie Rich Text Format (RTF), a potem to jest zamieniane wewnętrznie na HTML. Strasznie żałuję, że nie mamy możliwości edytować czystego HTMLa. Życie byłoby dużo prostsze – przynajmniej dla mnie ;)

Żeby wprowadzić formatowanie musimy posłużyć się pewnymi sztuczkami. Pierwsza, jaka mi przychodzi na myśl, to napisać maila w jakimś edytorze tekstu – chociażby Pages – a następnie skopiować z niego treść i wkleić do Apple Mail. Powinno zadziałać – nie testowałem.

Dla mnie zdecydowanie wygodniejszym rozwiązaniem byłoby pisanie wiadomości w składni Markdown. Jeśli nie wiecie co to jest, to zajrzyjcie tutaj.

Tekst napisany w Markdown można w przekształcić w RTF. Wiele narzędzi to potrafi, ale my chcemy pisać w Apple Mail, a korzystać z innych aplikacji. Dwie aplikacje do napisania maila to zdecydowanie za dużo. Tutaj na pomoc przychodzą nam Markdown Service Tools stworzone przez Bretta Tepstrę. Jest to zestaw usług stworzony w Applescripcie, który potrafi nam przekształcić zaznaczony tekst w dowolnym programie ze składni Markdown na inną – w tym RTF. Jak wejdziecie na stronę tych narzędzi będziecie mieli instrukcję do nich. Wymagają one zainstalowanego w systemie interpretatora Markdown. Jeśli korzystacie z homebrew (jeśli nie to powinniście) wystarczy prosta komenda *brew install multimarkdown.

Serwisy te po instalacji będą dostępne pod prawym przyciskiem myszy w menu “Usługi”. Łatwiej jednak się z tego korzysta jeśli przypiszemy do interesującej nas usługi skrót klawiszowy. W tym celu musimy otworzyć preferencje systemowe i wybrać sekcję “Klawiatura”. W zakładce “Skróty” wybieramy “Usługi” i wyszukujemy na liście pozycję “md – Convert – Multimarkdown to RTF”. Klikając po prawej możecie przypisać skrót klawiaturowy da tej usługi. To jaki ja wybrałem widzicie na obrazku poniżej.

skrot.png

Jest jeszcze tylko jeden problem, jaki musimy rozwiązać. Usługa, którą zainstalowaliśmy konwertuje tekst do RTF z użyciem wbudowanego stylu formatowania. Musimy go podmienić na swój. W tym celu musimy się udać do katalogu ~/Library/Application Support/MarkdownServiceTools/styles/. Znajdziemy tam jeden plik – ‘rtfstyle.txt’. Zobaczycie w nim sekcję, która jest zamknięta w tagach style. To co jest wewnątrz taga wyrzucamy i wklejamy tam wszystkie zdefiniowane przez nas style w szablonie. Po tym zabiegu mój plik wygląda tak:

1
XHTML Header: <style> .wrapper{width: 700px;margin: 0px auto;}body{font-size: 120%;color: #555;background-color: #fefefe;font-family:Georgia, serif !important;line-height: 1.6em;margin-top: 50px;}h1, h2, h3, h4, h5{font-family:'Helvetica Neue',Helvetica,Arial, sans-serif !important;color: #E5001D; font-weight: 700;}a{color: #E5001D;text-decoration: none;}a:hover{text-decoration: underline;}blockquote{border-left: 7px solid #E5001D;margin-left: 0px;padding-left: 20px;}ol li{margin-bottom: 10px;}ul li{margin-bottom: 10px;list-style-type: square;}pre{padding: 0px 20px 20px 20px;border: 1px solid #777;background-color: #fbfbfb;}code{margin: 0px;padding: 0px;}</style>

I to kończy naszą konfigurację. W tym momencie możemy pisać maila w Apple Mail i po wyedytowaniu treści z wykorzystaniem składni Markdown możemy ją szybko skonwertować do RTF. Potem wybieramy utworzoną papeterię i mamy pięknie skomponowanego maila. Przykładowy mail w moim szablonie widać tutaj.

template.png

Szczerze mówiąc oczekiwałem, że uda mi się osiągnąć bardziej spektakularne rezultaty, ale niestety format RTF w Apple Mail jest sporym ograniczeniem. Marzy mi się klient poczty, gdzie mógłbym edytować maile w składni Markdown, a on potem generowałby HTML na podstawie szablonu jaki mu zdefiniowałem. Ciekawe, czy Wy używalibyście czegoś takiego?