mailtoリンクが最新Chromeで全く開かない件…解決方法

タイトルの通り

なぜか mailtoリンクが開いてくれません。

ことの概要をまとめると、気づいたのはこういう経緯です。

mailtoでリンクを作った
そのリンクをChromeでクリックする
アレ・・・メーラーが開かない？
でもChrome以外なら機能する

こういう事態に陥ったので、mailtoリンクが動かない原因と解決策を探してみました。

その忘備録です。

このページの目次

なぜかChromeで mailto が動かなくなっていた・・・
取りあえず MailtoUI ライブラリを使うことに...
実際にMailtoUIのダイアログを表示してみた
Chromeでは mailto リンクは諦めよう

なぜかChromeで mailto が動かなくなっていた・・・

メールアドレスをリンクさせたいとき、便利な書き方があります。

それが mailto プロトコルを href属性に使うこと

▼ メルアドリンクを作る例

<a href="mailto:info@example.com">
  お問い合わせはコチラまで
</a>

お問い合わせはコチラまで

</a>

こういうリンクを作ってクリックしてみると、普段使っているメールクライアントが開きます。

あと次記事で書いたみたいに、題名とか本文・CC・BCCをオプション指定も可能です。

▼ この記事で色々まとめてみた

PisukeCode - Web開発まとめ

HTMLでメールアドレスを開くリンクを作成する方法

https://pisuke-code.com/html-link-to-email-address

普通リンクというとURLを開くのに使われるのがほとんどです。しかしメールアドレスを指定すればメールアプリを開くという使い方もできます。ここではメルアドのリンク方法とオプションの付け方について詳しくまとめました。メルアドをリンクさせる基本メールアドレスをリンクにする方法はとても簡単です。次のようにaタグのhref属性に mailto: から始まるメルアドを指定するだけ<a href="mailto:hoge@dummy.com">メールを開く</a>このリンクは hoge@dummy.com というメールアドレスへのリンクこれをクリックす...

一昔前だったら、こういう感じで mailtoリンクも Chrome で動かせてました。

でも最近同じリンクを作ってみたら、、、

なぜか開かないし動かない！！

でも不思議なことに、FireFox とか Opera とかなら問題なく動いてます。

もしかしたら、何かしら Chrome でセキュリティ的な対策とかがあったのかもしれません。

とはいえ困ったので、色々探してたら一応解決策的なものが見つかりました。

取りあえず MailtoUI ライブラリを使うことに...

試したのは MailtoUI というライブラリを使うこと

これを使うと mailto リンクをクリックしたときに、どのメールクライアント（アプリ）で開くかの選択ダイアログを表示できます。

対応しているメーラーは次の３種類

GMail
OutLook
Yahoo!メール

あとメールアドレスをコピーする機能とかも付いてます。

このダイアログを Chrome でのアクセス時だけ表示し、その他（ FireFox、Opera、Edge、etc... )では通常のmailtoリンクを使うことに決めました。

実際にどういう手順でやったかというと、次の通り

１．適当に mailto リンクを作っておく

<a href="mailto:hoge@hoge.com" class="mailtoui">
  お問い合わせはコチラから！
</a>

お問い合わせはコチラから！

</a>

ポイントはリンクに mailtoui というクラスを付けておくこと

このクラス名を付けておけば MailtoUI を読み込んだあと、リンククリック時にダイアログを表示できる

２．Chromeでのみ MailtoUI を読み込み

window.addEventListener('load', function(){
  if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
    var script = $('<script>').attr({
      'type': 'text/javascript',
      'src': 'https://cdn.jsdelivr.net/npm/mailtoui@1.0.3/dist/mailtoui-min.js'
    });
    $('body')[0].appendChild(script[0]);
  }
});