【mailstationery】Appleメールのひな形（ひな形・テンプレート）を作る【その２】

【その１】はこちら[LINK]
Appleメールのテンプレート（Templates）を作ってみます。

手順はその１の時と同じ
■デザインを考える
■HTMLを作成する（通常文法　HTML４相当で作る）
　（画像の作成が必須です）
■ひな形用のタグを挿入する。
■Description.plistを作成する。
■テスト送信して確認する。
の順番

その１では『ひな形』の『文字入力』の仕組みを見ました。
その２では『画像』について見ていきます。

ドラッグ＆ドロップで画像が変えられるようなテンプレートが
初期設定から用意されています。
どうなっているのか？って事なんですが

↑の画像の通り
HTMLメールの本体になるHTMLの記述に

img src="Photos"
class="AppleCompositeImage"

この２点がミソになっています。
リソース指定のSRCで指定している『Photo』が
設定ファイルの『Description.plist』の中の記述

↑の画像で見れるように
設定『Composite Name』と紐づいているわけです。

この部分を理解してしまえば
後は画像を用意するだけですので
画像処理のソフトウェアを使える人なら
まぁ
簡単に作成する事が出来ますね。

『Drop Zone Angle』の設定値では画像の傾斜をサポートしていますので
画像を傾ける事が出来ます。（けっこうこれは凄い機能だとおもうのですが）

 
Iphone４をモチーフに作成します。
下絵　マスク　フレームをそれぞれ作ります。
下絵になる『banner.png』[LINK]
マスク『Mask1.png』[LINK]
フレーム『Frames.png』[LINK]

の３つのファイルを作成しておきます。
『全て同じ縦横サイズ』である必要があります。（ここ注意ね）

構造的には

こんなイメージです。

img src="Photos"がブラウザとしてはサポートしていませんから

HTMLの作り込み時に画像のサイズやマスクの位置等を
ちゃんとしておかないと、後でややこしい事になりますね。

で出来たのがこちら
「iphone4.mailstationery.zip」をダウンロード

↑のファイルは文字入力エリアを設定していません
画像だけの送信になります。

 
Mailでの表示

こんな感じで
フレームの画像に透明でガラスのテカリ感を出しています。

 
画像をドラックして画面の中の画像を交換します。

 
若干ですが
画像の拡大や位置調整も出来ます。

Gmailでの表示も大丈夫でした。

Microsoft Entourageでの表示で気がついたのですが

画像ファイルは
『下絵』『フレーム』『ユーザーの画像』を『マスク』かけたものを
Appleメール側で１つの画像に変換して送信しているんですね。
（まぁそりゃそうだ）へぇ〜

その１で文字入力
その２で画像の添付方法
がわかりましたので
その３では両方をやってみます。（ちょっと先になりそうですが）

続く

[Download]

上記配布のファイルは
CC0を選択しています。