さわらブログ

さわら(@xhiroga)の技術ブログ

【小ワザ】Notesのメール送信ボタンをVerseで再現する(モバイル対応)

Notesには、ボタンクリックで新規メールが立ち上がる機能があると思います。
ところが、Verseなどのメーラーを使っているとNotesのボタンは機能しないので本当に困ります。

そこで、HTMLのmailtoスキームを使ってVerseでも任意テンプレートのメールをボタンぽちで作成できる方法をまとめました。

概要

HTMLのmailtoスキームとは、メールアドレスをクリックするとメーラーが立ち上がるリンクに使われている仕組み。
普通はローカルのメーラーが立ち上がるが、Verse上でクリックすればVerseの新規メールが立ち上がることを利用する。 VerseがWebメールである関係上、テンプレートのメール本文にスペース・改行を使う際にはエスケープに気を使うので、その点も触れる。

手順

1.Verseで新規メールを立ち上げます。

2.ブラウザの開発者ツールを開き、メールをHTMLとして編集します。
こちらの手順を参考に...
www.ibm.com

f:id:hiroga_cc:20171031232246p:plain

メール文中に目印になる文字列を書き込み → 開発者ツールを起動して文字列を検索 → 当該箇所で右クリックして"HTMLを編集" → mailtoスキームを含むhtmlタグを貼り付け

mailtoスキーム入りのHTMLタグのサンプルはこちら。

<a href="mailto:example.com?subject=出席報告&body=
    私はご飯会に参加します。<br>
    &nbsp;食べたいもの:<br>
    &nbsp;苦手なもの:<br>
    &nbsp;コースのみ or コース%26飲み放題:<br>
">
クリックして出席のお返事
</a>

3.送信します。
受信者はクリックすればメールを新規作成できます。

ポイント:

  • メール文中の"&"は、hrefの値として解釈する時に邪魔になってしまいます。URLエンコーディングして"%26"に置き換えましょう。
  • メール文中にスペースを出現させたい場合、HTML特殊文字で"&nbsp;"を入力します。
  • メール文中に改行を出現させたい場合、<br>タグを挿入するとよいです。
    通常のメーラーが相手ならURLエンコーディングで改行すればよいのですが、Verseで新規メール作成する場合、URLデコードした結果がさらにHTMLとして解釈されるようです。
    結果、URLエンコーディングによる改行(%0D%0A)はスペースになってしまいます。なのでHTMLタグを使用しました。

参考資料

RFC 2368 - The mailto URL scheme
RFCのmailリンクの定義

ローカルHTMLとメーラーを連動してみる - Qiita
実践している記事