JavaScriptを使用してmailtoリンクを動的に生成する

2024-04-26

HTML でメール本文を指定した "mailto" リンクを作成する方法

方法

a タグを使用する:

メールリンクを作成するには、a タグを使用します。href 属性に mailto: スキーマとメールアドレスを指定し、リンクテキストをタグ内に記述します。
```
<a href="mailto:[email protected]">例: メールを送信</a>
```
mailto: スキーマにパラメータを追加することで、本文や件名などの情報を指定できます。
- subject パラメータ: 件名を指定します。値はクォーテーションで囲みます。
- body パラメータ: 本文を指定します。値はクォーテーションで囲み、改行は %0D%0A でエスケープします。
- cc パラメータ: CC に追加するメールアドレスを指定します。カンマ区切りで複数指定できます。
例:
```
<a href="mailto:[email protected]?subject=件名&body=本文">
    例: メールを送信 (件名と本文付き)
</a>
```

注意事項:

一部の古いメールクライアントでは、mailto: リンクの追加パラメータを正しく処理できない場合があります。
スパムフィルターによって、mailto: リンクがスパムとして扱われる可能性があります。

URL エンコーディング: パラメータ値に特殊文字が含まれている場合は、URL エンコーディングする必要があります。
空白文字: パラメータ値に空白が含まれている場合は、%20 で置き換える必要があります。

<a href="mailto:[email protected]?subject=件名&body=本文">
    例: メールを送信 (件名と本文付き)
</a>

例 2: CC と BCC を指定したメールリンク

<a href="mailto:[email protected][email protected],[email protected]&[email protected]">
    例: メールを送信 (CC と BCC 付き)
</a>

例 3: URL エンコーディングと空白文字の処理

<a href="mailto:[email protected]?subject=件名%20を含む&body=本文%20に%0D%0A改行を含める">
    例: メールを送信 (特殊文字を含む)
</a>

これらの例はあくまで基本的な使用方法です。詳細については、上記の参考情報をご覧ください。
HTML メールを作成する場合は、適切な HTML メールライブラリまたはフレームワークを使用することをお勧めします。

HTML でメール本文を指定した "mailto" リンクを作成するその他の方法

JavaScript を使用して、mailto: リンクをクリックしたときにダイナミックにメール本文を作成することができます。これは、より複雑なメール本文を作成したい場合や、ユーザー入力を取り込みたい場合に役立ちます。

<a href="#" onclick="createMailtoLink()">例: メールを送信 (JavaScript で本文を生成)</a>

<script>
function createMailtoLink() {
  var subject = "件名";
  var body = "本文\n\n[ユーザー入力欄を追加]";
  var mailtoLink = "mailto:[email protected]?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
  window.location.href = mailtoLink;
}
</script>

フォームを使用して、ユーザーからメール本文を入力してもらい、それを mailto: リンクに含めることができます。これは、より多くの情報を収集したい場合や、ユーザーにメール本文をカスタマイズさせたい場合に役立ちます。

<form action="#">
  <label for="subject">件名:</label>
  <input type="text" id="subject" name="subject">

  <label for="body">本文:</label>
  <textarea id="body" name="body"></textarea>

  <button type="submit">送信</button>
</form>

<script>
var form = document.querySelector("form");

form.addEventListener("submit", function(event) {
  event.preventDefault();

  var subject = document.getElementById("subject").value;
  var body = document.getElementById("body").value;
  var mailtoLink = "mailto:[email protected]?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
  window.location.href = mailtoLink;
});
</script>

サーバーサイドスクリプトを使用して、メール本文を動的に生成し、mailto: リンクに含めることができます。これは、データベースから情報を取得したり、複雑なロジックを実行したりする場合に役立ちます。

例: (言語は例示のみ)

<?php

$subject = "件名";
$body = "本文";

$mailtoLink = "mailto:[email protected]?subject=" . urlencode($subject) . "&body=" . urlencode($body);

echo "<a href=\"$mailtoLink\">例: メールを送信 (サーバーサイドで生成)</a>";