HTMLのa要素は他のページにリンクさせる際に使用しますが、ウェブページだけでなく、href属性にメールアドレスや電話番号の値を入れることでメーラからメールを送信できたり、通話アプリでコールするといったことが可能になります。セキュリティやユーザビリティ的にはやや気になるところですが、知識として覚えておきたいですね。  

【tel:】電話番号をリンクする

電話番号をリンクさせる場合には下記のようにhref属性の値の先頭に「tel:」を追加し、続けて電話番号を入れる形になります。この時に注意したいのはハイフンなどを入れてしまうと正しく電話番号として認識しないという点です。

<a href="tel:08012345678">電話をかける</a>

  ちなみに下記のような設定ではSkypeのアプリケーションを指定して立ち上げることができました。ブラウザによって正しく動作しないものもあるかもしれませんが、Skypeをお問い合わせの窓口にしたい場合には効果的ですね。

<a href="skype:SKYPE_ID">Skypeで通話する</a>

  スマートフォンの場合、直接hrefの値でリンクしてしまうと、タップで電話をかけてしまう場合もあります。そんな時はJavaScriptでconfirmを挟む方法もあります。

function phoneCall() {
  if (window.confirm('TEL：080-1234-5678に発信しますか？')) {
    location.href = 'tel:08012345678';
  } else {
    window.alert('発信がキャンセルされました');
  }
}

<button onclick="phoneCall()">電話をかける</button>

  こうすることで、一旦発信の確認が入るので誤動作で電話をかけてしまうことを防ぐことができますね。  

【mailto:】メールアドレスをリンクする

先ほどの電話番号と同じように、href属性の値に「mailto:」を入れるとメールアドレスをリンクできるようになります。同じく続けてメールアドレスを指定する形になります。

<a href="mailto:info@example.com">メールを送る</a>

  メールアドレスの場合にはいくつかパラメーターを追加することができます。その場合にはメールアドレスを指定した直後に「?」を入れて記述していきます。例えば下記はメールの件名を指定するケースです。こうすることでメーラが立ち上がった時に自動的に設定した件名が入力されている状態にすることができます。

<a href="mailto:info@example.com?subject=お問い合わせの件について">メールを送る</a>

  これらのパラメーターには件名の他にもいろんな指定ができるようになります。指定する値や内容は「=」に続けて記述していきます。お問い合わせの窓口として使う場合にはこれらをあらかじめ設定しておくとユーザビリティが向上しますね。  

subject=	件名を入れる
cc=	CCで送るメールアドレス指定
bcc=	BCCで送るメールアドレス指定
body=	メール本文を入れる

  パラメーターを指定する場合に注意する点は、複数の項目を指定する時にはこのようにそれぞれの項目を「&」で繋げて指定していきます。

<a href="mailto:info@example.com?cc=hoge@example.com&bcc=fuga@example.com&subject=お問い合わせの件について">メールを送る</a>

   

文字化け対策には全角文字のURLエンコードを行う

件名や本文の指定をする場合には必然的に日本語の全角文字を使うようになりますので、メーラーの環境によっては文字化けを起こす可能性もあります。それを防ぐためには全角文字やスペース、改行をエンコードさせておく必要があります。下記ではJavaScriptの「encodeURI()」メソッドを使って文字列をエンコードさせています。これでエンコードされた文字列がhrefの値に入る形になります。

<a id="mail_link">メールを送る</a>
<script>
  const mailLink = document.getElementById('mail_link')
  const mailLinkSettings = (beforeEncode) => {
    const encoded = encodeURI(beforeEncode)
    mailLink.setAttribute('href', `mailto:${encoded}`);
  }
  mailLinkSettings('info@example.com?subject=お問い合わせの件について');
</script>

  あるいは、下記のようなエンコード変換ができるウェブサービスを利用してエンコード済みの文字列をHTML上に設定する方法もあります。何れにしても全角文字がそのままhref属性の値に入らないように注意しましょう。 【URLエンコード・デコード】 https://tech-unlimited.com/urlencode.html   これでウェブページ上のリンクからメーラーを立ち上げて指定メールアドレス宛へのメール送信ができるようになりました。  

---

  今回はa要素のhref属性にメールアドレスや電話番号を指定して、ウェブページからメーラーや通話アプリにアクセスする方法をまとめてみました。HTMLで直接アクセスできるようになるためセキュリティやユーザビリティ上、気になる部分はありますが、使い方によってはとても便利ですのでぜひ覚えておきたい知識ですね。